/* ==========================================================================
   Manzano DECA Booster Club — shared stylesheet

   The pages came out of desktop artboards, so the layout lives in inline
   style attributes. Almost every rule here corrects one of those inline
   patterns, which is why the selectors match on style content and why they
   need !important. Each block names the pattern it is correcting; if the
   markup changes, the matching selector has to change with it.

   Breakpoints
     1040   gutters step down from 44px
      980   three-up card grids become two-up
      860   asymmetric hero grids stack; header stacks; large gaps shrink
      700   remaining multi-column grids stack; footer columns stack
      560   gutters step down again; top bar trims
      520   page CTAs go full width
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body { margin: 0; background: #EDF0F4; }

a { color: #005EB8; text-decoration: none; }
a:hover { color: #00417F; }

*:focus-visible { outline: 2px solid #005EB8; outline-offset: 2px; }

/* The email addresses are longer than a 320px column. This only takes effect
   on a word that would otherwise run past its box. */
body { overflow-wrap: break-word; }

img, iframe { max-width: 100%; }

/* Form controls do not inherit the page face on their own. */
input, select, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #9AA0AA; }

/* Spam honeypot: present for bots, off-screen for everyone else. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* --------------------------------------------------------------------------
   2. Wide tables

   The sponsor benefits table cannot usefully collapse, so it scrolls inside
   its own box. The gradients are the standard scroll-shadow pair: the white
   panels are anchored to the content (background-attachment: local) and slide
   away to reveal a shadow only on the side that still has more to show.
   -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, #FFFFFF 40%, rgba(255,255,255,0)) left center / 32px 100% no-repeat,
    linear-gradient(to left,  #FFFFFF 40%, rgba(255,255,255,0)) right center / 32px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,    rgba(20,21,24,.14), rgba(20,21,24,0)) left center / 13px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(20,21,24,.14), rgba(20,21,24,0)) right center / 13px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* 540px fits, but squeezes the benefit labels into four-line stacks.
   The table scrolls on a phone either way, so buy the labels some room. */
.table-scroll table { min-width: 620px; }

/* The prices in the table head inherit bold from <th>, but only the 400 and
   500 weights of IBM Plex Mono are loaded, so the browser synthesises the
   bold — which smears that face's slashed zero into what reads as a
   strikethrough across the amount. Ask for a weight we actually have. */
.table-scroll th [style*="IBM Plex Mono"] { font-weight: 400; }

/* Said out loud only at the widths where the table really does scroll. */
.table-hint { display: none; }

@media (max-width: 720px) {
  .table-hint {
    display: block;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #6E727B;
  }
}


/* --------------------------------------------------------------------------
   3. Page gutters
   Corrects: padding:<n>px 44px on every full-width band.
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  [style*="padding:110px 44px"], [style*="padding:52px 44px"],
  [style*="padding:48px 44px"],  [style*="padding:44px 44px"],
  [style*="padding:38px 44px"],  [style*="padding:24px 44px"],
  [style*="padding:20px 44px"],  [style*="padding:10px 44px"],
  [style*="padding:0 44px"],     [style*="padding:44px"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (max-width: 560px) {
  [style*="padding:110px 44px"], [style*="padding:52px 44px"],
  [style*="padding:48px 44px"],  [style*="padding:44px 44px"],
  [style*="padding:38px 44px"],  [style*="padding:24px 44px"],
  [style*="padding:20px 44px"],  [style*="padding:10px 44px"],
  [style*="padding:0 44px"],     [style*="padding:44px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* The 404 band is the only one with a 110px vertical gutter. */
@media (max-width: 860px) {
  [style*="padding:110px 44px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}


/* --------------------------------------------------------------------------
   4. Grids
   Corrects: grid-template-columns on the artboard layouts.
   -------------------------------------------------------------------------- */

/* Three-up card rows go two-up before they go one-up. */
@media (max-width: 980px) {
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Rows built as running text plus a fixed-width panel. */
@media (max-width: 860px) {
  [style*="grid-template-columns:minmax(0,1fr) 440px"],
  [style*="grid-template-columns:minmax(0,1fr) 420px"],
  [style*="grid-template-columns:minmax(0,1fr) 400px"],
  [style*="grid-template-columns:minmax(0,1fr) 380px"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)"],
  [style*="grid-template-columns:190px minmax(0,1fr) 250px"],
  [style*="minmax(340px"], [style*="minmax(320px"],
  [style*="minmax(260px"], [style*="minmax(240px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Section heading plus a button on one line. The button's `auto` track
     starves the heading long before the row runs out of width. Stacked, the
     button keeps its own width instead of stretching the full measure. */
  [style*="grid-template-columns:minmax(0,1fr) auto"] {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: start !important;
    gap: 20px !important;
  }
}

@media (max-width: 700px) {
  [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
  [style*="grid-template-columns:repeat(2,minmax(0,1fr))"],
  [style*="grid-template-columns:1.25fr 1fr 1.1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 560px) {
  [style*="grid-template-columns:repeat(auto-fit, minmax(200px,1fr))"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* A gap sized to separate two columns is a hole once they are stacked. */
@media (max-width: 860px) {
  [style*="gap:48px 56px"] { gap: 30px 28px !important; }
  [style*="gap:52px"] { gap: 30px !important; }
  [style*="gap:48px"] { gap: 28px !important; }
  [style*="gap:44px"] { gap: 28px !important; }
  [style*="gap:32px"] { gap: 24px !important; }
}


/* --------------------------------------------------------------------------
   5. Type
   Corrects: display sizes chosen for a 1360px canvas. Each selector names
   the artboard size, so the small deliberate headings — the 15px section
   rules — are left at 15px instead of being swept up by an `h2` rule.
   -------------------------------------------------------------------------- */

[style*="font-size:58px"] { font-size: clamp(32px, 5vw,   58px) !important; }
[style*="font-size:56px"] { font-size: clamp(31px, 4.8vw, 56px) !important; }
[style*="font-size:38px"] { font-size: clamp(25px, 3.2vw, 38px) !important; }
[style*="font-size:34px"] { font-size: clamp(24px, 2.9vw, 34px) !important; }
[style*="font-size:33px"] { font-size: clamp(23px, 2.8vw, 33px) !important; }
[style*="font-size:30px"] { font-size: clamp(22px, 2.6vw, 30px) !important; }
[style*="font-size:26px"] { font-size: clamp(20px, 2.2vw, 26px) !important; }
[style*="font-size:25px"] { font-size: clamp(20px, 2.1vw, 25px) !important; }
[style*="font-size:24px"] { font-size: clamp(19px, 2vw,   24px) !important; }
[style*="font-size:22px"] { font-size: clamp(18px, 1.9vw, 22px) !important; }
[style*="font-size:20px"] { font-size: clamp(17px, 1.7vw, 20px) !important; }

/* A 1.02 leading is drawn for 58px type and crowds at phone sizes. */
@media (max-width: 860px) {
  h1[style*="line-height:1.02"] { line-height: 1.07 !important; }
}


/* --------------------------------------------------------------------------
   6. Top bar
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .topbar,
  .topbar-meta { flex-wrap: wrap !important; gap: 5px 18px !important; }
}

/* The town is already in the header lock-up and the EIN is in the footer.
   On a phone only the dated link earns the row. */
@media (max-width: 560px) {
  .topbar { justify-content: flex-start !important; }
  .topbar-loc { display: none; }
}


/* --------------------------------------------------------------------------
   7. Header
   Corrects: a single-row flex header. Below 860 the wordmark and the six
   nav links cannot share a row without the wordmark breaking to four lines.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .site-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 15px !important;
  }
  .brand { align-self: flex-start; }
  .site-nav { flex-wrap: wrap !important; gap: 4px 22px !important; }

  /* Standing tap targets, without pushing the links apart visually. */
  .site-nav > a { padding: 5px 0; }
  .site-nav > a.nav-cta { padding: 10px 18px; }
}

@media (max-width: 560px) {
  .site-nav { gap: 2px 18px !important; font-size: 14px !important; }
}


/* --------------------------------------------------------------------------
   8. Footer
   Corrects: three columns divided by vertical rules. Once the columns stack,
   those rules and their 34px side padding become a stray indent running down
   the left edge of the footer.
   -------------------------------------------------------------------------- */

/* Tablet: three columns are too narrow to set the address in, but one column
   wastes the width. The brand block takes the full measure and the two link
   columns keep the rule between them. */
@media (min-width: 701px) and (max-width: 860px) {
  .footer-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }

  .footer-col:first-child {
    grid-column: 1 / -1;
    padding-right: 0 !important;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #D6DCE5;
  }
  .footer-col:first-child p { max-width: 58ch !important; }

  .footer-col:nth-child(2) { padding-left: 0 !important; border-left: 0 !important; }
}

@media (max-width: 700px) {
  .footer-cols {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
  }
  .footer-col {
    padding: 0 !important;
    border-left: 0 !important;
  }

  /* The rule between columns turns from vertical to horizontal. */
  .footer-col + .footer-col {
    border-top: 1px solid #D6DCE5;
    padding-top: 24px !important;
  }

  /* A 32ch measure set for a narrow column is too tight at full width. */
  .footer-col p { max-width: none !important; }

  /* Legal note and copyright: two baseline-aligned columns become two rows. */
  .footer-legal {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .footer-copy { white-space: normal !important; }
}


/* --------------------------------------------------------------------------
   9. Calls to action
   The page buttons are sized to sit side by side. On a narrow screen they
   stack anyway, and stacked buttons of different widths read as a mistake,
   so they take the full measure together.
   -------------------------------------------------------------------------- */

@media (max-width: 520px) {
  /* Where the button is a grid child rather than a flex one, `flex` below
     does nothing; this is what makes it span the measure. */
  [style*="grid-template-columns:minmax(0,1fr) auto"] { justify-items: stretch !important; }

  /* Several of these rows are flex without flex-wrap, so a 100% basis alone
     would just squeeze the buttons back onto one line. */
  div:has(> a[style*="padding:15px 26px"]),
  div:has(> a[style*="padding:14px 24px"]),
  div:has(> a[style*="padding:13px 22px"]),
  div:has(> button[style*="padding:15px 26px"]),
  div:has(> button[style*="padding:15px 22px"]) {
    flex-wrap: wrap !important;
  }

  a[style*="padding:15px 26px"],
  a[style*="padding:14px 24px"],
  a[style*="padding:13px 22px"],
  button[style*="padding:15px 26px"],
  button[style*="padding:15px 22px"] {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }
}


/* --------------------------------------------------------------------------
   9. Full-bleed page shell

   Corrects: the artboard wrapper (max-width:1360px on a grey body), which
   left a grey band down both sides of every page and made the footer read as
   a detached strip. The shell now runs edge to edge; the 44px gutters grow
   past 1360px instead, so every band's background is full width while the
   text column stays the same measure it had before.
   -------------------------------------------------------------------------- */

body { background: #FFFFFF; }

body > div[style*="max-width:1360px"] {
  max-width: none !important;
  box-shadow: none !important;
}

@media (min-width: 1041px) {
  [style*="padding:110px 44px"], [style*="padding:52px 44px"],
  [style*="padding:48px 44px"],  [style*="padding:44px 44px"],
  [style*="padding:38px 44px"],  [style*="padding:24px 44px"],
  [style*="padding:20px 44px"],  [style*="padding:10px 44px"],
  [style*="padding:0 44px"],     [style*="padding:44px"] {
    padding-left: max(44px, calc((100% - 1360px) / 2)) !important;
    padding-right: max(44px, calc((100% - 1360px) / 2)) !important;
  }
}