/*==========================================================
SYNEURA RESPONSIVE — V2
ASSL v4 — Framework Layer (Level 1, supplemental)
Load AFTER responsive.css on every page:

  <link href="core.css" rel="stylesheet"/>
  <link href="home.css" rel="stylesheet"/>
  <link href="responsive.css" rel="stylesheet"/>
  <link href="responsive-v2.css" rel="stylesheet"/>

Where v1 (responsive.css) was about not-breaking — overflow,
safe-areas, widescreen/small-phone tiers — this pass is about
first-impression quality on mobile:

  1. Hamburger nav below 720px (replaces the 3-row link wrap)
  2. Mobile hero redesigned, not shrunk
  3. Phone mockup sized to be the centerpiece, not an icon
  4. CTA given real visual weight on small screens

Requires ONE markup addition (see HAMBURGER MARKUP note below)
and one script.js addition (see bottom of this file's comment
block / the accompanying JS snippet).
==========================================================*/

/*==========================================================
1. HAMBURGER NAV
Applies at the same 720px tier core.css already uses to stack
the nav — this replaces that stacking behavior instead of
living alongside it.

HAMBURGER MARKUP — add this button to header.html, as a
direct child of .nav-container, between .brand and .site-nav:

  <button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false">
    <span></span><span></span><span></span>
  </button>

No JS framework needed — see script-nav-toggle.js snippet,
add its contents into your initializeNavigation() in script.js.
==========================================================*/

@media (max-width:720px){

  .nav-container{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
    height:72px;
  }

  .site-header{
    height:72px;
  }

  .brand{
    padding:0;
    font-size:17px;
  }

  .brand img{
    width:40px;
    height:40px;
  }

  /* Hamburger button — hidden above 720px via core's default,
     shown here */
  .nav-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    gap:5px;
    width:32px;
    height:32px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    z-index:50;
  }

  .nav-toggle span{
    display:block;
    width:26px;
    height:2px;
    background:var(--white);
    border-radius:2px;
    transition:transform .25s ease, opacity .25s ease, width .25s ease;
  }

  .nav-toggle span:nth-child(2){
    width:18px;
  }

  /* Open state — animates to an X, driven by aria-expanded
     which script-nav-toggle.js sets */
  .nav-toggle[aria-expanded="true"] span{
    width:26px;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  /* Off-canvas panel — .site-nav becomes a full-width dropdown
     instead of wrapping inline */
  .site-nav{
    position:fixed;
    top:72px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    height:auto;
    min-height:calc(100vh - 72px);
    gap:0;
    padding:8px 0 24px;
    background:rgba(2,8,23,0.97);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:max-height .3s ease, opacity .25s ease;
  }

  .site-nav.is-open{
    max-height:calc(100vh - 72px);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    overflow-y:auto;
  }

  .nav-link{
    height:auto;
    width:100%;
    padding:16px 24px;
    font-size:14px;
    letter-spacing:.14em;
    border-bottom:1px solid rgba(255,255,255,.06);
  }

  .site-nav .button{
    margin:16px 24px 0;
    text-align:center;
    justify-content:center;
  }

}

/* Between 720–992px core.css doesn't stack nav at all currently
   (that only kicked in fully below 720). Keep the hamburger
   active up to 900px too, since 7 links + a button genuinely
   don't fit gracefully in that range either. */
@media (min-width:721px) and (max-width:900px){

  .nav-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    gap:5px;
    width:32px;
    height:32px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
  }

  .nav-toggle span{
    display:block;
    width:26px;
    height:2px;
    background:var(--white);
    border-radius:2px;
    transition:transform .25s ease, opacity .25s ease;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  .site-nav{
    position:fixed;
    top:88px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 0 24px;
    background:rgba(2,8,23,0.97);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .3s ease, opacity .25s ease;
  }

  .site-nav.is-open{
    max-height:calc(100vh - 88px);
    opacity:1;
  }

  .nav-link{
    width:100%;
    padding:16px 24px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }

  .site-nav .button{
    margin:16px 24px 0;
    text-align:center;
    justify-content:center;
  }

}

/* Hide the hamburger entirely above 900px — normal inline nav */
@media (min-width:901px){
  .nav-toggle{
    display:none;
  }
}

/*==========================================================
2. MOBILE HERO — REDESIGNED, NOT SHRUNK
home.css already handles 992/768/480 with its own token
overrides in :root. Rather than fight those, this targets
.home-page directly (specificity 0,1,0 vs home.css's :root
token approach) at a dedicated tier, so the hierarchy is
rebuilt rather than just resized.
==========================================================*/

@media (max-width:768px){

  .home-page h1{
    font-size:clamp(34px, 9vw, 44px);
    line-height:1.05;
    letter-spacing:-0.02em;
    max-width:100%;
  }

  .home-page .lede{
    font-size:1.05rem;
    line-height:1.6;
    max-width:100%;
  }

  .home-page .hero-scene-body{
    font-size:0.95rem;
  }

  /* CTA gets real weight — full-width, taller tap target,
     visually the loudest thing on the opening screen */
  .home-page .actions .button.open-modal{
    width:100%;
    padding:18px 24px;
    font-size:16px;
    font-weight:600;
    justify-content:center;
    box-shadow:0 16px 40px rgba(56,189,248,0.22);
  }

}

@media (max-width:480px){

  .home-page h1{
    font-size:clamp(30px, 10vw, 38px);
  }

  .home-page.page{
    padding-top:88px;
  }

}

/*==========================================================
3. PHONE MOCKUP — CENTERPIECE, NOT AN ICON
Overrides the --phone-width tokens home.css sets at its own
768/480 tiers. Targeting .home-page directly (element-scoped)
beats home.css's :root custom-property re-declaration for the
same reason as above — CSS custom properties resolve at used-
value time using the winning cascade rule closest to the
element, and since both are 0,1,0 / :root-level, load order
here (v2 loads last) settles it.
==========================================================*/

@media (max-width:992px){

  .home-page{
    --phone-width:320px;
  }

}

@media (max-width:768px){

  .home-page{
    --phone-width:280px;
  }

  .home-page .hero-visual{
    margin-top:40px;
  }

}

@media (max-width:480px){

  .home-page{
    --phone-width:260px;
  }

}

@media (max-width:380px){

  .home-page{
    --phone-width:230px;
  }

}



/*==========================================================
MOBILE FOOTER
==========================================================*/

@media (max-width:768px){

  .hub-container{
      flex-direction:column;
      gap:48px;
      padding:0 24px;
      align-items:center;
      text-align:center;
  }

  .hub-branding{
      width:100%;
      flex:none;
  }

  .hub-branding .brand{
      justify-content:center;
  }

  .hub-branding p{
      max-width:100%;
      margin-inline:auto;
  }

  .hub-spoke{
      width:100%;
      display:flex;
      flex-direction:column;
      gap:40px;
      align-items:center;
  }

  .hub-column{
      min-width:auto;
      width:100%;
      align-items:center;
      text-align:center;
  }

  .hub-column ul{
      align-items:center;
  }

}

@media (max-width:768px){

    .lede.emphasis{
        white-space: normal;
    }

}
/*==========================================================
END
==========================================================*/