/*
 * Olwidu Website Style System
 * File: olwidu.css
 * Version: 1.2.0
 * Created: 2026-05-11 UTC
 * Last updated: 2026-05-11
 * Source: olwidu-brand-guidelines.pdf v2.0
 *
 * Single source of truth for all Olwidu websites:
 *   - olwidu.com (home)
 *   - about.olwidu.com
 *   - privacy.olwidu.com
 *   - new.olwidu.com (quick start)
 *   - releases.olwidu.com
 *
 * Production location:
 *   https://olwidu.com/assets/olwidu.css
 *
 * Loaded by every subdomain via:
 *   <link rel="stylesheet" href="https://olwidu.com/assets/olwidu.css">
 *
 * Changelog:
 *   v1.2.0 (2026-05-11): PNG logo (single green variant for all contexts)
 *                        Removed currentColor-based SVG handling
 *   v1.1.0 (2026-05-11): Inline SVG logo support (size/color via CSS)
 *                        Updated .olw-header__logo and .olw-footer__logo rules
 *   v1.0.0 (2026-05-11): Initial release based on Brand Guidelines v2.0
 *                        Web-safe fonts (Georgia/Trebuchet MS), no Google Fonts
 *                        4px spacing scale, full color palette
 */

/* =============================================================
 * Design Tokens
 * ============================================================= */
:root {
  /* Colors — Primary (green, nature & discovery) */
  --olw-green:           #46A44E;
  --olw-green-dark:      #3A8F42;
  --olw-green-light:     #A8D5AB;
  --olw-green-subtle:    #E6F4E7;

  /* Colors — Secondary (amber, sun & warmth) */
  --olw-amber:           #F59E0B;
  --olw-amber-light:     #FDE68A;
  --olw-sand:            #F5ECD7;
  --olw-terracotta:      #C2543A;

  /* Colors — Neutrals */
  --olw-gray-dark:       #374151;
  --olw-gray-light:      #D1D5DB;
  --olw-white:           #FFFFFF;

  /* Text colors */
  --olw-text:            #374151;
  --olw-text-muted:      #6B7280;
  --olw-text-on-dark:    #FFFFFF;
  --olw-text-on-dark-muted: rgba(255, 255, 255, 0.7);

  /* Background colors */
  --olw-bg:              #F5ECD7;
  --olw-bg-card:         #FFFFFF;
  --olw-bg-dark:         #374151;

  /* Spacing scale (4px base unit) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Typography */
  --olw-font-heading: 'Trebuchet MS', 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
  --olw-font-body:    Georgia, 'Times New Roman', Times, serif;
  --olw-font-mono:    Consolas, Monaco, 'Courier New', monospace;

  /* Borders & radius */
  --olw-border:        1px solid #D1D5DB;
  --olw-radius-sm:     6px;
  --olw-radius:        12px;
  --olw-radius-lg:     20px;
  --olw-radius-pill:   999px;

  /* Layout */
  --olw-container-max: 1200px;
  --olw-content-max:   720px;
  --olw-header-height: 60px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--olw-header-height) + var(--space-4));
}

body {
  font-family: var(--olw-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--olw-text);
  background: var(--olw-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--olw-green-light);
  color: var(--olw-gray-dark);
}

/* =============================================================
 * Typography
 * ============================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--olw-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--olw-gray-dark);
  margin-bottom: var(--space-4);
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); margin-top: var(--space-12); }
h3 { font-size: 1.375rem; margin-top: var(--space-8); }
h4 { font-size: 1.125rem; margin-top: var(--space-6); }

p { margin-bottom: var(--space-4); }

a {
  color: var(--olw-green-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
a:hover { color: var(--olw-green); }

strong, b { font-weight: 700; }
em, i { font-style: italic; }

ul, ol { margin-bottom: var(--space-4); padding-left: var(--space-6); }
li { margin-bottom: var(--space-2); }

code {
  font-family: var(--olw-font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.3em;
  background: var(--olw-green-subtle);
  border-radius: var(--olw-radius-sm);
}

hr {
  border: none;
  border-top: var(--olw-border);
  margin: var(--space-12) 0;
}

/* Label / eyebrow — Trebuchet MS CAPS letter-spacing 0.1em (per brand guidelines) */
.olw-label {
  font-family: var(--olw-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olw-green-dark);
  margin-bottom: var(--space-3);
  display: inline-block;
}

.olw-tagline {
  font-family: var(--olw-font-body);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--olw-text-muted);
  margin-bottom: var(--space-6);
}

/* =============================================================
 * Layout
 * ============================================================= */
.olw-container {
  max-width: var(--olw-container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.olw-content {
  max-width: var(--olw-content-max);
  margin: 0 auto;
}

.olw-section { padding: var(--space-24) 0; }
.olw-section--compact { padding: var(--space-16) 0; }

.olw-section--sand   { background: var(--olw-sand); }
.olw-section--white  { background: var(--olw-white); }
.olw-section--green  { background: var(--olw-green-subtle); }
.olw-section--dark   { background: var(--olw-gray-dark); color: var(--olw-text-on-dark); }

.olw-section--dark h1,
.olw-section--dark h2,
.olw-section--dark h3,
.olw-section--dark h4 {
  color: var(--olw-text-on-dark);
}

.olw-section--dark .olw-label { color: var(--olw-amber); }
.olw-section--dark a { color: var(--olw-green-light); }
.olw-section--dark a:hover { color: var(--olw-white); }

/* =============================================================
 * Buttons
 * ============================================================= */
.olw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--olw-font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--olw-radius-pill);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

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

.olw-btn--secondary { background: transparent; color: var(--olw-green-dark); border-color: var(--olw-green); }
.olw-btn--secondary:hover { background: var(--olw-green-subtle); color: var(--olw-green-dark); }

.olw-btn--warm { background: var(--olw-amber); color: var(--olw-gray-dark); }
.olw-btn--warm:hover { background: #D97706; color: var(--olw-gray-dark); }

.olw-btn--dark { background: var(--olw-gray-dark); color: var(--olw-white); }
.olw-btn--dark:hover { background: #1F2937; color: var(--olw-white); }

.olw-btn--ghost {
  background: transparent;
  color: var(--olw-green-dark);
  text-decoration: underline;
  padding: var(--space-3) var(--space-4);
}
.olw-btn--ghost:hover { color: var(--olw-green); background: transparent; }

/* =============================================================
 * Badges
 * ============================================================= */
.olw-badge {
  display: inline-block;
  font-family: var(--olw-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--olw-radius-pill);
}

.olw-badge--recommended { background: var(--olw-green-subtle); color: var(--olw-green-dark); }
.olw-badge--new         { background: var(--olw-amber-light); color: #92400E; }
.olw-badge--event       { background: var(--olw-sand); color: var(--olw-gray-dark); border: 1px solid var(--olw-gray-light); }
.olw-badge--opendata    { background: var(--olw-gray-dark); color: var(--olw-white); }
.olw-badge--rating      { background: var(--olw-amber-light); color: #92400E; }
.olw-badge--free        { background: var(--olw-green); color: var(--olw-white); }

/* =============================================================
 * Cards
 * ============================================================= */
.olw-card {
  background: var(--olw-bg-card);
  border-radius: var(--olw-radius-lg);
  padding: var(--space-8);
  border: var(--olw-border);
}

.olw-card--green { background: var(--olw-green-subtle); border: none; }
.olw-card--sand  { background: var(--olw-sand); border: none; }
.olw-card--dark  { background: var(--olw-gray-dark); color: var(--olw-text-on-dark); border: none; }

.olw-card__title { font-size: 1.25rem; margin-top: 0; margin-bottom: var(--space-3); }
.olw-card__icon  { font-size: 2rem; line-height: 1; margin-bottom: var(--space-4); display: block; }

/* Grid for cards */
.olw-grid { display: grid; gap: var(--space-6); }
.olw-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.olw-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.olw-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* =============================================================
 * Hero
 * ============================================================= */
.olw-hero {
  background: var(--olw-sand);
  padding: var(--space-24) 0 var(--space-16);
  position: relative;
  overflow: hidden;
}

.olw-hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.olw-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
  color: var(--olw-gray-dark);
}

.olw-hero__title em {
  color: var(--olw-green-dark);
  font-style: italic;
  font-weight: 700;
}

.olw-hero__lede {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--olw-text);
  margin-bottom: var(--space-8);
  max-width: 620px;
}

.olw-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.olw-hero__compass {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  opacity: 0.06;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .olw-hero__compass { display: none; }
}

/* =============================================================
 * Header — fixed, dark
 * ============================================================= */
.olw-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--olw-header-height);
  background: var(--olw-gray-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.olw-header__inner {
  max-width: var(--olw-container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.olw-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.olw-header__logo {
  height: 32px;
  display: flex;
  align-items: center;
}
.olw-header__logo img {
  height: 100%;
  width: auto;
  display: block;
}

.olw-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.olw-header__nav a {
  display: inline-block;
  font-family: var(--olw-font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--olw-radius-sm);
  text-decoration: none;
  transition: all 0.15s ease;
}

.olw-header__nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--olw-white);
}

.olw-header__nav a[aria-current="page"] {
  background: var(--olw-green);
  color: var(--olw-white);
}

.olw-header__toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--olw-white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
}

@media (max-width: 840px) {
  .olw-header__nav {
    display: none;
    position: absolute;
    top: var(--olw-header-height);
    left: 0;
    right: 0;
    background: var(--olw-gray-dark);
    flex-direction: column;
    padding: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: 0;
  }
  .olw-header__nav.is-open { display: flex; }
  .olw-header__nav a {
    width: 100%;
    padding: var(--space-3) var(--space-4);
  }
  .olw-header__toggle { display: block; }
}

/* =============================================================
 * Language switcher
 * ============================================================= */
.olw-lang {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--olw-radius-pill);
  padding: 3px;
  flex-shrink: 0;
}

.olw-lang__btn {
  font-family: var(--olw-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  border-radius: var(--olw-radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.olw-lang__btn:hover { color: rgba(255, 255, 255, 0.85); }
.olw-lang__btn.is-active { background: var(--olw-green); color: var(--olw-white); }

/* Page wrapper accounts for fixed header */
.olw-page { padding-top: var(--olw-header-height); }

/* =============================================================
 * Footer
 * ============================================================= */
.olw-footer {
  background: var(--olw-gray-dark);
  color: var(--olw-text-on-dark);
  padding: var(--space-16) 0 var(--space-8);
}

.olw-footer a {
  color: var(--olw-green-light);
  text-decoration: none;
}

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

.olw-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

@media (max-width: 768px) {
  .olw-footer__top { grid-template-columns: 1fr; gap: var(--space-6); }
}

.olw-footer__col h4 {
  font-family: var(--olw-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olw-amber);
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.olw-footer__col ul { list-style: none; padding: 0; margin: 0; }
.olw-footer__col li { margin-bottom: var(--space-2); font-size: 0.95rem; }

.olw-footer__logo {
  height: 28px;
  width: auto;
  display: block;
  margin-bottom: var(--space-4);
}
.olw-footer__logo img {
  height: 100%;
  width: auto;
  display: block;
}

.olw-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-6);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.olw-footer__bottom p { margin-bottom: var(--space-2); }

/* =============================================================
 * 4-language content system
 * ============================================================= */
[data-lang] { display: none; }

html[lang="fr"] [data-lang="fr"],
html[lang="nl"] [data-lang="nl"],
html[lang="en"] [data-lang="en"],
html[lang="de"] [data-lang="de"] {
  display: inline;
}

div[data-lang],
p[data-lang],
section[data-lang],
article[data-lang],
li[data-lang] {
  display: none;
}

html[lang="fr"] div[data-lang="fr"],
html[lang="fr"] p[data-lang="fr"],
html[lang="fr"] section[data-lang="fr"],
html[lang="fr"] article[data-lang="fr"],
html[lang="fr"] li[data-lang="fr"],
html[lang="nl"] div[data-lang="nl"],
html[lang="nl"] p[data-lang="nl"],
html[lang="nl"] section[data-lang="nl"],
html[lang="nl"] article[data-lang="nl"],
html[lang="nl"] li[data-lang="nl"],
html[lang="en"] div[data-lang="en"],
html[lang="en"] p[data-lang="en"],
html[lang="en"] section[data-lang="en"],
html[lang="en"] article[data-lang="en"],
html[lang="en"] li[data-lang="en"],
html[lang="de"] div[data-lang="de"],
html[lang="de"] p[data-lang="de"],
html[lang="de"] section[data-lang="de"],
html[lang="de"] article[data-lang="de"],
html[lang="de"] li[data-lang="de"] {
  display: block;
}

html[lang="fr"] li[data-lang="fr"],
html[lang="nl"] li[data-lang="nl"],
html[lang="en"] li[data-lang="en"],
html[lang="de"] li[data-lang="de"] {
  display: list-item;
}

/* =============================================================
 * Utility classes
 * ============================================================= */
.olw-text-center  { text-align: center; }
.olw-text-muted   { color: var(--olw-text-muted); }
.olw-text-large   { font-size: 1.125rem; }

.olw-mt-0  { margin-top: 0; }
.olw-mt-4  { margin-top: var(--space-4); }
.olw-mt-8  { margin-top: var(--space-8); }
.olw-mb-0  { margin-bottom: 0; }
.olw-mb-4  { margin-bottom: var(--space-4); }
.olw-mb-8  { margin-bottom: var(--space-8); }

/* Divider with small ornament */
.olw-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-12) 0;
  color: var(--olw-amber);
}

.olw-divider::before,
.olw-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--olw-gray-light);
}

.olw-divider__icon { padding: 0 var(--space-4); font-size: 1rem; }

/* Print */
@media print {
  .olw-header, .olw-footer, .olw-hero__compass { display: none; }
  .olw-page { padding-top: 0; }
  body { background: white; color: black; }
}