/* ============================================
   WHITE OAK MEDIA — Client Portal Styles
   01-base.css — Font loading, CSS variables, reset, typography, utilities
   ============================================ */

/* ============================================
   WHITE OAK MEDIA — Client Portal Styles
   Brand: #b45143 (terra cotta), #1d242c (navy), #f2f1ec (cream)
   Font: Gilroy
   ============================================ */

/* ---------- Gilroy Font Loading ---------- */
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Light.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-display: swap;
}

/* ---------- CSS Variables ---------- */
:root {
  --color-primary: #b45143;
  --color-primary-hover: #9c4439;
  --color-primary-light: #b4514315;
  --color-primary-subtle: #b4514310;
  --color-navy: #1d242c;
  --color-navy-light: #2a3440;
  --color-cream: #f2f1ec;
  --color-cream-dark: #e8e6e1;
  --color-white: #ffffff;
  --color-text: #1d242c;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-border: #e8e6e1;
  --color-border-light: #f0efe9;
  --color-success: #2d8a4e;
  --color-success-bg: #ecfdf5;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-info: #2563eb;
  --color-info-bg: #eff6ff;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 2px rgba(29,36,44,0.04);
  --shadow-md: 0 4px 12px rgba(29,36,44,0.06);
  --shadow-lg: 0 8px 30px rgba(29,36,44,0.08);
  --shadow-xl: 0 16px 50px rgba(29,36,44,0.12);

  --font-body: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;

  /* Service type colors (WOM extended palette) */
  --color-svc-website: #4a6178;
  --color-svc-website-bg: #4a617815;
  --color-svc-google-ads: #7a8c6e;
  --color-svc-google-ads-bg: #7a8c6e15;
  --color-svc-branding: #c07a50;
  --color-svc-branding-bg: #c07a5015;
  --color-svc-seo: #3d5a3e;
  --color-svc-seo-bg: #3d5a3e15;
  --color-svc-sermon-social: #d4944a;
  --color-svc-sermon-social-bg: #d4944a15;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  background: var(--color-cream);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
  /* Prevent rubber-band scroll on iOS when used as PWA */
  overscroll-behavior: none;
}
/* Remove tap flash on all interactive elements (iOS/Android) */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
/* Prevent text selection during tap gestures on UI chrome */
.topbar, .sidebar, .mobile-nav, .mobile-more-drawer, .btn, button {
  -webkit-user-select: none;
  user-select: none;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ---------- Utility ---------- */
.label-upper {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.view { display: none; }
.view.active { display: block; }
.page { display: none; padding: 2rem; max-width: 1400px; margin: 0 auto; }
.page.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }


/* ═══════════════════════════════════════════════════════════════════
   PHASE 1 REFRESH — Extended Palette & Body Background
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   PHASE 1 — VISUAL REFRESH (2026-05-13)
   Pure CSS overrides. Adds WOM extended palette, dark sidebar,
   colored stat cards, more breathing room in modals.
   To revert: delete everything below this line.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Extended WOM Palette ──────────────────────────────────────── */
:root {
  /* Extended brand colors */
  --wom-oak: #b45143;
  --wom-oak-light: #c8695c;
  --wom-navy: #2e3642;
  --wom-navy-deep: #1a2029;
  --wom-midnight: #141c24;
  --wom-cream: #f3f1eb;
  --wom-cream-dark: #e8e2d6;
  --wom-warm-white: #faf7f2;
  --wom-stone: #e0d4c1;
  --wom-dim: #8a8275;

  --wom-amber: #d4944a;
  --wom-amber-bg: #fef4e7;
  --wom-copper: #c07a50;
  --wom-copper-bg: #fcf0e7;
  --wom-gold: #e8b252;
  --wom-gold-bg: #fef7e6;
  --wom-sage: #7a8c6e;
  --wom-sage-bg: #eef2eb;
  --wom-forest: #3d5a3e;
  --wom-forest-bg: #e8efe7;
  --wom-slate: #4a6178;
  --wom-slate-bg: #ebf0f5;
  --wom-rust: #8b3a2a;
  --wom-rust-bg: #f8e8e3;
  --wom-blush: #d4a09a;
  --wom-terracotta: #c96b4f;
}

/* ─── Body background — slightly warmer cream ────────────────────── */
body { background: var(--wom-cream); }