/* CoverMe site header + footer for subdomains (tickets). Same look as downloadcoverme.com. */
:root { --cmc-gray:#2C2C2E; --cmc-control:#1C1C1E; --cmc-secondary:#8E8E93; --cmc-pink:#EE3BDD; }
.cm-top, .cm-foot { font-family:'Montserrat',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.cm-top *, .cm-foot * { box-sizing:border-box; }
.cm-wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 16px; }
@media (min-width:768px) { .cm-wrap { padding:0 24px; } }
.cm-top a, .cm-foot a { color:#fff; }
.cm-nav a.cm-dl { height:56px; border-radius:999px; background:var(--cmc-pink); color:#fff; font-weight:800; }
/* Header (same on every page) */
.cm-top { position:sticky; top:0; z-index:10; background:#000; }
.cm-top-row { height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cm-brand { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.cm-brand img { display:block; height:32px; width:auto; }
.cm-menu-btn { width:44px; height:44px; border:0; border-radius:999px; background:var(--cmc-gray); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.cm-nav { display:none; position:absolute; top:60px; left:0; right:0; flex-direction:column; padding:8px 16px 24px; background:#000; border-bottom:1px solid var(--cmc-control); }
.cm-nav.open { display:flex; }
.cm-nav.open::after { content:""; position:absolute; left:0; right:0; top:100%; height:100vh; background:rgba(0,0,0,.6); }
html.cm-lock { overflow:hidden; }
.cm-nav a svg { margin-left:6px; }
.cm-nav a { display:flex; align-items:center; min-height:48px; color:var(--cmc-secondary); font-size:17px; font-weight:700; text-decoration:none; }
.cm-nav a.on, .cm-nav a:hover { color:#fff; }
.cm-nav a.cm-dl { justify-content:center; margin-top:12px; color:#fff; }
@media (min-width:900px) {
  .cm-top-row { height:72px; }
  .cm-brand img { height:36px; }
  .cm-menu-btn { display:none; }
  .cm-nav { display:flex; position:static; flex-direction:row; align-items:center; gap:28px; padding:0; border:0; background:none; }
  .cm-nav a { min-height:44px; font-size:15px; }
  .cm-nav a.cm-dl { margin:0; height:44px; padding:0 20px; font-size:13px; }
}

/* Footer (same on every page) */
.cm-foot { margin-top:64px; background:var(--cmc-pink); }
.cm-foot .cm-wrap { padding-top:32px; padding-bottom:32px; display:flex; flex-direction:column-reverse; gap:16px; }
.cm-foot nav { display:flex; flex-wrap:wrap; gap:0 24px; font-size:15px; font-weight:700; }
.cm-foot nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.cm-foot span { font-size:15px; font-weight:800; }
@media (min-width:900px) { .cm-foot .cm-wrap { padding-top:40px; padding-bottom:40px; flex-direction:row; align-items:center; justify-content:space-between; } .cm-foot span { font-size:17px; } }

/* Neutralize the old ticket-site styles on the shared header/footer */
footer.cm-foot { padding:0 !important; border:0 !important; text-align:left !important; }
.cm-top, .cm-top *, .cm-foot, .cm-foot * { text-transform:none !important; letter-spacing:normal; }
.cm-brand { letter-spacing:-.02em !important; }
.cm-foot span, .cm-foot a { color:#fff !important; }
.cm-top nav, .cm-foot nav { text-transform:none !important; }

/* ---------- Header v2 (Nov 11): frosted glass with the app's grain, shrinks on scroll, animated menu ---------- */
/* The frosted layer lives on ::before so the header itself never traps the fixed phone menu */
.cm-top { position:sticky; top:0; z-index:20; background:transparent; border-bottom:1px solid transparent; transition:border-color .35s ease; }
.cm-top::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(0,0,0,.74) url("https://downloadcoverme.com/site-assets/img/grain.webp") repeat; background-size:160px 160px;
  -webkit-backdrop-filter:saturate(170%) blur(20px); backdrop-filter:saturate(170%) blur(20px); transition:background-color .35s ease; }
.cm-top.is-scrolled { border-bottom-color:rgba(255,255,255,.08); }
.cm-top.is-scrolled::before { background-color:rgba(0,0,0,.84); }
/* "clip" instead of "hidden" so the sticky header still sticks while the phone menu locks scrolling */
body, body.cm { overflow-x:clip; }
.cm-top-row { transition:height .35s cubic-bezier(.2,.8,.2,1); }
.cm-brand img { transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.cm-brand:hover img { opacity:.85; }
.cm-menu-btn { background:rgba(255,255,255,.1); transition:background-color .2s ease, transform .15s ease; }
.cm-menu-btn:active { transform:scale(.92); }
.cm-menu-btn svg { transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.cm-menu-btn[aria-expanded="true"] svg { transform:rotate(90deg); }
@media (prefers-reduced-motion:no-preference) {
  .cm-top-row { animation:cm-head-in .6s cubic-bezier(.2,.8,.2,1) backwards; }
  @keyframes cm-head-in { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
}

/* Phone menu: a full-height frosted sheet; links slide in one after another */
@media (max-width:899px) {
  .cm-nav { display:flex !important; position:fixed; top:60px; left:0; right:0; height:calc(100svh - 60px); padding:16px 16px 32px; gap:4px;
    background:rgba(0,0,0,.9) url("https://downloadcoverme.com/site-assets/img/grain.webp") repeat; background-size:160px 160px;
    -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); border:0;
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s linear .4s; }
  .cm-nav.open { opacity:1; visibility:visible; transform:none; transition:opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  .cm-nav.open::after { display:none; }
  .cm-nav a { min-height:60px; font-size:28px; font-weight:800; letter-spacing:-.02em; color:#fff; border-bottom:1px solid rgba(255,255,255,.08);
    opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), color .2s ease; }
  .cm-nav a.on { color:#EE3BDD; }
  .cm-nav.open a { opacity:1; transform:none; }
  .cm-nav.open a:nth-child(1) { transition-delay:.04s; } .cm-nav.open a:nth-child(2) { transition-delay:.08s; }
  .cm-nav.open a:nth-child(3) { transition-delay:.12s; } .cm-nav.open a:nth-child(4) { transition-delay:.16s; }
  .cm-nav.open a:nth-child(5) { transition-delay:.2s; }
  .cm-nav a.btn, .cm-nav a.cm-dl { margin-top:auto; height:56px; min-height:56px; border-bottom:0; font-size:17px; justify-content:center; letter-spacing:0; }
}

/* Desktop: links get a sliding underline; the bar shrinks a little once you scroll */
@media (min-width:900px) {
  .cm-top.is-scrolled .cm-top-row { height:60px; }
  .cm-top.is-scrolled .cm-brand img { transform:scale(.92); }
  .cm-nav a:not(.btn):not(.cm-dl) { position:relative; transition:color .2s ease; }
  .cm-nav a:not(.btn):not(.cm-dl)::after { content:""; position:absolute; left:0; right:0; bottom:8px; height:2px; border-radius:2px; background:#EE3BDD;
    transform:scaleX(0); transform-origin:center; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
  .cm-nav a:not(.btn):not(.cm-dl):hover::after, .cm-nav a.on::after { transform:scaleX(1); }
  .cm-nav a.btn, .cm-nav a.cm-dl { transition:transform .2s ease, filter .2s ease, box-shadow .25s ease; }
  .cm-nav a.btn:hover, .cm-nav a.cm-dl:hover { transform:translateY(-1px); filter:brightness(1.08); }
}