/* ============================================================
   Wyrmwood LANDING PAGE TYPE
   ------------------------------------------------------------
   One type layer for the three product landing templates:

     page-prophecy-gaming-table.php   #wwg-prophecy-landing
     page-modular-desk.php            #wwg-desk-landing
     page-modular-gaming-table.php    #wwg-table-landing

   These were built before the token system with their own inline
   type (sizes 10-15px, weight 500, unitless line-heights, all-caps
   labels). Every size/line/weight below is a token from
   wwg-tokens.css, i.e. a value from the Figma Style Guide
   ("Typogrophy" collection) or the Design System PDF.

   Role assignment follows the Design System PDF's usage notes:
     paragraph XL  lead-ins (hero subtitle, section flavour text)
     paragraph MD  standard body copy
     paragraph SM  subtext, fine print, UI hints, image labels
     button SM/MD  tabs, chips, toggles and card CTAs
     H4 / H5       large display figures (Inegale)
     product name  item names on cards (Source Sans SemiBold 16/26)

   Headings (h1-h6) are NOT handled here: wwg-base.css maps every
   heading tag to its role. Colour, spacing and layout stay in the
   page templates.

   Two rules the guide states that these pages broke throughout:
   body copy is never all-caps, and the only weights are Light 300,
   Regular 400, SemiBold 600 and Bold 700 (no 500). Neither Figma
   file contains a single uppercased text node (0 of 24,732), so
   labels are sentence case with token tracking.
   ============================================================ */

/* ---- Icons: Google Material Symbols, Outlined (Design System PDF) ----
   Markup: <span class="wwg-symbol" data-icon="coffee" aria-hidden="true"></span>.
   The icon name goes in data-icon and is drawn by ::before, so it never shows up
   in the element's text (headings stay clean for search, screen readers and the
   scripts that copy titles). Sized to the surrounding text; colour follows it. */
.wwg-symbol {
	display: inline-block;
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	direction: ltr;
	vertical-align: -0.125em;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: 'liga';
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.wwg-symbol::before {
	content: attr(data-icon);
}

/* ---- Hero title: one line, never wrapped ----
   Below 600px it has to wrap: at the Design System's mobile H1 (51.94px)
   "Modular Sit-Stand Desk" needs 439px and "The Modular Gaming Table" 514px,
   wider than a phone viewport, and shrinking the type would leave the scale. */
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) .hero__title {
	white-space: nowrap;
}
@media (max-width: 599px) {
	:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) .hero__title {
		white-space: normal;
	}
}

/* ---- Lead-ins: hero subtitle + section flavour text (paragraph XL) ---- */
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(.hero__sub, .kf__flavor-text) {
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-xl-size);
	line-height: var(--wwg-text-xl-line);
	letter-spacing: var(--wwg-text-xl-tracking);
	font-weight: 400;
	text-transform: none;
}

/* ---- Standard body copy (paragraph MD) ---- */
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(
	.intro__text p,
	.cta p,
	.video-intro p,
	.sizes p,
	.org-info__copy,
	.st__panel-left p,
	.dimensions-header__desc,
	.ext-header p,
	.desk-text,
	.mob-text
) {
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
	letter-spacing: var(--wwg-text-md-tracking);
	font-weight: 400;
	text-transform: none;
}

/* The intro lead keeps SemiBold emphasis at body size. */
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) .intro__text .lead {
	font-weight: var(--wwg-btn-weight);
}

/* ---- Subtext: card copy, captions, image labels (paragraph SM) ---- */
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(
	.mod-desc__panel p,
	.exp-card__desc,
	.seat-detail__desc,
	.feat-strip__body p,
	.acc-row__body p,
	.buy-card__desc,
	.size-row__item p,
	.mat-item span,
	.hobby-item span,
	.ttrack-caption,
	.slideshow__caption,
	.mat-browser__caption,
	.seat-stage__caption,
	.sizing-card__dims,
	.mod-highlight,
	.dims-showcase > div:last-child p
) {
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-sm-size);
	line-height: var(--wwg-text-sm-line);
	letter-spacing: var(--wwg-text-sm-tracking);
	font-weight: 400;
	text-transform: none;
}

/* ---- Labels: section eyebrows, stat captions, badges, measurements
        (paragraph SM, SemiBold = the guide's "subtle emphasis") ---- */
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(
	.sec-head__tag,
	.org-info__tag,
	.kf-stat__label,
	.spec-box__label,
	.mat-label,
	.seat-label,
	.ext-acc__label,
	.ext-acc__price,
	.qship-card__badge,
	.qship-card__price,
	.buy-card__tag,
	.flag,
	.size-label,
	.dim-label,
	.landing-label
) {
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-sm-size);
	line-height: var(--wwg-text-sm-line);
	letter-spacing: var(--wwg-text-sm-tracking);
	font-weight: var(--wwg-btn-weight);
	text-transform: none;
}

/* ---- Item names on cards — the product-card name role (Source Sans SemiBold) ---- */
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(
	.sizing-card__name,
	.ext-acc__name,
	.qship-card__title,
	.mod-highlight strong
) {
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-type-product-name-size);
	line-height: var(--wwg-type-product-name-line);
	letter-spacing: 0;
	font-weight: var(--wwg-type-product-name-weight);
	text-transform: none;
}

/* ---- Tabs, chips and toggles — Fluid Buttons, tertiary size.
        (PDF: 14px is tertiary/small, Outlined or Borderless only.) ---- */
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(
	.kf__tab,
	.mod-tab,
	.st__tab,
	.seat-tab,
	.mat-chip,
	.seat-chip,
	.size-toggle__btn
),
:is(#wwgSidenav, #wwgSidenavProphecy) .wwg-sidenav__label {
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-btn-sm-size);
	line-height: var(--wwg-btn-sm-line);
	letter-spacing: var(--wwg-btn-tracking);
	font-weight: var(--wwg-btn-weight);
	text-transform: none;
}

/* ---- Section tab rows ----
   The row gets the selected nav tab's background (Figma Nav Tab, Focus state:
   Background/Secondary-Background — Bone Light on Classic, Iron on Signature)
   so it reads as its own band instead of blending into the page. Labels use the
   standard text colour (Text/Primary-Text); the selected tab is marked by its
   underline; hover uses the contrast-safe hover role (Iron / Bone Extra Light). */
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(.kf__tabs, .mod-tabs, .st__tabs, .seat-tabs) {
	background: var(--wwg-color-bg-secondary);
}
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(.kf__tab, .mod-tab, .st__tab, .seat-tab),
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(.kf__tab, .mod-tab, .st__tab, .seat-tab).active {
	color: var(--wwg-color-text-primary);
}
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(.kf__tab, .mod-tab, .st__tab, .seat-tab):hover {
	color: var(--wwg-color-text-hover-on-secondary);
}

/* ---- Card CTA — Fluid Buttons, secondary size ---- */
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) .buy-card__cta {
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-btn-md-size);
	line-height: var(--wwg-btn-md-line);
	letter-spacing: var(--wwg-btn-tracking);
	font-weight: var(--wwg-btn-weight);
	text-transform: none;
}

/* ---- Display figures (Inegale): stat numbers H5, dimension readouts H4 ---- */
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(.kf-stat__num, .spec-box__num) {
	font-family: var(--wwg-font-display);
	font-size: var(--wwg-h5-size);
	line-height: var(--wwg-h5-line);
	letter-spacing: var(--wwg-h5-tracking);
	font-weight: 400;
	text-transform: none;
}
:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) .dims-number {
	font-family: var(--wwg-font-display);
	font-size: var(--wwg-h4-size);
	line-height: var(--wwg-h4-line);
	letter-spacing: var(--wwg-h4-tracking);
	font-weight: 400;
	text-transform: none;
}

/* ============================================================
   MOBILE — Figma "Typogrophy" Mobile mode. Matches the breakpoint
   wwg-base.css uses for the heading roles.
   ============================================================ */
@media (max-width: 767px) {
	:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(.hero__sub, .kf__flavor-text) {
		font-size: var(--wwg-text-xl-size-mobile);
		line-height: var(--wwg-text-xl-line-mobile);
	}
	:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(
		.intro__text p,
		.cta p,
		.video-intro p,
		.sizes p,
		.org-info__copy,
		.st__panel-left p,
		.dimensions-header__desc,
		.ext-header p,
		.desk-text,
		.mob-text
	) {
		font-size: var(--wwg-text-md-size-mobile);
		line-height: var(--wwg-text-md-line-mobile);
	}
	:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(
		.mod-desc__panel p,
		.exp-card__desc,
		.seat-detail__desc,
		.feat-strip__body p,
		.acc-row__body p,
		.buy-card__desc,
		.size-row__item p,
		.mat-item span,
		.hobby-item span,
		.ttrack-caption,
		.slideshow__caption,
		.mat-browser__caption,
		.seat-stage__caption,
		.sizing-card__dims,
		.mod-highlight,
		.dims-showcase > div:last-child p,
		.sec-head__tag,
		.org-info__tag,
		.kf-stat__label,
		.spec-box__label,
		.mat-label,
		.seat-label,
		.ext-acc__label,
		.ext-acc__price,
		.qship-card__badge,
		.qship-card__price,
		.buy-card__tag,
		.flag,
		.size-label,
		.dim-label,
		.landing-label
	) {
		font-size: var(--wwg-text-sm-size-mobile);
		line-height: var(--wwg-text-sm-line-mobile);
	}
	:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(
		.sizing-card__name,
		.ext-acc__name,
		.qship-card__title,
		.mod-highlight strong
	) {
		font-size: var(--wwg-type-product-name-size-mobile);
		line-height: var(--wwg-type-product-name-line-mobile);
	}
	:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(
		.kf__tab,
		.mod-tab,
		.st__tab,
		.seat-tab,
		.mat-chip,
		.seat-chip,
		.size-toggle__btn
	),
	:is(#wwgSidenav, #wwgSidenavProphecy) .wwg-sidenav__label {
		font-size: var(--wwg-btn-sm-size-mobile);
		line-height: var(--wwg-btn-sm-line-mobile);
	}
	:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) .buy-card__cta {
		font-size: var(--wwg-btn-md-size-mobile);
		line-height: var(--wwg-btn-md-line-mobile);
	}
	:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) :is(.kf-stat__num, .spec-box__num) {
		font-size: var(--wwg-h5-size-mobile);
		line-height: var(--wwg-h5-line-mobile);
	}
	:is(#wwg-prophecy-landing, #wwg-desk-landing, #wwg-table-landing) .dims-number {
		font-size: var(--wwg-h4-size-mobile);
		line-height: var(--wwg-h4-line-mobile);
	}
}

/* Side-nav icons sit at 16px next to 14px labels: use the smallest optical size. */
:is(#wwgSidenav, #wwgSidenavProphecy) .wwg-sidenav__icon {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}