/* ==========================================================================
   Mobino redesign 2026 — restyles existing, fully Wagtail-editable markup
   (menu app, HeroMixin fields) rather than replacing the templates.
   Loaded after general.css in base.html so these rules take precedence.
   ========================================================================== */

:root {
  /* Light-theme pass (2026-08-13): background/surface/text tokens flipped
     from dark to light. --mobino-dark-ink and --mobino-dark-ink-soft are the
     ORIGINAL dark values, kept as fixed (non-flipping) constants for the few
     spots that stay deliberately dark on purpose regardless of page theme —
     the footer band and the "featured" subscription card. */
  --mobino-ink: #FFFFFF;
  --mobino-ink-soft: #F4F5FB;
  --mobino-surface: #FFFFFF;
  --mobino-surface-raised: #F6F7FC;
  --mobino-text-body: #1A1B2E;
  --mobino-text-muted: #5B5E82;
  --mobino-accent-1: #2543F2;
  --mobino-accent-2: #7256FF;
  --mobino-accent-3: #4494FC;
  --mobino-line: rgba(11,3,76,0.1);
  --mobino-dark-ink: #0B034C;
  --mobino-dark-ink-soft: #171055;

  /* Re-point the SITE'S OWN existing design tokens (used throughout
     general.css and every streams block) at the new palette, instead of
     fighting them component-by-component. --main-gradient and
     --color-primary are already used almost everywhere. --color-secondary
     (legacy, hardcoded #ffffff in general.css's own :root) is re-pointed
     here too — it drives nav/hamburger/hero text color in a dozen places
     that would otherwise stay white forever regardless of this flip. */
  --main-gradient: linear-gradient(120deg, var(--mobino-accent-1), var(--mobino-accent-2));
  --color-primary: var(--mobino-ink);
  --color-primary-900: var(--mobino-ink);
  --color-primary-800: var(--mobino-ink-soft);
  --color-primary-500: var(--mobino-accent-1);
  --color-tertiary: var(--mobino-ink);
  --color-secondary: var(--mobino-text-body);
}

body {
  color: var(--mobino-text-body);
  background: var(--mobino-surface);
}

.content_wrapper {
  background-color: var(--mobino-surface);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mobino-text-body);
}

/* ---------- Header / nav ---------- */
/* The original CSS has a .top_section_wrapper background and a
   .header_nav_container_container.scrolled / :has(#nav-container.active)
   state that both swap in the OLD CDN gradient image (--svg-gradient).
   Those selectors are more specific than a single class, so they win over
   a plain ".header_nav_container_container" rule — match/exceed their
   specificity here and explicitly clear background-image. */
.top_section_wrapper {
  background: var(--mobino-ink) !important;
  background-image: none !important;
}
.header_nav_container_container,
.header_nav_container_container.scrolled,
.header_nav_container_container:has(#nav-container.active) {
  background: var(--mobino-ink) !important;
  background-image: none !important;
  border-bottom: none;
}
.header_nav_container nav p,
.header_nav_container nav a {
  color: var(--mobino-text-body);
}
.header-btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 11px 22px;
  transition: filter 0.15s ease, background 0.15s ease;
}
/* general.css shrinks .header-btn padding/font below 900px so the nav row
   fits next to the logo and hamburger on phones. Since this file loads
   after general.css, its unconditional padding above would otherwise win
   at every width and push the header wider than the viewport on mobile. */
@media only screen and (max-width: 900px) {
  .header-btn {
    padding: 0 16px;
  }
}
.header-btn.btn-login {
  color: var(--mobino-text-body);
  border: 1px solid rgba(11,3,76,0.2);
  background: transparent;
}
.header-btn.btn-login:hover {
  background: rgba(11,3,76,0.05);
}
.header-btn.btn-signup {
  background: linear-gradient(120deg, var(--mobino-accent-1), var(--mobino-accent-2));
  color: #fff;
  border: none;
}
.header-btn.btn-signup:hover {
  filter: brightness(1.08);
}
.header_nav_container_container .first_col {
  gap: 4rem;
}
.top_nav_links {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top_nav_link {
  color: var(--mobino-text-muted);
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.top_nav_link:hover {
  color: var(--mobino-text-body);
}
@media (max-width: 1100px) {
  /* Only hide the horizontal desktop-style row when the mobile dropdown is
     CLOSED. An unconditional ".top_nav_links { display:none }" here also
     hid the same links inside the open "#nav-container.active" dropdown —
     the hamburger menu opened but showed nothing, since this is the only
     stylesheet that defines .top_nav_links at all. */
  #nav-container:not(.active) .top_nav_links {
    display: none;
  }
  #nav-container.active .top_nav_links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 24px var(--default-padding-one, 20px);
  }
  #nav-container.active .top_nav_link {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--mobino-line, rgba(255, 255, 255, 0.1));
  }
}

/* The original site hid #nav-container entirely and relied on the hamburger
   menu at every screen size. The approved design shows a normal visible
   nav row on desktop, so re-enable it there and hide the hamburger there
   instead — mobile keeps the original hamburger behaviour untouched. */
@media (min-width: 1101px) {
  #nav-container {
    display: block;
  }
  #nav-container .sub-menus {
    display: none;
  }
  .hamburger-btn-container {
    display: none;
  }
}

/* ---------- Hero (default_hero.html) ---------- */
/* Background, bands, h1 sizing, badge and CTA-row styles now live in
   default_hero.css (the component's own stylesheet), since it loads after
   this file and would otherwise win the cascade. */
.index_top_content_wrapper .hero_body,
.index_top_content_wrapper .hero_body.dark {
  color: var(--mobino-text-muted);
  font-size: 1.7rem;
  max-width: 46ch;
}
.hero_cta_btn {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 600;
  background: linear-gradient(120deg, var(--mobino-accent-1), var(--mobino-accent-2));
  color: #fff !important;
  text-decoration: none;
  border: none;
  transition: filter 0.15s ease;
}
.hero_cta_btn:hover {
  filter: brightness(1.08);
}

/* ---------- Footer ---------- */
/* footer.footer (element+class) in general.css is more specific than a
   single ".footer" class and also swaps in the OLD CDN gradient image —
   match that specificity and explicitly clear the background-image. */
/* Footer stays a deliberate dark/colored band even on the light theme — a
   grounded, colorful close to an otherwise light page, matching the same
   fixed-dark treatment as the "featured" subscription card. Uses
   --mobino-dark-ink-soft (the pre-flip ink-soft value) instead of the now-
   light --mobino-ink-soft token, so it doesn't flip with the rest of the page. */
footer.footer {
  background: linear-gradient(150deg, var(--mobino-dark-ink-soft) 0%, var(--mobino-dark-ink-soft) 35%, var(--mobino-accent-1) 80%, var(--mobino-accent-2) 100%) !important;
}
.footer_curve {
  background: var(--mobino-dark-ink-soft);
}
footer.footer .footer_content {
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
/* general.css collapses the footer grid to 2 cols at <=1050px and 1 col at
   <=900px. This file's unconditional column override above has the same
   specificity and loads after general.css, so without repeating those
   breakpoints here it would win at every width and the footer would never
   collapse on tablet/mobile. */
@media only screen and (max-width: 1050px) {
  footer.footer .footer_content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 900px) {
  footer.footer .footer_content {
    grid-template-columns: repeat(1, 1fr);
  }
}
.footer_brand_col img {
  width: 140px;
}
/* general.css's ".footer_col p { color: var(--color-secondary) }" is more
   specific (0,1,1) than a bare ".footer_about"/".footer_address" (0,1,0), so
   now that --color-secondary is repointed to the (dark) body text color for
   the rest of the light-themed page, it would win here and go dark on the
   still-dark footer. Prefix with "footer.footer" to regain higher
   specificity and keep these two intentionally light on the footer band. */
footer.footer .footer_about {
  margin: 1.6rem 0 0;
  color: #B7B4E8;
  font-size: 1.4rem;
  line-height: 1.6;
  max-width: 32ch;
}
footer.footer .footer_address {
  margin: 1.6rem 0 0;
  color: #B7B4E8;
  font-size: 1.4rem;
  line-height: 1.6;
}
.footer_col.menu .parent {
  color: #F3F2FF;
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.footer_col.menu .child {
  color: #B7B4E8;
  font-weight: 400;
}
.footer_col.menu .child:hover {
  color: #F3F2FF;
}
.footer-buttons .header-btn.btn-signup {
  background: linear-gradient(120deg, var(--mobino-accent-1), var(--mobino-accent-2));
}
footer.footer .footer_content.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.footer_copyright {
  display: flex;
  gap: 2.4rem;
  color: #9490C4;
  font-size: 1.3rem;
}

/* ---------- Generic buttons / links used across page bodies ---------- */
a {
  color: var(--mobino-accent-1);
}

/* Horizontal-cards and subscription-cards styling now lives directly in
   their own component stylesheets (streams/static/streams/css/*.css),
   since those load after this file and would otherwise win the cascade. */

/* ---------- Shared "eyebrow + heading + intro" block section head ---------- */
/* Used by horizontal_cards_block, subscription_cards_block and
   reference_logos_block. Defined here (loads before those stylesheets) but
   these particular rules have no conflicting counterpart there, so the
   cascade order doesn't matter for this block. */
.block_section_head {
  max-width: 62rem;
  margin: 0 0 4rem;
  text-align: left;
}
.block_eyebrow {
  display: block;
  color: var(--mobino-accent-1);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.block_section_head h2 {
  margin: 0 0 1.2rem;
  text-align: left;
}
.block_intro {
  margin: 0;
  color: var(--mobino-text-muted);
  font-size: 1.6rem;
  line-height: 1.5;
}