/* =============================================================
   PAWSHTAILS — CONTENT PAGE TEMPLATE
   Shared stylesheet for every static content page on the site —
   Cookies, Terms, Privacy, Shipping & Returns, Returns Policy,
   (later: Sizing Help, FAQs, Contact, About).

   Enqueued only when the page-templates/page-content.php template
   is active (see functions.php).

   Visuals ported byte-for-byte from:
     mockups/pawshtails-cookies.html
     mockups/pawshtails-terms.html
     mockups/pawshtails-privacy.html
     mockups/pawshtails-shipping-returns.html
     mockups/pawshtails-returns-policy.html

   Class namespace (mirrors the mockup verbatim):
     .account-hero         dark band, eyebrow + title + subtitle
     .prose-section        cream surround for the prose block
     .prose-block          white card holding the wysiwyg copy
     .prose                typography rules for the wysiwyg HTML
     .prose-eyebrow        small Caveat label inside a prose block
                           (used in shipping-returns "delivery" /
                           "returns" sub-headings)
     .prose-updated        footer note with the last-updated date
     .shipping-options     2-col card grid for delivery options
     .ask-us-banner        orange CTA banner ("Still got a question?")
   ============================================================= */


/* BREADCRUMB — the breadcrumb base styles in main.css are scoped to
   shop / cart / product body classes, so on the content page the
   markup would otherwise render as a bare <ol>. Restyling here under
   the WP body class for this template, matching the cart/PDP look. */
body.page-template-page-content .breadcrumb {
  padding: var(--space-4) 0;
  background: var(--white);
  border-bottom: 1px solid var(--neutral-100);
}
body.page-template-page-content .breadcrumb .container { max-width: 1280px; }
body.page-template-page-content .breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Sen', sans-serif !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin: 0;
  padding: 0;
}
body.page-template-page-content .breadcrumb-list li { margin: 0; padding: 0; }
body.page-template-page-content .breadcrumb-list a {
  color: var(--neutral-500);
  text-decoration: none;
  transition: color var(--t-fast, 150ms);
}
body.page-template-page-content .breadcrumb-list a:hover { color: var(--brand-orange); }
body.page-template-page-content .breadcrumb-sep {
  color: var(--neutral-500);
  opacity: 0.5;
  margin: 0;
}
body.page-template-page-content .breadcrumb-current {
  color: var(--neutral-900);
  font-weight: 600;
}


/* ============================================================
   ACCOUNT HERO — dark band, centred. Used on every content page.
   ============================================================ */
.content-page .account-hero {
  padding: var(--space-8) var(--section-x) var(--space-6);
  background: var(--neutral-900);
  color: var(--white);
  text-align: center;
}
.content-page .account-hero-inner { max-width: 1100px; margin: 0 auto; }

/* Caveat eyebrow — handwritten accent, tilted slightly. */
.content-page .account-hero-eyebrow {
  font-family: var(--font-accent) !important;
  font-size: var(--text-2xl);
  color: var(--brand-orange);
  transform: rotate(-2deg);
  display: inline-block;
  line-height: 1;
  margin-bottom: var(--space-2);
}

/* Allenoire display heading from the_title(). */
.content-page .account-hero-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-4xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--white);
  margin: 0;
}

/* Sen subtitle — small sentence under the heading. Allows inline
   links + <strong> so the mockup's "see our shipping & returns
   page" pattern works. */
.content-page .account-hero-subtitle {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--space-3);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
.content-page .account-hero-subtitle p { margin: 0; }
.content-page .account-hero-subtitle p + p { margin-top: var(--space-2); }
.content-page .account-hero-subtitle a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-base, 200ms);
}
.content-page .account-hero-subtitle a:hover { color: var(--white); }

@media (min-width: 720px) {
  .content-page .account-hero { padding: var(--space-10) var(--section-x) var(--space-8); }
  .content-page .account-hero-eyebrow { font-size: var(--text-3xl); }
  .content-page .account-hero-title { font-size: var(--text-5xl); }
}


/* ============================================================
   PROSE SECTION — cream surround. Width set so the white card sits
   noticeably wider than a typical reading column, but still narrower
   than full PDP width. Tweak max-width if you want it wider/narrower.
   ============================================================ */
.content-page .prose-section {
  padding: var(--section-y) 0 var(--space-12);
  background: var(--brand-cream);
}
.content-page .prose-section .container { max-width: 960px; }

/* The white card holding the wysiwyg copy. Multiple blocks (e.g. the
   "delivery" + "returns" blocks on the Shipping & Returns page) sit
   with a small gap between them. */
.content-page .prose-block {
  background: var(--white);
  padding: var(--space-5);
}
@media (min-width: 720px) {
  .content-page .prose-block { padding: var(--space-8); }
}
/* Kill the top margin on the first child of the prose block —
   Gutenberg / wpautop often add an empty <p></p> or a block with
   inherent margin-top at the start of the wysiwyg content, which
   pushes the first heading well below the prose-block's own
   padding. Zeroing this keeps the visible whitespace above the
   first heading identical to the sizing-help page (which uses
   hardcoded h2 markup with no wpautop upstream). */
.content-page .prose > *:first-child { margin-top: 0 !important; }
.content-page .prose > p:empty { display: none; }
.content-page .prose > p:first-of-type:empty + * { margin-top: 0 !important; }
.content-page .prose-block + .prose-block { margin-top: var(--space-4); }
/* When a .prose-block is nested inside another .prose-block (this
   happens if the ACF wysiwyg content re-uses the same class), the
   inner ones must NOT re-apply padding/background — otherwise we
   get compounded whitespace and a card-within-a-card look. Only
   the outermost .prose-block styles as the card. */
.content-page .prose-block .prose-block {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  margin-top: 0 !important;
}


/* ============================================================
   PROSE TYPOGRAPHY — applies inside .prose blocks (the wysiwyg HTML).
   ============================================================ */
.content-page .prose h1,
.content-page .prose h2 {
  font-family: var(--font-display) !important;
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--neutral-900);
  margin: 0 0 var(--space-3);
  line-height: 1.1;
}
.content-page .prose h2:not(:first-child),
.content-page .prose h1:not(:first-child) {
  margin-top: var(--space-6);
}
.content-page .prose h3 {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--neutral-900);
  margin: var(--space-4) 0 var(--space-2);
  letter-spacing: -0.01em;
}
.content-page .prose h4,
.content-page .prose h5,
.content-page .prose h6 {
  font-family: 'Sen', sans-serif !important;
  font-weight: 700;
  color: var(--neutral-900);
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-base);
  letter-spacing: 0.02em;
}
.content-page .prose p {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-base);
  color: var(--neutral-700);
  line-height: 1.7;
  margin: 0 0 var(--space-3);
}
.content-page .prose p:last-child { margin-bottom: 0; }
.content-page .prose ul,
.content-page .prose ol {
  font-family: 'Sen', sans-serif !important;
  margin: 0 0 var(--space-3) var(--space-5);
  color: var(--neutral-700);
  line-height: 1.7;
}
.content-page .prose ul li,
.content-page .prose ol li { margin-bottom: var(--space-2); }
.content-page .prose strong { color: var(--neutral-900); font-weight: 700; }
.content-page .prose em { font-style: italic; }
.content-page .prose a {
  color: var(--brand-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-base, 200ms);
}
.content-page .prose a:hover { color: var(--brand-orange-dark); }
.content-page .prose blockquote {
  font-family: var(--font-accent) !important;
  font-size: var(--text-2xl);
  color: var(--brand-orange);
  border-left: 3px solid var(--brand-orange);
  padding-left: var(--space-4);
  margin: var(--space-4) 0;
  line-height: 1.3;
}
.content-page .prose hr {
  border: 0;
  border-top: 1px solid var(--neutral-200);
  margin: var(--space-6) 0;
}
/* Images uploaded into the wysiwyg respect the column width. */
.content-page .prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--space-4) 0;
}


/* ============================================================
   PROSE EYEBROW — small Caveat label INSIDE a prose block,
   used as a section tag (e.g. "delivery", "returns" on the
   Shipping & Returns page). Paste as:
     <p class="prose-eyebrow">delivery</p>
   ============================================================ */
.content-page .prose-eyebrow {
  font-family: var(--font-accent) !important;
  font-size: var(--text-xl);
  color: var(--brand-orange);
  display: inline-block;
  line-height: 1;
  margin-bottom: var(--space-2);
}


/* ============================================================
   SHIPPING-OPTIONS CARDS — 2-col grid of delivery options
   (Royal Mail Tracked 24 vs Standard). Paste as:
     <div class="shipping-options">
       <div class="shipping-option">
         <div class="shipping-option-eta">1–3 working days</div>
         <div class="shipping-option-head">
           <div class="shipping-option-title">Royal Mail Tracked 24</div>
           <div class="shipping-option-price">£3.95</div>
         </div>
         <div class="shipping-option-body">…</div>
       </div>
       …
     </div>
   ============================================================ */
.content-page .shipping-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
@media (min-width: 720px) {
  .content-page .shipping-options { grid-template-columns: 1fr 1fr; }
}
.content-page .shipping-option {
  background: var(--brand-cream);
  padding: var(--space-4);
}
.content-page .shipping-option-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
  gap: var(--space-2);
  flex-wrap: wrap;
}
.content-page .shipping-option-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-lg);
  color: var(--neutral-900);
  letter-spacing: -0.01em;
}
.content-page .shipping-option-price {
  font-family: 'Sen', sans-serif !important;  /* prices always Sen */
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--brand-orange);
}
.content-page .shipping-option-eta {
  font-family: 'Sen', sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-500);
  margin-bottom: 4px;
}
.content-page .shipping-option-body {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  color: var(--neutral-700);
  line-height: 1.5;
}


/* ============================================================
   ASK-US BANNER — orange CTA at the bottom of a content page.
   Paste as:
     <div class="ask-us-banner">
       <div class="ask-us-banner-icon">
         <svg viewBox="0 0 24 24" …chat-bubble path… />
       </div>
       <div class="ask-us-banner-content">
         <div class="ask-us-banner-title">Still got a question?</div>
         <div class="ask-us-banner-sub">Sizing, shipping, custom orders — we're happy to help.</div>
       </div>
       <a href="/contact" class="ask-us-banner-cta">Contact us</a>
     </div>
   ============================================================ */
.content-page .ask-us-banner {
  background: var(--brand-orange);
  color: var(--white);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
@media (min-width: 720px) {
  .content-page .ask-us-banner { padding: var(--space-6); gap: var(--space-5); }
}
/* Icon column hidden globally per 2026-06 design pass — the banner
   reads cleaner without it. Editor snippets may still include the
   icon HTML; it just won't render. To bring icons back globally,
   delete this rule. */
.content-page .ask-us-banner-icon { display: none !important; }
.content-page .ask-us-banner-content { flex: 1; min-width: 200px; }
.content-page .ask-us-banner-title {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  color: var(--white);
}
.content-page .ask-us-banner-sub {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}
.content-page .ask-us-banner-cta {
  background: var(--white);
  color: var(--brand-orange);
  text-decoration: none;
  font-family: 'Sen', sans-serif !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  border: 0;
  transition: background var(--t-fast, 150ms);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.content-page .ask-us-banner-cta:hover { background: var(--neutral-100); }


/* ============================================================
   LAST UPDATED footnote — small grey label with top border.
   ============================================================ */
.content-page .prose-updated {
  font-family: 'Sen', sans-serif !important;
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--neutral-200);
}