/* ========================================================================
   BRISTLECONE.CO – GLOBAL THEME & LAYOUT STYLESHEET
   ------------------------------------------------------------------------
   2025-08-01 optimisation pass (Rev F-clean):
     • Removed legacy nav-menu gradients now superseded by glass-and-wash setup
     • Kept blur, isolation and radial wash logic intact
   ======================================================================= */

/* ------------------------------------------------------------------------
   SECTION 01 : GLOBAL DESIGN TOKENS
---------------------------------------------------------------------------*/
:root {
  --text:          #504B46;
  --text-light:    #69645F;
  --gray-3:        #9B9691;
  --gray-4:        #C8C3BE;
  --gray-5:        #DED9D3;
  --bg:            #F0EBE6;

  --font-body:     'Montserrat', sans-serif;

  --content-max:    700px;
  --content-gutter: 1.5rem;

  /* NEW: header top padding that scales 600px→768px (min → max) */
  /* Uses 24px as the numeric equivalent of 1.5rem so the middle term stays unit-safe */
  --content-gutter-top: clamp(
    var(--content-gutter),
    calc(24px + 0.0952380952 * (100vw - 600px)), /* 16/168 ≈ 0.0952380952 */
    40px
  );

  --safe-top:      env(safe-area-inset-top, 0);
  --safe-bottom:   env(safe-area-inset-bottom, 0);

  --nav-breakpoint: 900px;
  --logo-width:     250px;
}

/* ------------------------------------------------------------------------
   SECTION 02 : BACKGROUND COLOUR LAYER
---------------------------------------------------------------------------*/
html { background: var(--bg); overflow-x: hidden; }
body { background: transparent; }

/* ------------------------------------------------------------------------
   SECTION 03 : GLOBAL RESET & BODY BASELINE
---------------------------------------------------------------------------*/
* { box-sizing: border-box; margin: 0; padding: 0; color: var(--text); }

body {
  font-family: var(--font-body);
  min-height: 100dvh;
  display: flex; flex-direction: column;
  line-height: 1.6;
  font-size: 14px;
}
body.menu-open { overflow: hidden; }

nav a            { text-transform: lowercase; }
main.content h2  { text-transform: capitalize; }
main.content h3  { }

/* ------------------------------------------------------------------------
   SECTION 04 : SITE HEADER & PRIMARY NAVIGATION
---------------------------------------------------------------------------*/
header,
header.internal-header {
  --header-pad: clamp(
      var(--content-gutter),
      calc(32px + (100vw - 764px) * 0.1186440678),
      60px
  );

  /* Apply: top padding scales 40px → gutter across 768→600 */
  padding: var(--content-gutter-top) var(--header-pad) 0;

  width: 100%;
  display: flex; align-items: flex-start;
  margin-bottom: clamp(
    20px,
    calc(20px + (80 - 20) * ((100vw - 600px) / (768 - 600))),
    80px
  );
}
header                { justify-content: flex-end; }
header.internal-header{ justify-content: space-between; }

.icon-logo {
  width: var(--logo-width);
  max-width: 250px;
  min-width: 200px;
  height: auto;
  transition: width .12s linear;
}

nav            { display: flex; gap: 30px; }
nav a          { text-decoration: none; font-weight: 400; }
nav a.active,
nav a:hover    { color: var(--gray-4); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 30;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text);
  transition: transform .3s, opacity .3s;
}
.nav-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity: 0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

body.auto-menu .nav-toggle {
  display: flex; flex-direction: column; gap: 4px;
}

/* ───────── CLEANED -- no gradient, glass handled later ───────── */
body.auto-menu nav.nav-menu {
  position: absolute;
  top: var(--safe-top); left: 0;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: transparent;        /* ← gradient removed */
  backdrop-filter: blur(6px);
  min-height: 100dvh;
  padding: 24px 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  border-top: 1px solid var(--gray-5);
  transition: max-height .3s ease, opacity .3s ease;
  z-index: 10;
}
body.auto-menu nav.nav-menu.open {
  max-height: 100vh; opacity: 1; overflow: auto; pointer-events: auto;
}

/* ∞∞∞  NAV MENU – split layers (blur · wash · text)  ∞∞∞ */
body.auto-menu nav.nav-menu{
  /* glass & stacking context */
  isolation:isolate;
}

/* text layer */
body.auto-menu nav.nav-menu a{ mix-blend-mode:multiply; }

/* wash layer (starts hidden) */
body.auto-menu nav.nav-menu::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;                           /* behind links, inside menu */
  background:radial-gradient(
              circle at 50% 0%,
              var(--bg) 15%,
              rgba(240,235,230,0) 80%);
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}

/* toggle the wash by adding .wash */
body.auto-menu nav.nav-menu.wash::before{ opacity:1; }


/* ------------------------------------------------------------------------
   SECTION 05 : HOME PAGE HERO (.intro)
---------------------------------------------------------------------------*/

.intro{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:flex;                   /* centre children horizontally */
  flex-direction:column;
  align-items:center;
  width:fit-content;              /* shrink-wrap so 50/-50 stays true */
}

.intro-logo{
  display:block;
  width:clamp(240px,40vw,400px);  /* smooth scaling desktop→mobile */
  height:auto;
}

/* tagline hugs the ‘B/A’ align line inside the logo */
.intro .tagline{
  margin-top:48px;
  font-size:16px;
  text-align:left;
  align-self:flex-start;
  padding-left:var(--tag-offset,0);   /* JS writes this value */
  opacity:0;visibility:hidden;
  transition:opacity 8s ease;
}

.intro-logo.visible,
.intro .tagline.visible{opacity:1;visibility:visible;}

/* Tagline gets a slower fade */
.intro .tagline {
  margin-top: 48px;
  font-size: 16px;
  transition: opacity 8s ease;
}

/* ------------------------------------------------------------------------
   SECTION 06 : GENERIC HERO (legacy .hero)
---------------------------------------------------------------------------*/
.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; }
.hero .icon-logo { width: 80%; max-width: 400px; min-width: 180px; height: auto; }
.tagline { font-size: 16px; margin-top: 40px; }

/* ------------------------------------------------------------------------
   SECTION 07 : MAIN CONTENT (About / Contact / etc.)
---------------------------------------------------------------------------*/
main.content {
  width: min(calc(100vw - (var(--content-gutter) * 2)), var(--content-max));
  max-width: var(--content-max);
  margin: 0px auto 0;
}
main.content h2 { font-size: 22px; margin-bottom: 20px; font-weight: 600; }
main.content h3 { font-size: 16px; margin: 20px 0 10px; font-weight: 600; }
main.content p  { margin-bottom: 24px; text-align: justify; text-align-last: left; }
main.content b  { font-weight: 500; }
ul.list { padding-left: 2rem; }

.customer-logos          { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 30px; align-items: center; justify-content: center; padding: 0; }
.customer-logos img      { width: 150px; filter: brightness(0) saturate(100%) invert(18%) sepia(6%) saturate(681%) hue-rotate(3deg) brightness(93%) contrast(94%); opacity: .5; transition: opacity .3s; }
.customer-logos img:hover{ opacity: .8; }

/* ------------------------------------------------------------------------
   SECTION 07.1 : MAIN CONTENT (Images)
---------------------------------------------------------------------------*/
.image-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--content-gutter);
  margin: auto;

  padding: 0px var(--content-gutter) 0px;

  /* full-bleed alignment beyond main content */
  width: 80dvw;
  box-sizing: border-box;
}

.image-flex img {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-2);
}

/* Optional: vertical stacking on narrow viewports */
@media (max-width: 768px) {
  .image-flex {
    flex-direction: column;
    width: 100dvw;
  }

  .image-flex img {
    width: 100%;
  }
}


/* ------------------------------------------------------------------------
   SECTION 08 : SITE FOOTER
---------------------------------------------------------------------------*/
.site-footer { position: relative; margin-top: auto; width: 100%; }

.footer-bar  { position: relative; width: 100%; min-height: 90px; margin-top:40px;}

.footer-disclaimer {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(40px + var(--safe-bottom));
  font-size: 12px; color: var(--gray-3); font-weight: 400;
  padding: 0 0 4px;
}

.social-links {
  position: absolute; right: 60px;
  bottom: calc(40px + var(--safe-bottom));
  display: flex; gap: 20px;
}
.social-links a       { font-size: 25px; transition: opacity .3s; }
.social-links a:hover { opacity: .6; }

.footer-logo { display: none !important; }

/* ------------------------------------------------------------------------
   SECTION 09 : MOBILE OPTIMISATIONS (≤ 600 px)
---------------------------------------------------------------------------*/
@media (max-width: 600px) {
  header,
  header.internal-header {
    /* per request: exactly the gutter on top at ≤600px */
    padding: var(--content-gutter) var(--content-gutter) 0;
  }

  .nav-toggle { display: flex; flex-direction: column; gap: 4px; }

  /* ───── same clean-up: transparent background, no obsolete gradient ───── */
  nav.nav-menu {
    position: absolute;
    top: var(--safe-top); left: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background: transparent;            /* ← gradient removed */
    backdrop-filter: blur(6px);
    min-height: 100dvh;
    padding: 24px 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    border-top: 1px solid var(--gray-5);
    transition: max-height .3s ease, opacity .3s ease;
    z-index: 10;
  }
  nav.nav-menu.open { max-height: 100vh; opacity: 1; overflow: auto; pointer-events: auto; }

  /* smooth, continuous scaling logo */
  .intro-logo{
    /* grows from 150 px on the smallest phones up to 350 px,
       then hands off to the desktop rule at ~580 px */
    width: clamp(150px, 70vw, 240px);
    transition: width .25s ease;        /* removes the ‘snap’ */
  }

  /* tagline tracks the logo proportionally */
  .intro .tagline{
    font-size: clamp(12px, 3.8vw, 16px);   /* NEW */
    margin-top: clamp(24px, 6vw, 48px);
    transition: font-size .25s ease, margin-top .25s ease;
  }
  
  main.content    { margin-top: 0px; }
  main.content h2 { font-size: 18px; font-weight: 500; }
  main.content h3 { font-size: 14px; font-weight: 500; }

  .footer-bar {
    position: static !important;
    display: flex; flex-direction: column; align-items: center;
    padding: 0 var(--content-gutter) calc(20px + var(--safe-bottom));
    min-height: auto;
  }
  .footer-disclaimer {
    position: static !important;
    margin: 0 auto 0;
    max-width: 100%;
    padding: 0;
    text-align: center;
    font-size: 11px;
    line-height: 1.4;
    transform: none !important;
  }
  .social-links {
    position: static !important;
    display: flex; justify-content: center; gap: 24px;
    margin-bottom: 10px;
  }

  .icon-logo { width: 200px; }
}

@media (max-height: 450px) and (orientation: landscape) {
  .intro .tagline { font-size: 14px; margin-top: 8px; }
}

/* ------------------------------------------------------------------------
   SECTION 10 : BACKGROUND SLIDESHOW
---------------------------------------------------------------------------*/
.slideshow-container,
.slideshow-overlay {
  position: fixed;
  right: 0; left: 0;
  width: 100vw;
  top:   calc(-1 * var(--safe-top));
  height: calc(100dvh + var(--safe-top));
  z-index: -2;
  overflow: hidden;
}
.slideshow-overlay { z-index: -1; pointer-events: none; }

.slideshow-container img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.slideshow-container img.show { opacity: .5; }

.slideshow-overlay { background: var(--bg); opacity: .85; }

/* ------------------------------------------------------------------------
   SECTION 10.5 : LIGHTBOX / GALLERY (global) – rev D
   - Softer, gradient backdrop
   - Clear ◀ ▶ chevrons
   - Close '×' always on top; arrow hit-areas avoid top-right
   - Reserved caption gutter so caption sits below image
---------------------------------------------------------------------------*/
/* ============================================================
   LIGHTBOX – containment + scoping hardening (safe patch)
   Place after the existing lightbox section
   ============================================================ */

/* 1) Backdrop is fully inert until opened */
.lightbox-backdrop{
  position: fixed;
  inset: 0;
  display: none;          /* removed from layout */
  pointer-events: none;   /* can't intercept clicks */
  visibility: hidden;     /* not painted */
  isolation: isolate;
  z-index: 9999;
  /* Prevent any accidental layout influence from descendants */
  contain: layout paint style;
}
.lightbox-backdrop.open{
  display: flex;
  pointer-events: auto;
  visibility: visible;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.72);
  /* keep your caption gap var available here */
  --lb-caption-gap: clamp(64px, 9vh, 128px);
}

/* 2) Scope all internals to the backdrop so nothing leaks into the page */
.lightbox-backdrop .lightbox-figure{
  margin: 0;
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-backdrop .lightbox-img{
  max-width: 100%;
  max-height: max(40vh, calc(92vh - var(--lb-caption-gap)));
  object-fit: contain;
  border-radius: var(--radius-2, 8px);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  transition: opacity .2s ease, transform .2s ease;
  cursor: pointer;
}

.lightbox-backdrop .lightbox-caption{
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 2.2vh, 32px);
  transform: translateX(-50%);
  color: #fff;
  opacity: .9;
  text-align: center;
  font: 400 .95rem/1.4 var(--font-body, system-ui);
  max-width: min(92vw, 900px);
}

.lightbox-backdrop .lightbox-close{
  position: fixed;
  top: var(--content-gutter, 24px);
  right: var(--content-gutter, 24px);
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 32px; line-height: 1;
  cursor: pointer;
  z-index: 5;
}

.lightbox-backdrop .lightbox-arrow{
  position: fixed;
  top: calc(var(--content-gutter,24px) + 64px);
  bottom: var(--content-gutter,24px);
  width: min(18vw, 140px);
  background: transparent; border: none; cursor: pointer; outline: 0;
  z-index: 1;
}
.lightbox-backdrop .lightbox-prev{ left: 0; }
.lightbox-backdrop .lightbox-next{ right: 0; }
.lightbox-backdrop .lightbox-arrow::before{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px;
  border: solid #fff; border-width: 0 3px 3px 0;
  opacity: .9;
  transform: translate(-50%, -50%) rotate(135deg); /* ◀ */
}
.lightbox-backdrop .lightbox-next::before{
  transform: translate(-50%, -50%) rotate(-45deg); /* ▶ */
}

.lightbox-backdrop .lightbox-counter{
  position: fixed;
  top: var(--content-gutter,24px);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  opacity: .85;
  font: 500 .9rem var(--font-body, system-ui);
  pointer-events: none;
  z-index: 4;
}

/* Optional failsafe: if any .lightbox-figure exists in normal flow,
   ensure it behaves like a regular figure and cannot reserve viewport height. */
main .lightbox-figure{
  display: block;
  max-height: none;
}

/* Show focus rings only for keyboard users */
:focus:not(:focus-visible) { outline: none; }

/* Optional: style for keyboard-visible focus (tweak color as you like) */
img[tabindex]:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(80,75,70,.35);
  outline-offset: 2px;
}

@media (hover:hover){
  .lightbox-arrow:hover::before{ opacity:1; }
  .lightbox-close:hover{ background:rgba(255,255,255,.1); }
}

/* ===================================================================
   SECTION 11 – HIDE VERTICAL SCROLLBAR GLOBALLY
   =================================================================== */
/* Chrome / Edge / Safari */
::-webkit-scrollbar { display:none; }

/* Firefox */
html{ scrollbar-width: none; }

/* Optional: macOS forces overlay scrollbars; this keeps things tidy */
body{ -ms-overflow-style: none; }   /* legacy IE / Edge */