/* ============================================================
   XXL Freshman Class 2026 — COMING SOON page stylesheet
   JS-inject pattern. Scoped to #xxl-coming-soon-mount.

   Hosted at:
   https://xxlmag.s3.amazonaws.com/freshman/2026-test/xxl-coming-soon.css

   - WordPress  → mount div is dropped inside .pod-content / .content
   - Mobile app → .mainContent wrapper detected by JS, sets html.xxl-is-app
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mouse+Memoirs&family=Nunito:wght@400;700;800;900&display=swap');

/* ─── MOUNT (scoped variables + base styles) ─── */
#xxl-coming-soon-mount {
  --yellow: #fece26;
  --blue:   #485dac;
  --pink:   #e772ae;
  --green:  #37a681;
  --black:  #1a1a1a;
  --white:  #ffffff;
  --font-display: 'Mouse Memoirs', 'Bangers', cursive;
  --font-body:    'Nunito', sans-serif;
  --border-thick: 5px solid #1a1a1a;
  --shadow-lg:    8px 8px 0 #1a1a1a;

  font-family: var(--font-body);
  color: var(--black);
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  position: relative;
  /* Trap all internal stacking effects (rotated headlines, transformed
     stamps, etc.) inside the mount so they can't render above the host
     site's sticky menu while the user scrolls. */
  z-index: 0;
  isolation: isolate;
  line-height: 1.6;
  background-color: var(--yellow);
  background-image: url("https://townsquare.media/site/956/files/2026/04/attachment-10thspotbg.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 900px auto;
  background-attachment: scroll;
}

/* (Page-level overflow guard lives at the bottom of this file — see
   "PAGE-LEVEL OVERFLOW GUARD" block.) */

/* ─── RESET (inside the mount only) ─── */
#xxl-coming-soon-mount *,
#xxl-coming-soon-mount *::before,
#xxl-coming-soon-mount *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#xxl-coming-soon-mount img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ─── LAYOUT WRAPPER ─── */
#xxl-coming-soon-mount .cs-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
  overflow: clip;
}

#xxl-coming-soon-mount .cs-inner {
  max-width: 1000px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  position: relative;
  z-index: 2;
}

/* ─── LOGO ─── */
#xxl-coming-soon-mount .cs-logo-wrap {
  margin: 0;
  padding: 0;
  line-height: 0;
  display: block;
  animation: cs-logo-wobble 6s ease-in-out infinite;
}

#xxl-coming-soon-mount .cs-logo-wrap picture,
#xxl-coming-soon-mount .cs-logo-wrap img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
}

#xxl-coming-soon-mount .cs-logo-wrap img {
  filter: drop-shadow(6px 6px 0 rgba(26, 26, 26, 0.75));
}

@keyframes cs-logo-wobble {
  0%, 100% { transform: rotate(-1deg) scale(1); }
  50%      { transform: rotate(1.5deg) scale(1.02); }
}

/* ─── BIG "COMING SOON" HEADLINE ─── */
#xxl-coming-soon-mount .cs-title {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 16vw, 11rem);
  line-height: 0.9;
  letter-spacing: 0.05em;
  color: var(--yellow);
  -webkit-text-stroke: 5px var(--black);
  paint-order: stroke fill;
  text-shadow: 8px 8px 0 var(--black);
  display: inline-block;
  transform: rotate(-2deg);
  text-transform: uppercase;
  margin: 8px 0 4px;
}

/* ─── DECORATIVE SQUIGGLE UNDER HEADLINE ─── */
#xxl-coming-soon-mount .cs-squiggle {
  width: min(320px, 70%);
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 16'><polyline points='2,8 22,2 42,12 62,2 82,12 102,2 122,12 142,2 162,12 182,2 202,12 218,4' fill='none' stroke='%231a1a1a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: -16px auto -30px;
}

/* ─── TAGLINE (display font, white with black stroke) ─── */
#xxl-coming-soon-mount .cs-tagline {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 16vw, 5rem);
  color: var(--white);
  -webkit-text-stroke: 2px var(--black);
  paint-order: stroke fill;
  letter-spacing: 0.08em;
  line-height: 1;
  transform: rotate(1deg);
  text-transform: uppercase;
}

/* ─── BODY COPY (optional — kept for future use) ─── */
#xxl-coming-soon-mount .cs-copy {
  max-width: 720px;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  color: var(--black);
  line-height: 1.5;
}

#xxl-coming-soon-mount .cs-copy i,
#xxl-coming-soon-mount .cs-copy em { font-weight: 800; }

/* ─── "STAY TUNED" STAMP ─── */
#xxl-coming-soon-mount .cs-stamp {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
  background: var(--black);
  border: var(--border-thick);
  padding: 10px 28px 6px;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: var(--shadow-lg);
  margin-top: 4px;
  margin-bottom: 20px;
}

/* ─── MOBILE BREAKPOINT (responsive default — WordPress browser) ─── */
@media (max-width: 640px) {
  #xxl-coming-soon-mount .cs-section { padding: 40px 18px; }
  #xxl-coming-soon-mount .cs-inner   { gap: 28px; }

  #xxl-coming-soon-mount .cs-logo-wrap picture,
  #xxl-coming-soon-mount .cs-logo-wrap img { max-width: 320px; }

  #xxl-coming-soon-mount .cs-title {
    text-shadow: 6px 6px 0 var(--black);
    -webkit-text-stroke: 4px var(--black);
  }
}

/* ============================================================
   MOBILE APP STYLES — applied unconditionally inside the app
   webview, which always wants the mobile look regardless of
   pixel width. JS adds `xxl-is-app` to <html> when it detects
   the `.mainContent` wrapper.
   ============================================================ */
html.xxl-is-app #xxl-coming-soon-mount .cs-section { padding: 40px 18px; }
html.xxl-is-app #xxl-coming-soon-mount .cs-inner   { gap: 28px; }
html.xxl-is-app #xxl-coming-soon-mount .cs-logo-wrap picture,
html.xxl-is-app #xxl-coming-soon-mount .cs-logo-wrap img { max-width: 320px; }
html.xxl-is-app #xxl-coming-soon-mount .cs-title {
  text-shadow: 6px 6px 0 var(--black);
  -webkit-text-stroke: 4px var(--black);
}

/* ─── HIDE APP'S DUPLICATE ARTICLE THUMBNAIL ─────────────────
   The Townsquare app webview injects a <figure class="article-thumbnail">
   above the .mainContent wrapper. Since our component renders its own
   branded layout (logo, headline, etc.), the auto-injected thumbnail is
   redundant and visually competes with our hero. Hide it ONLY when this
   component is on the page so other app posts aren't affected.

   Two rules paired for robust hiding:
   - :has() fallback fires before JS runs (no FOUC) on modern webviews
   - .xxl-is-app rule (set by coming-soon.js boot) covers older webviews
     without :has() support.
   The figure lives OUTSIDE .mainContent, so we can't use a descendant
   selector — we target it from the <html> level.
   ─────────────────────────────────────────────────────────── */
html:has(.mainContent #xxl-coming-soon-mount) figure.article-thumbnail:first-of-type,
html.xxl-is-app:has(#xxl-coming-soon-mount) figure.article-thumbnail:first-of-type {
  display: none !important;
}

/* ============================================================
   TOWNSQUARE WORDPRESS HOST OVERRIDES
   These intentionally target page chrome OUTSIDE the mount so
   that the WP post title and default content padding don't
   interfere with the full-bleed Coming Soon look.
   ============================================================ */
.main-content > .wrapper.post-wrapper:has(#xxl-coming-soon-mount) .content {
  padding: 10px;
}

.page-header:has(+ * #xxl-coming-soon-mount),
body:has(#xxl-coming-soon-mount) .page-header,
body:has(#xxl-coming-soon-mount) h1.article,
body:has(#xxl-coming-soon-mount) h2.article {
  display: none;
}

.mobile .post:has(#xxl-coming-soon-mount) .content-wrap,
.mobile .main-content > .wrapper.post-wrapper:has(#xxl-coming-soon-mount) .content,
body:has(#xxl-coming-soon-mount) {
  padding: 0;
}

.mainContent article:has(#xxl-coming-soon-mount) {
  background-color: unset;
}

/* ============================================================
   PAGE-LEVEL OVERFLOW GUARD
   Lock horizontal overflow at the html + body level whenever the
   mount is on the page. (iOS Safari ignores overflow-x on body
   alone — set it on <html> too.) The mount itself also has
   overflow-x: clip; these are belt-and-suspenders to keep any
   parallax / rotated elements / stray ad slots from triggering
   sideways scroll once body padding is zero'd above.
   ============================================================ */
html:has(#xxl-coming-soon-mount),
body:has(#xxl-coming-soon-mount) {
  overflow-x: hidden; /* fallback */
  overflow-x: clip;
  max-width: 100vw;
}