/* =============================================================================
   DELUXE SERVICES — SITE CHROME (header, navigation, footer)
   Depends on tokens from ds-design-system.css.
   ========================================================================== */

/* ---------- HEADER ------------------------------------------------------ */
.ds-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: transparent;
  transition: background-color var(--ds-dur) var(--ds-ease),
              border-color var(--ds-dur) var(--ds-ease),
              box-shadow var(--ds-dur) var(--ds-ease);
  border-bottom: 1px solid transparent;
}

/* Glass treatment engages only after the hero, so the hero stays cinematic. */
.ds-header.is-stuck {
  background: rgba(10, 7, 5, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--ds-line);
  box-shadow: 0 10px 40px -22px rgba(0, 0, 0, 0.9);
}
@supports not (backdrop-filter: blur(1px)) {
  .ds-header.is-stuck { background: rgba(10, 7, 5, 0.96); }
}

.admin-bar .ds-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .ds-header { top: 46px; } }

.ds-header__inner {
  width: min(100% - 2.5rem, var(--ds-maxw));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-5);
  min-height: 76px;
}

/* ---------- BRAND ------------------------------------------------------- */
.ds-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.ds-brand__mark {
  height: 46px;
  width: auto;
  object-fit: contain;
  transition: opacity var(--ds-dur) var(--ds-ease);
}
.ds-brand:hover .ds-brand__mark { opacity: 0.85; }
.ds-brand__text {
  font-family: Italiana, Georgia, serif;
  font-size: 1.6rem;
  color: var(--ds-fg);
  letter-spacing: 0.02em;
}

/* ---------- DESKTOP NAV ------------------------------------------------- */
.ds-nav { display: none; }

@media (min-width: 1040px) {
  .ds-nav { display: block; }

  .ds-nav__list {
    display: flex;
    align-items: center;
    gap: var(--ds-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ds-nav__list li { position: relative; }

  .ds-nav__list a {
    display: inline-block;
    padding: 0.5rem 0;
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-fg-muted);
    text-decoration: none;
    transition: color var(--ds-dur) var(--ds-ease);
  }

  .ds-nav__list a:hover,
  .ds-nav__list .current-menu-item > a,
  .ds-nav__list .current-menu-ancestor > a { color: var(--ds-fg); }

  /* Gold underline that grows from the left on hover */
  .ds-nav__list > li > a::after {
    content: "";
    display: block;
    height: 1px;
    width: 0;
    margin-top: 3px;
    background: linear-gradient(90deg, var(--ds-gold-bright), var(--ds-gold));
    transition: width var(--ds-dur) var(--ds-ease);
  }
  .ds-nav__list > li > a:hover::after,
  .ds-nav__list > li.current-menu-item > a::after,
  .ds-nav__list > li.current-menu-ancestor > a::after { width: 100%; }

  /* Dropdown */
  .ds-nav__list .sub-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: -1rem;
    min-width: 250px;
    padding: var(--ds-3);
    margin: 0;
    list-style: none;
    background: rgba(20, 16, 11, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--ds-dur) var(--ds-ease),
                transform var(--ds-dur) var(--ds-ease),
                visibility var(--ds-dur);
  }

  .ds-nav__list li:hover > .sub-menu,
  .ds-nav__list li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .ds-nav__list .sub-menu a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: var(--ds-radius-sm);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.92rem;
    transition: background-color var(--ds-dur) var(--ds-ease),
                color var(--ds-dur) var(--ds-ease);
  }
  .ds-nav__list .sub-menu a::after { display: none; }
  .ds-nav__list .sub-menu a:hover {
    background: var(--ds-gold-wash);
    color: var(--ds-gold-bright);
  }
}

/* ---------- HEADER ACTIONS --------------------------------------------- */
.ds-header__actions { display: flex; align-items: center; gap: var(--ds-3); }
.ds-header__cta { display: none; padding: 0.7em 1.5em; font-size: 0.75rem; }
@media (min-width: 1040px) { .ds-header__cta { display: inline-flex; } }

/* ---------- HAMBURGER --------------------------------------------------- */
.ds-navtoggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
}
@media (min-width: 1040px) { .ds-navtoggle { display: none; } }

.ds-navtoggle__bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ds-fg);
  transition: transform var(--ds-dur) var(--ds-ease),
              opacity var(--ds-dur) var(--ds-ease);
}
.ds-navtoggle[aria-expanded="true"] .ds-navtoggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ds-navtoggle[aria-expanded="true"] .ds-navtoggle__bar:nth-child(2) { opacity: 0; }
.ds-navtoggle[aria-expanded="true"] .ds-navtoggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- MOBILE PANEL ------------------------------------------------ */
.ds-mobilenav {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: rgba(10, 7, 5, 0.98);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--ds-dur) var(--ds-ease),
              transform var(--ds-dur) var(--ds-ease),
              visibility var(--ds-dur);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ds-mobilenav.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1040px) { .ds-mobilenav { display: none; } }

body.ds-nav-locked { overflow: hidden; }

.ds-mobilenav__inner {
  width: min(100% - 2.5rem, var(--ds-maxw));
  margin-inline: auto;
  padding-block: 6.5rem var(--ds-8);
  display: flex;
  flex-direction: column;
  gap: var(--ds-5);
}

.ds-mobilenav ul { list-style: none; margin: 0; padding: 0; }

.ds-mobilenav .ds-nav__list > li > a {
  display: block;
  padding: var(--ds-4) 0;
  border-bottom: 1px solid var(--ds-line);
  font-family: Italiana, Georgia, serif;
  font-size: 1.7rem;
  color: var(--ds-fg);
  text-decoration: none;
}

.ds-mobilenav .sub-menu { padding: var(--ds-2) 0 var(--ds-4) var(--ds-4); }
.ds-mobilenav .sub-menu a {
  display: block;
  padding: 0.55rem 0;
  font-size: 0.95rem;
  color: var(--ds-fg-muted);
  text-decoration: none;
}
.ds-mobilenav .sub-menu a:hover { color: var(--ds-gold-bright); }

/* ---------- FOOTER ------------------------------------------------------ */
.ds-footer {
  margin-top: var(--ds-9);
  border-top: 1px solid var(--ds-line);
  background: linear-gradient(180deg, var(--ds-surface), var(--ds-bg));
}

.ds-footer__inner {
  width: min(100% - 2.5rem, var(--ds-maxw));
  margin-inline: auto;
  padding-block: var(--ds-8);
  display: grid;
  gap: var(--ds-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.ds-footer__name {
  font-family: Italiana, Georgia, serif;
  font-size: 1.9rem;
  color: var(--ds-fg);
  margin: 0 0 var(--ds-2);
}
.ds-footer__desc {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-gold);
  margin: 0 0 var(--ds-4);
}
.ds-footer__blurb { color: var(--ds-fg-subtle); font-size: 0.95rem; max-width: 30ch; }

.ds-footer__heading {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-fg);
  margin: 0 0 var(--ds-4);
}

.ds-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-3); }
.ds-footer__list a {
  color: var(--ds-fg-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--ds-dur) var(--ds-ease);
}
.ds-footer__list a:hover { color: var(--ds-gold-bright); }

.ds-footer__cta { margin-top: var(--ds-5); }

/* Marks copy the client still needs to supply. */
.ds-placeholder {
  color: var(--ds-gold);
  font-size: 0.9rem;
  border-bottom: 1px dashed var(--ds-gold-line);
}

.ds-footer__base {
  width: min(100% - 2.5rem, var(--ds-maxw));
  margin-inline: auto;
  padding-block: var(--ds-5);
  border-top: 1px solid var(--ds-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-4);
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--ds-fg-subtle);
}
.ds-footer__base p { margin: 0; }
.ds-footer__legal { display: flex; gap: var(--ds-5); }
.ds-footer__legal a { color: var(--ds-fg-subtle); text-decoration: none; }
.ds-footer__legal a:hover { color: var(--ds-gold-bright); }

/* =============================================================================
   PAGE COMPONENTS
   Section patterns emitted by the page builder (ds-builder.php).
   ========================================================================== */

/* ---------- Page hero --------------------------------------------------- */
.ds-pagehero {
  padding-block: clamp(5rem, 4rem + 7vw, 11rem) var(--ds-section-y);
  position: relative;
  overflow: hidden;
}

/* Soft gold aura behind the headline, purely decorative */
.ds-pagehero::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: min(1100px, 120%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(200,147,19,.13), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.ds-pagehero > .elementor-container { position: relative; z-index: 1; }

.ds-pagehero h1 { font-size: var(--ds-step-5); margin-bottom: var(--ds-5); }
.ds-pagehero .ds-prose p { font-size: var(--ds-step-1); color: var(--ds-fg-muted); max-width: 58ch; }
.ds-pagehero .elementor-widget-button { margin-top: var(--ds-6); }

/* ---------- Section intro ---------------------------------------------- */
.ds-intro { padding-block: var(--ds-section-y) var(--ds-6); }
.ds-intro h2 { font-size: var(--ds-step-4); }
.ds-intro .ds-eyebrow { justify-content: center; }
.ds-intro .ds-prose p { margin-inline: auto; }

/* ---------- Card rows --------------------------------------------------- */
.ds-cardrow { padding-block: var(--ds-6) var(--ds-section-y); }

/* The builder puts .ds-card on the Elementor column so cards stretch to an
   equal height within a row without extra wrappers. */
.ds-cardrow .elementor-column.ds-card {
  padding: var(--ds-6);
  margin-inline: var(--ds-2);
}
.ds-cardrow .elementor-column.ds-card > .elementor-widget-wrap {
  align-content: flex-start;
  padding: 0;
}
.ds-cardrow .ds-card__title { font-size: var(--ds-step-1); margin-bottom: var(--ds-2); }
.ds-cardrow .ds-card__body p { color: var(--ds-fg-muted); font-size: 0.98rem; margin: 0; }
.ds-cardrow .ds-card .elementor-widget-button { margin-top: var(--ds-4); }

@media (max-width: 767px) {
  .ds-cardrow .elementor-column.ds-card { margin-inline: 0; margin-bottom: var(--ds-4); }
}

/* ---------- CTA band ---------------------------------------------------- */
.ds-ctaband {
  margin-block: var(--ds-section-y);
  padding-block: clamp(3.5rem, 3rem + 4vw, 6rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200,147,19,.16), transparent 60%),
    linear-gradient(180deg, var(--ds-surface-2), var(--ds-surface));
  border-block: 1px solid var(--ds-gold-line);
}
.ds-ctaband h2 { font-size: var(--ds-step-4); margin-bottom: var(--ds-4); }
.ds-ctaband .ds-prose p { margin-inline: auto; margin-bottom: var(--ds-6); }
.ds-ctaband .elementor-widget-button { text-align: center; }

/* Centre-aligned columns need their buttons centred too */
.ds-center .elementor-widget-button,
.ds-center .elementor-button-wrapper { text-align: center; }

/* ---------- FAQ --------------------------------------------------------- */
.ds-faqsection { padding-block: var(--ds-6) var(--ds-section-y); }

.ds-faq { max-width: 56rem; margin-inline: auto; }

.ds-faq__item {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  margin-bottom: var(--ds-3);
  overflow: hidden;
  transition: border-color var(--ds-dur) var(--ds-ease);
}
.ds-faq__item[open] { border-color: var(--ds-gold-line); }

.ds-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-4);
  padding: var(--ds-5);
  cursor: pointer;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ds-fg);
  list-style: none;
}
.ds-faq__q::-webkit-details-marker { display: none; }

/* Chevron drawn in CSS — no icon font needed */
.ds-faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--ds-gold);
  border-bottom: 1.5px solid var(--ds-gold);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ds-dur) var(--ds-ease);
}
.ds-faq__item[open] .ds-faq__q::after { transform: rotate(-135deg) translateY(-2px); }

.ds-faq__a { padding: 0 var(--ds-5) var(--ds-5); }
.ds-faq__a p { color: var(--ds-fg-muted); margin: 0; max-width: 62ch; }

/* ---------- Contact ----------------------------------------------------- */
.ds-contactsection { padding-block: var(--ds-6) var(--ds-section-y); }

.ds-contactgrid {
  display: grid;
  gap: var(--ds-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.ds-contactcard {
  padding: var(--ds-5);
  background: linear-gradient(180deg, var(--ds-surface-2), var(--ds-surface));
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  transition: border-color var(--ds-dur) var(--ds-ease);
}
.ds-contactcard:hover { border-color: var(--ds-gold-line); }

.ds-contactcard__label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-gold);
  margin: 0 0 var(--ds-2);
}
.ds-contactcard p:last-child { margin: 0; color: var(--ds-fg); font-size: 1.02rem; }
.ds-contactcard a { color: var(--ds-fg); text-decoration: none; }
.ds-contactcard a:hover { color: var(--ds-gold-bright); }

/* ---------- Legal / long-form ------------------------------------------ */
.ds-legal { padding-block: var(--ds-6) var(--ds-section-y); }
.ds-legal .ds-prose { max-width: 46rem; margin-inline: auto; }
.ds-legal h3 {
  font-size: var(--ds-step-2);
  margin-top: var(--ds-7);
  margin-bottom: var(--ds-3);
}
.ds-legal p { color: var(--ds-fg-muted); }
.ds-legal strong { color: var(--ds-gold-bright); }
.ds-legal a { color: var(--ds-gold-bright); }


/* ---------- MENU BUTTON (labelled) --------------------------------------
   Elementor's global button styles target bare <button> elements and were
   painting this toggle gold while collapsing its bars to 0px, so it rendered
   as an empty gold pill. Every property below is stated explicitly and marked
   important so the control is deterministic regardless of that bleed.        */
.ds-navtoggle {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: auto !important;
  height: auto !important;
  min-height: 44px;
  padding: 0.7em 1.35em !important;
  background: linear-gradient(135deg, var(--ds-gold-bright), var(--ds-gold) 55%, var(--ds-gold-deep)) !important;
  color: #17110A !important;
  border: 1px solid transparent !important;
  border-radius: var(--ds-radius-pill) !important;
  box-shadow: var(--ds-shadow-2);
  cursor: pointer;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-navtoggle:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(200,147,19,.55); }
.ds-navtoggle:focus-visible { outline: 2px solid var(--ds-fg); outline-offset: 3px; }
.ds-navtoggle__label { display: inline-block !important; color: inherit !important; font: inherit !important; }
.ds-navtoggle__icon {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center;
  gap: 4px !important;
  width: 16px !important;
  height: 12px !important;
  flex: none;
}
.ds-navtoggle__bar {
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background: #17110A !important;
  border-radius: 2px;
  transition: transform var(--ds-dur) var(--ds-ease), opacity var(--ds-dur) var(--ds-ease);
}
.ds-navtoggle[aria-expanded="true"] .ds-navtoggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ds-navtoggle[aria-expanded="true"] .ds-navtoggle__bar:nth-child(2) { opacity: 0; }
.ds-navtoggle[aria-expanded="true"] .ds-navtoggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1040px) { .ds-navtoggle { display: none !important; } }

/* Mobile panel must clear the fixed header, and the WP admin bar when present. */
.ds-mobilenav__inner { padding-block-start: calc(7rem + var(--wp-admin--admin-bar--height, 0px)) !important; }


/* ---------- REVEAL FAILSAFE ---------------------------------------------
   Content must never depend on JavaScript to be readable. ds-design-system.css
   sets .ds-reveal{opacity:0} and relies on ds-enhance.js adding .is-visible;
   when that observer does not fire (verified live 2026-08-02: zero elements
   tagged, on a page whose elements were on-screen and correctly sized) the
   entire page renders blank. Visible-by-default is the correct default; the
   entrance animation stays as a genuine enhancement for elements that do get
   tagged, via the transition below.                                        */
.ds-reveal { opacity: 1 !important; transform: none !important; }
.ds-reveal { transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { .ds-reveal { transition: none !important; } }