/* ===============================
   SkattKompass Akademi — style.css
   Playful Dynamic theme (flexbox-only)
   =============================== */

/* 1) RESET & NORMALIZE */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: inherit; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.6; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
ul, ol { margin: 0 0 16px 24px; padding: 0; }
p { margin: 0 0 16px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 12px; }
a { color: inherit; text-decoration: none; }
a:focus, button:focus, input:focus { outline: 3px solid rgba(34, 209, 238, 0.6); outline-offset: 2px; }

/* 2) THEME TOKENS */
:root {
  /* Brand */
  --primary: #0B3D5C; /* deep nautical blue */
  --secondary: #2A7F62; /* spruce green */
  --accent: #FFFFFF;

  /* Playful additions */
  --pink: #FF4D88; /* playful punch */
  --yellow: #FFD166; /* sunny */
  --cyan: #22D1EE; /* electric cyan */
  --lilac: #B48CF2; /* fun lilac */

  /* Neutrals */
  --ink-900: #0F172A;
  --ink-800: #1F2937;
  --ink-700: #334155;
  --ink-500: #64748B;
  --bg-50: #FAFBFF;
  --bg-100: #F3F6FB;
  --card-bg: #FFFFFF;

  /* Effects */
  --shadow-1: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.12);
  --ring: 0 0 0 4px rgba(255, 209, 102, 0.5);

  /* Radii */
  --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-24: 24px; --r-999: 999px;

  /* Spacing scale */
  --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-60: 60px;
}

/* 3) TYPOGRAPHY */
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* brand body */
  color: var(--ink-800);
  background: var(--bg-50);
}
h1, h2, h3 { font-family: Georgia, 'Times New Roman', Times, serif; /* brand display */ }
h1 { font-size: 32px; line-height: 1.2; color: var(--primary); letter-spacing: 0.2px; }
h2 { font-size: 24px; line-height: 1.25; color: var(--primary); }
h3 { font-size: 18px; line-height: 1.3; color: var(--secondary); }
p, li { font-size: 16px; color: var(--ink-800); }
small { font-size: 14px; color: var(--ink-500); }
.tagline { font-size: 18px; color: var(--ink-700); background: #FFF6CE; padding: 8px 12px; border-radius: var(--r-12); display: inline-flex; align-items: center; gap: 8px; }

/* 4) LAYOUT (Flexbox only) */
.container { width: 100%; display: flex; justify-content: center; padding: 0 16px; }
.content-wrapper { width: 100%; max-width: 1120px; display: flex; flex-direction: column; gap: 20px; }

/* 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; display: flex; flex-direction: column; }
.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; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Apply spacing to semantic sections too */
main > section { margin-bottom: var(--space-60); padding: var(--space-40) 20px; position: relative; }

/* Alternating playful section backgrounds (light, readable) */
main > section:nth-of-type(odd) { background: var(--bg-100); border-radius: 24px; }

/* 5) HEADER & NAV */
header { position: sticky; top: 0; z-index: 50; background: #FFFFFF; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
header .content-wrapper { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.logo { display: flex; align-items: center; }
.logo img { height: 42px; width: auto; transition: transform 220ms ease; }
.logo:hover img { transform: rotate(-2deg) scale(1.03); }

.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a { color: var(--primary); font-weight: 600; padding: 10px 12px; border-radius: var(--r-12); transition: color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.main-nav a:hover { background: #E9F7FF; color: #063049; transform: translateY(-1px); }

.cta-group { display: flex; align-items: center; gap: 10px; }

/* Mobile burger */
.mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 22px; border-radius: var(--r-12); background: var(--primary); color: #fff; box-shadow: var(--shadow-1); transition: transform 150ms ease, box-shadow 150ms ease; }
.mobile-menu-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

/* Mobile menu overlay */
.mobile-menu { position: fixed; inset: 0; background: #0B3D5C; color: #fff; transform: translateX(100%); transition: transform 280ms ease; display: flex; flex-direction: column; padding: 20px; gap: 20px; z-index: 100; }
.mobile-menu[aria-hidden="false"] { transform: translateX(0); }
.mobile-menu-close { align-self: flex-end; width: 40px; height: 40px; font-size: 22px; color: #0B3D5C; background: #FFD166; border-radius: var(--r-12); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-1); }
.mobile-nav { display: flex; flex-direction: column; gap: 12px; }
.mobile-nav a { font-size: 18px; padding: 12px 14px; border-radius: var(--r-12); background: rgba(255,255,255,0.1); color: #fff; transition: background-color 160ms ease, transform 160ms ease; }
.mobile-nav a:hover { background: rgba(255,255,255,0.2); transform: translateX(4px); }

/* 6) BUTTONS */
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; font-weight: 700; border-radius: var(--r-999); text-align: center; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease; position: relative; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 0 0 var(--pink), var(--shadow-1); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 0 0 var(--pink), var(--shadow-2); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 4px 0 0 var(--pink), var(--shadow-1); }

.btn-secondary { background: var(--yellow); color: var(--primary); box-shadow: 0 6px 0 0 var(--cyan), var(--shadow-1); }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 10px 0 0 var(--cyan), var(--shadow-2); }
.btn-secondary:active { transform: translateY(0); box-shadow: 0 4px 0 0 var(--cyan), var(--shadow-1); }

/* 7) TEXT BLOCKS & LISTS */
.text-section { display: flex; flex-direction: column; gap: 10px; }

/* Playful custom bullets with solid colors */
ul { list-style: none; padding-left: 0; margin-left: 0; display: flex; flex-direction: column; gap: 8px; }
ul > li { position: relative; padding-left: 28px; }
ul > li::before { content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 14px; border-radius: 6px; background: var(--pink); transform: rotate(-8deg); }
ul > li:nth-child(3n+2)::before { background: var(--cyan); transform: rotate(6deg); }
ul > li:nth-child(3n+3)::before { background: var(--yellow); transform: rotate(-3deg); }

ol { padding-left: 18px; margin-left: 0; display: flex; flex-direction: column; gap: 8px; }

/* 8) CARDS & TESTIMONIALS (readable contrast) */
.card { background: var(--card-bg); border: 1px solid #E5E7EB; border-radius: 18px; padding: 18px; box-shadow: var(--shadow-1); }

.testimonial-card { background: #FFFFFF; color: #111827; border: 1px solid #E5E7EB; border-radius: 18px; box-shadow: var(--shadow-1); position: relative; }
.testimonial-card::before { content: "\201C"; position: absolute; left: 18px; top: -6px; font-family: Georgia, serif; font-size: 48px; color: #E2E8F0; }
/* colorful side accents for energy */
.testimonial-card:nth-of-type(3n+1) { border-left: 8px solid var(--cyan); }
.testimonial-card:nth-of-type(3n+2) { border-left: 8px solid var(--pink); }
.testimonial-card:nth-of-type(3n+3) { border-left: 8px solid var(--yellow); }

/* 9) MEDIA & IMAGES */
.text-image-section img { border-radius: 16px; box-shadow: var(--shadow-1); }

/* 10) FORMS & INPUTS */
input[type="search"], input[type="text"], input[type="email"], textarea {
  width: 100%; padding: 12px 14px; border: 2px solid #E2E8F0; border-radius: 12px; background: #fff; transition: border-color 140ms ease, box-shadow 140ms ease;
}
input[type="search"]:focus, input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: var(--cyan); box-shadow: var(--ring);
}

/* 11) FOOTER */
footer { background: #0B3D5C; color: #FFFFFF; padding: 32px 0; margin-top: 20px; }
footer .content-wrapper { flex-direction: column; gap: 20px; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 16px; }
footer a { color: #FFFFFF; opacity: 0.95; padding: 6px 10px; border-radius: 10px; transition: background-color 150ms ease; }
footer a:hover { background: rgba(255,255,255,0.12); }
footer img { height: 36px; width: auto; }
footer p, footer strong {
  color: white !important;
}

/* 12) MOBILE-FIRST NAV BEHAVIOR */
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }

  header .content-wrapper { flex-wrap: nowrap; }
  .main-nav { display: flex; }
  .mobile-menu-toggle { display: none; }

  .content-grid { justify-content: flex-start; }
  .text-image-section { flex-direction: row; }
}

@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  .content-wrapper { gap: 24px; }
  footer .content-wrapper { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
}

/* 13) ACCESSIBLE LINKS */
a { color: var(--secondary); text-decoration-color: rgba(255, 77, 136, 0.4); text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:hover { color: #19644E; text-decoration: underline; }

/* 14) MICRO-INTERACTIONS */
@keyframes floaty { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.btn-primary:hover, .btn-secondary:hover { animation: floaty 900ms ease-in-out; }

/* 15) DECORATIVE SHAPES (non-content, absolute allowed) */
main > section:first-of-type::after { content: ""; position: absolute; right: 12px; top: 12px; width: 72px; height: 72px; border-radius: 24px; background: rgba(255,77,136,0.12); z-index: 0; }
main > section:first-of-type::before { content: ""; position: absolute; left: 18px; bottom: 18px; width: 54px; height: 54px; border-radius: 16px; background: rgba(34,209,238,0.12); z-index: 0; }
main > section > .container, main > section > .container > .content-wrapper { position: relative; z-index: 1; }

/* 16) UTILITIES */
.hidden { display: none !important; }
.muted { color: var(--ink-500); }

/* 17) RESPONSIVE ALIGNMENT RULES */
@media (max-width: 768px) {
  .text-image-section { flex-direction: column; align-items: center; }
}

/* 18) PAGE-SPECIFIC POLISH */
/* Tagline on index */
.tagline::before { content: "✨"; }

/* Contact icon lines alignment */
.text-section p img { display: inline-block; vertical-align: middle; margin-right: 6px; }
.text-section p a { color: var(--primary); font-weight: 700; }

/* 19) COOKIE CONSENT (banner + modal) */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #FFFFFF; color: var(--ink-800); border-top: 4px solid var(--yellow); box-shadow: 0 -6px 24px rgba(0,0,0,0.12); padding: 16px; z-index: 200; display: none; }
.cookie-banner.show { display: flex; }
.cookie-banner .cookie-inner { width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner .btn-accept { background: var(--secondary); color: #fff; border-radius: var(--r-999); padding: 10px 16px; box-shadow: var(--shadow-1); }
.cookie-banner .btn-reject { background: #EFF6FF; color: var(--primary); border-radius: var(--r-999); padding: 10px 16px; box-shadow: var(--shadow-1); }
.cookie-banner .btn-settings { background: var(--yellow); color: var(--primary); border-radius: var(--r-999); padding: 10px 16px; box-shadow: var(--shadow-1); }
.cookie-banner .btn-accept:hover, .cookie-banner .btn-reject:hover, .cookie-banner .btn-settings:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

/* Cookie Preferences Modal */
.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; z-index: 210; align-items: center; justify-content: center; padding: 20px; }
.cookie-modal.show { display: flex; }
.cookie-modal .cookie-modal-inner { background: #fff; width: 100%; max-width: 680px; border-radius: 20px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.cookie-modal .cookie-header { display: flex; align-items: center; justify-content: space-between; }
.cookie-modal .cookie-body { display: flex; flex-direction: column; gap: 12px; }
.cookie-modal .cookie-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #E5E7EB; border-radius: 12px; }
.cookie-modal .cookie-footer { display: flex; justify-content: flex-end; gap: 10px; }

/* Toggle (analytics/marketing) */
.toggle { position: relative; width: 46px; height: 26px; border-radius: 20px; background: #E5E7EB; transition: background-color 140ms ease; display: inline-flex; align-items: center; padding: 0 3px; }
.toggle::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transform: translateX(0); transition: transform 140ms ease, background-color 140ms ease; }
.toggle.is-on { background: var(--cyan); }
.toggle.is-on::after { transform: translateX(20px); background: #fff; }

/* 20) ACCESSIBILITY & CONTRAST HINTS */
/* Ensure testimonial text stays dark on light */
.testimonial-card p, .testimonial-card strong { color: #111827; }

/* 21) PRINT BASICS (optional lightweight) */
@media print {
  header, footer, .mobile-menu, .cookie-banner, .cookie-modal { display: none !important; }
  a { text-decoration: underline; }
}