/* hmi.css - High Mountain Imports brand sheet (demo-local; scripts/apply-brand.py writes it into
 * theme-default's brand slot, Files/Templates/Designs/Swift-v2/Custom/brand.css, registered after
 * default_custom.css). Per-scheme colours live in the generated System/Styles/ColorSchemes pair
 * (scripts/gen-brand.py); fonts in the Typography pair. This sheet holds tokens and brand-only rules.
 * Source of the palette: highmountainimports.com theme variables (data/recon/site.md).
 */

/* The sentinel of the brand slot. Inert. */
[data-td-block="brand"] { --td-block: brand; }

/* 1. Tokens (mirror of brand.tokens.json css section). Doubled :root beats the inline head copy. */
:root:root {
  --td-ink:          #2A2C24;   /* dark olive: footer ground, ink */
  --td-ink-soft:     #3A3D32;
  --td-slate:        #4A4D40;
  --td-slate-mid:    #5C6052;   /* 6.6:1 on white */
  --td-slate-light:  #CDD5C2;   /* footer link ink on olive, 10.9:1 */
  --td-grey-light:   #F4F7EF;
  --td-hairline:     #E1E8D6;
  --td-white:        #FFFFFF;
  --td-accent:       #4D6238;   /* brand shade: AA with white (6.73:1); #66824A is 4.32:1 */
  --td-accent-soft:  rgba(77, 98, 56, .08);
  --td-radius:       4px;
  --td-radius-sm:    2px;
  --td-logo-h:       3rem;
  --td-logo-w-phone: 120px;
  --td-logo-w-laptop: 200px;
  /* the edge motif: a mountain ridgeline instead of the theme's soft curve */
  --td-edge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 75' preserveAspectRatio='none'%3E%3Cpath d='M0 58 L140 40 L230 52 L380 18 L470 38 L560 30 L700 56 L820 26 L900 40 L1010 8 L1120 44 L1230 30 L1340 50 L1440 36 L1440 75 L0 75 Z'/%3E%3C/svg%3E");
}

/* 2. Filled-button hover: a darker step of the scheme's own button colour (the theme default paints every
 *    filled button with --td-ink-soft, which turns a green button charcoal). Same :not() chain as the theme. */
[data-dw-button]:not([data-dw-button="outline"]):not([data-dw-button="ghost"]):not([data-dw-button="secondary"]):not([data-dw-button="link"]):not([data-dw-button=""]):not([data-dw-button^="outline-"]):hover {
  background-color: color-mix(in srgb, var(--dw-color-button-primary) 80%, #000);
  border-color: color-mix(in srgb, var(--dw-color-button-primary) 80%, #000);
}

/* 3. Headings in the brand serif; Swift sets the family through --dw-font-family per role, this only
 *    guards elements that read font-family directly. */
.dw-h1, .dw-h2, .dw-h3, .dw-h4, .dw-h5, .dw-h6 { font-family: var(--dw-font-family, Platypi), Georgia, serif; }

/* 4. Megamenu hover gap (Swift 2.4, memory swift-megamenu-hover-gap): let the panel's apron reach the item. */
.megamenu-wrapper .megamenu.dropdown-menu { overflow: visible; max-height: none; }
.nav-item.dropdown > .dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--swift-dynamic-offset, 1rem);
}

/* 5. Eyebrow: the brand accent per scheme (cyan on the dark olive band, green shade on light). */
.dw-eyebrow { letter-spacing: .22em; }

/* 6. Header nav: eight HMI top categories plus the search field must fit a 1366-1600 laptop. Tighter link padding
 *    and type, and the search column keeps a usable minimum instead of collapsing to 0 and pushing the page wide. */
.megamenu-wrapper > nav.d-flex { gap: 0 !important; }
.megamenu-wrapper > nav > .nav-item > .nav-link { padding: .5rem .5rem !important; font-size: .875rem; }
header [data-swift-gridrow="2ColumnsFlex"] [data-swift-gridcolumn].flex-fill { min-width: 200px; }
@media (max-width: 1399.98px) {
  .megamenu-wrapper > nav > .nav-item > .nav-link { padding: .5rem .3rem !important; font-size: .8125rem; }
}

/* 7. Phone canvas: footer nav links are text-nowrap in Swift; "Open a wholesale account" in a half-width mobile
 *    footer column stretched the page to 398px at 390. Let them wrap. (Form labels are
 *    floating labels and must stay one line: keep form field labels under ~35 characters.) */
@media (max-width: 991.98px) {
  footer .nav-link.text-nowrap, [data-swift-page-footer] .nav-link.text-nowrap { white-space: normal !important; }
}

/* 8. Phone: category tiles are two-up; at ~170px a card cannot carry title, sentence and a "Shop ..." link without
 *    breaking words. Below 576px the tile is image + title (the whole card is a stretched link). */
@media (max-width: 575.98px) {
  [data-swift-gridrow="4Columns"] [data-dw-itemtype="swift-v2_card"] .card-body { padding: .75rem; }
  [data-swift-gridrow="4Columns"] [data-dw-itemtype="swift-v2_card"] .card-body p,
  [data-swift-gridrow="4Columns"] [data-dw-itemtype="swift-v2_card"] .card-body .btn { display: none; }
  [data-swift-gridrow="4Columns"] [data-dw-itemtype="swift-v2_card"] .card-body .dw-h5 { font-size: 1rem; hyphens: manual; overflow-wrap: normal; }
  /* mobile header: menu | logo | cart | account stay on one line */
  header [data-swift-gridrow="4ColumnsFlex"] > [data-swift-container] { flex-wrap: nowrap; }
}