/* ============================================================
   Primer Financial — assets/css/swiss.css
   Swiss Design System — Core Styles
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --primary:      #0A2540;
  --primary-dark: #061929;
  --accent:       #D4AF37;
  --accent-dark:  #B8961F;
  --success:      #00875A;
  --danger:       #DC2626;
  --bg:           #F8F9FA;
  --white:        #FFFFFF;
  --dark:         #1A1A1A;
  --text:         #1A1A1A;
  --text-light:   #6B7280;
  --border:       #E5E7EB;
  --footer-bg:    #1A1A1A;

  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  --radius:    4px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.16);

  --transition: 200ms ease;
}

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

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body { overflow-x: hidden; }

/* Ensure container always has horizontal padding */
.container {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scroll progress bar ────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent);
  z-index: 9999;
  transition: width .1s linear;
}

/* ── Skip link (accessibility) ─────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--primary);
  color: var(--white);
  padding: 8px 16px;
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  z-index: 10000;
}
.skip-link:focus { left: 8px; }

/* ── Typography ─────────────────────────────────────────────── */
h1 {
  font-size: clamp(28px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--primary);
}
h2 {
  font-size: clamp(26px, 3.5vw, 48px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  color: var(--primary);
}
h3 {
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.25;
  color: var(--primary);
}
h4 {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  color: var(--primary);
}
p { font-size: 16px; line-height: 1.75; }

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }

/* Numeric display */
.rate-display, .stat-number {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--accent);
}

/* Section labels */
.section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

/* ── Section layouts ────────────────────────────────────────── */
.section { padding: var(--space-3xl) 0; }
.section-sm { padding: var(--space-xl) 0; }
.section-lg { padding: calc(var(--space-3xl) * 1.25) 0; }

.section-header {
  margin-bottom: var(--space-2xl);
  text-align: center;
}
.section-header h2 { margin-bottom: var(--space-sm); }
.section-header p { font-size: 18px; color: var(--text-light); max-width: 600px; margin: 0 auto; }

/* Alternating background */
.bg-light-gray { background: var(--bg); }
.bg-primary     { background: var(--primary); }
.bg-white       { background: var(--white); }

/* ── Swiss horizontal rule ──────────────────────────────────── */
.swiss-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-lg) 0;
}
.swiss-rule-accent {
  border: none;
  border-top: 2px solid var(--accent);
  width: 48px;
  margin: var(--space-md) 0;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-swiss {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn-swiss:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.btn-swiss-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.btn-swiss-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
}

.btn-swiss-accent {
  background: var(--accent);
  color: var(--primary);
  border-color: var(--accent);
}
.btn-swiss-accent:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--primary);
}

.btn-swiss-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-swiss-outline:hover {
  background: var(--primary);
  color: var(--white);
}

.btn-swiss-outline-white {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-swiss-outline-white:hover {
  background: var(--white);
  color: var(--primary);
}

.btn-swiss-white {
  background: var(--white);
  color: var(--primary);
  border-color: var(--white);
}
.btn-swiss-white:hover {
  background: var(--bg);
  color: var(--primary);
}

.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-lg { padding: 18px 36px; font-size: 16px; }

/* ── Trust topbar ───────────────────────────────────────────── */
.trust-topbar {
  background: var(--primary-dark);
  padding: 6px 0;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
.trust-topbar-inner {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  flex-wrap: wrap;
}
.trust-topbar span { display: flex; align-items: center; gap: 6px; }
.trust-topbar .fa-shield-halved { color: var(--accent); }
.trust-topbar .fa-check-circle  { color: var(--success); }
.trust-topbar .trust-since      { margin-left: auto; }

/* ── Main navigation ────────────────────────────────────────── */
.main-nav {
  background: var(--white);
  padding: 0;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: 72px;
  min-width: 0;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -.5px;
}
.logo-tagline {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--accent);
  text-transform: uppercase;
}

/* Menu */
.main-menu {
  display: flex;
  list-style: none;
  gap: 4px;
  align-items: center;
  margin: 0;
  padding: 0;
  flex: 1;
}

.main-menu .nav-link {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
}
.main-menu .nav-link:hover,
.main-menu .nav-link.active {
  color: var(--primary);
  background: var(--bg);
}
.main-menu .nav-link.active { color: var(--accent); font-weight: 700; }

/* Dropdown */
.has-dropdown { position: relative; }
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  list-style: none;
  padding: 8px 0;
  z-index: 100;
}
.nav-dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: all var(--transition);
}
.nav-dropdown a:hover {
  background: var(--bg);
  color: var(--accent);
  padding-left: 24px;
}
.has-dropdown:hover .nav-dropdown { display: block; }
.nav-arrow { font-size: 10px; transition: transform var(--transition); }
.has-dropdown:hover .nav-arrow { transform: rotate(180deg); }

/* Nav right */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Language switcher */
.lang-switcher { display: flex; gap: 2px; }
.lang-btn {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  border-radius: var(--radius);
  transition: all var(--transition);
  letter-spacing: .5px;
}
.lang-btn:hover, .lang-btn.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--primary);
  transition: all var(--transition);
  border-radius: 2px;
}

/* Header accent line */
.header-accent-line {
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
}

/* ── Fade-in animation ──────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}