/* =============================
   Reset & Base Normalize
   ============================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body { line-height: 1.6; color: #1F2A37; background-color: #FFF9F5; }
img { max-width: 100%; height: auto; display: block; }
a { color: #193A6A; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: 2px solid #2E7D88; outline-offset: 2px; }

/* =============================
   CSS Custom Properties (with fallbacks)
   ============================= */
:root {
  --color-primary: #193A6A;
  --color-secondary: #2E7D88;
  --color-accent: #F5F7FB;
  --color-text: #1F2A37;
  --color-muted: #475467;
  --color-warm-50: #FFF7ED;
  --color-warm-100: #FFEAD5;
  --color-warm-150: #FFE1C4;
  --color-warm-200: #FFD8B2;
  --color-warm-card: #FFF2E2;
  --color-border: #E7E5E4;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-soft: 0 6px 20px rgba(25, 58, 106, 0.08);
  --shadow-hover: 0 10px 30px rgba(25, 58, 106, 0.12);
  --container-width: 1120px;
}

/* =============================
   Typography
   ============================= */
body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
h1, h2, h3, h4 { font-family: Georgia, 'Times New Roman', serif; color: var(--color-primary); margin: 0 0 16px 0; line-height: 1.25; }
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
p { margin: 0 0 16px 0; color: var(--color-text); }
small, .text-sm { font-size: 14px; color: var(--color-muted); }
strong { color: var(--color-primary); }

/* Responsive type adjustments */
@media (min-width: 768px) {
  h1 { font-size: 48px; }
  h2 { font-size: 36px; }
}

/* =============================
   Layout Helpers & Containers
   ============================= */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex; /* flexbox only */
  flex-direction: column;
}
.content-wrapper {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.text-section { background: var(--color-warm-card); border-color: #F1D8BF; }

/* Mandatory spacing patterns */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; background: var(--color-warm-50); border: 1px solid #F3D9BF; border-left: 6px solid var(--color-secondary); border-radius: var(--radius-md); color: var(--color-text); box-shadow: var(--shadow-soft); }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Section base (apply warm, approachable spacing) */
section { padding: 40px 0; display: flex; }
section > .container { gap: 20px; }

/* =============================
   Header & Navigation
   ============================= */
header { background: linear-gradient(0deg, #FFFFFF, #FFFFFF); border-bottom: 1px solid var(--color-border); position: relative; z-index: 5; }
.header-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; max-width: var(--container-width); margin: 0 auto;
}
.header-bar img { height: 40px; width: auto; }
.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { color: var(--color-primary); padding: 8px 12px; border-radius: var(--radius-sm); transition: background-color 0.25s ease, color 0.25s ease; }
.main-nav a:hover { background: var(--color-warm-100); text-decoration: none; }

/* CTA buttons in header */
.header-bar .btn-primary, .header-bar .btn-secondary { display: none; }

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 8px 20px 12px; padding: 10px 14px;
  background: var(--color-warm-100); color: var(--color-primary);
  border: 1px solid #F1D8BF; border-radius: var(--radius-md);
  cursor: pointer; transition: transform 0.2s ease, background 0.2s ease;
}
.mobile-menu-toggle:hover { transform: translateY(-2px); background: var(--color-warm-150); }

/* Mobile full-screen menu */
.mobile-menu {
  position: fixed; inset: 0; background: #FFFFFF; z-index: 9999;
  display: flex; flex-direction: column; padding: 16px; gap: 12px; align-items: stretch;
  transform: translateX(100%); transition: transform 0.35s ease;
  box-shadow: var(--shadow-soft);
}
.mobile-menu.is-open, .mobile-menu.active { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; background: #fff; border: 1px solid var(--color-border); color: var(--color-primary); border-radius: 50px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-soft); }
.mobile-nav { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.mobile-nav a { padding: 14px 12px; border-radius: var(--radius-md); background: var(--color-warm-50); color: var(--color-text); border: 1px solid #F3E2D3; }
.mobile-nav a:hover { background: var(--color-warm-100); text-decoration: none; }

/* Desktop nav */
@media (min-width: 992px) {
  .mobile-menu-toggle { display: none; }
  .main-nav { display: flex; }
  .header-bar .btn-primary, .header-bar .btn-secondary { display: inline-flex; }
}

/* =============================
   Buttons
   ============================= */
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-md); padding: 12px 18px; font-weight: bold; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease; text-align: center; }
.btn-primary { background: var(--color-primary); color: #FFFFFF; border: 1px solid var(--color-primary); box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: #112845; box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.btn-secondary { background: var(--color-warm-100); color: var(--color-primary); border: 1px solid #F1D8BF; }
.btn-secondary:hover { background: var(--color-warm-150); transform: translateY(-2px); }
.btn-primary:active, .btn-secondary:active { transform: translateY(0); }

/* =============================
   Hero / Intro blocks
   ============================= */
.cta-group { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0 0; list-style: none; }
.trust-badges li { padding: 8px 12px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-muted); box-shadow: var(--shadow-soft); }

/* =============================
   Feature Grid (flexbox only)
   ============================= */
.feature-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.feature-grid > div { flex: 1 1 260px; background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-soft); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.feature-grid > div:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.feature-grid h3 { margin-bottom: 8px; }
.feature-grid p { color: var(--color-muted); }

/* =============================
   Lists, Definition Lists, and Content
   ============================= */
ul, ol { padding-left: 20px; margin: 0 0 16px; }
dt { font-weight: bold; color: var(--color-primary); margin-top: 12px; }
dd { margin: 4px 0 12px 0; color: var(--color-text); }

/* =============================
   Testimonials (readable, high contrast)
   ============================= */
.testimonial-card p { margin: 0; color: var(--color-text); }
.testimonial-card span { color: var(--color-muted); }

/* =============================
   Contact blocks & utilities
   ============================= */
.privacy-note { display: flex; padding: 12px 14px; background: var(--color-accent); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); }

/* =============================
   Forms
   ============================= */
.search-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.search-form input[type="text"], input[type="text"], input[type="email"], textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #FFFFFF; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.search-form input[type="text"]:focus, input[type="text"]:focus, input[type="email"]:focus, textarea:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 4px rgba(46, 125, 136, 0.15); outline: none; }
label { font-weight: 600; color: var(--color-primary); }

/* =============================
   Footer
   ============================= */
footer { background: #FFFFFF; border-top: 1px solid var(--color-border); }
.footer-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 20px; max-width: var(--container-width); margin: 0 auto; }
.brand { font-weight: bold; color: var(--color-primary); }
.footer-nav, .footer-legal { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-nav a, .footer-legal a { color: var(--color-muted); padding: 6px 8px; border-radius: var(--radius-sm); }
.footer-nav a:hover, .footer-legal a:hover { background: var(--color-warm-100); color: var(--color-primary); text-decoration: none; }

/* =============================
   Responsive Alignment Rules
   ============================= */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; }
}

/* =============================
   Warm Section accents
   ============================= */
section:nth-of-type(odd) .content-wrapper { background: #FFFFFF; }
section:nth-of-type(even) .content-wrapper { background: var(--color-accent); }

/* =============================
   Links inside content
   ============================= */
.content-wrapper a:not(.btn-primary):not(.btn-secondary) { color: var(--color-secondary); text-underline-offset: 3px; }
.content-wrapper a:not(.btn-primary):not(.btn-secondary):hover { color: #20616A; }

/* =============================
   Alignment helpers
   ============================= */
.centered { display: flex; align-items: center; justify-content: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; }

/* =============================
   Additional card patterns
   ============================= */
.card--highlight { background: var(--color-warm-card); border-color: #F1D8BF; }
.card--muted { background: var(--color-accent); }

/* =============================
   Accessibility & States
   ============================= */
[aria-current="page"], .active-link { font-weight: 700; color: var(--color-primary); }
button:disabled, .btn-primary:disabled, .btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }

/* =============================
   Cookie Consent Banner (fixed bottom)
   ============================= */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; background: #FFFFFF; border-top: 1px solid var(--color-border); box-shadow: 0 -6px 20px rgba(25, 58, 106, 0.08); }
.cookie-banner .cookie-content { display: flex; flex-direction: column; gap: 10px; }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-buttons .btn-accept { background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); border-radius: var(--radius-md); padding: 10px 14px; }
.cookie-buttons .btn-reject { background: var(--color-warm-100); color: var(--color-primary); border: 1px solid #F1D8BF; border-radius: var(--radius-md); padding: 10px 14px; }
.cookie-buttons .btn-settings { background: #FFFFFF; color: var(--color-primary); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 14px; }
.cookie-buttons .btn-accept:hover { background: #112845; }
.cookie-buttons .btn-reject:hover { background: var(--color-warm-150); }
.cookie-buttons .btn-settings:hover { background: var(--color-accent); }

/* =============================
   Cookie Preferences Modal
   ============================= */
.cookie-modal { position: fixed; inset: 0; background: rgba(31, 42, 55, 0.5); display: none; align-items: center; justify-content: center; z-index: 10000; }
.cookie-modal.is-open, .cookie-modal.active { display: flex; }
.cookie-modal-content { background: #FFFFFF; width: 94%; max-width: 720px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-hover); display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.cookie-modal-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-accent); }
.cookie-category .label { display: flex; flex-direction: column; gap: 4px; }
.cookie-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Simple toggle style for cookie options */
.cookie-toggle { display: inline-flex; align-items: center; gap: 8px; }
.cookie-toggle input[type="checkbox"] { width: 44px; height: 24px; appearance: none; background: #E5E7EB; border-radius: 999px; position: relative; outline: none; transition: background 0.2s ease; border: 1px solid var(--color-border); }
.cookie-toggle input[type="checkbox"]::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 999px; background: #FFFFFF; top: 2px; left: 2px; box-shadow: var(--shadow-soft); transition: transform 0.2s ease; }
.cookie-toggle input[type="checkbox"]:checked { background: var(--color-secondary); }
.cookie-toggle input[type="checkbox"]:checked::after { transform: translateX(20px); }
.cookie-note { color: var(--color-muted); font-size: 14px; }

/* =============================
   Micro-interactions & Animations
   ============================= */
.fade-in { opacity: 0; transform: translateY(6px); animation: fadeInUp 0.4s ease forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* =============================
   Page-specific small touches
   ============================= */
/* Contact list with icons */
.content-wrapper ul li { display: list-item; }
.content-wrapper ul li img { display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: text-bottom; }

/* Make FAQ lists breathe */
.content-wrapper dl { display: flex; flex-direction: column; gap: 6px; }

/* Helper to avoid overlap & ensure spacing */
.content-wrapper + .content-wrapper { margin-top: 20px; }

/* =============================
   Desktop refinements
   ============================= */
@media (min-width: 768px) {
  .content-wrapper { padding: 28px; gap: 18px; }
  .footer-bar { padding: 24px; }
}

@media (min-width: 992px) {
  .header-bar { padding: 16px 20px; }
  .cta-group { gap: 14px; }
  .footer-nav, .footer-legal { gap: 16px; }
}

/* =============================
   Ensure adequate gaps and no overlap
   ============================= */
main { display: flex; flex-direction: column; gap: 20px; }
main > section { margin-bottom: 20px; }

/* =============================
   Print adjustments (basic)
   ============================= */
@media print {
  .mobile-menu-toggle, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}