/* =========================================================================
   CASE STUDY CHROME
   ColoredWeb Studio's header + footer, lifted verbatim from the inline
   <style> block in index.html so the case studies wear the same chrome as
   the rest of the site.

   WHY THIS FILE EXISTS AS A SEPARATE SHEET
   The case studies came over from the Afsar Mansuri portfolio and still load
   casestudy-base.css (that site's global sheet). Its :root declares
   --text-dim, --border, --border-soft and --ease with DIFFERENT values to
   CW's. Dropping CW's token block on top of it would silently repaint the
   case study bodies, so every token here is renamed --cw-*. Nothing in this
   file can reach the page content, and nothing in casestudy-base.css can
   reach the chrome.

   The selectors are safe as-is: casestudy-base.css styles its own chrome
   through .topbar / .topnav / .foot and never touches bare header, footer
   or nav, and it has no .wrap, .logo or .footer-* rules.

   Load order matters — this must come AFTER casestudy-base.css.
   ========================================================================= */

:root{
  --cw-bg:#060608;
  --cw-bg-alt:#0b0b0e;
  --cw-border:rgba(255,255,255,0.08);
  --cw-text:#f3f3f5;
  --cw-text-dim:#9a9aa3;
  --cw-text-dimmer:#5c5c66;
  --cw-purple:#b162fe;
  --cw-purple-glow:rgba(155,107,255,0.35);
  --cw-maxw:1280px;
  --cw-font:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* The case study bodies set their own font stack (Inter/Oswald/Anton). The
   chrome is CW furniture, so it re-declares CW's stack rather than
   inheriting the study's. */
.cw-chrome{
  font-family:var(--cw-font);
  -webkit-font-smoothing:antialiased;
}

.cw-chrome .wrap{
  max-width:var(--cw-maxw);
  margin:0 auto;
  padding:0 64px;
  position:relative;
}

/* -------------------------------------------------------------------------
   HEADER
   ---------------------------------------------------------------------- */
header.cw-chrome{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(6,6,8,0.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.cw-chrome .header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px;}
.cw-chrome .logo{font-size:13px;font-weight:700;letter-spacing:0.5px;line-height:1.35;display:flex;align-items:center;}
.cw-chrome .logo a{display:block;color:inherit;text-decoration:none;}
.cw-chrome .logo img{height:52px;width:auto;display:block;}

.cw-chrome nav{display:flex;gap:26px;align-items:center;}
.cw-chrome nav a{font-size:12px;font-weight:600;letter-spacing:1px;color:var(--cw-text-dim);position:relative;transition:color .3s ease;text-decoration:none;}
.cw-chrome nav a:hover{color:var(--cw-text);}
.cw-chrome nav a.active{color:var(--cw-text);}

/* Primary CTA button in the nav */
.cw-chrome nav a.nav-cta{padding:10px 20px;border:1px solid var(--cw-purple);border-radius:100px;color:var(--cw-purple);font-weight:700;letter-spacing:.6px;transition:background .3s ease,color .3s ease,box-shadow .3s ease;}
.cw-chrome nav a.nav-cta:hover{background:var(--cw-purple);color:#0c0512;box-shadow:0 12px 30px -12px var(--cw-purple-glow);}

/* -------------------------------------------------------------------------
   CASE STUDIES DROPDOWN
   Opens on hover and on keyboard focus (:focus-within), so it needs no JS.
   ---------------------------------------------------------------------- */
.cw-chrome .nav-dd{position:relative;display:flex;align-items:center;}
/* Vertical padding is SYMMETRIC (5px top and bottom, not 0/10px). The nav is
   a centred flex row, so bottom-only padding grew the button's box downward
   and pushed its label 5px above every sibling link's baseline. Symmetric
   padding keeps the same 24px box — so the menu still opens at the same
   y — while the label sits on the shared centre line. */
.cw-chrome .nav-dd-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:1px;color:var(--cw-text-dim);padding:5px 0;transition:color .3s ease;}
.cw-chrome .nav-dd-toggle:hover,
.cw-chrome .nav-dd:hover .nav-dd-toggle,
.cw-chrome .nav-dd:focus-within .nav-dd-toggle,
.cw-chrome .nav-dd-toggle.active{color:var(--cw-text);}
.cw-chrome .nav-dd-chevron{width:11px;height:11px;transition:transform .3s ease;}
.cw-chrome .nav-dd:hover .nav-dd-chevron,
.cw-chrome .nav-dd:focus-within .nav-dd-chevron{transform:rotate(180deg);}
.cw-chrome .nav-dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);min-width:172px;background:var(--cw-bg-alt);border:1px solid var(--cw-border);border-radius:12px;box-shadow:0 18px 40px -12px rgba(0,0,0,0.7);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:120;list-style:none;margin:0;}
.cw-chrome .nav-dd:hover .nav-dd-menu,
.cw-chrome .nav-dd:focus-within .nav-dd-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.cw-chrome .nav-dd-menu a{display:block;padding:10px 14px;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--cw-text-dim);white-space:nowrap;transition:background .25s ease,color .25s ease;}
.cw-chrome .nav-dd-menu a:hover{background:rgba(255,255,255,0.05);color:var(--cw-text);}
.cw-chrome .nav-dd-menu a.active{color:var(--cw-purple);}

.cw-chrome .nav-toggle{display:none;}

@media (max-width:760px){
  .cw-chrome .nav-dd{flex-direction:column;align-items:flex-start;width:100%;gap:0;}
  .cw-chrome .nav-dd-toggle{padding:0;}
  .cw-chrome .nav-dd-chevron{display:none;}
  /* The :hover / :focus-within variants MUST be listed here too.
     `.nav-dd:focus-within .nav-dd-menu` is (0,4,0) and outranks a plain
     `nav.open .nav-dd-menu` (0,3,1), so on touch — where tapping the button
     focuses it — the desktop `translateX(-50%)` centring survived inside the
     drawer and threw the submenu 32px out past the panel's left edge.
     Naming the states explicitly makes these (0,4,2) and lets them win.

     Same reason the :not(.open) guard below is spelled out three ways: a
     child's explicit pointer-events:auto beats an inherited none, so the
     closed submenu would otherwise stay invisibly tappable over the page. */
  .cw-chrome nav.open .nav-dd-menu,
  .cw-chrome nav.open .nav-dd:hover .nav-dd-menu,
  .cw-chrome nav.open .nav-dd:focus-within .nav-dd-menu{position:static;transform:none;opacity:1;pointer-events:auto;background:none;border:none;box-shadow:none;padding:12px 0 0 14px;min-width:0;gap:12px;z-index:auto;}
  .cw-chrome nav:not(.open) .nav-dd-menu,
  .cw-chrome nav:not(.open) .nav-dd:hover .nav-dd-menu,
  .cw-chrome nav:not(.open) .nav-dd:focus-within .nav-dd-menu{pointer-events:none;}
  .cw-chrome .nav-dd-menu a{padding:0;font-size:11.5px;color:var(--cw-text-dimmer);}
  .cw-chrome .nav-dd-menu a:hover{background:none;color:var(--cw-text);}

  /* Inherit the study's own gutter rather than hardcoding 20px: the content
     column (.shell) is padded with --gutter, which each study may redefine
     per breakpoint. Hardcoding left the logo 2px inboard of every content
     block on phones. The fallback keeps this honest if --gutter is absent. */
  .cw-chrome .wrap{padding:0 var(--gutter, 20px);}
  .cw-chrome .header-inner{padding-top:14px;padding-bottom:14px;}
  .cw-chrome .logo{padding-top:0;}
  .cw-chrome .logo img{height:42px;}
  .cw-chrome nav{
    position:absolute;top:calc(100% - 6px);right:20px;background:var(--cw-bg-alt);
    flex-direction:column;align-items:flex-start;padding:16px 20px;gap:16px;
    border:1px solid var(--cw-border);border-radius:10px;box-shadow:0 18px 40px -12px rgba(0,0,0,0.7);
    transform-origin:top right;transform:translateY(-8px) scale(0.96);opacity:0;pointer-events:none;
    transition:transform 0.25s ease, opacity 0.25s ease;
  }
  .cw-chrome nav.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;}
  .cw-chrome .nav-toggle{display:flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px;}
  .cw-chrome .nav-toggle span{width:20px;height:2px;background:var(--cw-text);}
}

/* -------------------------------------------------------------------------
   Nav drawer on narrow laptops and tablets.
   Adding CASE STUDIES widened the inline nav past the space between the logo
   and the header's right edge below about 1024px, so the drawer takes over
   from 1024px down rather than only below 760px. This block covers
   761–1024px only; the block above still owns everything under 760px,
   including the .wrap gutter change. Mirrors the same range added to the
   inline stylesheet of every other page on the site.
   ---------------------------------------------------------------------- */
@media (min-width:761px) and (max-width:1024px){
  .cw-chrome nav{
    position:absolute;top:calc(100% - 6px);right:0;background:var(--cw-bg-alt);
    flex-direction:column;align-items:flex-start;padding:16px 20px;gap:16px;
    border:1px solid var(--cw-border);border-radius:10px;box-shadow:0 18px 40px -12px rgba(0,0,0,0.7);
    transform-origin:top right;transform:translateY(-8px) scale(0.96);opacity:0;pointer-events:none;
    transition:transform 0.25s ease, opacity 0.25s ease;
  }
  .cw-chrome nav.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;}
  .cw-chrome .nav-toggle{display:flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px;}
  .cw-chrome .nav-toggle span{width:20px;height:2px;background:var(--cw-text);}

  .cw-chrome .nav-dd{flex-direction:column;align-items:flex-start;width:100%;gap:0;}
  .cw-chrome .nav-dd-toggle{padding:0;}
  .cw-chrome .nav-dd-chevron{display:none;}
  /* Same specificity story as the ≤760px block — see the note there. */
  .cw-chrome nav.open .nav-dd-menu,
  .cw-chrome nav.open .nav-dd:hover .nav-dd-menu,
  .cw-chrome nav.open .nav-dd:focus-within .nav-dd-menu{position:static;transform:none;opacity:1;pointer-events:auto;background:none;border:none;box-shadow:none;padding:12px 0 0 14px;min-width:0;gap:12px;z-index:auto;}
  .cw-chrome nav:not(.open) .nav-dd-menu,
  .cw-chrome nav:not(.open) .nav-dd:hover .nav-dd-menu,
  .cw-chrome nav:not(.open) .nav-dd:focus-within .nav-dd-menu{pointer-events:none;}
  .cw-chrome .nav-dd-menu a{padding:0;font-size:11.5px;color:var(--cw-text-dimmer);}
  .cw-chrome .nav-dd-menu a:hover{background:none;color:var(--cw-text);}
}

/* -------------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------- */
footer.cw-chrome{padding:30px 0;background:var(--cw-bg);border-top:1px solid var(--cw-border);}
.cw-chrome .footer-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px 12px;}
.cw-chrome .footer-left{font-size:11px;min-width:0;color:var(--cw-text);}
.cw-chrome .footer-left .brand{font-weight:700;letter-spacing:0.5px;}
.cw-chrome .footer-left .copy{color:var(--cw-text-dimmer);margin-top:6px;}
.cw-chrome .footer-right{display:flex;gap:16px;align-items:center;flex-shrink:0;}
.cw-chrome .footer-right a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--cw-border);border-radius:50%;color:var(--cw-text-dim);transition:color .3s ease, border-color .3s ease;text-decoration:none;}
.cw-chrome .footer-right a:hover{color:var(--cw-purple);border-color:var(--cw-purple-glow);}

@media (max-width:600px){
  .cw-chrome .footer-inner{flex-wrap:nowrap;align-items:flex-start;}
  .cw-chrome .footer-right{gap:10px;}
  .cw-chrome .footer-right a{width:28px;height:28px;}
}

@media (prefers-reduced-motion:reduce){
  .cw-chrome *,
  .cw-chrome *::before,
  .cw-chrome *::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;}
}