/* ============================================================
 CAMO ENERGY — style2-shared.css
 Shared Style 02 shell: header, primary navigation, footer.
 Every rule is scoped to html[data-style="2"] (except the helper's
 non-style-02 half), so Styles 01/03/04/05 are unaffected.
 Link directly after themes.css. Page-specific Style 02 rules stay
 in their own page.
 ============================================================ */

/* ---------- Style 02 show/hide helper ----------
 .s2-only : present only in Style 02.  .s2-hide : hidden in Style 02. */
html:not([data-style="2"]) .s2-only, html[data-style="2"] .s2-hide{display:none !important}

/* ---------- header: neutral stone/greige with fine tonal CAMO (cool left, warm right) ----------
 Logos (header and footer): Style 02 shows the black-and-green logo via markup (.s2-only <img>), not CSS replacement. */
html[data-style="2"] header:has(>.nav3){background:
  url(/assets/img/camo-pattern-nav.svg) 0 0 / 1800px 120px repeat,
  linear-gradient(90deg, rgba(150,166,172,.14), transparent 38%, transparent 62%, rgba(196,176,140,.14)),
  linear-gradient(180deg, #ebe8e2 0%, #ddd8cf 100%)}

/* ---------- primary navigation: EDGE · GLOW · SCIENCE | logo | OUR STORY · FIND CAMO · SHOP · CART ---------- */
html[data-style="2"] .nav3 .nav-left a, html[data-style="2"] .nav3 .nav-right a,
html[data-style="2"] .nav3 .nav-left a:hover, html[data-style="2"] .nav3 .nav-right a:hover{color:#242622}
/* hover underline colour by side: EDGE side green, GLOW side champagne-gold (same gold as the GLOW slogan accents) */
html[data-style="2"] .nav3 .nav-left a{--nav-u:#39FF14}
html[data-style="2"] .nav3 .nav-right a{--nav-u:#D2AE6E}
@media (min-width:901px){
  html[data-style="2"] .nav3 .nav-left a, html[data-style="2"] .nav3 .nav-right a{font-size:15px; font-weight:700; letter-spacing:.07em}
  /* balance: the 3-item left group is spread wider so it carries similar visual weight to the 4-item + cart right group;
     both groups stay anchored to the outer edges and the logo stays at true centre (1fr | auto | 1fr grid) */
  html[data-style="2"] .nav3 .nav-left{gap:clamp(44px, 6.1vw, 88px)}
}
@media (min-width:681px){   /* 2px underline growing from the centre on hover (desktop/tablet bar only, not the mobile menu) */
  html[data-style="2"] .nav3 .nav-left a, html[data-style="2"] .nav3 .nav-right a{position:relative}
  html[data-style="2"] .nav3 .nav-left a::after, html[data-style="2"] .nav3 .nav-right a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background:var(--nav-u); transform:scaleX(0); transform-origin:center; transition:transform .2s ease}
  html[data-style="2"] .nav3 .nav-left a:hover::after, html[data-style="2"] .nav3 .nav-right a:hover::after,
  html[data-style="2"] .nav3 .nav-left a:focus-visible::after, html[data-style="2"] .nav3 .nav-right a:focus-visible::after,
  html[data-style="2"] .nav3 .nav-left a[aria-current="page"]::after, html[data-style="2"] .nav3 .nav-right a[aria-current="page"]::after{transform:scaleX(1)}   /* current page: underline held at full width */
}
@media (prefers-reduced-motion:reduce){ html[data-style="2"] .nav3 a::after{transition:none} }

/* ---------- footer: bookends the header (same CAMO tile, side tint and stone gradient) ---------- */
html[data-style="2"] footer.site-foot{background:
  url(/assets/img/camo-pattern-nav.svg) 0 0 / 1800px 120px repeat,
  linear-gradient(90deg, rgba(150,166,172,.14), transparent 38%, transparent 62%, rgba(196,176,140,.14)),
  linear-gradient(180deg, #ebe8e2 0%, #ddd8cf 100%)}
/* footer content: black-and-green logo shown via markup (.s2-only <img>), larger and stronger type */
html[data-style="2"] footer.site-foot .fcols img{width:210px; height:auto}
html[data-style="2"] footer.site-foot .fcols p{font-size:14px; line-height:1.6; color:#3b3d37; max-width:30ch}
/* brand statements (Style 02 markup): definition first (small, supporting), then the tagline (larger, bolder) */
html[data-style="2"] footer.site-foot .fcols p.fbrand-def{margin:16px 0 0; max-width:none; font-size:15px; font-weight:500; line-height:1.45; letter-spacing:.04em; text-transform:uppercase; color:#3b3d37}
html[data-style="2"] footer.site-foot .fcols p.fbrand-tag{margin:12px 0 0; max-width:none; font:700 19px/1.2 "DIN Alternate", Bahnschrift, "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  letter-spacing:.05em; text-transform:uppercase; color:#0d0f0e}
html[data-style="2"] footer.site-foot .fcols a{font-size:18px; font-weight:650; line-height:1.4; color:#242622; margin:14px 0}
html[data-style="2"] footer.site-foot .fcols a:hover{color:#0d0f0e}
/* compact footer (desktop ~215px): less top/bottom padding and slightly tighter brand-statement / mobile link spacing; logo, text and layout unchanged */
html[data-style="2"] footer.site-foot{padding:clamp(18px, 1.4vw, 20px) 0}
html[data-style="2"] footer.site-foot .fcols p.fbrand-def{margin-top:8px}
html[data-style="2"] footer.site-foot .fcols img.s2-only{margin-bottom:4px !important}   /* overrides the inline 10px under the logo */
html[data-style="2"] footer.site-foot .fcols p.fbrand-tag{margin-top:8px}
@media (max-width:680px){
  html[data-style="2"] footer.site-foot .fcols{row-gap:12px}
  html[data-style="2"] footer.site-foot .fcols a{margin:8px 0}
}