/* ============================================================
   Invisible-Light Labs — shared site chrome
   Reusable across subdomains. Pair with header.html, footer.html
   and site.js.

   Everything here is reproduced from the invisible-lights theme
   (style.css + template-parts/layout/*.php). Where a value comes
   from the theme it is noted, so it can be checked against source.

   Assets expected next to the page:
     img/   ILL_logoanim_black.gif, ILL_logoanim_white.gif,
            ILL_logo_black.svg, ILL_logo_white.svg,
            fallback-menu-bg.png, footer-bg.png, linkedin.png
     fonts/ FavoritStd-Regular.woff2, FavoritStd-Medium.woff2,
            Montserrat-VariableFont_wght.ttf, Montserrat-Bold.ttf
   ============================================================ */

/* Both brand faces are served from this host, copied out of the theme.
   No cross-origin font fetch, and no third-party CDN — the main site
   self-hosts for GDPR reasons. */
@font-face{font-family:'Favorit Std';src:url('fonts/FavoritStd-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Favorit Std';src:url('fonts/FavoritStd-Medium.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat-Bold';src:url('fonts/Montserrat-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* ILL design system */
  --ill-blue:#222549; --ill-violet:#b22e61; --ill-orange:#de4c2e;
  --ill-yellow:#f5a629; --ill-beige:#fffee5; --ill-ink:#3c3c3b; --white:#fff;
  --neutral-50:#faf9f6; --neutral-100:#f1f0ec; --neutral-200:#e3e2dc;
  --neutral-300:#cbcac3; --neutral-500:#7a7975;
  --blue-900:#15172e; --orange-hover:#c63f23;
  --surface-paper:var(--neutral-50); --surface-sunken:var(--neutral-100);
  --text-strong:var(--ill-ink); --text-body:#4a4a48; --text-muted:var(--neutral-500);
  --border-subtle:var(--neutral-200); --border-default:var(--neutral-300);

  --font-sans:'Favorit Std','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-label:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-display:'Montserrat-Bold','Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem;
  --text-md:1.125rem; --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem;
  --leading-tight:1.04; --leading-snug:1.18; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-.02em; --tracking-display:-.015em; --tracking-wide:.04em; --tracking-label:.16em;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem;

  --radius-sm:4px; --radius-md:8px; --radius-pill:999px;
  --gradient-night:radial-gradient(120% 140% at 100% 120%,#f5a629 0%,#de4c2e 18%,#b22e61 38%,#222549 64%,#15172e 100%);
  --scrim-ink:linear-gradient(180deg,rgba(21,23,46,0) 0%,rgba(21,23,46,.55) 100%);
  --ease-standard:cubic-bezier(.2,0,0,1); --dur-base:200ms;
  --focus-ring:0 0 0 3px rgba(222,76,46,.45);
  --ill-star:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="33 33 59 59"><path fill="%23000" d="m 71,62.9 c 0.1,-7.5 21,-29.2 21,-29.2 0,0 -21.7,21 -29.2,21 -7.5,-0.1 -29.2,-21 -29.2,-21 0,0 20.9,21.7 21,29.2 v -0.3 c -0.1,7.5 -21,29.2 -21,29.2 0,0 21.7,-21 29.2,-21 7.5,0.1 29.2,21 29.2,21 0,0 -20.9,-21.7 -21,-29.2"/></svg>');

  /* theme: p-4 pt-6 lg:px-16 */
  --shell-x:1rem;
  --measure-max:1520px;
  /* the title starts where the logo ends and the description ends where the
     burger begins, so both keep these as their single source of truth */
  --logo-w:14rem;
  --burger-w:75px;
  /* breathing room between the logo/burger and the title/description */
  --title-gap:1.5rem;
  /* space below the masthead, i.e. between the logo and the page title */
  --header-pb:.25rem;
  /* air under the logo while the title is stacked - one value at every width */
  --title-stack-gap:0.0rem;
  /* gap between title and description while stacked; tracks the title's
     font-size breakpoint, tighter while the title is 2.25rem */
  --title-desc-gap:0.5rem;
  /* the title's furthest-right rest position, and the description's mirror */
  --title-indent-max:calc(var(--shell-x) + var(--logo-w) + var(--title-gap));
  --desc-indent-max:calc(var(--shell-x) + var(--burger-w) + var(--title-gap));
  /* the title's furthest-LEFT position: the "I" of Invisible in the wordmark, so
     the page title sets flush with it. Measured off ILL_logoanim_black.gif - the
     star runs x 15..214 and the wordmark starts at x 271 of its 1800px width, on
     every one of the 219 frames, i.e. 14.50% of the rendered logo width. */
  --title-indent-min:calc(var(--shell-x) + var(--logo-w) * .1450);
  /* measured by site.js so sticky page furniture can clear the masthead */
  --header-h:0px;
}
@media (min-width:1024px){ :root{ --shell-x:4rem; --logo-w:18rem; --title-desc-gap:1rem } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--text-body);font-family:var(--font-sans);
  font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;
  text-wrap:pretty;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-sans);font-weight:500;color:var(--text-strong);
  letter-spacing:var(--tracking-display);line-height:var(--leading-tight);margin:0 0 var(--space-4)}
p{margin:0 0 var(--space-4)}
a{color:var(--ill-orange);text-decoration:none}
a:hover{color:var(--orange-hover);text-decoration:underline}
strong,b{font-weight:500;color:var(--text-strong)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
code{font-family:var(--font-mono);font-size:.86em;background:var(--surface-sunken);
  padding:.12rem .38rem;border-radius:var(--radius-sm)}
img{max-width:100%;height:auto;display:block}

.shell{max-width:var(--measure-max);margin:0 auto;padding-left:var(--shell-x);padding-right:var(--shell-x)}

/* ============================================================
   MASTHEAD  —  template-parts/layout/header-content.php
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:var(--white)}

/* Theme behaviour: the header itself becomes full-screen when the menu opens
   and carries the menu background; the nav lives inside it. The shader mixes
   a solid-black overlay at uOverlayOpacity .3 over the gradient, which is what
   makes the white logo, white nav and white burger lines readable — so the
   same 30% black sits over the fallback image here. */

/* the background lives on a pseudo-element and fades, so the burger animation
   stays readable on top of it instead of being snapped over */
.site-header::before{content:"";position:fixed;top:0;left:0;width:100vw;height:100dvh;
  z-index:0;opacity:0;visibility:hidden;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),
             #15172e url(img/fallback-menu-bg.png) center/cover no-repeat;
  transition:opacity 320ms var(--ease-standard),visibility 0s linear 320ms}
.site-header[data-menu="open"]::before{opacity:1;visibility:visible;
  transition:opacity 320ms var(--ease-standard)}
.site-header__bar{position:relative;z-index:2}

.site-header__bar{display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem var(--shell-x) var(--header-pb);flex:none}
@media (min-width:1024px){ .site-header__bar{padding:4rem var(--shell-x) var(--header-pb)} }

.site-logo{display:block;width:var(--logo-w);flex:none}      /* theme: w-56 lg:w-72 */
/* 1800x370 native; aspect-ratio reserves the box so the 219-frame gif
   cannot shift the masthead while it loads */
.site-logo img{width:100%;height:auto;aspect-ratio:1800/370}
.site-logo .logo-open{display:none}
.site-header[data-menu="open"] .logo-closed{display:none}
.site-header[data-menu="open"] .logo-open{display:block}

/* Burger: full line · two third-width dashes · full line.
   script-other.min.js swaps bg-black -> bg-white while the menu is open. */
.menu-toggle{display:flex;align-items:center;justify-content:center;
  width:var(--burger-w);height:50px;border:0;background:transparent;border-radius:var(--radius-pill);
  cursor:pointer;padding:0;flex:none;
  overflow:hidden}   /* theme clips the box so the dashes slide out of sight */
.menu-toggle__lines{display:flex;flex-direction:column;justify-content:space-between;
  width:26px;height:20px}
.menu-toggle__lines i{display:block;height:2px;background:#000;
  /* colour flips late so the lines stay dark while the background is still pale */
  transition:transform 300ms var(--ease-standard),background-color 200ms var(--ease-standard) 150ms}
/* the two full-width lines are the DIRECT children; the short dashes sit inside
   .menu-toggle__mid, so the bottom line is child 3, not 4 */
.menu-toggle__lines > i{width:100%;transform-origin:center}
.menu-toggle__mid{display:flex;justify-content:space-between;width:100%}
.menu-toggle__mid i{width:33%;border-radius:2px}
.site-header[data-menu="open"] .menu-toggle__lines i{background:#fff}
.menu-toggle[aria-expanded="true"] .menu-toggle__lines > i:first-child{transform:translateY(9px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__lines > i:last-child{transform:translateY(-9px) rotate(-45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__mid i:first-child{transform:translateX(-5rem)}
.menu-toggle[aria-expanded="true"] .menu-toggle__mid i:last-child{transform:translateX(5rem)}

/* .header_menu_class in style.css — note the theme's breakpoint here is 768px */
.site-menu{position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:1;
  display:none;overflow-y:auto;
  padding:var(--header-h) var(--shell-x) var(--space-9);
  scrollbar-width:none}   /* still scrolls; the bar would sit mid-screen */
.site-menu::-webkit-scrollbar{display:none}
.site-header[data-menu="open"] .site-menu{display:block}
@media (min-width:768px){ .site-header[data-menu="open"] .site-menu{width:50vw;padding-left:7rem;padding-right:4rem} }
.site-menu ul{list-style:none;margin:4rem 0;padding:0;display:flex;flex-direction:column}
@media (min-width:1024px){ .site-menu ul{margin-top:3.5rem;padding-top:1rem} }
.site-menu li{padding:.5rem 0;text-align:start}
@media (min-width:768px){ .site-menu li{padding:1.5rem 0} }
.site-menu a{font-family:var(--font-label);font-size:1.5rem;line-height:2rem;
  text-transform:uppercase;text-decoration:none;color:var(--white)}
@media (min-width:768px){ .site-menu a{font-size:3rem;line-height:1} }
/* theme swaps the family on hover; reserve the bold width so nothing reflows */
.site-menu a:hover{font-family:var(--font-display);color:var(--white);text-decoration:none}

/* ============================================================
   PAGE TITLE + DESCRIPTION  —  .page-title-desc-block in style.css
   Stacked on mobile; title left / description right from 1024px.
   ============================================================ */
/* Stacked on a phone at the normal gutter - there is no room to indent there.
   From 1024px the block tracks the window like the masthead does (max-width
   none, so it is not pulled inward by the content measure) and is inset by the
   logo on the left and the burger on the right: the title starts exactly where
   the logo ends, the description ends exactly where the burger begins. */
.page-title-desc-block{margin-bottom:2rem;display:flex;width:100%;
  flex-direction:column;align-items:flex-start;
  padding-top:var(--title-stack-gap);padding-bottom:0;
  padding-left:var(--title-indent-min);padding-right:var(--shell-x)}
/* side by side only once the description still fits 3 lines (measured: 440px
   -> 4 lines at 1024, 478px -> 3 lines at 1100). Below that it stacks. */
@media (min-width:1100px){
  .page-title-desc-block{margin-bottom:3rem;flex-direction:row;padding-top:0;max-width:none;
    /* The indent slides rather than jumping: fully inset by the logo (left) and
       the burger (right) from 1500px, easing back as the window narrows and
       stopping at the gutter - the star's own x position - at 1100px. clamp()
       fixes both ends from the tokens; the vw term only sets the slope between
       them, so 78vw/24.75vw are just the line through those two points. */
    padding-left:clamp(var(--title-indent-min), calc(78vw - 794px), var(--title-indent-max));
    padding-right:clamp(var(--shell-x), calc(24.75vw - 208.25px), var(--desc-indent-max))}
  /* size the title to its own text instead of a flat 50%, or the narrowing
     column breaks the word ("Securit / y") */
  .page-title-desc-block .page-title-custom{width:auto;flex:0 0 auto;white-space:nowrap;padding-right:3rem}
  /* anchored right: flex-grow 0 plus an auto left margin sends the free space
     to the gap, so the paragraph keeps its measure and its right edge stays
     pinned to the inset as the window widens */
  /* max-content basis, so it sets on one line whenever there is room for it.
     flex-grow 0 + auto left margin park it against the right inset; flex-shrink
     lets it give way from the left as the window narrows, which keeps the right
     edge pinned rather than the left. */
  .page-title-desc-block .page-description-custom{width:max-content;max-width:100%;
    flex:0 1 auto;min-width:0;margin-left:auto;padding-top:0}
}
/* full black, matching .page-title-custom on the live site (rgb(0,0,0)) */
.page-title-custom{margin:0;font-family:var(--font-display);font-weight:700;
  font-size:2.25rem;line-height:2.5rem;letter-spacing:.1em;color:#000;
  word-break:break-word;overflow-wrap:break-word}
@media (min-width:1024px){ .page-title-custom{font-size:4.5rem;line-height:1} }
.page-description-custom{margin:0;width:100%;padding-top:var(--title-desc-gap);
  font-family:var(--font-sans);font-size:1.125rem;line-height:1.75rem;color:var(--text-body)}
@media (min-width:1024px){ .page-description-custom{font-size:1.875rem;line-height:2.25rem} }

/* ============================================================
   FOOTER  —  template-parts/layout/footer-content.php
   ============================================================ */
/* The theme rule is exactly three properties:
     .footer-bg{background-image:url("img/footer-bg.png");background-size:cover;height:900px}
   footer-bg.png is RGBA and its alpha ramps 0 -> 255 over the first ~20% of the
   image, which is what makes the gradient vanish into the page above. Any
   background-color, any second layer, or a centred background-position fills or
   crops that transparent band and the fade is lost. */
.site-footer{position:relative;width:100%;height:900px;color:var(--white);
  background-image:url(img/footer-bg.png);
  background-size:cover}
.site-footer__cta{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:15rem var(--shell-x) 0;margin-bottom:1.5rem}   /* pt-60 lg:pt-80 */
@media (min-width:1024px){ .site-footer__cta{padding-top:20rem} }
.site-footer__cta p{font-family:var(--font-label);text-transform:uppercase;
  font-size:1.5rem;line-height:2rem;margin:0 0 1.5rem}
@media (min-width:1024px){ .site-footer__cta p{font-size:3rem;line-height:1} }
.site-footer__cta a{font-family:var(--font-sans);font-weight:300;font-size:1.125rem;
  color:var(--white);text-decoration:underline}
@media (min-width:1024px){ .site-footer__cta a{font-size:1.875rem} }
.site-footer__cta a:hover{color:var(--white)}
.site-footer__base{position:absolute;left:0;bottom:6rem;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;padding-left:1rem}
@media (min-width:1024px){ .site-footer__base{padding-left:5rem} }
.site-footer__base .wordmark{width:15rem;height:5rem;margin-bottom:2.5rem}
@media (min-width:1024px){ .site-footer__base .wordmark{margin-left:2rem;margin-bottom:4rem} }
.site-footer__row{display:flex;justify-content:space-between;align-items:center;
  width:100%;font-size:.75rem;gap:var(--space-4)}
@media (min-width:1024px){ .site-footer__row{font-size:.875rem} }
.site-footer__links{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;min-width:0}
@media (min-width:1024px){ .site-footer__links{flex-direction:row;align-items:center;flex-wrap:wrap;gap:.75rem 2.5rem;margin-left:-1.5rem} }
@media (min-width:1400px){ .site-footer__links{gap:0 4rem} }
.site-footer__links a{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.1em;color:var(--white);font-size:.75rem}
@media (min-width:1024px){ .site-footer__links a{font-size:.875rem} }
.site-footer__links a:hover{color:var(--white);text-decoration:none}
.site-footer__copy{display:flex;flex-direction:column;align-items:flex-start;
  font-size:10.5px;line-height:1.25}
.site-footer__copy p{margin:0}
/* the theme shows a short link set on mobile and the full set from lg up */
.only-mobile{display:block}
.only-desktop{display:none}
@media (min-width:1024px){ .only-mobile{display:none} .only-desktop{display:block} }
.site-footer__in{padding-right:.5rem;align-self:flex-end;flex:none}
@media (min-width:1024px){ .site-footer__in{padding-right:5rem} }
.site-footer__in img{width:2.5rem;height:2.5rem}

@media print{
  .menu-toggle,.site-menu{display:none}
  .site-header{position:static}
  .site-footer{height:auto;padding-bottom:2rem;background:var(--ill-blue)}
  .site-footer__base{position:static;margin-top:2rem}
  .site-footer__cta{padding-top:2rem}
  .site-footer{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}