/*
Theme Name:   Scotia Containers
Theme URI:    https://example.com/scotia-containers
Author:       Scotia Containers
Author URI:   https://example.com
Description:  Classic PHP theme for Scotia Containers. The hero, showcase sliders, guarantee block and FAQ are managed through Advanced Custom Fields PRO, with per-section show/hide switches, a reusable landing page template and a thank you page template. The quote form is supplied by your own form plugin via shortcode. Requires ACF PRO.
Version:      1.8.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  scotia-containers
Tags:         one-column, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, block-styles

Scotia Containers is distributed under the terms of the GNU GPL v2 or later.
Palette and metrics sampled directly from scotia-containers.psd (2200x4504 @2x).
*/

:root{
  --navy:      #023177;  /* page background            */
  --blue:      #013E97;  /* showcase band              */
  --card:      #355A92;  /* quote card + FAQ headers   */
  --gold:      #F3AD0F;  /* primary accent             */
  --gold-dark: #D8990A;
  --muted:     #C7C7C7;  /* secondary body copy        */
  --rule:      #4E6FA0;  /* hairline under header      */
  --white:     #FFFFFF;

  --container: 1140px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-field: 5px;
  --radius-faq: 10px;

  --font: "Mulish", "Avenir Next", "Avenir", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------- */

*, *::before, *::after{ box-sizing:border-box; }

body{
  font-family: var(--font);
  background: var(--navy);
  color: var(--white);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }
img{ max-width:100%; height:auto; }
a{ text-decoration:none; }

.container{ max-width: var(--container); padding-inline: 20px; }

/* Gold divider bar — PSD: 302×12 @2x */
.rule{
  display:block;
  width:151px;
  height:6px;
  background: var(--gold);
}
.rule--center{ margin-inline:auto; }

/* Accessibility */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background: var(--gold); color:#1b1b1b; font-weight:800;
  padding:12px 20px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
  background: var(--navy);
  border-bottom: 2px solid var(--rule);
}
.site-header .container{
  display:flex;
  align-items:center;
  min-height:76px;
}
.brand img{
  height:52px;
  width:auto;
  display:block;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  background: var(--navy);
  padding: 56px 0 76px;
}

.hero__title{
  font-size: clamp(2rem, 4vw, 2.875rem);   /* → 46px */
  font-weight:800;
  line-height:1.12;
  letter-spacing:-0.005em;
  text-transform:uppercase;
  text-wrap: balance;
}
.hero__title + .rule{ margin-top:26px; }

.hero__lead{
  font-size:1.1875rem;                     /* 19px */
  line-height:1.6;
  margin-top:28px;
  max-width:34em;
}

.hero__subtitle{
  font-size:1.375rem;                      /* 22px */
  font-weight:800;
  margin-top:44px;
}

/* Call button — PSD: 298×41 pill, 28px icon */
.btn-call{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:34px;
  padding:8px 30px 8px 9px;
  min-height:54px;
  background: var(--gold);
  border-radius: var(--radius-pill);
  color: var(--white);
  font-size:0.9375rem;                     /* 15px */
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.02em;
  transition: background-color .18s ease, transform .18s ease;
}
.btn-call__icon{
  flex:0 0 auto;
  width:36px; height:36px;
  display:grid; place-items:center;
}
.btn-call__icon img{ width:100%; height:100%; }
.btn-call:hover,
.btn-call:focus-visible{
  background: var(--gold-dark);
  color: var(--white);
  transform: translateY(-1px);
}

/* Checklist — PSD: 42px tick @2x = 21px */
.checklist{ margin-top:22px; }
.checklist li{
  position:relative;
  padding-left:34px;
  margin-bottom:14px;
  font-size:1.0625rem;                     /* 17px */
  line-height:1.5;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0; top:2px;
  width:21px; height:21px;
  background:url("images/check.png") no-repeat center / contain;
}

/* ==========================================================================
   Quote card
   The theme deliberately does not style this. `.quote-card` is an empty
   wrapper in .hero > .col-lg-5 — a hook for your own CSS. Everything inside
   it, including its background, padding and form styling, belongs to the form
   plugin. The only rule here is the editor-facing warning below, which is
   theme UI rather than page design.
   ========================================================================== */

/* Catch-all: tints any other native control the plugin renders — radios,
   range sliders, progress bars — without the theme knowing they exist. */
.quote-card{ accent-color: var(--gold); }

/* ---------- Consent checkbox ----------
   The form is the plugin's, so this is the one input the theme styles. The
   native control is replaced (appearance:none) rather than tinted with
   accent-color, because accent-color only sets the fill — the browser then
   picks the tick colour itself, and against a light gold it chooses black.
   Drawing the tick means it stays white, matching the gold-and-white ticks
   used elsewhere in the design. */

.quote-card input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:0 10px 0 0;
  vertical-align:-4px;
  border:2px solid var(--rule);
  border-radius:4px;
  background-color: var(--white);
  background-repeat:no-repeat;
  background-position:center;
  background-size:12px 10px;
  cursor:pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.quote-card input[type="checkbox"]:checked{
  background-color: var(--gold);
  border-color: var(--gold);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M1 5.2 4.3 8.5 11 1.8'/%3E%3C/svg%3E");
}

.quote-card input[type="checkbox"]:hover:not(:disabled){ border-color: var(--gold); }

.quote-card input[type="checkbox"]:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

.quote-card input[type="checkbox"]:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Keeps a wrapped consent sentence aligned to the text, not under the box. */
.quote-card input[type="checkbox"] + label,
.quote-card label:has(input[type="checkbox"]){
  display:inline-block;
  max-width:calc(100% - 34px);
  vertical-align:top;
}

/* Shown only to editors when the shortcode's plugin is missing. */
.quote-card__notice{
  padding:14px 16px;
  border:2px dashed var(--gold);
  border-radius:5px;
  font-size:0.875rem;
  font-weight:600;
  color: var(--white);
}

/* ---------- Hero call to action ----------
   Two buttons share this slot. On desktop the visitor sees the phone number;
   on mobile the form is a scroll away and easier to act on, so the jump button
   takes over. Only one is ever visible, and the swap only happens when both
   exist — with no form on the page the call button stays at every width. */

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__cta--dual .btn-call--jump{ display:none; }

.btn-call--jump{ padding-left:32px; }

/* Stops the anchor landing flush against the top of the viewport. */
#quote-form{ scroll-margin-top:24px; }

/* ==========================================================================
   Showcase / sliders
   ========================================================================== */

.showcase{
  background: var(--blue);
  padding: 60px 0;
}

.slider{
  position:relative;
  background: rgba(0,0,0,.12);
}
/* Prevent flash of unstyled slides before Slick boots */
.slider:not(.slick-initialized) .slide + .slide{ display:none; }

.slide{ position:relative; }
.slide img{
  display:block;
  width:100%;
  aspect-ratio: 488 / 800;      /* PSD slide proportions */
  object-fit:cover;
}
/* Overlay label — a small badge in the top-left, not a word stamped across the
   whole photo. The translucent navy plate is what makes it readable: plain
   white text with a shadow disappears against light images (a bright sky, a
   pale container), and a shadow can only darken what is already behind it.
   Sitting at the top also keeps it clear of the dots, which sit at bottom:12px. */
.slide__label{
  position:absolute;
  left:14px;
  top:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  padding:7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(2,49,119,.86);
  border:1px solid rgba(255,255,255,.20);
  font-size:0.8125rem;
  font-weight:800;
  line-height:1;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color: var(--white);
  pointer-events:none;
}

/* Progressive enhancement: frosts the photo behind the badge where supported. */
@supports (backdrop-filter: blur(6px)){
  .slide__label{
    background: rgba(2,49,119,.72);
    backdrop-filter: blur(6px);
  }
}

/* Slick arrows */
.slider .slick-arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index:2;
  width:34px; height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:transparent;
  font-size:0;
  cursor:pointer;
  opacity:.92;
  transition: opacity .18s ease;
}
.slider .slick-arrow::before{
  content:"";
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 24px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.slider .slick-prev{ left:6px; }
.slider .slick-next{ right:6px; }
.slider .slick-prev::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 12l10 10'/%3E%3C/svg%3E");
}
.slider .slick-next::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 2 10 10L2 22'/%3E%3C/svg%3E");
}
.slider .slick-arrow:hover{ opacity:1; }
.slider .slick-arrow.slick-disabled{ opacity:.35; }

/* Slick dots */
.slider .slick-dots{
  position:absolute;
  bottom:12px; left:0;
  width:100%;
  display:flex;
  justify-content:center;
  gap:7px;
  margin:0; padding:0;
  list-style:none;
  z-index:2;
}
.slider .slick-dots li{ line-height:0; }
.slider .slick-dots button{
  width:7px; height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background: rgba(255,255,255,.5);
  color:transparent;
  font-size:0;
  cursor:pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.slider .slick-dots .slick-active button{
  background: var(--white);
  transform: scale(1.25);
}

.showcase__caption{
  margin-top:20px;
  font-size:1rem;
  font-weight:800;
  line-height:1.35;
  text-align:center;
}

/* Guarantee block */
.guarantee{ text-align:center; max-width:520px; margin-inline:auto; }
.guarantee__badge{ width:175px; height:auto; }
.guarantee__text{
  margin-top:26px;
  font-size:1rem;
  line-height:1.55;
  color: var(--muted);
}
.guarantee__text strong{ color: var(--white); font-weight:800; }
/* The block is editable, so it may hold more than the single designed paragraph. */
.guarantee__text p{ margin:0; }
.guarantee__text p + p{ margin-top:14px; }

/* ==========================================================================
   Thank you page
   ========================================================================== */

.thanks{
  background: var(--navy);
  padding: 90px 0 110px;
}

.thanks__inner{
  max-width:620px;
  margin-inline:auto;
  text-align:center;
}

/* The tick sits in a gold ring — the one moment of celebration on the page. */
.thanks__mark{
  display:grid;
  place-items:center;
  width:76px; height:76px;
  margin:0 auto 30px;
  border-radius:50%;
  /* No fill — a translucent gold over navy reads muddy. The ring is enough. */
  border:3px solid var(--gold);
}
.thanks__mark img{ width:34px; height:34px; }

.thanks__title{
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight:800;
  line-height:1.15;
  text-transform:uppercase;
  text-wrap: balance;
}
.thanks__title + .rule{ margin-top:24px; }

.thanks__message{
  margin-top:26px;
  font-size:1.125rem;
  line-height:1.65;
  color: var(--muted);
}
.thanks__message p + p{ margin-top:14px; }
.thanks__message strong{ color: var(--white); font-weight:800; }

.thanks .btn-call{ margin-top:32px; }

.thanks__content{ margin-top:30px; text-align:left; }

.thanks__button{
  display:inline-block;
  margin-top:34px;
  padding:15px 36px;
  border-radius: var(--radius-pill);
  background:transparent;
  border:2px solid var(--rule);
  color: var(--white);
  font-size:0.875rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  transition: border-color .18s ease, color .18s ease;
}
.thanks__button:hover,
.thanks__button:focus-visible{
  border-color: var(--gold);
  color: var(--gold);
}

@media (max-width: 575.98px){
  .slide__label{ left:10px; top:10px; padding:6px 11px; font-size:0.75rem; }
}

@media (max-width: 767.98px){
  .thanks{ padding:60px 0 76px; }
  .thanks__mark{ width:64px; height:64px; margin-bottom:24px; }
  .thanks__message{ font-size:1.0625rem; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq{
  background: var(--navy);
  padding: 60px 0 96px;
}

.faq__title{
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);   /* → 30px */
  font-weight:800;
  text-align:center;
  margin-bottom:34px;
}

.faq .accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-btn-focus-box-shadow: none;
  background: transparent;
}
.faq .accordion-item{
  background: transparent;
  border:0;
  margin-bottom:14px;
}
.faq .accordion-item:last-child{ margin-bottom:0; }

.faq .accordion-button{
  background: var(--card);
  color: var(--white);
  font-family: var(--font);
  font-size:1.0625rem;
  font-weight:800;
  line-height:1.35;
  padding:19px 64px 19px 28px;
  border:0;
  border-radius: var(--radius-faq) !important;
  box-shadow:none;
  transition: background-color .18s ease;
}
.faq .accordion-button:not(.collapsed){
  background: var(--card);
  color: var(--white);
  box-shadow:none;
}
.faq .accordion-button:hover{ background:#3C639D; }

/* Chevron — replaces Bootstrap's default caret */
.faq .accordion-button::after{
  position:absolute;
  right:26px;
  width:25px; height:15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 15' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 2 10.5 11L23 2'/%3E%3C/svg%3E");
  background-size:25px 15px;
  background-repeat:no-repeat;
  transition: transform .25s ease;
}
.faq .accordion-button:not(.collapsed)::after{ transform: rotate(180deg); }

.faq .accordion-body{
  padding:24px 28px 12px;
  font-size:1.0625rem;
  line-height:1.55;
  color: var(--muted);
}
.faq .accordion-body p + p{ margin-top:14px; }
.faq .accordion-body strong{ color: var(--white); font-weight:800; }

.faq-list li{
  position:relative;
  padding-left:18px;
  margin-bottom:6px;
}
.faq-list li::before{
  content:"\2022";
  position:absolute;
  left:0;
  color: var(--white);
  font-weight:800;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  background: var(--navy);
  border-top:2px solid var(--rule);
  padding:34px 0;
}
.site-footer__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px 28px;
}
.site-footer img{ height:44px; width:auto; }
.site-footer__meta{ font-size:0.9375rem; font-weight:700; }
.site-footer__meta a{ color: var(--gold); }
.site-footer__meta a:hover{ text-decoration:underline; }
.site-footer__meta span{ margin:0 8px; opacity:.5; }
.site-footer__privacy{
  color: var(--gold);
  font-weight:700;
}
.site-footer__privacy:hover,
.site-footer__privacy:focus-visible{
  color: var(--white);
  text-decoration:underline;
  text-underline-offset:3px;
}
.site-footer__sep{ margin:0 8px; opacity:.6; }

.site-footer__copy{ font-size:0.875rem; color: var(--muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199.98px){
  .hero__title{ max-width:none; }
}

@media (max-width: 991.98px){
  .hero{ padding:44px 0 60px; }
  .hero__title{ max-width:none; }
  .guarantee{ margin-top:12px; }
  .showcase{ padding:52px 0; }
  /* Portrait slides get very tall once each column is ~390px wide. */
  .slider{ max-width:300px; margin-inline:auto; }
  .showcase__caption{ margin-top:16px; }
}

@media (max-width: 767.98px){
  body{ font-size:16px; }
  .site-header .container{ min-height:66px; }
  .brand img{ height:44px; }
  .hero{ padding:36px 0 52px; }
  .hero__lead{ font-size:1.0625rem; margin-top:24px; }
  .hero__subtitle{ margin-top:36px; }
  .faq .accordion-button{ padding:17px 54px 17px 20px; font-size:1rem; }
  .faq .accordion-button::after{ right:18px; width:20px; height:12px; background-size:20px 12px; }
  .faq .accordion-body{ padding:20px 20px 10px; font-size:1rem; }
  .faq{ padding:52px 0 72px; }
  .site-footer__inner{ justify-content:center; text-align:center; }
}

@media (max-width: 575.98px){
  .showcase .col-6{ width:100%; }
  .slider{ max-width:320px; margin-inline:auto; }
  .btn-call{ padding-right:22px; font-size:0.875rem; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   WordPress essentials
   Everything below is theme-review boilerplate the static page never needed:
   navigation, editorial templates, comments, alignments, gallery captions.
   The palette is unchanged — these inherit the same custom properties.
   ========================================================================== */

/* ---------- Accessibility helpers ---------- */

.screen-reader-text{
  border:0;
  clip-path: inset(50%);
  height:1px; width:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  position:absolute !important;
  white-space:nowrap;
}
.screen-reader-text:focus{
  background: var(--gold);
  clip-path:none;
  color:#1b1b1b;
  height:auto; width:auto;
  padding:12px 20px;
  font-weight:800;
  border-radius:0 0 8px 0;
  z-index:100;
}

/* ---------- Header call button (mobile only) ----------
   Sits under the logo, full width and centred. Hidden on desktop, where the
   hero's own call button already carries the number. */

.header-call{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 22px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--white);
  font-size:0.875rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  transition: background-color .18s ease;
}
.header-call:hover,
.header-call:focus-visible{ background: var(--gold-dark); color: var(--white); }

/* phone.png is a white ring-and-handset drawn to sit directly on the gold —
   no background plate, or the glyph disappears into it. */
.header-call__icon{
  display:grid;
  place-items:center;
  width:24px; height:24px;
  flex:0 0 auto;
}
.header-call__icon img{ width:100%; height:100%; }

/* ---------- Header navigation ---------- */

.site-header .container{ gap:24px; justify-content:space-between; }

.site-nav ul{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 26px;
  margin:0; padding:0;
  list-style:none;
}
.site-nav a{
  color: var(--white);
  font-size:0.9375rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a{
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.site-nav .sub-menu{
  display:none;
  position:absolute;
  z-index:20;
  flex-direction:column;
  gap:0;
  min-width:210px;
  padding:8px 0;
  background: var(--card);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.site-nav li{ position:relative; }
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu{ display:flex; }
.site-nav .sub-menu a{
  display:block;
  padding:9px 18px;
  border-bottom:0;
  text-transform:none;
  font-weight:600;
}

.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:9px 16px;
  border:2px solid var(--rule);
  border-radius: var(--radius-pill);
  background:transparent;
  color: var(--white);
  font-family: var(--font);
  font-size:0.8125rem;
  font-weight:800;
  text-transform:uppercase;
  cursor:pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  display:block;
  width:18px; height:2px;
  background: var(--gold);
  content:"";
}
.nav-toggle__bars{ position:relative; }
.nav-toggle__bars::before{ position:absolute; top:-6px; }
.nav-toggle__bars::after{ position:absolute; top:6px; }

/* ---------- Editorial pages (blog, single, search, 404) ---------- */

.page-hero{
  background: var(--navy);
  border-bottom:2px solid var(--rule);
  padding:56px 0 44px;
}
.page-hero__title{
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight:800;
  line-height:1.15;
  text-transform:uppercase;
}
.page-hero__title + .rule{ margin-top:22px; }
.page-hero__meta{
  margin-top:18px;
  font-size:0.9375rem;
  font-weight:700;
  color: var(--muted);
}
.page-hero__meta a{ color: var(--gold); }

.editorial{ padding:56px 0 88px; background: var(--navy); }
.editorial__inner{ max-width:760px; }
.editorial--centered .editorial__inner{ margin-inline:auto; }

.entry-content{ font-size:1.0625rem; line-height:1.7; color:#E8EDF6; }
.entry-content > * + *{ margin-top:1.25em; }
.entry-content h2,
.entry-content h3,
.entry-content h4{
  color: var(--white);
  font-weight:800;
  line-height:1.25;
  margin-top:1.8em;
}
.entry-content h2{ font-size:1.625rem; }
.entry-content h3{ font-size:1.3125rem; }
.entry-content h4{ font-size:1.125rem; }
.entry-content a{ color: var(--gold); text-decoration:underline; text-underline-offset:3px; }
.entry-content a:hover{ color: var(--white); }
.entry-content ul,
.entry-content ol{ padding-left:22px; }
.entry-content ul{ list-style:disc; }
.entry-content ol{ list-style:decimal; }
.entry-content li{ margin-bottom:8px; }
.entry-content li::marker{ color: var(--gold); }
.entry-content blockquote{
  margin-inline:0;
  padding:20px 26px;
  background: var(--card);
  border-left:6px solid var(--gold);
  border-radius:0 10px 10px 0;
  font-size:1.125rem;
}
.entry-content blockquote p + p{ margin-top:14px; }
.entry-content code,
.entry-content pre{
  background: rgba(0,0,0,.28);
  border-radius:6px;
  font-size:0.9375rem;
}
.entry-content code{ padding:2px 6px; }
.entry-content pre{ padding:18px 20px; overflow:auto; }
.entry-content pre code{ background:none; padding:0; }
.entry-content table{
  width:100%;
  border-collapse:collapse;
  font-size:0.9375rem;
}
.entry-content th,
.entry-content td{
  padding:11px 14px;
  border:1px solid var(--rule);
  text-align:left;
}
.entry-content th{ background: var(--card); font-weight:800; }
.entry-content img{ border-radius:10px; }
.entry-content hr{
  border:0;
  height:2px;
  background: var(--rule);
  opacity:1;
}

/* Core block / classic alignments */
.alignleft{ float:left; margin:6px 26px 18px 0; }
.alignright{ float:right; margin:6px 0 18px 26px; }
.aligncenter{ display:block; margin-inline:auto; }
.alignwide{ max-width:1040px; margin-inline:auto; }
.alignfull{ max-width:none; }
.wp-caption{ max-width:100%; }
.wp-caption-text,
.wp-block-image figcaption{
  margin-top:8px;
  font-size:0.875rem;
  color: var(--muted);
  text-align:center;
}
.entry-content .wp-block-button__link{
  display:inline-block;
  background: var(--gold);
  color: var(--white);
  border-radius: var(--radius-pill);
  padding:13px 30px;
  font-weight:800;
  text-transform:uppercase;
  text-decoration:none;
}
.sticky .post-card{ border:2px solid var(--gold); }

/* ---------- Post cards (index / archive / search) ---------- */

.post-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:28px;
}
.post-card{
  display:flex;
  flex-direction:column;
  background: var(--card);
  border-radius: var(--radius-card);
  overflow:hidden;
}
.post-card__thumb img{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
}
.post-card__body{ padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; }
.post-card__title{
  font-size:1.1875rem;
  font-weight:800;
  line-height:1.3;
}
.post-card__title a{ color: var(--white); }
.post-card__title a:hover{ color: var(--gold); }
.post-card__meta{
  margin-top:10px;
  font-size:0.8125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color: var(--gold);
}
.post-card__excerpt{
  margin-top:14px;
  font-size:0.9375rem;
  line-height:1.6;
  color: var(--muted);
}
.post-card__more{
  margin-top:18px;
  align-self:flex-start;
  color: var(--gold);
  font-size:0.875rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.post-card__more:hover{ color: var(--white); text-decoration:underline; }

/* ---------- Pagination ---------- */

.pagination{ margin-top:44px; }
.pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.pagination .page-numbers{
  display:grid;
  place-items:center;
  min-width:44px;
  height:44px;
  padding:0 14px;
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--white);
  font-weight:800;
  font-size:0.9375rem;
}
.pagination .page-numbers:hover{ background:#3C639D; }
.pagination .page-numbers.current{ background: var(--gold); color: var(--white); }
.pagination .page-numbers.dots{ background:transparent; }

.post-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  margin-top:44px;
  padding-top:28px;
  border-top:2px solid var(--rule);
  font-weight:800;
  font-size:0.9375rem;
}
.post-nav a{ color: var(--gold); }
.post-nav a:hover{ color: var(--white); }

/* ---------- Search form ---------- */

.search-form{ display:flex; gap:10px; max-width:460px; }
.search-form__input{
  flex:1;
  height:48px;
  padding:0 16px;
  border:2px solid transparent;
  border-radius: var(--radius-field);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font);
  font-weight:600;
}
.search-form__input:focus{ border-color: var(--gold); outline:none; }
.search-form__submit{
  height:48px;
  padding:0 26px;
  border:0;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--white);
  font-family: var(--font);
  font-weight:800;
  text-transform:uppercase;
  font-size:0.875rem;
  cursor:pointer;
}
.search-form__submit:hover{ background: var(--gold-dark); }

/* ---------- Comments ---------- */

.comments-area{
  margin-top:56px;
  padding-top:36px;
  border-top:2px solid var(--rule);
}
.comments-area__title{ font-size:1.375rem; font-weight:800; }
.comment-list{ margin-top:26px; padding:0; list-style:none; }
.comment-list ol{ list-style:none; padding-left:26px; }
.comment-list li{ margin-bottom:22px; }
.comment-body{
  background: var(--card);
  border-radius:12px;
  padding:22px 24px;
}
.comment-meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  font-size:0.875rem;
  font-weight:700;
}
.comment-meta img{ border-radius:50%; }
.comment-metadata a{ color: var(--muted); }
.comment-content{ font-size:0.9375rem; line-height:1.6; }
.comment-content p + p{ margin-top:12px; }
.comment-reply-link{ color: var(--gold); font-weight:800; font-size:0.875rem; }

.comment-respond{ margin-top:34px; }
.comment-reply-title{ font-size:1.1875rem; font-weight:800; }
.comment-form{ margin-top:18px; display:grid; gap:14px; }
.comment-form label{ display:block; font-size:0.875rem; font-weight:700; margin-bottom:6px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;
  padding:12px 16px;
  border:2px solid transparent;
  border-radius: var(--radius-field);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font);
  font-weight:600;
}
.comment-form input:focus,
.comment-form textarea:focus{ border-color: var(--gold); outline:none; }
.comment-form .form-submit input{
  min-height:52px;
  padding:0 34px;
  border:0;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--white);
  font-family: var(--font);
  font-weight:800;
  text-transform:uppercase;
  cursor:pointer;
}
.comment-form .comment-notes,
.comment-form .logged-in-as{ font-size:0.875rem; color: var(--muted); }
.comment-form .comment-notes a,
.comment-form .logged-in-as a{ color: var(--gold); }

/* ---------- 404 ---------- */

.not-found{ text-align:center; padding:80px 0 100px; }
.not-found__code{
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight:800;
  line-height:1;
  color: var(--gold);
}
.not-found__title{ margin-top:12px; font-size:1.625rem; font-weight:800; }
.not-found__text{ margin-top:16px; color: var(--muted); }
.not-found .search-form{ margin:28px auto 0; }
.not-found__back{
  display:inline-block;
  margin-top:26px;
  padding:14px 34px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--white);
  font-weight:800;
  text-transform:uppercase;
  font-size:0.875rem;
}

/* ---------- Admin bar ---------- */

.admin-bar .skip-link:focus{ top:32px; }

@media (max-width: 991.98px){

  /* Logo on the first row, call button centred underneath it. The container
     is a fixed-height row on desktop, so it needs padding once it wraps. */
  .site-header .container{
    flex-wrap:wrap;
    row-gap:14px;
    min-height:0;
    padding-top:16px;
    padding-bottom:18px;
  }
  .brand{ order:1; }
  .nav-toggle{ order:2; }
  .header-call{ display:inline-flex; order:3; width:100%; }

  .hero__cta--dual .btn-call--tel{ display:none; }
  .hero__cta--dual .btn-call--jump{ display:inline-flex; }

  .site-nav{
    display:none;
    position:absolute;
    left:0; right:0;
    top:100%;
    z-index:30;
    padding:16px 20px 22px;
    background: var(--navy);
    border-bottom:2px solid var(--rule);
  }
  .site-nav.is-open{ display:block; }
  .site-nav ul{ flex-direction:column; align-items:flex-start; gap:2px; }
  .site-nav a{ display:block; padding:10px 0; border-bottom:0; }
  .site-nav .sub-menu{
    display:flex;
    position:static;
    box-shadow:none;
    padding:0 0 0 14px;
    background:transparent;
    min-width:0;
  }
  .nav-toggle{ display:inline-flex; }
  .site-header{ position:relative; }
}

@media (max-width: 767.98px){
  .page-hero{ padding:40px 0 32px; }
  .editorial{ padding:44px 0 68px; }
  .alignleft, .alignright{ float:none; margin:18px 0; }
}