/* ============================================================
   NEGOSYO PLANS — DESIGN SYSTEM
   Brand tokens · Typography · Components · Utilities
   ============================================================ */

/* ─── GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap');

/* ─── COLOR TOKENS ─────────────────────────────────────────── */
:root {
  --color-ink:        #0F0E0D;
  --color-paper:      #FAF7F2;
  --color-cream:      #F0EAE0;
  --color-gold:       #C8963E;
  --color-gold-light: #E8BE74;
  --color-red:        #CC3333;
  --color-blue:       #1A3A6B;
  --color-muted:      #7A7060;
  --color-border:     #DDD5C8;
  --color-success:    #2A6B42;
  --color-overlay:    rgba(15,14,13,0.72);

  /* ─── TYPOGRAPHY ─── */
  --font-display: 'Playfair Display', serif;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Lora', serif;
  --font-mono:    'DM Mono', monospace;

  /* ─── TYPE SCALE ─── */
  --text-xs:   0.625rem;
  --text-sm:   0.75rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  3.75rem;
  --text-5xl:  5rem;
  --text-hero: clamp(3.5rem, 9vw, 7rem);

  /* ─── SPACING ─── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;

  /* ─── LAYOUT ─── */
  --max-width:         1200px;
  --max-width-content: 860px;
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   16px;
  --shadow-card:     0 2px 12px rgba(15,14,13,0.08);
  --shadow-elevated: 0 8px 32px rgba(15,14,13,0.14);

  /* ─── TRANSITIONS ─── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── NAV HEIGHT ─── */
  --nav-height: 68px;
}

/* ─── RESET ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  max-width: 100%;
  display: block;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ─── SELECTION ─────────────────────────────────────────────── */
::selection {
  background: var(--color-gold);
  color: var(--color-ink);
}

/* ─── ACCESSIBILITY ─────────────────────────────────────────── */

/*
 * Screen-reader-only utility — hides visually but stays in the a11y tree.
 * Use on elements that must be announced but not seen.
 */
.visually-hidden,
.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;
}

/*
 * Skip navigation link — first focusable element on every page.
 * Visible only when focused via keyboard (not on mouse hover).
 */
.skip-link {
  position: absolute;
  top: -200%;
  left: var(--space-4);
  z-index: 99999;
  padding: var(--space-3) var(--space-6);
  background: var(--color-gold);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top 0.15s ease;
  /* Prevents the element from affecting layout while off-screen */
  white-space: nowrap;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-4);
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
}

/*
 * Global :focus-visible ring — WCAG 2.1 SC 2.4.7 (Focus Visible).
 * Applies only for keyboard navigation, not mouse clicks.
 * Gold 2px ring with 3px offset matches brand identity.
 */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/*
 * Remove default focus ring for mouse users.
 * We use :focus-visible so keyboard users still see the ring.
 * This is safe in all modern browsers.
 */
:focus:not(:focus-visible) {
  outline: none;
}

/*
 * Specific focus-visible overrides for dark backgrounds.
 * On dark sections (--color-ink), the gold ring needs to be more visible.
 */
.pp-hero :focus-visible,
.pp-financials :focus-visible,
.pp-final-cta :focus-visible,
.about-hero :focus-visible,
.legal-hero :focus-visible {
  outline-color: #fff;
}

/*
 * Live region utility — for dynamically updated content
 * that screen readers should announce.
 */
[aria-live] { /* base: no visual style needed */ }

.sr-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Touch target minimum sizes — WCAG 2.5.5 / Apple HIG 44px / Google 48px.
 * Applied globally to interactive elements via min-height.
 * Does not change visual size — the transparent padding adds tap area.
 */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── LAYOUT ────────────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.container--narrow {
  max-width: var(--max-width-content);
}

.section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.section--sm {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75em 1.5em;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
  /* WCAG 2.5.5 / Apple HIG minimum touch target */
  min-height: 44px;
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-ink);
  border-color: var(--color-gold);
}
.btn-primary:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(200,150,62,0.35);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  border-color: var(--color-ink);
  background: var(--color-cream);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-ghost:hover {
  color: var(--color-gold);
  text-decoration-color: var(--color-gold);
}

.btn-white {
  background: #fff;
  color: var(--color-ink);
  border-color: #fff;
}
.btn-white:hover {
  background: var(--color-cream);
}

.btn--sm {
  font-size: var(--text-sm);
  padding: 0.5em 1.1em;
}

.btn--lg {
  font-size: var(--text-md);
  padding: 0.9em 2em;
}

.btn--full {
  width: 100%;
}

/* ─── BADGES ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25em 0.75em;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 100px;
  line-height: 1;
}

.badge-gold {
  background: rgba(200,150,62,0.15);
  color: var(--color-gold);
  border: 1px solid rgba(200,150,62,0.3);
}

.badge-red {
  background: rgba(204,51,51,0.12);
  color: var(--color-red);
  border: 1px solid rgba(204,51,51,0.2);
}

.badge-blue {
  background: rgba(26,58,107,0.10);
  color: var(--color-blue);
  border: 1px solid rgba(26,58,107,0.2);
}

.badge-green {
  background: rgba(42,107,66,0.10);
  color: var(--color-success);
  border: 1px solid rgba(42,107,66,0.2);
}

.badge-ink {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* ─── CARD ──────────────────────────────────────────────────── */
.card {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ─── SECTION HEADERS ───────────────────────────────────────── */
.section-eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.section-sub {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-muted);
  line-height: 1.8;
  max-width: 60ch;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}
.section-header .section-sub {
  margin-left: auto;
  margin-right: auto;
}

/* ─── DIVIDER ───────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

.divider-gold {
  border-color: var(--color-gold);
  opacity: 0.3;
}

/* ─── FORM ELEMENTS ─────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.form-input,
.form-select {
  padding: 0.75em 1em;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast);
  width: 100%;
  appearance: none;
}

.form-input:focus,
.form-select:focus {
  /* Keep border + glow as the visible focus indicator (WCAG-compliant) */
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(200, 150, 62, 0.2);
  /* Override the global :focus-visible ring here — the border IS the indicator */
  outline: none;
}

/* Keyboard users: gold ring outside the box instead of inside */
.form-input:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  box-shadow: none;
}

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

/* ─── STAR RATING ───────────────────────────────────────────── */
.stars {
  display: inline-flex;
  gap: 1px;
  color: var(--color-gold);
  font-size: 0.9em;
}

/* ─── TRUST BADGE ROW ───────────────────────────────────────── */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.trust-item::before {
  content: '✓';
  color: var(--color-success);
  font-weight: 700;
}

/* ─── TOAST ─────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  pointer-events: none;
}

.toast {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-elevated);
  pointer-events: auto;
  animation: toastSlideUp 0.3s var(--transition-slow) forwards;
  max-width: 380px;
  text-align: center;
}

.toast-success { background: var(--color-success); }
.toast-error   { background: var(--color-red); }
.toast-info    { background: var(--color-blue); }
.toast-gold    { background: var(--color-gold); color: var(--color-ink); }

.toast.removing {
  animation: toastFadeOut 0.3s ease forwards;
}

@keyframes toastSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ─── CUSTOM CURSOR ─────────────────────────────────────────── */
#cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--color-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10001;
  transition: transform 0.1s;
  transform: translate(-50%, -50%);
}

#cursor-ring {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--color-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transition: transform 0.15s ease, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}

@media (hover: none) {
  #cursor, #cursor-ring { display: none; }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
/*
 * Respects prefers-reduced-motion user preference.
 * WCAG 2.1 SC 2.3.3 (Animation from Interactions).
 * The global rule collapses all transitions/animations.
 * Component-specific overrides below stop looping animations
 * that can't be handled by duration alone.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Stop looping/scrolling marquee (testimonials, trust strip) */
  .marquee-track,
  .marquee-inner {
    animation: none !important;
    transform: none !important;
  }

  /* Stop hero card float/pulse animations */
  .hero-card,
  .hero-floating-card,
  [class*="float"],
  [class*="pulse"] {
    animation: none !important;
  }

  /* Stop the world map OFW dot pulse */
  .ofw-dot,
  .ofw-dot-pulse {
    animation: none !important;
    opacity: 1 !important;
  }

  /* Stop progress bar fill animations */
  .pp-star-bar-fill,
  .progress-fill {
    transition: none !important;
  }

  /* Stop skeleton shimmer */
  .skeleton::after {
    animation: none !important;
    background: var(--color-border) !important;
  }

  /* Wizard step transitions: instant instead of slide */
  .wizard-step {
    transition: none !important;
    transform: none !important;
  }

  /* Toast: still show/hide but without slide animation */
  .toast {
    animation: none !important;
    opacity: 1 !important;
  }

  /* Conversion popups: skip scale-in, just show */
  .cx-card {
    transform: none !important;
    transition: opacity 0.01ms !important;
  }
}

/* ─── PRINT ──────────────────────────────────────────────────── */
@media print {
  nav, .cart-sidebar, #top-bar, .floating-whatsapp,
  #cookie-banner, .modal-overlay, #cursor, #cursor-ring,
  .back-to-top, #toast-container { display: none !important; }
}