/* ==========================================================================
   COMPONENTS
   ==========================================================================
   Reusable pieces that appear on MULTIPLE pages: buttons, cards, the nav
   bar, footer, badges. If a style only applies to one specific page (like
   the home page hero), it belongs in that page's own CSS file instead —
   see home.css. Keeping "shared" and "page-specific" styles in separate
   files is what makes a codebase stay organized as it grows.
   ========================================================================== */


/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* Base button styles — shared by every button variant. We define the
   COMMON properties here (padding, radius, font, transition) and then
   each variant below only needs to override color/background. This
   avoids repeating the same 6 lines of CSS for every button type. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-snappy),
              box-shadow var(--duration-fast) var(--ease-smooth),
              background-color var(--duration-fast) var(--ease-smooth);
}

/* The :active pseudo-class fires WHILE a button is being clicked/pressed
   (not after). Scaling down to 97% on press mirrors the app's own
   PressableStyle (scale: 0.97) — the same tactile "press" feedback,
   translated from a native app gesture to a web click. */
.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--color-brand-gradient);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border-strong);
}

.btn-secondary:hover {
  background: var(--color-sand);
  border-color: var(--color-text-primary);
}

.btn-lg {
  padding: var(--space-lg) var(--space-3xl);
  font-size: var(--text-body-lg);
}

/* Added during the audit fix pass: an honest "not yet available" state
   for the primary download CTA, since no App Store link exists yet.
   Purely additive — every existing .btn rule above is unchanged. Native
   `disabled` is used (rather than just styling a link to look inactive)
   so keyboard and screen reader users get the correct built-in signal
   that this control can't be activated, not just a visual cue. */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn:disabled:hover {
  transform: none; /* cancels .btn-primary:hover's lift effect */
  box-shadow: var(--shadow-sm);
}


/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-medium) var(--ease-smooth),
              box-shadow var(--duration-medium) var(--ease-smooth);
}

/* Cards lift slightly on hover — a small, quiet interaction that signals
   "this is something you can engage with" without being flashy. Matches
   the restraint described in the app's motion system (gentle springs,
   not bouncy ones). */
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}


/* ==========================================================================
   PILLS / BADGES — small labels like category tags on blog articles,
   or the "Daily coaching" label on a feature card
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  font-weight: 600;
  background: var(--color-sky-soft);
  color: var(--color-brand-blue);
}

.pill-pink {
  background: var(--color-pink-soft);
  color: var(--color-brand-pink);
}


/* ==========================================================================
   PLACEHOLDER NOTE — a clearly marked box for content that hasn't been
   finalized yet (founder bio, company timeline, team info, support
   hours). The dashed border and mono-font label are a deliberate visual
   choice: they should look OBVIOUSLY unfinished, not like real polished
   content, so nobody mistakes placeholder copy for something we actually
   stand behind. Reused across About, Team, and Contact.
   ========================================================================== */

.placeholder-note {
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  background: var(--color-sand);
}

.placeholder-note-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-md);
}

.placeholder-note-label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-amber);
  flex-shrink: 0;
}

.placeholder-note p {
  font-size: var(--text-body-md);
  color: var(--color-text-secondary);
}


/* ==========================================================================
   FORM INPUTS — a base text input style, shared by the FAQ search box now
   and the Contact page's form fields later. Building this once as a
   shared component means the Contact form won't need to reinvent input
   styling from scratch.
   ========================================================================== */

.form-input {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-text-primary);
  background: #FFFFFF;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-smooth);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-input:focus {
  outline: none; /* replaced by the border-color change below — a visible
                    focus state still exists, it's just styled to match
                    the site instead of using the browser's default blue
                    ring, which would clash with our own blue */
  border-color: var(--color-brand-blue);
}


/* ==========================================================================
   FILTER PILLS — interactive buttons (not the static .pill label used
   elsewhere) for filtering content by category. Built here as a shared
   component because this exact pattern is needed in two places: the FAQ
   category filters now, and the Blog's category filter chips later.
   ========================================================================== */

.filter-pill {
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  background: #FFFFFF;
  border: 1.5px solid var(--color-border);
  transition: all var(--duration-fast) var(--ease-smooth);
}

.filter-pill:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

/* Applied by JavaScript to whichever pill is currently selected */
.filter-pill.is-active {
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
  color: #FFFFFF;
}


/* ==========================================================================
   FINAL CTA SECTION — used at the bottom of every page. Moved here
   during the content-readiness fix pass; see the note left in
   home.css for why (it was previously only defined there, so it
   silently had no styling at all on 8 of the site's 9 pages).
   ========================================================================== */

.final-cta {
  padding-block: var(--space-5xl);
  text-align: center;
  background: var(--color-ink);
  color: #FFFFFF;
}

/* A small, quiet status badge that tells a visitor the app's real
   state (not yet launched) before they even read the paragraph
   beneath it. Styled for the dark .final-cta background specifically:
   a translucent white fill rather than the site's usual light-blue
   pill, since the standard .pill's light background would look out of
   place against the dark ink section. */
.final-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: var(--space-lg);
}

.final-cta-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
  animation: badgePulse 2.4s var(--ease-smooth) infinite;
}

/* Shared pulse keyframe — a small, slow opacity breathe on a status
   dot, the same pattern used for "live"/"active" indicators in
   professional products (deployment status dots, live indicators).
   Deliberately NOT applied to the whole badge pill — pulsing an
   entire pill reads as an alert or notification; pulsing only the
   small dot reads as "this status is current," which is the more
   restrained, appropriate signal for a pre-launch badge. Defined here
   rather than in home.css since it's shared: used by both the
   homepage's .hero-status-badge (see home.css) and this component. */
@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.final-cta h2 {
  color: #FFFFFF;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.final-cta p {
  color: rgba(255, 255, 255, 0.7);
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
}

.final-cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}


/* ==========================================================================
   SCROLL REVEAL — a reusable utility for fading + lifting an element in
   as it enters the viewport. Applied via a plain class name
   (data-reveal) so any page can opt an element in without new CSS.
   The actual trigger logic lives in main.js (IntersectionObserver);
   this file only defines what the two states look like.

   Respects prefers-reduced-motion automatically — see base.css, which
   already collapses all transition-duration globally. No separate
   media query is needed here.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-smooth), transform 700ms var(--ease-smooth);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optional stagger for a group of siblings revealing together (e.g. a
   grid of cards) — apply data-reveal-delay="1" / "2" / "3" alongside
   data-reveal for a slight cascade instead of everything appearing at
   the exact same instant. */
[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }


/* ==========================================================================
   BREADCRUMB — a simple, honest two-level trail (Home / Current Page).
   Deliberately not a fake three-level hierarchy like "Home / Legal /
   Privacy Policy" — there's no real "/legal" hub page on this site, and
   a breadcrumb implying one exists would be misleading navigation, not
   helpful navigation. Used on Privacy, Terms, and Cookie Policy, where
   a visitor arriving from an external link (search result, footer)
   benefits from an immediate, low-effort way back to the homepage.
   ========================================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.breadcrumb a {
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.breadcrumb a:hover {
  color: var(--color-brand-blue);
}

.breadcrumb-separator {
  color: var(--color-border-strong);
}

.breadcrumb-current {
  color: var(--color-text-muted);
}


/* ==========================================================================
   APP SCREENSHOT — for real, already device-framed screenshots (bezel,
   shadow, and gradient baked into the source PNG itself). Deliberately
   does NOT add another frame, border, or shadow on top — that would
   double up on what's already in the image. This is a container for
   sizing and responsiveness only.
   ========================================================================== */

.app-screenshot {
  text-align: center;
}

.app-screenshot img {
  width: 100%;
  height: auto;
  max-width: 320px;
  margin-inline: auto;
  display: block;
  transition: transform var(--duration-medium) var(--ease-smooth);
}

/* A larger variant for hero/showcase placements where the screenshot
   is the primary visual, not a supporting one next to text. */
.app-screenshot.is-large img {
  max-width: 380px;
}

/* A smaller variant for compact side-by-side comparisons (e.g. the
   pricing page's tier comparison). */
.app-screenshot.is-compact img {
  max-width: 220px;
}

.app-screenshot:hover img {
  transform: translateY(-6px);
}


/* ==========================================================================
   SKIP TO CONTENT — visually hidden until focused, lets keyboard users
   jump straight past the repeated nav on every page. Standard
   accessibility pattern; was confirmed missing site-wide in the audit.
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-lg);
  z-index: 200;
  padding: var(--space-md) var(--space-xl);
  background: var(--color-ink);
  color: #FFFFFF;
  font-size: var(--text-body-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: top var(--duration-fast) var(--ease-smooth);
}

.skip-link:focus {
  top: var(--space-lg);
}


/* ==========================================================================
   SITE HEADER / NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100; /* stays above all other page content while scrolling */
  background: rgba(250, 249, 246, 0.85); /* --color-warm-white at 85% opacity */
  backdrop-filter: blur(12px); /* frosted-glass effect behind the nav bar */
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-medium) var(--ease-smooth),
              background-color var(--duration-medium) var(--ease-smooth);
}

/* Applied by JavaScript once the user scrolls down — see main.js.
   Gives the nav a visible bottom border only once there's page content
   scrolled underneath it, so it doesn't have a harsh line sitting right
   under the hero on page load. */
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-lg);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-heading-sm);
  color: var(--color-text-primary);
}

/* UPDATED for logo integration: this was previously an empty <span>
   filled with a plain gradient — no actual mark, just a color swatch
   standing in for a logo that didn't exist yet. Now targets a real
   <img> (see images/logo-nav.png, exported from the final logo at
   96x96 for retina sharpness, displayed at 32px). object-fit:cover
   with a matching border-radius keeps it visually consistent with the
   32px sizing used everywhere previously. */
.nav-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.nav-links {
  display: none; /* hidden on mobile by default — see media query below */
  align-items: center;
  gap: var(--space-3xl);
}

.nav-links a {
  position: relative;
  font-size: var(--text-body-md);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-smooth);
}

/* A thin underline that grows from the center on hover, using
   ::after so no extra markup is needed. transform: scaleX() is used
   instead of animating width — scaling is what the GPU accelerates,
   width changes force a layout recalculation on every frame. */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1.5px;
  background: var(--color-brand-blue);
  transform: scaleX(0);
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.nav-links a:hover {
  color: var(--color-text-primary);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-cta {
  display: none; /* hidden on mobile — mobile menu has its own CTA */
}

/* Hamburger menu button — only visible on mobile/tablet */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: transform var(--duration-medium) var(--ease-smooth),
              opacity var(--duration-medium) var(--ease-smooth);
}

/* When the mobile menu is open (JS adds .is-open to the toggle button),
   morph the three hamburger lines into an X shape using rotation */
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile dropdown menu panel */
.nav-mobile-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg) 0 var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.nav-mobile-panel.is-open {
  display: flex;
}

.nav-mobile-panel a {
  display: block;
  padding-block: var(--space-md);
  font-size: var(--text-body-lg);
  font-weight: 500;
  color: var(--color-text-primary);
}

/* At 768px and above (tablet landscape / desktop), show the full nav
   links inline and hide the hamburger — this is the standard breakpoint
   for "enough horizontal space to show a normal nav bar" */
@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
  .nav-cta {
    display: inline-flex;
  }
  .nav-toggle,
  .nav-mobile-panel {
    display: none;
  }
}


/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.7);
  padding-block: var(--space-5xl) var(--space-3xl);
  margin-top: var(--space-6xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col h4 {
  color: #FFFFFF;
  font-size: var(--text-body-md);
  margin-bottom: var(--space-lg);
}

.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--text-body-sm);
  padding-block: var(--space-xs);
  transition: color var(--duration-fast) var(--ease-smooth);
}

.footer-col a:hover {
  color: #FFFFFF;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
  text-align: center;
  padding-top: var(--space-3xl);
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}


/* ==========================================================================
   PAGE HERO — the simple centered "eyebrow + heading + intro" pattern
   used at the top of interior pages (Features, About, and future pages
   like FAQ and Contact). This is deliberately smaller and quieter than
   the home page's hero — an interior page's job is to explain, not to
   persuade someone who hasn't decided to be here yet, so it skips the
   gradient blob, founder's note, and dual call-to-action buttons.

   MOVED HERE from features.css once About page needed the identical
   pattern — see the note in features.css for why.
   ========================================================================== */

.page-hero {
  padding-block: var(--space-4xl) var(--space-3xl);
  text-align: center;
}

.page-hero .section-eyebrow {
  display: block;
}

.page-hero h1 {
  font-size: var(--text-display-md);
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
}

.page-hero p {
  font-size: var(--text-body-lg);
  max-width: 560px;
  margin-inline: auto;
}


/* ==========================================================================
   SECTION HEADER — the "eyebrow + heading + subtext" pattern used at the
   top of most page sections (Features, Why UpLift Me, Blog preview, etc.)
   ========================================================================== */

.section-header {
  max-width: 640px;
  margin-bottom: var(--space-4xl);
}

.section-header.center {
  margin-inline: auto;
  text-align: center;
}

.section-eyebrow {
  display: inline-block;
  font-size: var(--text-body-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand-blue);
  margin-bottom: var(--space-md);
}

.section-header h2 {
  margin-bottom: var(--space-lg);
}

.section-header p {
  font-size: var(--text-body-lg);
}