@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
/* =============================================================
 * css/nav.css — East Idaho Events shared chrome
 * Mega-menu header (.mm-*), footer (.mm-footer), and the
 * "East Idaho Sponsors" band (.sb-*). Loaded on every page.
 * Palette: deep navy, white, butter gold. Display font: Jost.
 * ============================================================= */

.mm-header{position:sticky;top:0;z-index:80;background:#0C1B2A;border-bottom:1px solid #1E3A52}
.mm-wrap{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:26px;height:68px}
.mm-brand{font-family:'Righteous','Jost',sans-serif;font-weight:400;font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase;color:#FFFFFF;white-space:nowrap;line-height:1}
.mm-brand span{color:#FFD447}
.mm-brand:hover span{color:#FFFFFF;transition:color .18s}

.mm-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.mm-link{display:block;padding:24px 12px;font-family:'Inter',sans-serif;font-weight:600;font-size:.9rem;color:#9FB0C3;border-bottom:2px solid transparent}
.mm-item:hover > .mm-link, .mm-item:focus-within > .mm-link, .mm-link:hover{color:#FFFFFF;border-color:#FFD447}

.mm-item{position:static}
.mm-panel{position:fixed;left:0;right:0;top:68px;background:#FFFFFF;border-top:3px solid #FFD447;border-bottom:1px solid #DFE2E8;box-shadow:0 34px 54px -26px rgba(6,15,25,.5);opacity:0;visibility:hidden;transition:opacity .15s;z-index:70}
.mm-item:hover > .mm-panel, .mm-item:focus-within > .mm-panel{opacity:1;visibility:visible}
.mm-panel-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 264px;gap:34px;padding:30px 24px 34px}
.mm-panel-head{font-family:'Space Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#5A6675;grid-column:1/-1;margin-bottom:-8px}
.mm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-content:start}
.mm-card{display:block;line-height:1.4}
.mm-thumb{display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#14293C;margin-bottom:10px}
.mm-thumb img,.mm-thumb svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.mm-card:hover .mm-thumb img,.mm-card:hover .mm-thumb svg{transform:scale(1.04)}
.mm-card b{display:block;font-family:'Jost',sans-serif;font-weight:600;font-size:1.06rem;color:#0C1B2A;letter-spacing:.02em}
.mm-card:hover b{color:#1E5A8A}
.mm-card > span{display:block;font-size:.84rem;color:#5A6675;margin-top:2px}
/* sponsor tier cards (no thumbnails) */
.mm-tier{border:1.5px solid #DFE2E8;border-radius:6px;padding:16px 18px;transition:border-color .15s,transform .15s}
.mm-tier:hover{border-color:#0C1B2A;transform:translateY(-2px)}
.mm-tier b{font-size:1.02rem}
/* tier layout: Presenting + Premier on row 1, three tiers on row 2 */
.mm-tiers{grid-template-columns:repeat(6,1fr)}
.mm-tiers .mm-tier{grid-column:span 2}
.mm-tiers .mm-tier-top{grid-column:span 3}
/* per-tier accents, matching the sponsors page: thin colored border + clean pill */
.mm-tier{position:relative}
.mm-tier-presenting{border-color:#1E5A8A}
.mm-tier-presenting:hover{border-color:#0C1B2A}
.mm-tier-premier{border-color:#D9A00B}
.mm-tier-premier:hover{border-color:#8A6A00}
/* quick links rail */
.mm-aside{background:#F2F5F9;border-radius:6px;padding:18px 20px;align-self:start}
.mm-quick{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;font-weight:600;font-size:.9rem;color:#1E5A8A;border-bottom:1px solid #E2E7EE}
.mm-quick:last-child{border-bottom:none}
.mm-quick::after{content:"\203A";font-size:1.1rem;line-height:1;color:#8A6A00}
.mm-quick:hover{color:#0C1B2A}
/* right rail stacks multiple boxes */
.mm-rail{display:grid;gap:14px;align-self:start}
/* alt partner box: navy on white panel, high contrast */
.mm-aside.mm-aside-alt{background:#0C1B2A}
.mm-aside-alt .mm-aside-head{font-family:'Space Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#FFFFFF;padding-bottom:9px;border-bottom:1px solid #2A4A63;margin-bottom:4px}
.mm-aside.mm-aside-alt .mm-quick{color:#DCE6F0;border-color:#2A4A63}
.mm-aside.mm-aside-alt .mm-quick::after{color:#FFD447}
.mm-aside.mm-aside-alt .mm-quick:hover{color:#FFD447}
.mm-actions{display:flex;align-items:center;gap:10px;margin-left:14px}
.mm-btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:10px 16px;border:none;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.mm-btn-gold{background:#FFD447;color:#0C1B2A}
.mm-btn-gold:hover{background:#EFC02C}
.mm-btn-outline{background:transparent;color:#F4F6F8;box-shadow:inset 0 0 0 2px #F4F6F8}
.mm-btn-outline:hover{background:#F4F6F8;color:#0C1B2A}

.mm-burger{display:none;margin-left:auto;background:none;border:none;padding:10px;cursor:pointer}
.mm-burger span{display:block;width:24px;height:2.5px;background:#F4F6F8;margin:5px 0;border-radius:2px;transition:transform .2s,opacity .2s}



/* ---------------- footer ---------------- */
.mm-footer{background:#081420;color:#9FB0C3;padding:54px 0 28px;font-family:'Inter',system-ui,sans-serif}
.mm-fwrap{max-width:1180px;margin:0 auto;padding:0 24px}
.mm-fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px;margin-bottom:38px}
@media (max-width:720px){.mm-fgrid{grid-template-columns:1fr}}
.mm-fabout{max-width:300px;font-size:.93rem;margin-top:12px;line-height:1.6}
.mm-social{display:flex;gap:10px;margin-top:16px}
.mm-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1.5px solid #1E3A52;border-radius:8px;color:#9FB0C3;transition:color .15s,border-color .15s}
.mm-social a:hover{color:#FFD447;border-color:#FFD447}
.mm-social svg{width:19px;height:19px}
.mm-fcol h4{font-family:'Space Mono',monospace;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:#FFD447;margin-bottom:13px;font-weight:700}
.mm-fcol a{display:block;padding:5px 0;font-size:.93rem;color:#9FB0C3;text-decoration:none}
.mm-fcol a:hover{color:#F4F6F8}
.mm-fbottom{border-top:1px solid #1B3040;padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.78rem}
.mm-fbottom a{color:inherit;text-decoration:none}
.mm-fbottom a:hover{color:#F4F6F8}

/* ---------------- East Idaho Sponsors band ---------------- */
.sb-band{background:#FFFFFF;border-top:1px solid #DFE2E8;padding:52px 0 58px;text-align:center;font-family:'Inter',system-ui,sans-serif}
.sb-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.sb-title{font-family:'Jost',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.35rem;color:#0C1B2A}
.sb-sub{color:#5A6675;font-size:.92rem;margin:8px auto 24px;max-width:52ch}
.sb-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 34px;margin-bottom:22px}
.sb-item{display:inline-flex;align-items:center;font-weight:600;font-size:.95rem;color:#5A6675;text-decoration:none;transition:color .15s}
.sb-item img{max-height:36px;width:auto;opacity:.94;transition:opacity .15s,filter .15s,transform .15s}
/* Compact/square logos get more height so they read at the same visual size
   as wide wordmarks. Classes are added by the normalizer in js/nav.js. */
.sb-item img.logo-mid{max-height:48px}
.sb-item img.logo-sq{max-height:60px}
a.sb-item:hover{color:#8A6A00}
a.sb-item:hover img{opacity:1;transform:translateY(-2px)}
.sb-join{display:inline-block;font-weight:700;font-size:.86rem;color:#8A6A00;border-bottom:2px solid #FFD447;padding-bottom:1px;text-decoration:none}
.sb-join:hover{color:#0C1B2A}


/* ---------------- House production markers ----------------
   Added centrally rather than per-page: event cards render on the
   homepage, /events, and the submission previews, and the card CSS was
   already duplicated across those files. Anything new lives here only. */
.event-card .ei-flag{
  display:inline-block;font-family:'Space Mono',monospace;font-size:.6rem;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#0C1B2A;background:#FFD447;border-radius:3px;
  padding:4px 9px;margin-bottom:9px;
}
.event-card.is-ours{border:2px solid #FFD447;box-shadow:0 6px 22px -12px rgba(255,212,71,.75)}
.event-card.is-pinned{order:-1}

/* ---------------- Mega panel column placement ----------------
   .mm-panel-inner is a 2-column grid (1fr / 264px) that relies on source
   order. Any block added as a direct child claims the next cell, which is
   how the sponsor logos ended up in the right rail and the quick links
   ended up full width underneath. Columns are now pinned explicitly so
   new blocks stack under the cards instead of stealing the rail's cell. */
.mm-cards{grid-column:1}
.mm-current{grid-column:1}
.mm-rail{grid-column:2;grid-row:2}

/* House productions render in the SAME card grid as everything else, so
   they match the community cards exactly apart from the gold border and
   the gold production line above the title. */
.mm-card-ours{border:2px solid #FFD447;border-radius:8px;padding:10px;background:#FFFCF2}

/* Mobile/desktop link variants. Some menu links differ in wording between
   breakpoints and some are dropped on mobile to keep the menu short, so
   both versions live in the markup and CSS picks one. Done this way rather
   than rewriting labels in JS so there is no flash of the wrong text and
   the markup stays readable. */
.mm-only-mobile{display:none}
.mm-card-ours .mm-thumb{margin-bottom:8px}
/* NOTE: these MUST stay scoped as `.mm-card > .x` (0,1,1 -> 0,2,0).
   `.mm-card > span` on line 31 sets font-size .84rem and color #5A6675, and
   a bare `.mm-ourline` loses to it on specificity, so the production line
   silently rendered grey at .84rem no matter what was set here. */
.mm-card > .mm-ourline{display:block;font-family:'Space Mono',monospace;
  font-size:.46rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;color:#A57C00;margin-top:0;margin-bottom:5px}
/* date line, then the short description, on every card */
.mm-card > .mm-when{display:block;font-size:.82rem;color:#5A6675;margin-top:3px}
.mm-card > .mm-desc{display:block;font-size:.82rem;color:#5A6675;margin-top:4px;line-height:1.45}
.mm-aside-navy{background:#0C1B2A;border:1px solid rgba(255,212,71,.35);
  border-radius:10px;padding:12px 14px;margin-bottom:12px}
.mm-aside-navy .mm-quick{color:#FFD447;font-weight:700}
.mm-aside-navy .mm-quick:hover{color:#FFFFFF}

/* ---------------- Current sponsors, under the tier grid ---------------- */
.mm-current{margin-top:22px;padding-top:18px;border-top:1px solid #E2E7EE}
.mm-current-head{font-family:'Space Mono',monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#5A6675;margin-bottom:14px}
.mm-current-strip{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.mm-current-strip a,.mm-current-strip span{display:inline-flex;align-items:center;
  color:#5A6675;font-size:.88rem;font-weight:600;text-decoration:none}
.mm-current-strip img{max-height:30px;width:auto;opacity:.94;transition:opacity .15s,transform .15s}
.mm-current-strip a:hover img{opacity:1;transform:translateY(-2px)}
.mm-current-strip a:hover{color:#0C1B2A}

/* ==================================================================
   MOBILE MENU  (<=960px)
   Deliberately the LAST block in this file. It used to sit near the top,
   so every desktop rule added afterwards overrode it at equal specificity
   and mobile silently inherited desktop card styling. Keep new rules
   above this block, never below it.

   Behaviour: panels are collapsed and open one at a time on tap
   (js/nav.js adds .mm-expanded). Cards become a small thumbnail beside
   the text instead of a full-width poster.
   ================================================================== */
@media (max-width:960px){
  .mm-burger{display:block}
  .mm-nav{position:fixed;inset:68px 0 0 0;background:#0C1B2A;flex-direction:column;
    align-items:stretch;gap:0;margin:0;padding:8px 0 28px;overflow-y:auto;display:none;z-index:85}
  .mm-header.mm-open .mm-nav{display:flex}
  .mm-header.mm-open .mm-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .mm-header.mm-open .mm-burger span:nth-child(2){opacity:0}
  .mm-header.mm-open .mm-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* ---- top level rows, each with a chevron ---- */
  .mm-item{border-bottom:1px solid #16293B}
  .mm-nav .mm-link{display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;border-bottom:none;font-size:1.02rem;color:#F4F6F8;font-weight:600}
  .mm-item:not(.mm-item-plain) > .mm-link::after{
    content:"";width:9px;height:9px;flex:0 0 9px;margin-left:12px;
    border-right:2px solid #7C8DA0;border-bottom:2px solid #7C8DA0;
    transform:rotate(-45deg);transition:transform .2s}
  .mm-item.mm-expanded > .mm-link{color:#FFD447}
  .mm-item.mm-expanded > .mm-link::after{transform:rotate(45deg);border-color:#FFD447}

  /* ---- panels: collapsed until tapped ---- */
  .mm-panel{position:static;opacity:1;visibility:visible;background:#0A1826;
    border:none;box-shadow:none;display:none}
  .mm-item.mm-expanded > .mm-panel{display:block}
  .mm-panel-inner{display:flex;flex-direction:column;padding:6px 14px 16px;max-width:none;gap:0;
    align-items:stretch}
  .mm-panel-head{color:#5C7186;padding:8px 6px 10px;margin:0;font-size:.62rem}

  /* ---- cards: small thumb beside the text ---- */
  .mm-panel .mm-cards{display:flex;flex-direction:column;gap:8px;order:1}
  /* Card markup is flat (thumb, ourline, title, date, description as
     siblings), so grid is used rather than flex: the thumb occupies
     column 1 across all rows and every text node stacks in column 2.
     Flex would lay all five out side by side. */
  .mm-panel .mm-card{display:grid;grid-template-columns:56px 1fr;
    column-gap:12px;align-items:start;align-content:center;
    padding:10px;background:#102336;border:1px solid #1A3348;border-radius:10px}
  .mm-panel .mm-card:hover,.mm-panel .mm-card:active{background:#16304A}
  .mm-panel .mm-card > *{grid-column:2;min-width:0}
  .mm-panel .mm-card > .mm-thumb{grid-column:1;grid-row:1 / -1;align-self:center;
    display:block;width:56px;height:56px;aspect-ratio:auto;margin:0;
    border-radius:8px;overflow:hidden}
  .mm-panel .mm-card > .mm-thumb img,.mm-panel .mm-card > .mm-thumb svg{
    width:100%;height:100%;object-fit:cover}
  .mm-panel .mm-card b{color:#F4F6F8;font-size:.95rem;line-height:1.25}
  .mm-panel .mm-card > span{color:#9FB0C3;font-size:.82rem}
  .mm-panel .mm-card > .mm-ourline{color:#FFD447;font-size:.5rem;margin-bottom:2px}
  .mm-panel .mm-card > .mm-when,.mm-panel .mm-card > .mm-desc{color:#9FB0C3;font-size:.8rem;margin-top:1px}
  .mm-panel .mm-card-ours{background:#141F1A;border:1px solid #FFD447;padding:10px}

  /* ---- sponsor tiers read as plain rows ---- */
  .mm-panel .mm-tiers{display:flex;flex-direction:column;gap:8px}
  .mm-panel .mm-tier{display:block;background:#102336;border:1px solid #1A3348;
    border-radius:10px;padding:11px 14px;transform:none}
  .mm-panel .mm-tier-top{border-color:#2A4A66}

  /* ---- link rails ---- */
  .mm-rail{display:flex;flex-direction:column;gap:0;order:2;margin-top:12px;
    align-self:stretch;width:100%}
  .mm-aside{background:transparent;border-radius:0;padding:0;
    align-self:stretch;width:100%}
  .mm-aside-head{color:#5C7186;border-color:#16293B;padding:10px 6px 6px}
  .mm-quick{display:flex;align-items:center;justify-content:space-between;
    background:#102336;border:1px solid #1A3348;border-radius:10px;
    color:#CBD6E2;padding:13px 14px;margin-bottom:8px;
    width:100%;box-sizing:border-box}
  .mm-quick:hover,.mm-quick:active{background:#16304A;color:#FFFFFF}
  /* navy block matched the panel background and read as full-bleed; give it
     the same card shape as every other link */
  .mm-aside-navy{background:transparent;border:none;border-radius:0;padding:0;margin:0;
    align-self:stretch;width:100%}
  .mm-aside-navy .mm-quick{background:#132B1E;border:1px solid #FFD447;color:#FFD447}
  .mm-aside-navy .mm-quick:hover{background:#1A3A29;color:#FFFFFF}

  /* ---- current sponsors LAST, after the links ---- */
  .mm-current{order:3;margin-top:16px;padding-top:14px;border-top:1px solid #16293B}
  .mm-current-head{color:#5C7186}
  .mm-current-strip{gap:10px 18px;padding:0 4px}
  .mm-current-strip img{max-height:24px}
  .mm-current-strip a,.mm-current-strip span{color:#9FB0C3;font-size:.82rem}

  /* ---- breakpoint-specific links ---- */
  .mm-hide-mobile{display:none !important}
  .mm-only-mobile{display:flex}

  /* Sponsors panel is cut back to three links plus the sponsor logos. */
  .mm-panel .mm-tiers{display:none}

  /* Sponsor logos are mostly dark marks on transparent backgrounds, so they
     disappear against the navy panel. A light plate is used instead of
     forcing the logos white: recolouring a sponsor's mark breaks the brand
     colours most sponsorship agreements require. */
  .mm-current-strip{background:#FFFFFF;border-radius:10px;padding:16px 18px;
    justify-content:center;gap:14px 22px}
  .mm-current-strip img{max-height:26px}
  .mm-current-strip a,.mm-current-strip span{color:#0C1B2A}
  .mm-current-strip a:hover{color:#0C1B2A}

  .mm-actions{flex-direction:column;align-items:stretch;margin:16px 20px 0;gap:10px}
  .mm-btn{padding:13px}
}