/* ═══════════════════════════════════════════════════════════════════════════
   VERI-AQ — STYLES.CSS
   Single consolidated stylesheet. Per rebuild spec: every page links this
   ONE file, once. Do not reintroduce a split/import system — that is what
   allowed conflicting versions to coexist undetected across sessions.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. CSS VARIABLES — SINGLE SOURCE OF TRUTH FOR BRAND TOKENS
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* BRAND COLORS (locked) */
  --color-navy: #0D3B44;
  --color-navy-light: #0A1F44;
  --color-teal: #1B9B9E;
  --color-teal-light: #2DB7BA;
  --color-teal-dark: #16797C;
  --color-green: #00B894;
  --color-green-hover: #00A080;
  --color-blue-light: #E5F0F8;

  /* NEUTRALS */
  --color-white: #FFFFFF;
  --color-gray-50: #F9F9F9;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E0E0E0;
  --color-gray-300: #D0D0D0;
  --color-gray-400: #999999;
  --color-gray-500: #666666;
  --color-gray-600: #333333;
  --color-black: #000000;

  /* STATUS COLORS */
  --color-success: #00B894;
  --color-warning: #FF9500;
  --color-error: #E74C3C;
  --color-info: #1B9B9E;

  /* SPACING SCALE */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* TYPOGRAPHY (locked: Manrope for UI, Poppins/Inter for site) */
  --font-family-ui: 'Manrope', Arial, sans-serif;
  --font-family-display: 'Poppins', Arial, sans-serif;
  --font-family-body: 'Inter', Arial, sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  --font-size-5xl: 48px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.8;

  /* SHADOWS */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.3);

  /* BORDER RADIUS */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* TRANSITIONS */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* Z-INDEX SCALE */
  --z-dropdown: 100;
  --z-modal-backdrop: 999;
  --z-modal: 1000;
  --z-tooltip: 1100;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. RESET & NORMALIZATION
   ───────────────────────────────────────────────────────────────────────── */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-gray-600);
  background-color: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-navy-light);
}

h1 { font-size: var(--font-size-5xl); margin-bottom: var(--spacing-lg); }
h2 { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-lg); }
h3 { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-md); }
h4 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); }
h5 { font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); }
h6 { font-size: var(--font-size-base); margin-bottom: var(--spacing-sm); }

p { margin-bottom: var(--spacing-md); line-height: var(--line-height-normal); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-teal); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-teal-dark); text-decoration: underline; }
a:active { color: var(--color-navy); }
a:visited { color: var(--color-teal-dark); }

/* "Use Tool" and other primary buttons must stay white even after being
   clicked (visited) -- the site-wide a:visited rule above was overriding
   .btn-primary's intended white text once a link had been visited. */
.btn-primary:visited {
  color: var(--color-white);
}

ul, ol { margin-bottom: var(--spacing-md); padding-left: var(--spacing-lg); }
li { margin-bottom: var(--spacing-sm); line-height: var(--line-height-normal); }

img { max-width: 100%; height: auto; display: block; }

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

input, textarea, select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(27, 155, 158, 0.1);
}

input:disabled, textarea:disabled, select:disabled {
  background-color: var(--color-gray-100);
  color: var(--color-gray-400);
  cursor: not-allowed;
}

textarea { resize: vertical; min-height: 120px; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); }
.container-sm { max-width: 800px; margin: 0 auto; padding: 0 var(--spacing-lg); }
.container-lg { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); }

section { padding: var(--spacing-3xl) var(--spacing-lg); }

/* Hero section: using hero-banner.png as-is (decision: keep the flattened
   graphic rather than sourcing a plain photo). Scrolls with the page --
   background-attachment intentionally NOT "fixed", per instruction. */
section.hero {
  background-image: url('../images/hero-banner.png');
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  color: var(--color-white);
  padding: 180px var(--spacing-lg) 220px var(--spacing-lg);
  text-align: center;
  min-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

section.light { background-color: var(--color-gray-50); }
section.dark { background-color: var(--color-navy-light); color: var(--color-white); }

.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* ─────────────────────────────────────────────────────────────────────────
   3. HEADER
   Background: white (locked). Every foreground element in the header MUST
   use navy/teal — never white — or it disappears against this background.
   That was the live bug (.btn-nav, .dropdown-toggle, .hamburger-menu span
   were all white-on-white). Fixed below.
   ───────────────────────────────────────────────────────────────────────── */

.header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.header-container {
  max-width: 1600px;
  margin: 0 auto;
  /* Even gutters both sides. Was 24px left / 12px right, which sat the
     header off-centre and crowded the right-hand button against the edge. */
  padding: var(--spacing-md) 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.header-left { display: flex; align-items: center; flex-shrink: 0; }
.header-right { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; }

/* Logo: icon + tagline only — no separate wordmark next to it (locked) */
.logo-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex-shrink: 0;
}

.logo-link {
  display: block;
  transition: opacity var(--transition-fast);
}

.logo-link:hover { opacity: 0.85; }
.logo-image { height: 42px; width: auto; display: block; }
.logo-text { display: flex; flex-direction: column; }

/* Plain text under the logo, aligned with the V of the wordmark (not a link) */
.logo-text p {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.2px;
  padding-left: 41px;
}

/* Nav links — teal on white (contrast OK, was already correct) */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-teal);
  text-decoration: none;
  transition: opacity var(--transition-fast), color var(--transition-fast);
  padding: var(--spacing-sm) 8px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.nav-link:hover { opacity: 0.8; }
.nav-link:active, .nav-link.active { opacity: 0.9; font-weight: var(--font-weight-semibold); }

/* Dropdowns */
.nav-dropdown { position: relative; display: inline-block; }

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: none;
  border: none;
  color: var(--color-navy); /* FIX: was var(--color-white) — invisible on white header */
  font-size: var(--font-size-sm); /* was --font-size-base (16px); the plain
     nav links are 14px, so the dropdown buttons rendered visibly larger */
  font-weight: var(--font-weight-normal);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.dropdown-toggle:after { content: '▼'; font-size: 8px; opacity: 0.7; transition: transform var(--transition-fast); }
.dropdown-toggle:hover { opacity: 0.7; }

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  margin-top: 0;
  padding-top: var(--spacing-sm);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.active .dropdown-menu {
  display: block;
  animation: slideDown var(--transition-normal);
}

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

.dropdown-menu a, .dropdown-menu button {
  display: block;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-gray-600);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  font-size: var(--font-size-base);
}

.dropdown-menu a:hover, .dropdown-menu button:hover {
  background-color: var(--color-blue-light);
  color: var(--color-teal);
}

/* Header login buttons — no Sign-Up button in header (locked) */
.btn-nav {
  background-color: transparent;
  color: var(--color-teal); /* FIX: was var(--color-white) — invisible on white header */
  border: 2px solid var(--color-teal);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}

.btn-nav:hover {
  background-color: var(--color-teal);
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(27, 155, 158, 0.3);
}

/* Mobile hamburger */
.hamburger-menu {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
  gap: 6px;
  z-index: 1000;
}

.hamburger-menu span {
  width: 24px;
  height: 3px;
  background-color: var(--color-navy); /* FIX: was var(--color-white) — invisible on white header */
  border-radius: var(--radius-sm);
  transition: all var(--transition-normal);
  display: block;
}

.hamburger-menu:hover span { opacity: 0.8; }
.hamburger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(10px, 10px); }
.hamburger-menu.active span:nth-child(2) { opacity: 0; }
.hamburger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

@media (max-width: 1199px) {
  .nav-menu { gap: 10px; }
  .nav-link { padding: 6px 6px; }
  .header-right { gap: 6px; }
  .btn-nav { padding: 6px 10px; font-size: 12px; }
}

/* 769-1023px: seven nav items plus the Sign Up button still will not fit at
   the spacing above. Tighten further and drop the tagline rather than pushing
   the whole header off the right edge. The hamburger breakpoint (768px) is
   deliberately left alone - changing it would alter tablet behaviour on every
   page, which is a bigger decision than a layout fix. */
@media (max-width: 1023px) {
  .nav-menu { gap: 2px; }
  .nav-link { padding: 6px 3px; }
  .logo-text { display: none; }
}

@media (max-width: 768px) {
  .header-container { padding: var(--spacing-md); gap: var(--spacing-md); }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    z-index: 999;
  }

  .nav-menu.active { display: flex; }

  .nav-link {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-gray-100);
  }

  .dropdown-menu {
    position: static;
    display: none;
    background-color: var(--color-gray-50);
    box-shadow: none;
    margin: 0;
    border: none;
  }

  .nav-dropdown.active .dropdown-menu { display: block; }

  .header-right {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background-color: var(--color-white);
    z-index: 999;
    border-top: 1px solid var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-200);
  }

  .header-right.active { display: flex; }

  .btn-nav {
    width: calc(100% - var(--spacing-lg) * 2);
    margin: var(--spacing-sm) var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
  }

  .hamburger-menu { display: flex; }
  .logo-image { height: 40px; }
  .logo-text p { font-size: var(--font-size-base); }
}

@media (max-width: 480px) {
  .header-container { padding: var(--spacing-sm) var(--spacing-md); }
  .logo-image { height: 35px; }
  .logo-text p { font-size: 14px; }
  .hamburger-menu span { width: 20px; height: 2px; }
}

/* Hide "Install Mobile App" on desktop only (04.09.2026).
   #pwaInstallBtn (js/app/pwa-install-button.js) is the SAME button used in
   both the desktop nav bar and the mobile hamburger menu - there is only one
   element, not two. Its show/hide logic (beforeinstallprompt on Chrome/Edge,
   always-shown-with-instructions on iOS Safari) is untouched here; this rule
   only forces it hidden at the same width the site already treats as
   "desktop" (769px+, the complement of the .nav-menu mobile breakpoint at
   max-width: 768px above), so phone/tablet behaviour is unaffected. */
@media (min-width: 769px) {
  #pwaInstallBtn { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. FOOTER
   Row order (locked): [logo+tagline | columns spread across] → social icons
   → teal divider → centered copyright. The divider sits directly ABOVE the
   copyright line, not between the logo and the columns (that was the bug).
   ───────────────────────────────────────────────────────────────────────── */

.footer {
  background-color: #1a2332;
  color: var(--color-white);
  padding: 40px 0 20px 0;
  margin-top: auto;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 0;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  width: 70%;
}

.footer-social {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: flex-start;
  flex-basis: 100%;
  margin-top: 8px;
}

.footer-section { display: flex; flex-direction: column; gap: var(--spacing-md); }

.footer-section h2, .footer-section h3, .footer-section h4 {
  color: var(--color-white);
  font-size: var(--font-size-lg);
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  text-align: left;
  flex-shrink: 0;
  width: 25%;
  padding-right: var(--spacing-3xl);
  box-sizing: border-box;
}

.footer-logo img {
  height: 50px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.footer-tagline {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  text-align: left;
}

/* Divider: full width, directly above the copyright row */
.footer-divider {
  width: 100%;
  border-top: 2px solid var(--color-teal);
  margin: 12px 0 8px 0;
  flex-basis: 100%;
}

.footer-section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.footer-section li { margin: 0; padding: 0; }

.footer-section a {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: inline-block;
}

.footer-section a:hover { color: var(--color-white); text-decoration: underline; }

.footer-bottom { width: 100%; text-align: center; flex-basis: 100%; }
.footer-bottom p { font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.7); margin: 0; }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: var(--color-white);
  font-size: var(--font-size-lg);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.footer-social a:hover { background-color: var(--color-teal); border-color: var(--color-teal); transform: translateY(-2px); }
.footer-social svg { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 768px) {
  .footer { padding: var(--spacing-2xl) 0; }
  .footer-container { flex-direction: column; align-items: flex-start; }
  .footer-content { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xl); width: 100%; }
  .footer-logo { gap: var(--spacing-sm); width: 100%; }
  .footer-logo img { height: 45px; }
  .footer-tagline { font-size: 13px; }
}

@media (max-width: 480px) {
  .footer { padding: var(--spacing-xl) 0; }
  .footer-container { gap: var(--spacing-xl); flex-direction: column; align-items: flex-start; padding: 0 var(--spacing-md); }
  .footer-content { grid-template-columns: 1fr; gap: var(--spacing-lg); width: 100%; }
  .footer-logo img { height: 40px; }
  .footer-section a { font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   5. BUTTONS
   ───────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
  text-decoration: none;
  gap: var(--spacing-sm);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-teal) 100%);
  color: var(--color-white);
}
.btn-primary:hover:not(:disabled) { box-shadow: var(--shadow-md); }

.btn-secondary {
  background-color: var(--color-gray-100);
  color: var(--color-navy-light);
  border: 2px solid var(--color-gray-300);
}
.btn-secondary:hover:not(:disabled) { background-color: var(--color-gray-200); border-color: var(--color-navy-light); }

.btn-outline {
  background-color: transparent;
  color: var(--color-teal);
  border: 2px solid var(--color-teal);
}
.btn-outline:hover:not(:disabled) { background-color: var(--color-blue-light); border-color: var(--color-teal-dark); }

.btn-ghost { background-color: transparent; color: var(--color-teal); border: none; }
.btn-ghost:hover:not(:disabled) { background-color: var(--color-blue-light); }

.btn-sm { padding: var(--spacing-xs) var(--spacing-md); font-size: var(--font-size-sm); }
.btn-lg { padding: var(--spacing-md) var(--spacing-xl); font-size: var(--font-size-lg); }
.btn-full { width: 100%; padding: var(--spacing-md) var(--spacing-lg); font-size: var(--font-size-base); }

/* ─────────────────────────────────────────────────────────────────────────
   6. CARDS
   ───────────────────────────────────────────────────────────────────────── */

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.card:hover { border-color: var(--color-teal); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md); gap: var(--spacing-md); }
.card-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin: 0; color: var(--color-navy-light); overflow-wrap: break-word; word-break: break-word; }
.card-subtitle { font-size: var(--font-size-sm); color: var(--color-gray-500); margin-bottom: var(--spacing-md); }
.card-content { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-md); }
.card > p { overflow-wrap: break-word; word-break: break-word; }
.card-footer { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-gray-200); }

.card.light { background-color: var(--color-blue-light); border-color: var(--color-teal-light); }
.card.success { background-color: rgba(0, 184, 148, 0.05); border-color: var(--color-success); }
.card.warning { background-color: rgba(255, 149, 0, 0.05); border-color: var(--color-warning); }
.card.error { background-color: rgba(231, 76, 60, 0.05); border-color: var(--color-error); }
.card.premium { background-color: rgba(255, 149, 0, 0.05); border-color: var(--color-warning); }
.card.premium:hover { border-color: var(--color-warning); }
.card-title .badge { vertical-align: middle; margin-left: 4px; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin: 60px 0; }

/* ─────────────────────────────────────────────────────────────────────────
   7. FORMS
   ───────────────────────────────────────────────────────────────────────── */

.form-group { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
.form-group:last-child { margin-bottom: 0; }
.form-label { font-weight: var(--font-weight-semibold); color: var(--color-navy-light); font-size: var(--font-size-sm); }

.form-input, .form-textarea, .form-select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-family: inherit;
  transition: all var(--transition-fast);
  width: 100%;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(27, 155, 158, 0.1);
}

.form-textarea { resize: vertical; min-height: 120px; }
.form-hint { font-size: var(--font-size-sm); color: var(--color-gray-500); margin-top: var(--spacing-xs); }
.form-error { color: var(--color-error); font-size: var(--font-size-sm); margin-top: var(--spacing-xs); }

.form-check { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.form-check input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-teal); }
.form-check label { cursor: pointer; margin: 0; }

/* Login / Signup pages — these classes are used by student-login.html and
   educator-login.html but previously had NO css definitions anywhere
   (a real bug: those pages rendered completely unstyled). Fixed here,
   styled to match login.html / signup.html's existing look. */
.login-container, .signup-container {
  display: flex;
  min-height: calc(100vh - 200px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--color-gray-50);
}

.login-box, .signup-box {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 40px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.login-logo { height: 50px; margin-bottom: var(--spacing-md); display: inline-block; }

.login-box h2, .signup-box h1 {
  font-size: var(--font-size-2xl);
  color: var(--color-navy);
  margin: 0 0 var(--spacing-xs) 0;
}

.login-subtitle {
  color: var(--color-gray-500);
  margin: 0 0 var(--spacing-xl) 0;
  font-size: var(--font-size-sm);
}

.login-form, .signup-form { text-align: left; }
.login-form .form-group { margin-bottom: var(--spacing-lg); }
.login-form label { font-weight: var(--font-weight-semibold); color: var(--color-navy-light); font-size: var(--font-size-sm); display: block; margin-bottom: var(--spacing-xs); }
.login-form input[type="email"], .login-form input[type="password"] {
  padding: 12px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  width: 100%;
}

.checkbox-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--spacing-md) 0 var(--spacing-lg) 0;
  font-size: var(--font-size-sm);
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.checkbox-label { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; color: var(--color-gray-600); }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-teal); flex-shrink: 0; }

.forgot-password { color: var(--color-teal); text-decoration: none; font-size: var(--font-size-sm); }
.forgot-password:hover { text-decoration: underline; }

.login-footer, .signup-link {
  text-align: center;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-gray-200);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.login-footer a, .signup-link a { color: var(--color-teal); font-weight: var(--font-weight-semibold); text-decoration: none; }
.login-footer a:hover, .signup-link a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────
   8. BADGES, ALERTS, TABLES
   ───────────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  gap: var(--spacing-xs);
}

.badge-primary { background-color: var(--color-blue-light); color: var(--color-teal); }
.badge-success { background-color: rgba(0, 184, 148, 0.1); color: var(--color-success); }
.badge-warning { background-color: rgba(255, 149, 0, 0.1); color: var(--color-warning); }
.badge-error { background-color: rgba(231, 76, 60, 0.1); color: var(--color-error); }
.badge-info { background-color: rgba(27, 155, 158, 0.1); color: var(--color-info); }

.alert { padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-md); border-left: 4px solid; display: flex; gap: var(--spacing-md); align-items: flex-start; }
.alert-icon { font-size: var(--font-size-xl); flex-shrink: 0; }
.alert-content { flex: 1; }
.alert-title { font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-xs); }
.alert-success { background-color: rgba(0, 184, 148, 0.05); border-color: var(--color-success); color: var(--color-success); }
.alert-warning { background-color: rgba(255, 149, 0, 0.05); border-color: var(--color-warning); color: var(--color-warning); }
.alert-error { background-color: rgba(231, 76, 60, 0.05); border-color: var(--color-error); color: var(--color-error); }
.alert-info { background-color: var(--color-blue-light); border-color: var(--color-info); color: var(--color-info); }

.table-wrapper { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-gray-200); }
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
thead { background-color: var(--color-gray-100); }
th { padding: var(--spacing-md); text-align: left; font-weight: var(--font-weight-semibold); color: var(--color-navy-light); border-bottom: 2px solid var(--color-gray-200); }
td { padding: var(--spacing-md); border-bottom: 1px solid var(--color-gray-200); }
tbody tr:hover { background-color: var(--color-gray-50); }

/* ─────────────────────────────────────────────────────────────────────────
   9. RESPONSIVE (general, non-header/footer — those are inlined above)
   ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 481px) and (max-width: 768px) {
  .container { padding: 0 var(--spacing-md); }
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  section { padding: var(--spacing-2xl) var(--spacing-md); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  html { font-size: 15px; }
  body { font-size: var(--font-size-sm); }
  .container, .container-sm, .container-lg { padding: 0 var(--spacing-md); }
  h1 { font-size: 24px; margin-bottom: var(--spacing-md); }
  h2 { font-size: 20px; margin-bottom: var(--spacing-md); }
  h3 { font-size: 18px; margin-bottom: var(--spacing-sm); }
  h4, h5, h6 { font-size: 16px; margin-bottom: var(--spacing-sm); }
  p { font-size: var(--font-size-sm); }
  section { padding: var(--spacing-xl) var(--spacing-md); }
  section.hero { padding: var(--spacing-2xl) var(--spacing-md); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .btn { width: 100%; padding: var(--spacing-md) var(--spacing-lg); }
  .card { padding: var(--spacing-md); }
  .cards-grid { grid-template-columns: 1fr; margin: 40px 0; gap: 20px; }
  .form-input, .form-textarea, .form-select { font-size: 16px; padding: var(--spacing-md); }
  table { font-size: 12px; }
  th, td { padding: var(--spacing-sm); }
}

@media (min-width: 769px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

@media print {
  .header, .footer, .btn, .hamburger-menu { display: none !important; }
  body { font-size: 12pt; line-height: 1.5; color: black; background: white; }
  h1, h2, h3, h4, h5, h6 { page-break-after: avoid; color: black; }
  a { color: black; text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   10. CORE VALUES STRIP (site-wide, sits directly above the footer)
   ───────────────────────────────────────────────────────────────────────── */

.core-values-section {
  padding: 50px var(--spacing-lg);
  background-color: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
}

.core-values-heading {
  text-align: center;
  color: var(--color-navy-light);
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-xl);
}

.core-values-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .core-values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .core-values-grid { grid-template-columns: 1fr; }
}

.core-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-sm);
}

.core-value-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: var(--spacing-xs);
}

.core-value h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-light);
  margin: 0;
}

.core-value p {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin: 0;
  line-height: var(--line-height-normal);
}

@media (max-width: 480px) {
  .core-values-section { padding: var(--spacing-xl) var(--spacing-md); }
  .core-values-grid { gap: var(--spacing-lg); }
}

/* ─────────────────────────────────────────────────────────────────────────
   11. MESSAGE BELL
   15.09.2026 -- same .bell / .bell i rules already defined in
   css/veriaq-visual-system.css (used by the dashboard pages that load that
   file). This stylesheet is the one universally loaded site-wide (every
   Student/Home-School-Learner tool page and every Educator tool page load
   ONLY this file + their own page-specific CSS, not veriaq-visual-system.css),
   so the message bell being added to header-auth.js's headerRight template
   on those 38 pages needs its own copy here or it would render completely
   unstyled. var(--line) replaced with its literal value (#e6ebef, matching
   veriaq-visual-system.css's own --line) since --line is not defined in this
   file's :root block above -- avoids relying on an undefined CSS variable.
   ───────────────────────────────────────────────────────────────────────── */

.bell{position:relative;width:43px;height:43px;border:1px solid #e6ebef;border-radius:9px;background:#fff;font-size:23px}
.bell i{position:absolute;right:-4px;top:-6px;width:18px;height:18px;border-radius:50%;background:#f14343;color:#fff;font-style:normal;font-size:9px;display:grid;place-items:center;border:2px solid #fff}

/* ─────────────────────────────────────────────────────────────────────────
   END OF STYLES.CSS
   ═════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   12. HAMBURGER MENU — HIDDEN ON DESKTOP/TABLET ONLY (16.09.2026, corrected 05.10.2026)
   Nicole reported the 3-line hamburger icon in the header as unwanted UI on
   desktop. The 16.09.2026 fix hid it everywhere, including mobile -- but on
   mobile the hamburger is the ONLY control that reveals the nav menu and the
   header-right (login/Sign Up/Install buttons): both are display:none until
   an inline page script toggles .active on them via a click on #hamburgerMenu
   (see the <script> at the bottom of every page's HTML -- not a separate .js
   file, which is why the 16.09.2026 check of only js/header-auth.js,
   js/student-workspace.js, js/check-my-work.js and js/api-client.js missed
   it). Hiding the hamburger at every width therefore made the entire header
   nav unreachable on any screen <=768px wide -- confirmed 05.10.2026 from
   Nicole's own screenshot ("There is no install button, the menu is gone").
   Corrected below to only hide it at >=769px (desktop/tablet), where the nav
   menu and header-right are always visible anyway and the hamburger truly
   has nothing to do. Still fully reversible by deleting this block alone.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  .hamburger-menu { display: none !important; }
}

/* =========================================================================
   VAQ-MOBILE-FIX 10.10.2026 (styles.css part)
   1) Pricing comparison tables scroll sideways inside their box on phones
      instead of making the whole page wider than the screen.
   2) Long unbroken text/links in legal pages wrap instead of pushing the
      page wider. Reversible by deleting this block alone.
   ========================================================================= */
@media (max-width: 768px) {
  .comparison-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.legal-content { overflow-wrap: break-word; }

/* VAQ-MOBILE-FIX-2 10.10.2026: signup account-type boxes fit narrow phones. Delete this block alone to revert. */
@media (max-width: 480px) {
  .user-type.user-type { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .user-type .user-type-option { min-width: 0; overflow-wrap: anywhere; }
}

/* VAQ-MOBILE-FIX-3 10.10.2026: header fit.
   769-1100px: logged-in header (3 buttons) + 7 menu items cannot fit, so the
   menu button (hamburger) is shown in this range using the same mobile menu
   rules as <=768px. >=1101px: header wraps to a second row only when it
   does not fit on one line. Delete this block alone to revert. */
@media (min-width: 768.02px) and (max-width: 1100px) {
  .header-container { padding: var(--spacing-md); gap: var(--spacing-md); }
  .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background-color: var(--color-white); border-bottom: 1px solid var(--color-gray-200); z-index: 999; }
  .nav-menu.active { display: flex; }
  .nav-link { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-gray-100); }
  .dropdown-menu { position: static; display: none; background-color: var(--color-gray-50); box-shadow: none; margin: 0; border: none; }
  .nav-dropdown.active .dropdown-menu { display: block; }
  .header-right { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background-color: var(--color-white); z-index: 999; border-top: 1px solid var(--color-gray-100); border-bottom: 1px solid var(--color-gray-200); }
  .header-right.active { display: flex; }
  .btn-nav { width: calc(100% - var(--spacing-lg) * 2); margin: var(--spacing-sm) var(--spacing-lg); padding: var(--spacing-md) var(--spacing-lg); text-align: center; }
  .hamburger-menu { display: flex !important; }
}
@media (min-width: 1100.02px) {
  .header-container { flex-wrap: wrap; row-gap: 8px; }
  .header-right { margin-left: auto; }
  .nav-menu { flex-wrap: wrap; min-width: 0; row-gap: 4px; }
}

/* VAQ-MOBILE-FIX-4 10.10.2026: home page four-product panel - long words (German, Tsonga) could not shrink columns and pushed the page wider than the screen. Delete this block alone to revert. */
.product-panel-grid>*{min-width:0;overflow-wrap:break-word}

/* HDR1 11.10.2026: logged-in header. After login the header gets three large buttons (My Dashboard, Account Settings, Logout) plus the language box, which squeezed the menu so "Contact Us" dropped onto a second line. Fix: smaller buttons on desktop; on narrower laptops (1100-1499px) the menu sits tidily on its own centred row. Only affects pages where header-auth.js has added the Logout button; logged-out headers are untouched. */
@media (min-width: 1100.02px) {
  .header-right:has(.btn-nav) { gap: 2px; }
  .header-right .btn-nav { font-size: 14px; padding: 6px 10px; }
  .header-container:has(#headerLogoutBtn) { column-gap: 12px; }
  .header-container:has(#headerLogoutBtn) .nav-menu { gap: 2px 6px; }
}
@media (min-width: 1100.02px) and (max-width: 1499px) {
  .header-container:has(#headerLogoutBtn) .nav-menu { order: 3; flex: 0 0 100%; justify-content: center; gap: 2px 26px; }
}