@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}
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}
.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}
  .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}
  .mm-aside{background:transparent;border-radius:0;padding:0}
  .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}
  .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}
  .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}

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