/*
 * HŌMU — palette, type and base styles, from the brand guide
 * (BRAND IDENTITY MASTER.pdf, V1 2025).
 *
 * Every colour on the site is one of these variables (style_v2.css and the
 * <style> blocks in the Blade views refer to them), so a colour change is an
 * edit here and nowhere else. Emails are the exception: mail clients don't
 * support CSS variables, so resources/views/emails/layout.blade.php repeats
 * the hex values.
 *
 * Primary colours are the guide's four; the neutrals in between (text, lines,
 * muted) are derived from them. The secondary colours are, in the guide's
 * words, "dictated by campaign and seasonal colour palettes" — here they are
 * hero bands and the sale colour, not general UI.
 */
:root {
    /* Primary (brand guide) */
    --homu-paper:        #F4F3EE;  /* primary #1 — page background */
    --homu-cream:        #FFFCF1;  /* primary #2 — light bands and panels */
    --homu-brown:        #563E24;  /* primary #3 — dark bands, accents */
    --homu-lime:         #C1FF72;  /* primary #4 — highlight, sparingly */

    /* Secondary (brand guide) — campaigns and seasons */
    --homu-yellow:       #EFBD40;
    --homu-red:          #C6312C;
    --homu-green:        #097D4C;
    --homu-blue:         #004EAD;

    /* Copy and neutrals. The guide sets type in black on the off-white. */
    --homu-ink:          #1A1A1A;  /* headings, buttons, logo */
    --homu-ink-hover:    #3A3835;
    --homu-white:        #FFFFFF;
    --homu-text:         #2B2926;  /* body copy */
    --homu-muted:        #66625B;  /* secondary text — 5.5:1 on the page */
    --homu-line:         #DEDAD1;
    --homu-line-strong:  #BDB8AD;
    --homu-stone:        #E4E0D6;  /* legacy poster band; prefer the guide's colours */

    /* Status */
    --homu-sale:         var(--homu-red);
    --homu-success:      var(--homu-green);
    --homu-success-bg:   #E3F0E8;
    --homu-success-line: #B9D9C6;
    --homu-error:        #A1261F;
    --homu-error-bg:     #F7E3E1;
    --homu-error-line:   #E9BDB9;
    --homu-warn:         #7A5A12;
    --homu-warn-bg:      #FBEFCF;

    /* Type — the guide's Helvetica (Bold for headings, Regular for copy).
       System fonts, nothing downloaded: real Helvetica on Apple devices,
       Arial (near-identical metrics) on Windows. To use a licensed web font
       later, add its @font-face and put its name first here. */
    --homu-font:         'Helvetica Neue', Helvetica, Arial, sans-serif;
    --homu-font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --homu-tracking:     0.12em;   /* spaced capitals for labels and buttons */
}

body {
    background: var(--homu-paper);
    color: var(--homu-text);
    font-family: var(--homu-font);
    font-weight: 400;
}

/* The guide's headings: Helvetica Bold, in capitals. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--homu-font-display);
    font-weight: 700;
    color: var(--homu-ink);
}
h1, h2, h3 {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

a { color: var(--homu-ink); }
a:hover { color: var(--homu-ink-hover); }

/* Logo */
/* Height comes from the brand (config/brand.php, set in the layout's <head>):
   Homu's spaced capitals and Tinka's monogram need different heights to read
   at the same weight. */
.homu-logo { display: block; height: var(--homu-logo-h, 26px); width: auto; }
.homu-logo--mobile { height: calc(var(--homu-logo-h, 26px) * .78); }
.homu-logo--drawer { height: calc(var(--homu-logo-h, 26px) * .62); }
.checkout-logo .homu-logo { height: calc(var(--homu-logo-h, 26px) * .85); }

/* Buttons: square, ink, spaced capitals */
.btn {
    border-radius: 0;
    font-family: var(--homu-font);
    text-transform: uppercase;
    letter-spacing: var(--homu-tracking);
    font-size: 13px;
}
.btn-primary, .btn-dark {
    background: var(--homu-ink);
    border-color: var(--homu-ink);
    color: var(--homu-paper);
}
.btn-primary:hover, .btn-primary:focus,
.btn-dark:hover, .btn-dark:focus {
    background: var(--homu-ink-hover);
    border-color: var(--homu-ink-hover);
    color: var(--homu-paper);
}
.btn-outline-primary, .btn-outline-dark {
    color: var(--homu-ink);
    border-color: var(--homu-ink);
}
.btn-outline-primary:hover, .btn-outline-dark:hover {
    background: var(--homu-ink);
    color: var(--homu-paper);
}

.form-control { border-radius: 0; border-color: var(--homu-line-strong); }
.form-control:focus {
    border-color: var(--homu-ink);
    box-shadow: 0 0 0 1px var(--homu-ink);
}

/* Staff-only strip while previewing the other brand (BrandPreview middleware) */
.brand-preview-bar {
    background: var(--homu-warn-bg); color: var(--homu-warn); text-align: center;
    font-size: 13px; padding: 7px 16px; border-bottom: 1px solid var(--homu-line-strong);
}
.brand-preview-bar a { color: var(--homu-warn); text-decoration: underline; margin-left: 8px; }

::selection { background: var(--homu-cream); color: var(--homu-ink); }

/* ==========================================================================
   Homepage heroes — one block per LAYOUT in WEB_HERO
   --------------------------------------------------------------------------
   Templates in resources/views/partials/hero/, chosen by App\Services\
   HeroResolver. Staff pick a layout and a tone in the intranet, never a font
   or a colour, so every hero stays inside the palette above.
   ========================================================================== */
.homu-wrap { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }

/* The guide's small labels ("ONE. ABOUT US"): bold capitals. */
.homu-eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: var(--homu-tracking);
    text-transform: uppercase; color: var(--homu-ink); margin: 0;
}

/* Shared headline and body type for every layout */
[class^="homu-hero"] h1 {
    font-family: var(--homu-font-display); font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.05;
    letter-spacing: .01em; text-transform: uppercase; color: var(--homu-ink);
    max-width: 18ch; margin: .6rem 0 0;
}
/* <em> marks a word to accent: brown on light grounds, lime on dark. */
[class^="homu-hero"] h1 em { font-style: normal; color: var(--homu-brown); }
[class^="homu-hero"] p { margin-top: 1rem; max-width: 50ch; font-size: 16px; line-height: 1.6; color: var(--homu-text); }

/* Buttons (partials/hero/ctas) */
.homu-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.homu-btn {
    display: inline-block; padding: 13px 30px; border: 1px solid transparent;
    font-size: 12px; letter-spacing: var(--homu-tracking); text-transform: uppercase;
    text-decoration: none; transition: background .2s, color .2s, border-color .2s;
}
.homu-btn:hover { text-decoration: none; }
.homu-btn--solid { background: var(--homu-ink); color: var(--homu-paper); border-color: var(--homu-ink); }
.homu-btn--solid:hover { background: var(--homu-ink-hover); color: var(--homu-paper); }
.homu-btn--ghost { color: var(--homu-ink); border-color: var(--homu-ink); }
.homu-btn--ghost:hover { background: var(--homu-ink); color: var(--homu-paper); }
.homu-btn--light { background: var(--homu-paper); color: var(--homu-ink); border-color: var(--homu-paper); }
.homu-btn--light:hover { background: var(--homu-cream); color: var(--homu-ink); }
.homu-btn--ghost-light { color: var(--homu-paper); border-color: var(--homu-paper); }
.homu-btn--ghost-light:hover { background: var(--homu-paper); color: var(--homu-ink); }
.homu-hero-note { font-size: 14px; }
.homu-hero-note a { text-decoration: underline; text-underline-offset: 3px; }

/* Staff-only strip above a ?hero= preview */
.homu-hero-preview {
    background: var(--homu-ink); color: var(--homu-paper); text-align: center;
    font-size: 12px; letter-spacing: .06em; padding: .55rem 1rem;
}

/* editorial: copy block, then the photograph full width */
.homu-hero { padding: clamp(2rem, 4vw, 3.4rem) 0 clamp(1.4rem, 2.4vw, 2rem); }
.homu-hero-staged-sec { padding-bottom: clamp(2rem, 4vw, 3rem); }
.homu-hero-staged img { display: block; width: 100%; max-height: 72vh; object-fit: cover; }

/* split: one photograph beside the copy */
.homu-hero-split-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, min(30rem, 45%));
    gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
    padding-block: clamp(1.6rem, 3.4vw, 3rem);
}
.homu-hero-split--rtl .homu-hero-split-media { order: 2; }
.homu-hero-split--rtl .homu-hero-split-grid { grid-template-columns: minmax(18rem, min(30rem, 45%)) minmax(0, 1fr); }
.homu-hero-split.is-textonly .homu-hero-split-grid { grid-template-columns: minmax(0, 1fr); }
.homu-hero-split-media img {
    display: block; width: 100%; height: auto;
    max-height: clamp(320px, 40vw, 580px); object-fit: contain;
}

/* overlay: copy on a scrim over one full-bleed photograph */
.homu-hero-overlay { position: relative; isolation: isolate; }
.homu-hero-overlay-img { display: block; width: 100%; height: clamp(340px, 48vw, 620px); object-fit: cover; }
.homu-hero-overlay-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(26,26,26,.62) 0%, rgba(26,26,26,.28) 55%, rgba(26,26,26,0) 100%);
}
.homu-hero-overlay-in { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.homu-hero-overlay-copy h1,
.homu-hero-overlay-copy p,
.homu-hero-overlay-copy .homu-eyebrow,
.homu-hero-overlay-copy .homu-hero-note,
.homu-hero-overlay-copy .homu-hero-note a { color: var(--homu-paper); }
.homu-hero-overlay-copy h1 em { color: var(--homu-lime); }

/* poster: a solid band, type only. Tone picks the band. */
.homu-hero-poster { padding-block: clamp(2.6rem, 6vw, 5rem); text-align: center; }
.homu-hero-poster-in { display: flex; flex-direction: column; align-items: center; }
.homu-hero-poster h1 { margin-inline: auto; }
.homu-hero-poster p { margin-inline: auto; }
.homu-hero-poster .homu-hero-cta { justify-content: center; }
/* Bands: the guide's primary colours, then its seasonal ones. The dark bands
   take cream type; partials/hero/poster.blade.php gives them light buttons. */
.homu-hero-poster--cream  { background: var(--homu-cream); }
.homu-hero-poster--brown  { background: var(--homu-brown); }
.homu-hero-poster--lime   { background: var(--homu-lime); }
.homu-hero-poster--yellow { background: var(--homu-yellow); }
.homu-hero-poster--red    { background: var(--homu-red); }
.homu-hero-poster--green  { background: var(--homu-green); }
.homu-hero-poster--blue   { background: var(--homu-blue); }
.homu-hero-poster--brown h1, .homu-hero-poster--brown p, .homu-hero-poster--brown .homu-eyebrow,
.homu-hero-poster--brown .homu-hero-note, .homu-hero-poster--brown .homu-hero-note a,
.homu-hero-poster--red h1,   .homu-hero-poster--red p,   .homu-hero-poster--red .homu-eyebrow,
.homu-hero-poster--red .homu-hero-note,   .homu-hero-poster--red .homu-hero-note a,
.homu-hero-poster--green h1, .homu-hero-poster--green p, .homu-hero-poster--green .homu-eyebrow,
.homu-hero-poster--green .homu-hero-note, .homu-hero-poster--green .homu-hero-note a,
.homu-hero-poster--blue h1,  .homu-hero-poster--blue p,  .homu-hero-poster--blue .homu-eyebrow,
.homu-hero-poster--blue .homu-hero-note,  .homu-hero-poster--blue .homu-hero-note a { color: var(--homu-cream); }
.homu-hero-poster--brown h1 em { color: var(--homu-lime); }

/* feature: the brand guide's photo placement — a bold tagline at the top,
   the headline (or the logo) in the middle, a short line at the foot, all
   centred in white over one photograph. */
.homu-hero-feature { position: relative; isolation: isolate; overflow: hidden; }
.homu-hero-feature-img {
    display: block; width: 100%; height: clamp(420px, 56vw, 760px); object-fit: cover;
}
/* An even, light tint so white type holds on any photo without hiding it. */
.homu-hero-feature-tint { position: absolute; inset: 0; z-index: 1; background: rgba(26, 26, 26, .22); }
.homu-hero-feature-in {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    text-align: center; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 40px);
}
.homu-hero-feature .homu-eyebrow { color: var(--homu-white); font-size: clamp(12px, 1.2vw, 15px); max-width: 32ch; }
.homu-hero-feature-mid { display: flex; flex-direction: column; align-items: center; }
.homu-hero-feature h1 { color: var(--homu-white); margin: 0 auto; max-width: 16ch; }
.homu-hero-feature h1 em { color: var(--homu-lime); }
.homu-hero-feature-logo { display: block; width: clamp(180px, 30vw, 420px); height: auto; }
.homu-hero-feature-foot { display: flex; flex-direction: column; align-items: center; }
.homu-hero-feature-foot p { color: var(--homu-white); margin: 0; font-size: 15px; }
.homu-hero-feature .homu-hero-cta { justify-content: center; margin-top: 1rem; }
.homu-hero-feature .homu-hero-note, .homu-hero-feature .homu-hero-note a { color: var(--homu-white); }

/* mosaic: copy beside a tall photograph and two squares */
.homu-hero-mosaic-grid {
    display: grid; grid-template-columns: minmax(18rem, 30rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
    padding-block: clamp(1.6rem, 3.4vw, 3rem);
}
.homu-hero-mosaic-media {
    display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr;
    gap: 10px; height: clamp(340px, 42vw, 560px);
}
.homu-hero-mosaic-fig { margin: 0; overflow: hidden; }
.homu-hero-mosaic-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.homu-hero-mosaic-fig--1 { grid-row: 1 / 3; }
.homu-hero-mosaic-media.is-two .homu-hero-mosaic-fig--2 { grid-row: 1 / 3; }

/* Phones: every two-column layout stacks, photograph first */
@media (max-width: 767px) {
    .homu-hero-split-grid,
    .homu-hero-split--rtl .homu-hero-split-grid,
    .homu-hero-mosaic-grid { grid-template-columns: minmax(0, 1fr); }
    .homu-hero-split--rtl .homu-hero-split-media { order: 0; }
    .homu-hero-mosaic-media { order: -1; height: 72vw; }
    .homu-hero-overlay-scrim { background: rgba(26,26,26,.5); }
    .homu-hero-feature-img { height: 125vw; }
}

/* The category mega menu sits hidden in the layout until hovered; with the
   wider Helvetica its columns could run past the right edge and give the page
   a sideways scroll. Keep it within the screen, wrapping columns if needed. */
.mega-menu { max-width: calc(100vw - 32px); flex-wrap: wrap; white-space: normal; }
/* Belt and braces: nothing should ever scroll the page sideways. `clip`
   rather than `hidden` so the sticky header keeps working. */
html, body { overflow-x: clip; }