/**
 * Theme Name:     Appetiser Baseplate
 * Author:         Appetiser
 * Template:       generatepress
 * Text Domain:	   appetiser
 * Description:    GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
 */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Colour */
  --color-bg:          #020216;
  --color-bg-2:        #0f0f22;
  --color-bg-3:        #1C1C3C; /* Figma --Surfaces/Background-3 — input field fill */
  --color-brand:       #c2fffb;
  --color-brand-shade: #d4fffc;
  --color-brand-shade-04: #151b2d; /* Figma: Surfaces/Brand - Shade 04 — pill-button hover bg */
  --color-text-pri:    #ffffff;
  --color-text-sec:    #b3b3b9;
  --color-text-ter:    #80808a;
  --color-text-inv:    #020216;
  --color-border:      #353545;
  --color-overlay:     rgba(5, 5, 35, 0.6);
  --color-comp-1:      #c0f281;
  --color-comp-1-rgb:  192, 242, 129;
  --color-comp-2:      #fb8dfd;
  --color-comp-2-rgb:  251, 141, 253;
  --color-comp-3:      #8290ff;
  --color-comp-3-rgb:  130, 144, 255;
  --color-comp-4:      #47d9d0;
  --color-cta:          #DDEFFF; /* Figma --Surfaces/Brand---Shade-02 — all CTA buttons */
  --color-cta-hover:    #eef4ff; /* Figma --Surfaces/Brand---Shade-03 — subtle lighter hover */
  --color-cta-blue:     #3d7dff; /* lightened from Figma's #004ad9 — used as label text on dark bg (waitlist_cta, founders_story); #004ad9 failed WCAG AA (~2.7:1), this passes ≥4.5:1 against both --color-bg and --color-bg-2 */
  --color-cta-blue-hover: #0038a6; /* Darker shade for waitlist_cta button hover */

  /* Typography */
  --font-title: 'Montserrat', sans-serif;
  --font-body:  'Be Vietnam Pro', sans-serif;

  --text-h2:       clamp(2rem, 4vw, 3rem);
  --text-h3:       clamp(1.75rem, 3vw, 2.25rem);
  --text-h4:       1.875rem;
  --text-h6:       1.25rem;
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-sub:      0.875rem;
  --text-caption:  0.6875rem;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  0.75rem;
  --space-lg:  1rem;
  --space-xl:  1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 2.5rem;
  --space-5xl: 3.5rem;

  /* Radius */
  --radius-sm:  0.5rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-6xl: 4rem;
}

/* ── Accessibility utility ──────────────────────────────────── */
/* Visually-hidden but available to screen readers / form labels.
   Standard clip pattern; site-wide because it is a generic a11y helper. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Animation keyframe ─────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes apt-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ── Scroll-reveal utility ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .apt-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .apt-animate.apt-is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ── Card hover micro-interactions ─────────────────────────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .app-features-grid__card {
    transition: transform 0.25s ease;
  }
  .app-features-grid__card:hover {
    transform: translateY(-3px);
  }
  .catch-history-feature__card {
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  .catch-history-feature__card:hover {
    border-color: rgba(194, 255, 251, 0.3);
    transform: translateY(-2px);
  }
}

/* ── Global dark-theme base ─────────────────────────────────── */
/* Override GeneratePress's default light body so no white flash appears
   on any front-end view, including before our chrome sections render. */
body {
  background-color: var(--color-bg);
  color: var(--color-text-pri);
}

/* Reset GP link colours site-wide to our brand. */
a,
a:visited {
  color: var(--color-brand);
}
a:hover,
a:focus {
  color: var(--color-brand-shade);
}

/* ── Landing page background ────────────────────────────────── */
.full-width-content {
  background-color: var(--color-bg);
}

/* ── Ocean depth gradient — landing page only ───────────────── */
/* Background deepens as you scroll, simulating diving into the ocean. */
.page-template-page-landing {
  background: linear-gradient(
    to bottom,
    #040428 0%,
    #020216 20%,
    #01010F 65%,
    #000008 100%
  );
}

.page-template-page-landing .full-width-content {
  background-color: transparent;
}

/* Section backgrounds must be transparent so the body gradient shows through */
.page-template-page-landing #main > section {
  background-color: transparent;
}

/* ── Landing page layout reset ──────────────────────────────── */
/* GeneratePress sets display:flex on .site-content, which makes
   all direct children (our sections) render side-by-side at desktop.
   Force block layout on the landing page template only. */
.full-width-content .site-content,
.full-width-content #primary,
.full-width-content #main {
  display: block;
  width: 100%;
}

/* ── Global chrome height (site_header + site_footer) ───────────
   Full-screen section views (message_screen, legal_page) fill exactly
   the space between the global header and footer via
   min-height: calc(100dvh - var(--apt-chrome-h)) — so they neither scroll
   (message screens) nor collapse on short content (legal pages). Values are
   the measured header+footer totals at each breakpoint (the footer stacks
   taller on mobile). Chrome-less views (Coming Soon) reset it to 0. */
:root {
  --apt-chrome-h: 191px; /* desktop: 130 header + 61 footer (18px padding × 2 + 25px logo) */
}
@media (max-width: 900px) {
  :root { --apt-chrome-h: 281px; } /* 104 header + 177 footer (stacked: logo+copyright+social + 24px gaps × 2 + 48px padding) */
}
@media (max-width: 480px) {
  :root { --apt-chrome-h: 252px; } /* 94 header + 158 footer (stacked, tighter padding) */
}
body.apt-chrome-off {
  --apt-chrome-h: 0px; /* Coming Soon etc. — no header/footer to subtract */
}
.site-content{
  overflow-x: hidden;
}

/* ── GeneratePress masthead / colophon resets ───────────────────
   GP's #masthead (.site-header) and #colophon (.site-footer) carry
   a default light background and padding that bleed around our custom
   site_header / site_footer component pills. Zero them out globally.
   !important beats any inline CSS that GP's Customizer may inject. */
#masthead,
#colophon {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Collapse the masthead wrapper so our fixed .apt-nav floats over content
   rather than pushing it down. Fixed children don't contribute height,
   but GP may set min-height/padding — this resets that completely. */
#masthead {
  height: 0;
  overflow: visible;
}