/* ============================================================
   Mastering.com Events — brand styles
   Colors, type & components from the supplied brand guidelines.
   ============================================================ */


:root {
  --bg: #160835;
  --card: #22133B;
  --purple-1: #3E156D;
  --purple-2: #5C4A78;
  --purple-3: #75B590;
  --blue: #2B52DE;
  --gold: #D3AE6E;
  --text: #FFFFFF;
  --text-muted: #B9AECD;
  --radius: 14px;
  --font-heading: Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-display: Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-h2: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --maxw: 1100px;
}

/* Skool light palette — the single light scheme used on the landing (light),
   VIP upsell, and thank-you pages. */
body.skool-theme {
  --bg: #F4F1EA;
  --card: #FFFFFF;
  --text: #1B1B1B;
  --text-muted: #6B6B6B;
  --gold: #F4CE71;
  --blue: #2B52DE;
  --purple-1: #ECE7DC;
  --purple-2: #E3DDCE;
}
html:has(.skool-theme) { background: #F4F1EA; }
/* The page background is painted from --hero-bg (the branded gradient), which
   does not read --bg — so the light pages have to say so themselves or they
   get the dark gradient behind light type. This is why the VIP upsell is
   always light, whichever theme the event itself uses. */
body.skool-theme { background: #F4F1EA; background-attachment: scroll; }
/* Readable links / accents on the cream background (gold is reserved for buttons). */
body.skool-theme a { color: #9A6B16; }
body.skool-theme a:hover { color: #1B1B1B; }
body.skool-theme .eyebrow { color: #9A6B16; }
body.skool-theme .footer-links a,
body.skool-theme .site-footer { color: #6B6B6B; }
body.skool-theme .btn-solid { background: var(--gold); border-color: var(--gold); color: #1B1B1B; }
body.skool-theme .btn-solid:hover { background: #efc257; border-color: #efc257; color: #1B1B1B; }
body.skool-theme .btn { color: #1B1B1B; border-color: var(--gold); }
body.skool-theme .btn:hover { background: var(--gold); color: #1B1B1B; }
body.skool-theme .btn-white { background: var(--gold); border-color: var(--gold); color: #1B1B1B; }
body.skool-theme .btn-white:hover { background: #efc257; border-color: #efc257; }
body.skool-theme .topic-card,
body.skool-theme .faq-item,
body.skool-theme .signup-card { background: #fff; border: 1px solid #E5E0D4; box-shadow: 0 6px 22px rgba(27,27,27,0.06); }
body.skool-theme .signup-card input,
body.skool-theme input[type=email] { background: #F4F1EA; color: #1B1B1B; border-color: #D9D2C2; }
body.skool-theme .signup-card input::placeholder { color: #8a8275; }
body.skool-theme .cal-menu { background: #fff; border-color: #E5E0D4; }
body.skool-theme .cal-menu a { color: #1B1B1B; }
body.skool-theme .cal-menu a:hover { background: #F4F1EA; }
body.skool-theme .vip-header { background: #fff; border-bottom: 1px solid #E5E0D4; }
body.skool-theme .vip-progress { background: #E3DDCE; }
body.skool-theme .vip-progress em { color: #1B1B1B; }
/* White logos need darkening on the light Skool background. */
body.skool-theme .vip-header .brand img,
body.skool-theme .site-nav .brand img { filter: invert(1) brightness(0.8); }
body.skool-theme .vip-feature h3 { color: #1B1B1B; }
body.skool-theme .site-footer { border-top-color: #E5E0D4; }
/* Landing-page elements under the light scheme. */
body.skool-theme .tag { color: var(--blue); background: rgba(43,82,222,0.10); border-color: rgba(43,82,222,0.4); }
body.skool-theme .cd-unit { background: #fff; border-color: #E5E0D4; }
body.skool-theme .cd-num { color: #1B1B1B; }
body.skool-theme .day-card h3,
body.skool-theme .topic-title { color: #1B1B1B; }
body.skool-theme .mentor img { border-color: var(--gold); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--hero-bg, radial-gradient(ellipse farthest-corner at 0% 0%, rgba(44,19,95,1) 0%, #160B35 100%));
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; }
/* Keep the root background matching the light theme so no dark strip shows
   below the content on wide/short pages. */

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 0.4em;
}
/* Same h1/h2 scale as the storefront and the admin — see style.css. The
   sales pages (landing, VIP, the annual upsell) keep their own heading
   sizes through body.sales-page, but not their own face: the display face
   is the brand, and the landing page is where it matters most. */
h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); }
body:not(.sales-page) h1 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.2;
}
body:not(.sales-page) h2 {
  font-family: var(--font-h2);
  font-weight: 500;
  font-size: 24px;
}
h3 { font-size: 1.3rem; }

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  color: var(--gold);
  margin-bottom: 0.8rem;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  line-height: 1.2;
  vertical-align: middle;
  padding: 14px 30px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 2px solid var(--gold);
  background: transparent;
  color: var(--gold);
  transition: all 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover {
  background: var(--gold);
  color: var(--bg);
  text-decoration: none;
}
.btn-blue { border-color: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue); color: #fff; }
.btn-white { background: #fff; border-color: #fff; color: var(--bg); }
.btn-white:hover { background: #f0ecf7; border-color: #f0ecf7; color: var(--bg); }
.btn-solid { background: var(--gold); color: var(--bg); }
.btn-solid:hover { background: #e4c184; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-sm { padding: 8px 16px; font-size: 0.8rem; }

/* ---- Cards ---- */
.card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,0.35); }
.card .icon-ring {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); margin-bottom: 16px;
}

/* ---- Navigation ---- */
.site-nav {
  display: flex; align-items: center; justify-content: center;
  padding: 18px 0;
}
.site-nav .brand img { height: 38px; display: block; }
.site-nav .brand span { font-family: var(--font-heading); font-size: 1.4rem; }
.nav-links { display: flex; gap: 26px; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  color: var(--text); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.85rem; font-weight: 500;
}
.nav-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; }
.nav-toggle svg { width: 28px; height: 28px; }

/* ---- Hero / landing ---- */
.hero { padding: 22px 0 60px; }
/* The Skool confirmation page has no eyebrow above its heading, so it gets
   more room top and bottom than the standard hero. */
.hero.hero-skool { padding: 50px 0; }
.hero .lead { font-size: 1.25rem; color: var(--text-muted); max-width: 640px; }
.body-copy { white-space: pre-line; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero-img { width: 100%; border-radius: var(--radius); display: block; }
.hero-img-mobile { display: none; }

/* Tags / badges on the landing page */
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.tag {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(43,82,222,0.18); color: #cdd7ff; border: 1px solid var(--blue);
}

.signup-card { background: var(--card); border-radius: var(--radius); padding: 30px; }

/* Countdown timer */
.countdown { display: flex; gap: 10px; margin: 18px 0 4px; }
.cd-unit {
  flex: 1; background: #1b0e3f; border: 1px solid var(--purple-2);
  border-radius: 10px; padding: 10px 4px; text-align: center;
}
.cd-num { display: block; font-family: var(--font-heading); font-size: 1.7rem; color: var(--gold); line-height: 1; }
.cd-lbl { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 4px; }
.cd-live { color: var(--purple-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 0; }
.signup-card input[type=email], .signup-card input[type=text] {
  width: 100%; padding: 14px; margin-bottom: 14px; border-radius: 10px;
  border: 1px solid var(--purple-2); background: #1b0e3f; color: #fff; font-family: var(--font-body);
}
.signup-card input::placeholder { color: #9c8fc0; }

.partner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; color: var(--text-muted); }
.partner img {
  height: auto; max-height: 40px; width: auto; max-width: min(220px, 44vw);
  object-fit: contain; background: rgba(255,255,255,0.05); padding: 6px; border-radius: 8px;
}

/* Wrapping flex (not grid) so an odd final card centers under the row above. */
.mentors-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.mentors-grid .mentor { flex: 0 1 500px; }
/* Horizontal mentor cards: photo on the left, text on the right. */
.mentor { display: flex; gap: 20px; align-items: flex-start; text-align: left; }
.mentor img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); flex-shrink: 0; }
/* Text stacks vertically beside the photo: name, then title, then bio. */
.mentor-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mentor-info h3 { margin: 0; }
.mentor-info p { margin: 4px 0 0; }
.mentors-section { margin-top: 56px; text-align: center; }
.mentors-section .day-title { text-align: center; margin-bottom: 26px; }
.mentors-section .mentors-grid { text-align: left; }

/* Day sections (image + title topic cards) */
.day-section { margin-top: 64px; text-align: center; }
.day-title { font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 18px; }
.day-desc { color: var(--text-muted); max-width: 720px; margin: 0 auto 36px; font-size: 1.1rem; }
.day-topics-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px; text-align: left;
}
.topic-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius); overflow: hidden;
}
.topic-card img { width: 100%; height: 210px; object-fit: cover; display: block; }
.topic-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem;
  padding: 18px 20px 24px;
}

/* FAQs */
.faq-section { margin-top: 64px; }
.faq-section .day-title { text-align: center; }
.faq-list { max-width: 760px; margin: 30px auto 0; }
.faq-item {
  background: var(--card); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius); padding: 18px 22px; margin-bottom: 12px;
}
.faq-item summary {
  cursor: pointer; font-weight: 500; font-size: 1.05rem; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::after { content: "+"; color: var(--gold); font-size: 1.4rem; margin-left: 16px; }
.faq-item[open] summary::after { content: "–"; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-answer { color: var(--text-muted); margin-top: 12px; white-space: pre-line; }

/* VIP upsell page */
.vip-header { background: #120628; border-bottom: 1px solid rgba(255,255,255,0.06); }
.vip-header-inner { max-width: var(--maxw); margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.vip-header .brand img { height: 34px; display: block; }
.vip-progress { flex: 1; max-width: 460px; height: 26px; background: rgba(255,255,255,0.08); border-radius: 999px; position: relative; overflow: hidden; }
.vip-progress span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); border-radius: 999px; }
.vip-progress em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 0.8rem; font-weight: 500; color: #fff; }
.vip-icon { width: 128px; height: 128px; display: block; margin: 0 auto 18px; object-fit: contain; }
.vip-trustpilot { height: 32px; max-width: 320px; display: block; margin: 20px auto 0; object-fit: contain; border-radius: 6px; }

/* VIP page rhythm — consistent vertical spacing on the light layout. */
.vip-page section.hero { padding: 56px 0 32px; }
.vip-page .day-section { margin-top: 96px; }
.vip-page .day-title { margin-bottom: 16px; }
.vip-page .lead { max-width: 780px; }
.vip-page .faq-section { margin-top: 96px; }
.vip-alt-link { color: var(--text-muted) !important; text-decoration: underline; }
.vip-alt-link:hover { color: var(--text) !important; }
.vip-video { max-width: 760px; margin: 30px auto 0; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; }
.vip-video iframe { width: 100%; height: 100%; border: 0; }
.vip-video-embed { max-width: 760px; margin: 30px auto 0; border-radius: var(--radius); overflow: hidden; }
.vip-video-embed iframe { width: 100%; border: 0; }
.vip-two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; text-align: left; margin-top: 24px; }
.vip-two-img img { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); display: block; }
.vip-two-text ul { list-style: none; padding: 0; }
.vip-two-text li { margin-bottom: 8px; }
.vip-feature { background: var(--card); padding: 36px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.vip-feature h3 { margin-bottom: 10px; }
.vip-feature p { margin: 0; }
.vip-feature h3 { color: #fff; }
.vip-feature p { color: var(--text-muted); }
.vip-quote { margin: 40px auto 0; max-width: 720px; text-align: center; font-size: 1.2rem; }
.vip-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 0.95rem; color: var(--text-muted); }
@media (max-width: 820px) { .vip-two { grid-template-columns: 1fr; } .vip-header-inner { flex-wrap: wrap; } }

/* Bottom call-to-action (shown when day sections exist) */
.bottom-cta { margin-top: 64px; text-align: center; padding: 40px 20px; }
.bottom-cta h2 { margin-bottom: 14px; }
.bottom-cta .btn { margin-top: 8px; }
/* Offset anchor scroll so the signup card isn't hidden under the fixed header height */
#register { scroll-margin-top: 24px; }

.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 24px; }
.event-meta { color: var(--text-muted); font-size: 0.9rem; }
.event-card { padding: 0; overflow: hidden; }
.event-card > :not(.event-card-img) { margin-left: 22px; margin-right: 22px; }
.event-card > .eyebrow { margin-top: 18px; }
.event-card > :last-child { margin-bottom: 22px; }
.event-card-img { width: 100%; height: 170px; object-fit: cover; display: block; }
.event-card:not(:has(.event-card-img)) { padding: 28px; }
.event-card:not(:has(.event-card-img)) > * { margin-left: 0; margin-right: 0; }

/* ---- Add to calendar dropdown ---- */
.cal-dropdown { position: relative; display: inline-block; }
.cal-menu {
  display: none; position: absolute; top: 110%; left: 0; min-width: 220px; z-index: 20;
  background: var(--card); border: 1px solid var(--purple-2); border-radius: 10px; overflow: hidden;
}
.cal-menu.open { display: block; }
.cal-menu a { display: block; padding: 12px 16px; color: var(--text); }
.cal-menu a:hover { background: var(--purple-1); text-decoration: none; }

/* ---- Flash messages ---- */
.flashes { list-style: none; padding: 0; margin: 16px 0; }
.flashes li { padding: 12px 16px; border-radius: 10px; margin-bottom: 8px; }
.flashes .success { background: rgba(117,181,144,0.18); border: 1px solid var(--purple-3); }
.flashes .error { background: rgba(255,90,60,0.16); border: 1px solid #ff5a3c; }
.flashes .warning { background: rgba(211,174,110,0.16); border: 1px solid var(--gold); }

footer.site-footer { padding: 40px 0; color: var(--text-muted); border-top: 1px solid rgba(255,255,255,0.07); margin-top: 60px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { color: var(--text-muted); font-size: 0.9rem; }
.footer-links a:hover { color: var(--gold); }

/* ============================================================
   Admin

   The events admin now renders inside the shared admin shell
   (app/static/css/admin-core.css), so its layout, tables, stat tiles and tab
   bar live there. What remains below is shared with the public pages: the
   form field styling, badges and a couple of text helpers.
   ============================================================ */
label { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=date], input[type=time], input[type=number], select, textarea {
  width: 100%; padding: 11px 13px; border-radius: 10px; background: #1b0e3f;
  border: 1px solid var(--purple-2); color: #fff; font-family: var(--font-body); font-size: 0.95rem;
}
textarea { min-height: 120px; resize: vertical; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.badge.published { background: rgba(117,181,144,0.22); color: #cdebd9; }
.badge.draft { background: rgba(211,174,110,0.18); color: var(--gold); }
.muted { color: var(--text-muted); }
.inline { display: inline; }

/* ---- Responsive / mobile menu ---- */
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Stack mentor photo above the text on small screens. */
  .mentor { flex-direction: column; align-items: center; text-align: center; }
  .mentor-info { align-items: center; }
  /* Keep the signup card inside the viewport on small screens. */
  .signup-card { max-width: 100%; padding: 22px 16px; }
  .countdown { gap: 6px; }
  .cd-unit { min-width: 0; padding: 8px 2px; }
  .cd-num { font-size: 1.3rem; }
  /* On mobile, show the event image at the very top and hide the column one. */
  .hero-img-mobile {
    display: block; width: 100%; border-radius: var(--radius);
    margin-bottom: 18px; max-height: 240px; object-fit: cover;
  }
  .hero-grid .hero-img { display: none; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 70px; right: 16px; left: 16px;
    flex-direction: column; gap: 0; background: var(--card);
    border: 1px solid var(--purple-2); border-radius: var(--radius); padding: 10px; z-index: 50;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 10px; width: 100%; }
}

/* ============================================================
   Gotham Medium sets its own line height.

   --font-h2 and --font-heading both resolve to the medium face (bold got
   folded into it when the fourth file was dropped), and it is a tighter face
   than the system sans it falls back to. Every place it is used sets 1.2 so
   the two look the same whether or not the brand fonts are uploaded.
   ============================================================ */
h1, h2, h3,
body:not(.sales-page) h2,
.site-nav .brand span,
.site-nav-links a {
  line-height: 1.2;
}