/* ============================================================
   Responsive overrides.

   IMPORTANT: this site is rendered client-side by support.js, which
   rebuilds the DOM into a #dc-root tree and RE-SERIALIZES every
   inline style attribute (adds a space after each colon, adds a
   trailing semicolon, converts hex colors to rgb(), collapses
   equivalent shorthand values, adds a space after commas inside
   functions like repeat()). Selectors below match that RENDERED
   format, not the raw HTML source, and were extracted by inspecting
   the live DOM. Every exact-value selector ends with a literal ";"
   so it can't accidentally match a longer value that happens to
   start with the same text (e.g. "padding: 60px;" vs
   "padding: 60px 60px 54px;").
   ============================================================ */

/* ---------- outer page wrapper: let the page actually shrink ---------- */
[style*="min-width: 1320px;"]{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
}

html,body{ overflow-x:hidden; }

/* ---------- nav bar needs a positioning context for the mobile dropdown ---------- */
[style*="justify-content: space-between; padding: 18px 60px;"]{
  position:relative;
  flex-wrap:wrap;
}

/* ---------- hamburger toggle (built mobile-first, hidden on desktop) ---------- */
.nav-toggle{ display:none; }
.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px;
  height:34px;
  cursor:pointer;
  flex-shrink:0;
}
.nav-burger span{ display:block; width:26px; height:2px; background:#241C18; border-radius:2px; }

/* ============================================================
   TABLET  (<=1000px) — nav collapses to hamburger, 4/3-col grids -> 2 col
   ============================================================ */
@media (max-width:1000px){

  .nav-burger{ display:flex; }

  .nav-links-wrap{
    display:none !important;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background-color:inherit;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    border-bottom:1px solid rgba(36,28,24,0.15);
    box-shadow:0 12px 24px rgba(0,0,0,0.12);
    z-index:80;
  }
  .nav-toggle:checked ~ .nav-links-wrap{ display:flex !important; }
  .nav-links-wrap > div{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    width:100%;
    font-size:15px !important;
  }
  .nav-links-wrap > div > a{
    padding:14px 24px !important;
    border-bottom:1px solid rgba(36,28,24,0.08);
    width:100%;
    box-sizing:border-box;
  }

  /* grids: 4/3-column layouts become 2-column */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1.2fr"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr"]{
    grid-template-columns:repeat(2,1fr) !important;
  }

  /* horizontal section padding: 60px -> 40px on both sides */
  [style*="padding: 0px 60px 20px;"],
  [style*="padding: 0px 60px 40px;"],
  [style*="padding: 0px 60px 60px;"],
  [style*="padding: 0px 60px 90px;"],
  [style*="padding: 10px 60px;"],
  [style*="padding: 18px 60px;"],
  [style*="padding: 20px 60px 90px;"],
  [style*="padding: 30px 60px 10px;"],
  [style*="padding: 36px 60px 10px;"],
  [style*="padding: 40px 60px 10px;"],
  [style*="padding: 40px 60px 90px;"],
  [style*="padding: 44px 60px 10px;"],
  [style*="padding: 44px 60px 20px;"],
  [style*="padding: 50px 60px 10px;"],
  [style*="padding: 50px 60px 90px;"],
  [style*="padding: 52px 60px 40px;"],
  [style*="padding: 60px 60px 54px;"],
  [style*="padding: 66px 60px 44px;"],
  [style*="padding: 82px 60px 100px;"],
  [style*="padding: 82px 60px 96px;"],
  [style*="padding: 88px 60px 90px;"],
  [style*="padding: 8px 60px 20px;"],
  [style*="padding: 8px 60px 40px;"],
  [style*="padding: 8px 60px 90px;"],
  [style*="padding: 96px 60px;"],
  [style*="padding: 120px 60px;"],
  [style*="padding: 9px 60px;"],
  [style*="padding: 10px 60px 10px;"]{
    padding-left:40px !important;
    padding-right:40px !important;
  }
  [style*="padding: 60px;"]{
    padding:44px 40px !important;
  }
  [style*="padding: 84px 48px 96px 60px;"]{
    padding-left:40px !important;
    padding-right:40px !important;
  }

  /* headline scaling */
  [style*="font-size: 60px;"]{ font-size:42px !important; }
  [style*="font-size: 48px;"]{ font-size:36px !important; }
  [style*="font-size: 46px;"]{ font-size:34px !important; }
  [style*="font-size: 38px;"]{ font-size:29px !important; }
  [style*="font-size: 34px;"]{ font-size:27px !important; }

  /* Holi confetti burst is sized/positioned for a wide desktop card; breaks out of the smaller stacked/2-col card */
  .burst{ display:none !important; }

  /* "Start here" 3-up cards use border-right/padding as column dividers; orphaned once the grid isn't 3 columns wide */
  [style*="padding-right: 40px; border-right: 1px solid rgba(36, 28, 24, 0.14);"],
  [style*="padding: 0px 40px; border-right: 1px solid rgba(36, 28, 24, 0.14);"],
  [style*="padding-left: 40px; display: flex; flex-direction: column;"]{
    padding:0 0 28px !important;
    border-right:none !important;
    border-bottom:1px solid rgba(36,28,24,0.14) !important;
    margin-bottom:28px !important;
  }

  /* long tables (FAQ official links) shouldn't squash their cells once the viewport narrows */
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* section headers (heading + "See more →" link) were squeezing onto one line and overlapping */
  [style*="align-items: flex-end; justify-content: space-between;"]{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px;
  }
}

/* ============================================================
   PHONE  (<=640px) — everything single column, tighter padding
   ============================================================ */
@media (max-width:640px){

  [style*="justify-content: space-between; padding: 18px 60px;"]{
    padding-left:20px !important;
    padding-right:20px !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
    flex-wrap:nowrap !important;
  }
  [style*="padding: 9px 60px;"]{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* ---------- nav brand lockup: two logos + two lines of text were forcing a tall, wrapped navbar ---------- */
  [style*="justify-content: space-between; padding: 18px 60px;"] > a{
    gap:8px !important;
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
  }
  [style*="justify-content: space-between; padding: 18px 60px;"] > a > div:first-child{
    gap:6px !important;
    flex-shrink:0;
  }
  [style*="justify-content: space-between; padding: 18px 60px;"] > a img:nth-of-type(1){
    height:24px !important;
  }
  [style*="justify-content: space-between; padding: 18px 60px;"] > a img:nth-of-type(2){
    height:22px !important;
    width:22px !important;
  }
  [style*="justify-content: space-between; padding: 18px 60px;"] > a > div:first-child > div{
    height:18px !important;
  }
  [style*="justify-content: space-between; padding: 18px 60px;"] > a > div:last-child{
    min-width:0;
    overflow:hidden;
  }
  [style*="justify-content: space-between; padding: 18px 60px;"] > a > div:last-child > div:first-child{
    font-size:13.5px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* "Texas State University" subtitle only adds height at this size; the title alone carries the brand */
  [style*="justify-content: space-between; padding: 18px 60px;"] > a > div:last-child > div:last-child{
    display:none !important;
  }
  .nav-burger{
    width:28px;
    height:28px;
    flex-shrink:0;
  }

  /* every multi-column grid collapses to one column */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1.2fr"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.05fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr auto 1fr"]{
    grid-template-columns:1fr !important;
  }

  /* empty hero spacer column serves no purpose stacked on a phone */
  [style*="padding: 44px 44px 60px 0px;"]{ display:none !important; }

  [style*="padding: 84px 48px 96px 60px;"]{
    padding-left:22px !important;
    padding-right:22px !important;
    padding-top:56px !important;
    padding-bottom:56px !important;
  }

  /* section horizontal padding tightens further */
  [style*="padding: 0px 60px 20px;"],
  [style*="padding: 0px 60px 40px;"],
  [style*="padding: 0px 60px 60px;"],
  [style*="padding: 0px 60px 90px;"],
  [style*="padding: 10px 60px;"],
  [style*="padding: 20px 60px 90px;"],
  [style*="padding: 30px 60px 10px;"],
  [style*="padding: 36px 60px 10px;"],
  [style*="padding: 40px 60px 10px;"],
  [style*="padding: 40px 60px 90px;"],
  [style*="padding: 44px 60px 10px;"],
  [style*="padding: 44px 60px 20px;"],
  [style*="padding: 50px 60px 10px;"],
  [style*="padding: 50px 60px 90px;"],
  [style*="padding: 52px 60px 40px;"],
  [style*="padding: 60px 60px 54px;"],
  [style*="padding: 66px 60px 44px;"],
  [style*="padding: 82px 60px 100px;"],
  [style*="padding: 82px 60px 96px;"],
  [style*="padding: 88px 60px 90px;"],
  [style*="padding: 8px 60px 20px;"],
  [style*="padding: 8px 60px 40px;"],
  [style*="padding: 8px 60px 90px;"],
  [style*="padding: 96px 60px;"],
  [style*="padding: 120px 60px;"],
  [style*="padding: 10px 60px 10px;"]{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  [style*="padding: 60px;"]{
    padding:32px 20px !important;
  }

  /* headline scaling, second pass */
  [style*="font-size: 60px;"]{ font-size:32px !important; }
  [style*="font-size: 48px;"]{ font-size:28px !important; }
  [style*="font-size: 46px;"]{ font-size:27px !important; }
  [style*="font-size: 38px;"]{ font-size:24px !important; }
  [style*="font-size: 34px;"]{ font-size:22px !important; }

  /* footer bottom bar: stack copyright / icons instead of 3 rigid columns */
  [style*="grid-template-columns: 1fr auto 1fr"]{
    justify-items:center !important;
    text-align:center !important;
    gap:14px !important;
  }

  /* decorative absolutely-positioned watermark: drop it, it only adds clutter at this size */
  [style*="clip-path: polygon(0% 0%, 100% 32%, 58% 32%, 100% 62%, 0% 100%)"]{
    display:none !important;
  }

  /* official links table: let it scroll instead of squashing */
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* section headers (heading + "See more →" link) were squeezing onto one line and overlapping */
  [style*="align-items: flex-end; justify-content: space-between;"]{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px;
  }
}