/*
Theme Name:   IVC Kadence Child
Theme URI:    https://www.inspiredvaporcompany.com/
Description:  Inspired Vapor Company child theme for Kadence. Carries the brand tokens
              extracted from the archived Shopify theme (Empire v12.2.1, 15JUL2026).
              All customisation lives here — the parent is never edited (WOO-BUILD-PLAN Phase 2).
Author:       Inspired Vapor Company
Template:     kadence
Version:      0.1.0
Text Domain:  ivc-kadence-child
*/

/* ==========================================================================
   BRAND TOKENS — extracted from config/settings_data.json in the Shopify export.
   These are IVC's real values, not placeholders. Do not invent colours here;
   if a value is missing, go back to the archive.

   ⚠ Typography note: the export carries TWO generations of font settings.
   `font_body` (Lato) and `font_heading` (League Spartan) are DEAD — referenced
   zero times anywhere in the theme. The live theme renders `type_*`:
       type_body    = nunito_sans_n4   -> Nunito Sans 400
       type_heading = montserrat_n8    -> Montserrat 800
       type_button  = nunito_sans_n7   -> Nunito Sans 700
       type_menu    = nunito_sans_n7   -> Nunito Sans 700
       type_section = montserrat_n8    -> Montserrat 800
   Verified by grepping settings.* references across all .liquid/.css in the export.
   ========================================================================== */

:root {
	/* --- surfaces --- */
	--ivc-bg: #ffffff;
	--ivc-bg-subtle: #edeff3;      /* footer background */
	--ivc-bg-warm: #f5f3ed;        /* checkout sidebar */

	/* --- text --- */
	--ivc-text: #1a1a1a;
	--ivc-text-light: #4d4d4d;
	--ivc-heading: #1a1a1a;

	/* --- brand --- */
	--ivc-navy: #00155e;           /* primary button background */
	--ivc-link: #0044cc;
	--ivc-sale: #00229a;
	--ivc-star: #ffab41;

	/* --- header / footer --- */
	--ivc-header-bg: #1a1a1a;
	--ivc-header-text: #ffffff;
	--ivc-footer-bg: #edeff3;
	--ivc-footer-text: #1a1a1a;

	/* --- forms --- */
	--ivc-input-bg: #ffffff;
	--ivc-input-border: #4d4d4d;
	--ivc-input-text: #1a1a1a;

	/* --- type --- */
	--ivc-font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ivc-font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ivc-weight-body: 400;
	--ivc-weight-heading: 800;
	--ivc-weight-button: 700;
	--ivc-size-base: 16px;
}

/* ==========================================================================
   Map IVC tokens onto Kadence's global palette so the theme's own components
   pick them up, rather than styling each component by hand.
   ========================================================================== */

:root {
	--global-palette1: var(--ivc-navy);
	--global-palette2: var(--ivc-link);
	--global-palette3: var(--ivc-text);
	--global-palette4: var(--ivc-text-light);
	--global-palette5: var(--ivc-text-light);
	--global-palette6: var(--ivc-bg-subtle);
	--global-palette7: var(--ivc-bg-warm);
	--global-palette8: var(--ivc-bg);
	--global-palette9: var(--ivc-bg);

	--global-palette-highlight: var(--ivc-link);
	--global-palette-btn-bg: var(--ivc-navy);
	--global-palette-btn: #ffffff;
	--global-palette-btn-bg-hover: var(--ivc-link);
	--global-palette-btn-hover: #ffffff;

	--global-body-font-family: var(--ivc-font-body);
	--global-heading-font-family: var(--ivc-font-heading);
}

body {
	font-family: var(--ivc-font-body);
	font-weight: var(--ivc-weight-body);
	font-size: var(--ivc-size-base);
	color: var(--ivc-text);
	background-color: var(--ivc-bg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ivc-font-heading);
	font-weight: var(--ivc-weight-heading);
	color: var(--ivc-heading);
}

a {
	color: var(--ivc-link);
}

/* Secondary button — outline navy on white, per color_button_secondary_* */
.button.button-secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: #ffffff;
	border: 1px solid var(--ivc-navy);
	color: var(--ivc-navy);
}

/* ==========================================================================
   WooCommerce — sale badge uses the brand sale accent, not Kadence's default.
   ========================================================================== */

.woocommerce span.onsale {
	background-color: var(--ivc-sale);
	color: #ffffff;
}

.woocommerce .star-rating span::before {
	color: var(--ivc-star);
}

/* ==========================================================================
   Sitewide announcement / Health Canada warning bar.
   Rendered by ivc_health_warning_bar() on wp_body_open — see functions.php for
   why this is code rather than a Kadence header row.
   Colours are the archived Shopify values, not a new choice.
   ========================================================================== */

.ivc-announcement {
	background: var(--ivc-header-bg);
	color: var(--ivc-header-text);
	text-align: center;
	font-family: var(--ivc-font-body);
	font-weight: var(--ivc-weight-button);
	font-size: 0.8125rem;
	line-height: 1.3;
	letter-spacing: 0.01em;
	padding: 0.5rem 1rem;
}

.ivc-announcement p {
	margin: 0;
}

/* One string or the other, never both. Shopify carried separate desktop and
   mobile copy, so this breakpoint switches CONTENT, not just layout. */
.ivc-announcement__mobile {
	display: none;
}

@media (max-width: 767px) {
	.ivc-announcement__desktop {
		display: none;
	}
	.ivc-announcement__mobile {
		display: block;
	}
}

/* ==========================================================================
   Header logo.
   Shopify capped the logo at 250x100. The source file is 735x702 (near-square),
   so an unconstrained render is several times too large. Constrain by HEIGHT —
   at this aspect 100px tall is ~105px wide, which is what the live site shows.
   Constraining by width alone would still leave it 239px tall.
   ========================================================================== */

.site-header .custom-logo,
.site-branding .custom-logo,
.site-header-item .custom-logo {
	max-height: 100px;
	max-width: 250px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ==========================================================================
   ⚠ Health Canada TVPA s.30.7 — the PRODUCT-PAGE warning block, distinct from
   the sitewide bar above. Lands in Phase 8 as a PDP template element, NOT as
   per-product copy. The style hook is defined here so the markup has somewhere
   to land; the markup itself is Phase 8 work (WOO-BUILD-PLAN Phase 8).
   ========================================================================== */

.ivc-health-warning {
	border: 2px solid var(--ivc-text);
	background: var(--ivc-bg);
	color: var(--ivc-text);
	padding: 1rem;
	margin: 1.5rem 0;
	font-weight: 700;
	line-height: 1.4;
}

/* ==========================================================================
   HOMEPAGE (Phase 2) — sections from PHASE2-STRUCTURE-SPEC.md §3, corrected
   against templates/index.json. Built from CORE + WooCommerce blocks only:
   no page-builder plugin, so deactivating a plugin can never empty the
   homepage. Icon colour is the archived Shopify value (#00155e = --ivc-navy).
   ========================================================================== */

/* --- full-bleed hero. Single static image (desktop + mobile sources) ------ */
.ivc-hero {
	display: block;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-bottom: 2.5rem;
}
.ivc-hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- highlights banner: 4 tiles ------------------------------------------ */
.ivc-highlights {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem;
	margin: 0 0 3rem;
	text-align: center;
}
.ivc-hl__ico { line-height: 0; }
.ivc-hl__icon {
	width: 40px;
	height: 40px;
	color: var(--ivc-navy);
}
.ivc-hl__title {
	font-family: var(--ivc-font-heading);
	font-size: 1rem;
	line-height: 1.3;
	margin: 0.75rem 0 0.35rem;
	color: var(--ivc-heading);
}
.ivc-hl__text {
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0;
	color: var(--ivc-text-light);
}
.ivc-hl__text a { color: var(--ivc-link); }

/* --- section headings ---------------------------------------------------- */
.ivc-section-title {
	font-family: var(--ivc-font-heading);
	margin: 3rem 0 1.5rem;
}

/* --- category tiles: 6 across desktop, 2 across mobile (spec §3 #12) ------
   Text tiles rather than image tiles: only 2 of the 7 categories have a
   Shopify collection image, and a mixed image/no-image row reads as broken.
   Upgrade to image tiles when category imagery is supplied. */
.ivc-tiles {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.75rem;
	margin: 0 0 3rem;
}
.ivc-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 84px;
	padding: 0.9rem 0.75rem;
	text-align: center;
	text-decoration: none;
	background: var(--ivc-bg-subtle);
	border: 1px solid transparent;
	border-radius: 4px;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.ivc-tile:hover,
.ivc-tile:focus-visible {
	background: var(--ivc-bg);
	border-color: var(--ivc-navy);
}
.ivc-tile__label {
	font-family: var(--ivc-font-heading);
	font-size: 0.82rem;
	line-height: 1.25;
	color: var(--ivc-heading);
}

@media (max-width: 1024px) {
	.ivc-highlights { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
	.ivc-tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	.ivc-highlights { grid-template-columns: 1fr; }
	.ivc-tiles { grid-template-columns: repeat(2, 1fr); }
	.ivc-section-title { margin: 2rem 0 1rem; }
}

/* ==========================================================================
   HEADER SEARCH BAR (Phase 2, spec §1)
   Rendered by [ivc_header_search] into Kadence's `html` header item, because
   the free Kadence header has no inline search-bar element — only a toggle.
   ========================================================================== */

.ivc-search {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	border: 1px solid var(--ivc-input-border);
	border-radius: 3px;
	background: var(--ivc-input-bg);
	overflow: hidden;
}
.ivc-search__cat { display: flex; }
.ivc-search__cat select {
	height: 100%;
	min-height: 44px;
	max-width: 165px;
	border: 0;
	border-right: 1px solid var(--ivc-input-border);
	border-radius: 0;
	background: var(--ivc-bg-subtle);
	color: var(--ivc-input-text);
	font-family: var(--ivc-font-body);
	font-size: 0.85rem;
	padding: 0 1.75rem 0 0.75rem;
	box-shadow: none;
}
.ivc-search__field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ivc-input-text);
	font-family: var(--ivc-font-body);
	font-size: 0.9rem;
	padding: 0 0.9rem;
	box-shadow: none;
}
.ivc-search__field:focus { outline: 0; box-shadow: none; }
.ivc-search:focus-within { border-color: var(--ivc-navy); }
.ivc-search__submit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	border: 0;
	border-radius: 0;
	background: var(--ivc-navy);
	color: #fff;
	cursor: pointer;
	padding: 0;
}
.ivc-search__submit svg { width: 20px; height: 20px; }
.ivc-search__submit:hover,
.ivc-search__submit:focus-visible { background: var(--ivc-link); }

/* the html header item should take the available centre width */
.site-header-item .header-html,
.site-header-item .header-html-inner { width: 100%; }

/* mobile: search sits on its own row, category selector hidden to save width */
@media (max-width: 767px) {
	.ivc-search { max-width: none; }
	.ivc-search__cat { display: none; }
}

/* --- brand index tiles (/pages/shop-by-brand/) ---------------------------- */
.ivc-tiles--brands { grid-template-columns: repeat(5, 1fr); }
.ivc-tile--brand { flex-direction: column; gap: 0.2rem; min-height: 68px; }
.ivc-tile__count {
	font-family: var(--ivc-font-body);
	font-size: 0.72rem;
	color: var(--ivc-text-light);
}
@media (max-width: 1024px) { .ivc-tiles--brands { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .ivc-tiles--brands { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   FOOTER
   Mirrors the Shopify `static-footer` layout: a widget row of content columns
   over an information row carrying the secondary nav, copyright and payment
   icons. Kadence's own footer rows do the structure; this only styles them.
   ========================================================================== */

.site-footer,
.site-footer-wrap,
#colophon { background: var(--ivc-footer-bg); color: var(--ivc-footer-text); }

.site-footer .widget-title,
.site-footer .footer-widget-area .widget-title {
	font-family: var(--ivc-font-heading);
	font-weight: var(--ivc-weight-heading);
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 0.9rem;
	color: var(--ivc-heading);
}

.site-footer .widget ul { list-style: none; margin: 0; padding: 0; }
.site-footer .widget li { margin: 0 0 0.45rem; line-height: 1.4; }

.site-footer a { color: var(--ivc-footer-text); text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus { color: var(--ivc-link); text-decoration: underline; }

/* the health/legal column is small print, not body copy */
.site-footer .ivc-footer-legal p {
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--ivc-text-light);
	margin: 0 0 0.6rem;
}
.site-footer .ivc-footer-legal p:last-child { margin-bottom: 0; }

/* --- information row ------------------------------------------------------ */
.site-footer .footer-navigation .footer-menu-container ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer .footer-navigation a { font-size: 0.85rem; }

.site-footer .footer-html-inner { font-size: 0.8rem; color: var(--ivc-text-light); }
.site-footer .footer-html-inner p { margin: 0 0 0.5rem; }
.site-footer .footer-html-inner p:last-child { margin-bottom: 0; }

/* --- payment icons -------------------------------------------------------- */
.ivc-payment-icons {
	/* span, not ul — see ivc_payment_icons_shortcode(): wpautop wraps this in a <p> */
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
}
.ivc-payment-icons__item {
	display: block;
	margin: 0;
	line-height: 0;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	overflow: hidden;
}
.ivc-payment-icons__item svg { display: block; width: 40px; height: 25px; }

@media (max-width: 767px) {
	.site-footer .footer-navigation .footer-menu-container ul { justify-content: center; }
	.ivc-payment-icons { justify-content: center; }
}

/* --- per-store availability (bridge: class-availability.php) -------------- */
.ivc-store-availability {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--ivc-text-light);
}
.ivc-store-availability__label {
	font-weight: 700;
	color: var(--ivc-text);
}
.ivc-store-availability__pickup {
	display: inline-block;
	margin-top: 0.15rem;
	color: var(--ivc-sale);
}

/* ==========================================================================
   VISUAL QA PASS — DEC-2026-08-25-E1..E7
   Everything below was found by RENDERING the storefront (see the session
   handover for how staging's edge auth was got around), not by reading markup.
   Each block records the measurement that justified it, because "looks tight"
   is not a spec and the next person needs to know what was actually wrong.
   ========================================================================== */

/* --- E1a. Header: the logo had no room above it --------------------------
   Measured: .site-branding top = 33px, and the health-warning bar ends at
   exactly 33px. Kadence's upper header row carries padding 0, so a 100px logo
   sat flush against the black bar with a zero-pixel gap and read as clipped. */
.site-header .site-branding {
	padding-top: 18px;
	padding-bottom: 10px;
}

/* --- E10. Phone logo was desktop-sized -----------------------------------
   The 100px cap was chosen for the DESKTOP lockup (Shopify capped at 250x100)
   and was being applied unchanged to phones, where it cost a 128px-tall header
   before any content and squeezed the site title into 132px.

   ⚠ Scoped to 600px, NOT to Kadence's 1024px mobile-header breakpoint. The
   mobile header does render from 1023px down, but at 767px the branding column
   still has ~624px and the full-size logo is fine there — shrinking it that
   early would just make tablets look under-branded. Phones are the only width
   with a real problem.

   64px tall is ~67px wide at this artwork's near-square aspect (735x702), which
   returns ~40px to the title and drops the header to roughly 88px. It does NOT
   buy a single-line title: at 390px the name needs 220px and even a zero-width
   logo would leave only ~247px once cart and toggle are counted. Two lines is
   the honest outcome; this makes them break cleanly and clear the cart icon. */
@media (max-width: 600px) {
	.site-header .custom-logo,
	.site-branding .custom-logo,
	.site-header-item .custom-logo {
		max-height: 64px;
	}
}

/* --- E1b. Site title -----------------------------------------------------
   Measured: rendered as Nunito Sans 700 at 26px. The brand's heading token is
   Montserrat 800 (type_heading = montserrat_n8 in the Shopify export), so the
   title was rendering in the BODY face — a brand-fidelity gap as well as a
   size preference. Now the heading face, heavier, and two steps larger. */
.site-header .site-title,
.site-header .site-title a {
	font-family: var(--ivc-font-heading);
	font-weight: var(--ivc-weight-heading);
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-size: 22px;
}

/* Montserrat 800 is much wider than the Nunito it replaced: at 28px the name
   needs 362px and the branding column offered 334px, so it broke onto two
   lines. There is 423px of dead space between the search bar and the cart
   icon, so at desktop widths letting the column grow costs nothing.

   ⚠ nowrap is SCOPED TO min-width:1200px on purpose. Applied unscoped it ran
   the title straight off the right edge of a 390px phone — the fix for the
   desktop wrap became a mobile overflow. Only widen what has room to widen. */
@media (min-width: 1200px) {
	.site-header .site-title,
	.site-header .site-title a {
		font-size: 28px;
	}

	.site-header .site-title {
		white-space: nowrap;
	}
}

/* Phones: ~300px of header is left beside the logo, so 28px cannot fit and
   even 22px is tight. 17px keeps the name on one line in the heavy face. */
@media (max-width: 600px) {
	.site-header .site-title,
	.site-header .site-title a {
		font-size: 17px;
	}
}

/* --- E2. The off-white band under the header -----------------------------
   Measured: section.entry-hero, 200px tall, painted with --ivc-bg-warm
   (#f5f3ed). That token is the CHECKOUT SIDEBAR colour; it only landed here
   because the palette mapping assigns it to Kadence's --global-palette7, which
   is what Kadence paints the page-title hero with. So the warm band was an
   accident of the palette mapping, never a design decision. White it, and
   tighten 200px of empty space down to something proportionate.

   ⚠ The warm colour is painted on `.entry-hero-container-inner`, NOT on
   `.entry-hero` — the inner div is the full-bleed band, while `.entry-header`
   inside it is only container-width. Styling the section alone leaves the
   visible band untouched, which is exactly what a first pass here did.

   ⚠ The rule that paints it is `.entry-hero-container-inner{background:
   var(--global-palette7)}` in Kadence's `content.min.css`, which is enqueued
   AFTER this stylesheet. A matching single-class selector here therefore
   loses on source order even though the specificity ties — so the descendant
   selector below is doing real work and must not be "simplified" away.
   Declaring the child stylesheet as dependent on `kadence-global` orders it
   against that ONE handle, not against every stylesheet Kadence ships. */
.entry-hero,
.entry-hero .entry-hero-container-inner,
.entry-hero .entry-header {
	background-color: var(--ivc-bg);
}

/* ⚠ The 200px comes from a min-height Kadence prints as INLINE customizer CSS,
   which lands after this stylesheet and beats an equal-specificity rule. The
   extra `.page-title` class is what makes this one win. Result: 36px + the
   48px title + 36px = a 120px band instead of 200px of empty colour. */
.site .entry-hero .entry-header.page-title {
	padding-top: 2.25rem;
	padding-bottom: 2.25rem;
	min-height: 0;
}

/* The front page carries its own full-bleed hero image. A title band reading
   "Home" stacked above it is noise, so it goes entirely rather than turning
   white and leaving a gap. */
.home .entry-hero {
	display: none;
}

/* --- E2b. The SAME off-white, on WooCommerce notices ---------------------
   The "…has been added to your cart" banner is painted from the same token:
   `.woocommerce .woocommerce-message{background:var(--global-palette7)}` in
   Kadence's `woocommerce.min.css`. So the two off-white surfaces flagged in
   this pass — the page-title band and the cart notice — are one root cause,
   #f5f3ed reaching two components it was never chosen for.

   Repainted with the COOL subtle grey already used by the footer rather than
   white: a notice still needs to read as a notice, and the blue left border
   alone is a weak signal. This keeps the surface and drops the warm cast.

   ⚠ Specificity: the Kadence rule is (0,2,0) and loads after this file, so a
   two-class selector here would tie and lose. Three classes is the minimum
   that wins. */
.site .woocommerce .woocommerce-message,
.site .woocommerce .woocommerce-info,
.site .woocommerce .woocommerce-error,
.site .woocommerce-notices-wrapper .woocommerce-message,
.site .woocommerce-notices-wrapper .woocommerce-info,
.site .woocommerce-notices-wrapper .woocommerce-error {
	background-color: var(--ivc-bg-subtle);
}

/* --- E6. Content ran straight into the footer ----------------------------
   Measured: #inner-wrap bottom = 3247px and #colophon top = 3247px — a literal
   zero-pixel seam, with margin-top 0 on the footer and padding 0 on its widget
   row, so the last product tile touched the footer's grey. */
.site-footer {
	margin-top: 3.5rem;
}

.site-footer .site-top-footer-wrap,
.site-footer .footer-widget-area {
	padding-top: 2.75rem;
	padding-bottom: 1.75rem;
}

/* --- E7. Footer menu: the nesting was already there ----------------------
   The footer menu is the main menu and it ALREADY carries full hierarchy —
   8 top-level items, 7 sub-menus, three levels deep under Hardware. What
   flattened it was this stylesheet's own `.site-footer .widget ul {padding:0}`
   a few hundred lines up, which zeroed .sub-menu indentation too. So all 28
   links rendered at one level, in one colour, in a ~1000px column.
   This restores the structure that was in the markup the whole time. */
.site-footer .widget .menu > li {
	margin-bottom: 1rem;
	break-inside: avoid;
}

.site-footer .widget .menu > li > a {
	font-weight: 700;
}

.site-footer .widget .sub-menu {
	margin: 0.4rem 0 0;
	padding-left: 0.85rem;
	border-left: 1px solid rgba(26, 26, 26, 0.14);
}

.site-footer .widget .sub-menu a {
	font-size: 0.87rem;
	color: var(--ivc-text-light);
}

.site-footer .widget .sub-menu .sub-menu {
	margin-bottom: 0.4rem;
}

/* ⚠ Two-up was tried here and REVERTED. The footer row gives this widget
   394px, so `columns: 2` leaves ~180px per column and forces wrapping on six
   labels — "Tools, Coils & Accessories for Rebuildables" broke over three
   lines. Shorter, but harder to read, which is not a trade worth making.
   Grouping is what actually answers "too long": 28 undifferentiated links
   become 8 scannable groups. If the footer must also be physically shorter,
   the next lever is widening this column in Kadence's footer row settings
   (columns 2 and 3 end after four lines and have width to spare) — a layout
   decision for Kevin, not something to force with a stylesheet override. */