/* ============================================================
   Freaura — Shared inner-page components
   Page header (breadcrumb / title / sub), About sections,
   editorial band. Ported from freaura-spa.html, tokenized.
   Loaded on About/Contact and reusable for policy pages.
   ============================================================ */

/* ---- Buttons (shared, mirrors home.css so inner pages are self-contained) ---- */
.frx-page .btn, .frx-page-header .btn, .frx-about-quote .btn, .frx-editorial-wide .btn,
a.btn.frx-btn {
	display: inline-flex; align-items: center; gap: 16px; padding: 18px 44px;
	background: var(--midnight); color: var(--cream); font-family: var(--font-sans);
	font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
	border: 0.5px solid var(--midnight); position: relative; overflow: hidden;
	transition: color 0.4s; cursor: pointer; text-decoration: none; isolation: isolate;
}
.frx-btn::before {
	content: ''; position: absolute; inset: 0; background: var(--emerald);
	transform: translateY(101%); transition: transform 0.5s cubic-bezier(.76,0,.24,1); z-index: -1;
}
.frx-btn:hover::before { transform: translateY(0); }
.frx-btn:hover { color: var(--cream); }
.frx-btn-link {
	display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-sans);
	font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
	padding-bottom: 6px; border-bottom: 0.5px solid var(--ink); color: var(--ink);
	transition: color 0.3s, border-color 0.3s, gap 0.4s; text-decoration: none;
}
.frx-btn-link:hover { color: var(--brass); border-color: var(--brass); gap: 20px; }

/* ---- PAGE HEADER (non-home pages) ---- */
.frx-page-header {
	text-align: center;
	padding: 56px 50px 72px; /* reduced top space above breadcrumb (was 100px) */
	background: var(--cream);
	border-bottom: 0.5px solid var(--line); /* full-width divider below the header */
}
.frx-page-header .breadcrumb {
	font-family: var(--font-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.32em;
	text-transform: uppercase; color: var(--ink-soft); margin-bottom: 24px;
}
.frx-page-header .breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.frx-page-header .breadcrumb a:hover { color: var(--brass); }
.frx-page-header .breadcrumb .sep { margin: 0 12px; color: var(--brass); } /* gold separator */
.frx-page-header h1 {
	font-family: var(--font-display); font-size: clamp(48px, 6vw, 88px); font-weight: 400;
	line-height: 1.05; color: var(--ink); margin-bottom: 18px; text-transform: none;
}
.frx-page-header h1 .it { font-style: italic; color: var(--emerald); }
.frx-page-header .sub {
	font-family: var(--font-serif); font-style: italic; font-size: 20px; font-weight: 400;
	color: var(--ink-soft); max-width: 520px; margin: 0 auto; line-height: 1.5;
}

/* ---- ABOUT intro (drop-cap prose) ----
   Background spans the FULL page width (cream); the text content stays in a
   centered ~820px reading column (wireframe). */
.frx-about-intro {
	background: var(--cream); padding: 40px 50px 120px;
	max-width: 100%; margin: 0;
	text-align: center; /* wireframe centers the intro prose */
}
.frx-about-intro > .e-con-inner,
.frx-about-intro .elementor-widget-container {
	max-width: 900px; margin-left: auto; margin-right: auto;
}
.frx-about-intro p {
	font-family: var(--font-serif); font-size: 22px; font-style: italic; color: var(--ink);
	line-height: 1.6; margin-bottom: 28px;
}
.frx-about-intro p:last-child { margin-bottom: 0; }
.frx-about-intro p:first-child::first-letter {
	/* Was sitting 12px lower than the rest of the first line (looked
	   "split" from the word instead of aligned with it) — dropped the top
	   padding and pulled it up slightly so the cap's top aligns with the
	   line it belongs to. */
	font-family: var(--font-display); font-size: 4em; float: left; line-height: 0.85;
	padding: 0 2px 0 0; margin-top: -3px; color: var(--brass); font-style: italic;
}

/* ---- ABOUT pull-quote ---- */
.frx-about-quote {
	background: var(--ivory); text-align: center; padding: 100px 50px;
	border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line);
}
.frx-about-quote h3 {
	font-family: var(--font-display); font-style: italic; font-size: clamp(30px, 3.8vw, 50px);
	font-weight: 400; line-height: 1.3; max-width: 900px; margin: 0 auto; color: var(--ink);
	text-transform: none;
}
.frx-about-quote h3 .it { color: var(--emerald); }

/* ---- EDITORIAL WIDE (reused from home component; ensure available here) ---- */
.frx-editorial-wide { position: relative; height: 80vh; min-height: 500px; overflow: hidden; background: var(--midnight); }
.frx-editorial-wide img { width: 100%; height: 100%; object-fit: cover; }
.frx-editorial-wide::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to right, rgba(10,9,8,0.6) 0%, rgba(10,9,8,0.2) 50%, transparent 100%); }
.frx-editorial-wide .editorial-wide-content { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: 0 8%; max-width: 650px; color: var(--cream); }
.frx-editorial-wide .editorial-wide-eyebrow { font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; color: var(--brass-pale); margin-bottom: 24px; }
.frx-editorial-wide .editorial-wide-content h2 { font-family: var(--font-display); font-size: clamp(38px, 4.6vw, 66px); font-weight: 400; line-height: 1.08; color: var(--ivory); text-transform: none; }
.frx-editorial-wide .editorial-wide-content h2 .it { font-style: italic; color: var(--brass-pale); }
.frx-editorial-wide .editorial-wide-content p { font-family: var(--font-serif); font-size: 21px; font-weight: 600; font-style: italic; color: rgba(244,237,224,0.85); line-height: 1.7; margin-top: 24px; max-width: 480px; }

/* ---- CONTACT ---- */
.frx-contact { padding: 120px 50px; background: var(--cream); }
.frx-contact .contact-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
	max-width: 1300px; margin: 0 auto;
}
.frx-contact .contact-info h3 { font-family: var(--font-display); font-size: 32px; font-weight: 400; font-style: italic; margin-bottom: 24px; color: var(--ink); text-transform: none; }
.frx-contact .contact-info p { font-family: var(--font-serif); font-size: 19px; font-weight: 400; color: var(--ink-soft); line-height: 1.8; margin-bottom: 28px; }
.frx-contact .contact-detail { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 0.5px solid var(--line-light); }
.frx-contact .contact-detail-label { font-family: var(--font-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.4em; text-transform: uppercase; color: var(--brass); margin-bottom: 10px; }
.frx-contact .contact-detail-value { font-family: var(--font-serif); font-size: 19px; color: var(--ink); font-style: italic; }
.frx-contact .contact-detail-value a { color: var(--ink); }
.frx-contact .contact-detail-value a:hover { color: var(--brass); }
/* style the embedded WPForms form to the wireframe: underline fields, no boxes.
   .form-field { flex column, gap 8px }; label = Inter 10px caps; input/textarea =
   transparent, serif 17px, bottom-border only, brass on focus. */
.frx-contact .contact-form .wpforms-field { padding: 0 0 24px; }
.frx-contact .contact-form .wpforms-field-label {
	font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.4em;
	text-transform: uppercase; color: var(--ink-soft); font-weight: 400; margin-bottom: 8px;
}
.frx-contact .contact-form .wpforms-required-label { color: var(--brass); }
.frx-contact .contact-form input[type=text],
.frx-contact .contact-form input[type=email],
.frx-contact .contact-form input[type=tel],
.frx-contact .contact-form textarea {
	width: 100%; background: transparent; border: none;
	border-bottom: 0.5px solid var(--line); border-radius: 0;
	padding: 12px 0; font-family: var(--font-serif); font-size: 17px; color: var(--ink);
	outline: none; box-shadow: none; transition: border-color 0.3s;
}
.frx-contact .contact-form textarea { min-height: 120px; resize: vertical; }
.frx-contact .contact-form input:focus,
.frx-contact .contact-form textarea:focus { border-color: var(--brass); box-shadow: none; }
/* Send Message button — wireframe .btn (midnight → emerald fill on hover) */
.frx-contact .contact-form .wpforms-submit {
	display: inline-flex; align-items: center; gap: 16px; align-self: flex-start;
	margin-top: 12px; background: var(--midnight); color: var(--cream);
	font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.4em;
	text-transform: uppercase; border: 0.5px solid var(--midnight); border-radius: 0;
	padding: 18px 44px; cursor: pointer; transition: background 0.4s, color 0.4s;
}
.frx-contact .contact-form .wpforms-submit:hover { background: var(--emerald); border-color: var(--emerald); color: var(--cream); }

/* ---- NEWSLETTER (mirrors home.css so inner pages are self-contained) ---- */
.frx-newsletter { background: var(--cream-deep); text-align: center; padding: 120px 50px; }
.frx-newsletter h2 { font-family: var(--font-display); font-size: clamp(38px, 4.8vw, 60px); font-weight: 400; margin-bottom: 22px; line-height: 1.1; color: var(--ink); text-transform: none; }
.frx-newsletter h2 .it { font-style: italic; color: var(--emerald); }
.frx-newsletter p { font-family: var(--font-serif); color: var(--ink-soft); max-width: 480px; margin: 0 auto 40px; font-size: 19px; font-weight: 400; font-style: italic; }
.frx-newsletter .newsletter-form { display: flex; max-width: 520px; margin: 0 auto; border-bottom: 0.5px solid var(--ink); }
.frx-newsletter .newsletter-form input { flex: 1; background: transparent; border: none; padding: 14px 0; font-family: var(--font-sans); font-size: 14px; color: var(--ink); outline: none; }
.frx-newsletter .newsletter-form input::placeholder { color: var(--ink-soft); }
.frx-newsletter .newsletter-form button { background: transparent; border: none; padding: 14px 0 14px 24px; font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink); cursor: pointer; font-family: var(--font-sans); font-weight: 500; transition: color 0.3s; }
.frx-newsletter .newsletter-form button:hover { color: var(--brass); }

/* ---- LEGAL / CONTENT PAGES (Shipping, Returns, Privacy, Terms, Size Guide, FAQ) ----
   Mirrors the wireframe `.content-page` spec, translated to the --font-* tokens
   (the bare --display token collides with an Elementor layout var — never use it).
   Applied by wrapping each page's existing Gutenberg copy in .frx-legal via a
   the_content filter in functions.php; the stored copy itself is never rewritten. */
.frx-legal { max-width: 900px; margin: 0 auto; padding: 70px 50px 100px; }
/* Headings — wireframe .content-page h2 (28px italic emerald).
   Uses !important to beat Gutenberg's .has-medium-font-size (20px !important),
   which real Privacy/Terms/Returns headings carry from the block editor. */
.frx-legal h2 { font-family: var(--font-display) !important; font-size: 28px !important; font-weight: 400; font-style: italic; margin: 50px 0 20px; color: var(--emerald); line-height: 1.3; }
.frx-legal h2:first-child { margin-top: 0; }
.frx-legal h2 strong { font-weight: 400; color: inherit; } /* headings wrapped in <strong> in the editor shouldn't bold */
.frx-legal h3 { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin: 40px 0 14px; color: var(--ink); }
.frx-legal p { font-family: var(--font-serif); font-size: 19px; color: var(--ink-soft); line-height: 1.85; margin-bottom: 18px; }
.frx-legal strong { color: var(--ink); }
/* Sub-section labels authored as a whole paragraph of <strong> carrying the
   editor's "medium" size (Returns: "Damages and issues", "Exchanges"). Style
   them as sub-headings to match the wireframe, without editing the content.
   Keyed on .has-medium-font-size so plain body <strong> (e.g. Shipping's
   "Next Day") is NOT promoted. */
.frx-legal p.has-medium-font-size { margin: 44px 0 4px; }
.frx-legal p.has-medium-font-size strong {
	display: inline-block; font-family: var(--font-display); font-weight: 400;
	font-style: italic; font-size: 22px; color: var(--emerald); line-height: 1.3;
}
/* list-style-position:inside (+ no margin/padding) keeps the bullet/number
   flush with the heading and paragraph text above/below it — the default
   24px margin was indenting list items further right than the rest of the
   copy. */
.frx-legal ul, .frx-legal ol { margin: 0 0 28px 0; padding: 0; list-style-position: inside; }
.frx-legal li { font-family: var(--font-serif); font-size: 18px; font-weight: 400; color: var(--ink-soft); line-height: 1.85; margin-bottom: 8px; }
/* wireframe content links: brass, no underline (matches .content-page inline style) */
.frx-legal a { color: var(--brass); text-decoration: none; transition: color 0.3s; }
.frx-legal a:hover { color: var(--emerald); }
.frx-legal .frx-note { color: var(--brass); font-style: italic; }
.frx-legal img { max-width: 100%; height: auto; }
.frx-legal figure { margin: 30px 0; text-align: center; }
.frx-legal figure img { border: 0.5px solid var(--line); }
.frx-legal figcaption { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); margin-top: 10px; }

/* Collapsible groups (FAQ + any details/summary in content) */
.frx-legal details { border-bottom: 0.5px solid var(--line); padding: 6px 0; }
.frx-legal details summary { cursor: pointer; list-style: none; padding: 20px 0; font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--ink); display: flex; justify-content: space-between; align-items: center; transition: color 0.3s; }
.frx-legal details summary::-webkit-details-marker { display: none; }
.frx-legal details summary:hover { color: var(--brass); }
.frx-legal details summary::after { content: '+'; font-family: var(--font-sans); font-weight: 300; font-size: 22px; transition: transform 0.3s; }
.frx-legal details[open] summary::after { transform: rotate(45deg); }
.frx-legal details p { padding-bottom: 22px; }

/* Size Guide measurements table */
.frx-legal .frx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 30px 0; }
.frx-legal .size-table { width: 100%; border-collapse: collapse; margin: 0; font-family: var(--font-sans); font-size: 14px; min-width: 560px; }
.frx-legal .frx-table-scroll .size-table { margin: 0; }
.frx-legal .size-table th, .frx-legal .size-table td { padding: 16px; text-align: center; border-bottom: 0.5px solid var(--line); }
.frx-legal .size-table th { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--brass); font-weight: 500; }
.frx-legal .size-table td:first-child { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--ink); }

@media (max-width: 921px) {
	.frx-page-header { padding: 70px 24px 50px; }
	.frx-about-intro { padding: 30px 24px 70px; }
	.frx-about-quote { padding: 70px 24px; }
	.frx-editorial-wide .editorial-wide-content { padding: 0 28px; }
	.frx-newsletter { padding: 70px 24px; }
	.frx-legal { padding: 60px 24px 80px; }
	.frx-legal .size-table th, .frx-legal .size-table td { padding: 10px 8px; }
	/* Contact: stack the info + form columns; the 80px gap crushed both
	   columns to ~122px side-by-side on phones. */
	.frx-contact { padding: 70px 24px; }
	.frx-contact .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* FAQ page only (post 1291) — question/answer text is fixed-size (unlike
   the page header's clamp() h1, which already scales), so it read too large
   from 320px up to just before the 768px tablet breakpoint. */
@media (max-width: 767px) {
	body.page-id-1291 .frx-legal details summary,
	body.page-id-1293 .frx-legal details summary { font-size: 17px; }
	body.page-id-1291 .frx-legal details p,
	body.page-id-1291 .frx-legal p,
	body.page-id-1293 .frx-legal details p,
	body.page-id-1293 .frx-legal p { font-size: 14px; line-height: 1.7; }
}

/* ============================================================
   CONTENT-PAGE FIXES (added by primary agent — see handoff)
   1. Elementor/Astra full-width container overrides .frx-legal's
      max-width:900px, so the legal/FAQ copy stretched edge-to-edge.
      Higher-specificity selector restores the centered column.
   2. Astra's default .entry-title duplicates the styled page-header
      on these content pages — hide it.
   ============================================================ */
.entry-content .frx-legal,
.ast-container .frx-legal,
article .frx-legal {
	max-width: 900px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* hide the default WP/Astra entry title on the wrapped content pages
   (the styled .frx-page-header already provides the H1) */
.page .entry-content > .frx-page-header ~ * .entry-title,
body.page:has(.frx-legal) .entry-title,
body.page:has(.frx-legal) .ast-archive-title { display: none; }

/* 3. Full-width + cream page background + remove the gap above the header.
   Astra wraps the article in 20px side padding and adds top spacing, and the
   page bg is white — the wireframe content pages are edge-to-edge on cream. */
body.page:has(.frx-legal) { background: var(--cream); }
body.page:has(.frx-legal) #content,
body.page:has(.frx-legal) .site-content,
body.page:has(.frx-legal) #primary,
body.page:has(.frx-legal) #main { background: var(--cream); }
/* kill the 20px article side padding + any top spacing so the header is
   full-bleed and sits right under the site header */
body.page:has(.frx-legal) article.page,
body.page:has(.frx-legal) .entry-content { padding: 0 !important; margin: 0 !important; }
body.page:has(.frx-legal) #primary,
body.page:has(.frx-legal) #main.site-main { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; }
/* the .frx-legal reading column keeps its cream bg too (already inherits) */
body.page:has(.frx-legal) .frx-legal { background: var(--cream); }