/* Κεντρικές μεταβλητές σχεδίασης: χρώματα, σκιές, ακτίνες γωνιών και μέγιστο πλάτος. */
:root {
  color-scheme: light;

  /* Κύρια κειμενικά χρώματα. */
  --ink: #2b2527;
  --ink-soft: #70666a;

  /* Φόντα και επιφάνειες. */
  --paper: #fbf9f9;
  --surface: rgba(255, 255, 255, .94);
  --surface-solid: #ffffff;
  --line: #eadfe2;

  /* Εταιρική παλέτα Allergology.gr: μπορντό και απαλές παραλλαγές. */
  --green: #93001f;
  --green-deep: #720015;
  --green-soft: #f4e7ea;

  /* Συμπληρωματικοί τόνοι για ενδείξεις και πληροφοριακά στοιχεία. */
  --gold: #b99562;
  --gold-soft: #f7f0e5;
  --coral: #a83b50;
  --coral-soft: #f7e7eb;
  --blue: #6f7378;
  --blue-soft: #eef0f2;

  /* Σκιά με ελαφρύ μπορντό τόνο ώστε να δένει με το brand. */
  --shadow: 0 18px 50px rgba(92, 0, 20, .10);

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --max: 1180px;
}

    /* Καθολικό box-sizing ώστε padding και border να περιλαμβάνονται στις διαστάσεις των στοιχείων. */
    * { box-sizing: border-box; }

    /* Ενεργοποιεί ομαλή κύλιση προς τα anchors της σελίδας. */
    html { scroll-behavior: smooth; }

    /* Βασική εμφάνιση ολόκληρης της σελίδας: φόντο, χρώματα και γραμματοσειρά. */
    body {
      margin: 0;
      background:
        radial-gradient(circle at 12% 6%, rgba(152, 0, 27, .09), transparent 28rem),
        radial-gradient(circle at 92% 20%, rgba(43, 34, 37, .07), transparent 30rem),
        var(--paper);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.55;
    }

    /* Μορφοποίηση και διάταξη για τον selector: button, input, select. */
    button, input, select { font: inherit; }

    /* Μορφοποίηση και διάταξη για τον selector: button, a, input, select. */
    button, a, input, select { -webkit-tap-highlight-color: transparent; }

    /* Μορφοποίηση και διάταξη για τον selector: button. */
    button { color: inherit; }

    /* Μορφοποίηση και διάταξη για τον selector: a. */
    a { color: var(--green-deep); }

    /* Κατάσταση hover για: a. */
    a:hover { text-decoration-thickness: 2px; }

    /* Εμφανές focus outline για καλύτερη πλοήγηση με πληκτρολόγιο. */
    :focus-visible {
      outline: 3px solid rgba(147, 0, 31, .35);
      outline-offset: 3px;
    }

    /* Κρύβει περιεχόμενο οπτικά αλλά το διατηρεί διαθέσιμο σε screen readers. */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* Σύνδεσμος προσβασιμότητας για άμεση μετάβαση στο κύριο περιεχόμενο. */
    .skip-link {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 100;
      transform: translateY(-160%);
      border-radius: 10px;
      background: var(--green-deep);
      color: #fff;
      padding: 10px 14px;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .skip-link:focus. */
    .skip-link:focus { transform: none; }

    /* Κεντρικός wrapper που περιορίζει και κεντράρει το πλάτος του περιεχομένου. */
    .shell {
      width: min(calc(100% - 32px), var(--max));
      margin-inline: auto;
    }

    /* Sticky κεφαλίδα με ημιδιαφανές φόντο και blur. */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 30;
      border-bottom: 1px solid rgba(215, 228, 220, .8);
      background: rgba(247, 250, 247, .88);
      backdrop-filter: blur(18px);
    }

    /* Διάταξη της κύριας πλοήγησης. */
    .nav {
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }

    /* Εμφάνιση του λογοτύπου και του ονόματος του site. */
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      font-weight: 800;
      letter-spacing: -.03em;
      text-decoration: none;
      white-space: nowrap;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .brand-mark. */
    .brand-mark {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--green-soft);
      color: var(--green-deep);
    }

    /* Μορφοποίηση και διάταξη για τον selector: .brand-mark svg. */
    .brand-mark svg { width: 22px; height: 22px; }

    /* Διάταξη των συνδέσμων του κύριου menu. */
    .nav-links {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .nav-links a. */
    .nav-links a {
      border-radius: 999px;
      color: var(--ink-soft);
      padding: 8px 11px;
      text-decoration: none;
      font-size: .92rem;
      font-weight: 700;
    }

    /* Κατάσταση hover για: .nav-links a. */
    .nav-links a:hover { background: var(--green-soft); color: var(--green-deep); }

    /* Κύρια hero ενότητα σε διάταξη δύο στηλών. */
    .hero {
      padding: 76px 0 46px;
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
      align-items: center;
      gap: 56px;
    }

    /* Μικρός υπέρτιτλος που χρησιμοποιείται πάνω από τις κύριες επικεφαλίδες. */
    .eyebrow {
      margin: 0 0 16px;
      color: var(--green-deep);
      font-size: .78rem;
      font-weight: 850;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    /* Μορφοποίηση και διάταξη για τον selector: h1, h2, h3, p. */
    h1, h2, h3, p { margin-top: 0; }

    /* Τυπογραφία της κύριας επικεφαλίδας. */
    h1 {
      max-width: 760px;
      margin-bottom: 22px;
      font-size: clamp(2.6rem, 7vw, 5.8rem);
      line-height: .98;
      letter-spacing: -.065em;
    }

    /* Μορφοποίηση του εισαγωγικού κειμένου της hero ενότητας. */
    .hero-copy {
      max-width: 760px;
      margin-bottom: 28px;
      color: var(--ink-soft);
      font-size: clamp(1.06rem, 2vw, 1.28rem);
    }

    /* Διάταξη των κουμπιών δράσης της hero ενότητας. */
    .hero-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    /* Κοινή βασική εμφάνιση για buttons και links που λειτουργούν ως κουμπιά. */
    .button {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface-solid);
      color: var(--ink);
      cursor: pointer;
      padding: 10px 16px;
      font-weight: 800;
      text-decoration: none;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

    /* Κατάσταση hover για: .button. */
    .button:hover { transform: translateY(-1px); border-color: #c9a5ad; }

    /* Κύριο γεμάτο κουμπί δράσης. */
    .button.primary {
      border-color: var(--green-deep);
      background: var(--green-deep);
      color: #fff;
    }

    /* Δευτερεύον διαφανές κουμπί. */
    .button.ghost { background: transparent; }

    /* Πλαίσιο του διακοσμητικού γραφικού γύρης. */
    .hero-visual {
      position: relative;
      min-height: 390px;
      display: grid;
      place-items: center;
    }

    /* Δημιουργεί τον μεγάλο κυκλικό γυρεόκοκκο με CSS gradients. */
    .pollen-orb {
      position: relative;
      width: min(78vw, 330px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: 1px solid rgba(34, 107, 84, .18);
      border-radius: 50%;
      background:
        radial-gradient(circle at 38% 34%, #fffaf0 0 12%, transparent 13%),
        radial-gradient(circle at 50% 50%, #eedbb5 0 14%, #e2bd73 15% 42%, #c58b38 43% 52%, transparent 53%),
        radial-gradient(circle at 50% 50%, rgba(214, 163, 79, .18), rgba(34, 107, 84, .07));
      box-shadow: 0 30px 80px rgba(61, 102, 83, .18), inset 0 0 70px rgba(255, 255, 255, .7);
    }

    /* Μορφοποίηση και διάταξη για τον selector: .pollen-orb::before, .pollen-orb::after. */
    .pollen-orb::before,
    .pollen-orb::after {
      content: "";
      position: absolute;
      inset: 13%;
      border: 2px dotted rgba(255, 255, 255, .74);
      border-radius: 50%;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .pollen-orb::after. */
    .pollen-orb::after { inset: 27%; border-style: dashed; }

    /* Βασική εμφάνιση και animation των αιωρούμενων σωματιδίων γύρης. */
    .particle {
      position: absolute;
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 0 5px rgba(214, 163, 79, .15);
      animation: float 5s ease-in-out infinite alternate;
      animation-delay: var(--delay);
    }

    /* Ορίζει θέση, μέγεθος και καθυστέρηση animation για το συγκεκριμένο σωματίδιο γύρης. */
    .particle:nth-child(1) { top: 4%; left: 17%; --size: 11px; --delay: -.8s; }
    /* Ορίζει θέση, μέγεθος και καθυστέρηση animation για το συγκεκριμένο σωματίδιο γύρης. */
    .particle:nth-child(2) { top: 18%; right: 1%; --size: 8px; --delay: -2s; }
    /* Ορίζει θέση, μέγεθος και καθυστέρηση animation για το συγκεκριμένο σωματίδιο γύρης. */
    .particle:nth-child(3) { bottom: 12%; right: 9%; --size: 13px; --delay: -1.4s; }
    /* Ορίζει θέση, μέγεθος και καθυστέρηση animation για το συγκεκριμένο σωματίδιο γύρης. */
    .particle:nth-child(4) { bottom: 2%; left: 28%; --size: 7px; --delay: -3s; }
    /* Ορίζει θέση, μέγεθος και καθυστέρηση animation για το συγκεκριμένο σωματίδιο γύρης. */
    .particle:nth-child(5) { top: 42%; left: -2%; --size: 9px; --delay: -.2s; }

    /* Animation της ήπιας αιώρησης των σωματιδίων. */
    @keyframes float {
      to { transform: translate3d(8px, -10px, 0) scale(1.08); }
    }

    /* Floating κάρτα με τον επιλεγμένο μήνα και τη σύνοψη εποχικότητας. */
    .hero-status {
      position: absolute;
      right: 0;
      bottom: 10px;
      width: min(270px, 78%);
      border: 1px solid rgba(215, 228, 220, .9);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .88);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      padding: 17px;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .status-top. */
    .status-top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--ink-soft);
      font-size: .82rem;
      font-weight: 750;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .hero-status strong. */
    .hero-status strong {
      display: block;
      margin: 4px 0 3px;
      font-size: 1.25rem;
      letter-spacing: -.03em;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .hero-status p. */
    .hero-status p { margin: 0; color: var(--ink-soft); font-size: .88rem; }

    /* Ενημερωτικό πλαίσιο με βασική διευκρίνιση για τα δεδομένα. */
    .notice {
      margin-bottom: 26px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      border: 1px solid #ead9b7;
      border-radius: var(--radius-md);
      background: var(--gold-soft);
      padding: 13px 15px;
      color: #5f4d2c;
      font-size: .9rem;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .notice svg. */
    .notice svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }

    /* Offset κύλισης για σωστή εμφάνιση των anchors. */
    section { scroll-margin-top: 90px; }

    /* Κοινό κάθετο spacing των βασικών ενοτήτων. */
    .section { padding: 56px 0; }

    /* Περιορίζει το πλάτος και το spacing της επικεφαλίδας κάθε ενότητας. */
    .section-heading {
      max-width: 760px;
      margin-bottom: 25px;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .section-heading h2. */
    .section-heading h2 {
      margin-bottom: 9px;
      font-size: clamp(2rem, 5vw, 3.3rem);
      line-height: 1.02;
      letter-spacing: -.045em;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .section-heading p. */
    .section-heading p { margin-bottom: 0; color: var(--ink-soft); font-size: 1.03rem; }

    /* Κύριο panel των φίλτρων και των συνοπτικών στοιχείων. */
    .control-panel {
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: var(--surface);
      box-shadow: var(--shadow);
      padding: 22px;
    }

    /* Grid διάταξη για επιλογή μήνα και περιοχής. */
    .control-row {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(230px, .6fr);
      gap: 20px;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .control-group. */
    .control-group { min-width: 0; }

    /* Μορφοποίηση και διάταξη για τον selector: .control-label. */
    .control-label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 9px;
      font-weight: 850;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .control-hint. */
    .control-hint { color: var(--ink-soft); font-size: .82rem; font-weight: 650; }

    /* Grid για τα 12 κουμπιά επιλογής μήνα. */
    .month-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(36px, 1fr));
      gap: 5px;
    }

    /* Βασική εμφάνιση των κουμπιών μηνών. */
    .month-button {
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface-solid);
      cursor: pointer;
      padding: 5px 3px;
      font-size: .82rem;
      font-weight: 800;
    }

    /* Κατάσταση hover για: .month-button. */
    .month-button:hover { border-color: #caa7ae; background: var(--green-soft); }

    /* Ενεργή εμφάνιση του επιλεγμένου διαδραστικού στοιχείου. */
    .month-button[aria-pressed="true"] {
      border-color: var(--green-deep);
      background: var(--green-deep);
      color: #fff;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .select-wrap, .search-wrap. */
    .select-wrap, .search-wrap { position: relative; }

    /* Μορφοποίηση και διάταξη για τον selector: .select-wrap svg, .search-wrap svg. */
    .select-wrap svg, .search-wrap svg {
      position: absolute;
      top: 50%;
      left: 14px;
      width: 18px;
      height: 18px;
      transform: translateY(-50%);
      color: var(--ink-soft);
      pointer-events: none;
    }

    /* Μορφοποίηση και διάταξη για τον selector: select, input[type="search"]. */
    select, input[type="search"] {
      width: 100%;
      min-height: 46px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface-solid);
      color: var(--ink);
      padding: 10px 12px 10px 42px;
    }

    /* Διάταξη των φίλτρων ομάδας και του πεδίου αναζήτησης. */
    .filter-row {
      margin-top: 18px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .segmented. */
    .segmented { display: flex; gap: 6px; flex-wrap: wrap; }

    /* Βασική εμφάνιση των κουμπιών φίλτρου. */
    .filter-button {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: transparent;
      cursor: pointer;
      padding: 7px 13px;
      font-size: .88rem;
      font-weight: 800;
    }

    /* Κατάσταση hover για: .filter-button. */
    .filter-button:hover { background: var(--green-soft); }

    /* Ενεργή εμφάνιση του επιλεγμένου διαδραστικού στοιχείου. */
    .filter-button[aria-pressed="true"] {
      border-color: var(--green-deep);
      background: var(--green-soft);
      color: var(--green-deep);
    }

    /* Μορφοποίηση και διάταξη για τον selector: .search-wrap. */
    .search-wrap { width: min(100%, 320px); }

    /* Grid για τα τρία συνοπτικά metrics. */
    .summary-grid {
      margin-top: 18px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    /* Κάρτα ενός συνοπτικού στατιστικού. */
    .metric {
      min-height: 105px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--surface-solid);
      padding: 16px;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .metric-label. */
    .metric-label { color: var(--ink-soft); font-size: .82rem; font-weight: 750; }

    /* Μορφοποίηση και διάταξη για τον selector: .metric-value. */
    .metric-value {
      display: block;
      margin-top: 4px;
      font-size: clamp(1.45rem, 3vw, 2.15rem);
      font-weight: 850;
      letter-spacing: -.045em;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .metric-value.compact. */
    .metric-value.compact { font-size: 1.3rem; }

    /* Μορφοποίηση και διάταξη για τον selector: .metric small. */
    .metric small { color: var(--ink-soft); }

    /* Μορφοποίηση και διάταξη για τον selector: .results-head. */
    .results-head {
      margin: 28px 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .results-head h3. */
    .results-head h3 { margin: 0; font-size: 1.15rem; }

    /* Μορφοποίηση και διάταξη για τον selector: .results-count. */
    .results-count { color: var(--ink-soft); font-size: .88rem; }

    /* Grid των καρτών γυρεοκόκκων. */
    .pollen-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    /* Βασική εμφάνιση κάθε κάρτας γυρεοκόκκου. */
    .pollen-card {
      position: relative;
      min-height: 260px;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--surface-solid);
      overflow: hidden;
      text-align: left;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    /* Κατάσταση hover για: .pollen-card. */
    .pollen-card:hover {
      transform: translateY(-3px);
      border-color: #cbb0b6;
      box-shadow: var(--shadow);
    }

    /* Κάνει ολόκληρο το εσωτερικό της κάρτας διαδραστικό κουμπί. */
    .card-button {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      border: 0;
      background: transparent;
      cursor: pointer;
      padding: 17px;
      text-align: left;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .card-top. */
    .card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    /* Πλαίσιο για το εικονίδιο της κατηγορίας φυτού. */
    .taxon-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      background: var(--green-soft);
      color: var(--green-deep);
    }

    /* Μορφοποίηση και διάταξη για τον selector: .taxon-icon svg. */
    .taxon-icon svg { width: 25px; height: 25px; }

    /* Pill ένδειξης της εποχικής έντασης. */
    .activity-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 5px 8px;
      font-size: .75rem;
      font-weight: 850;
    }

    /* Χρωματική εμφάνιση για επίπεδο 0: εκτός συνήθους περιόδου. */
    .activity-badge[data-level="0"] { background: #edf1ef; color: #62726c; }
    /* Χρωματική εμφάνιση για χαμηλή εποχική ένταση. */
    .activity-badge[data-level="1"] { background: var(--blue-soft); color: #375f6b; }
    /* Χρωματική εμφάνιση για μέτρια εποχική ένταση. */
    .activity-badge[data-level="2"] { background: var(--gold-soft); color: #6a5122; }
    /* Χρωματική εμφάνιση για πιθανή κορύφωση εποχικής έντασης. */
    .activity-badge[data-level="3"] { background: var(--coral-soft); color: #82442f; }

    /* Μορφοποίηση και διάταξη για τον selector: .pollen-card h3. */
    .pollen-card h3 { margin: 16px 0 1px; font-size: 1.18rem; letter-spacing: -.025em; }

    /* Μορφοποίηση και διάταξη για τον selector: .latin. */
    .latin { color: var(--ink-soft); font-size: .84rem; font-style: italic; }

    /* Περιγραφή κάρτας περιορισμένη οπτικά σε συγκεκριμένο αριθμό γραμμών. */
    .card-description {
      display: -webkit-box;
      margin: 12px 0 14px;
      overflow: hidden;
      color: var(--ink-soft);
      font-size: .92rem;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .card-meta. */
    .card-meta {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--ink-soft);
      font-size: .78rem;
      font-weight: 750;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .group-pill. */
    .group-pill {
      border-radius: 999px;
      background: #f7ecef;
      padding: 4px 8px;
      color: var(--green-deep);
    }

    /* Μήνυμα που εμφανίζεται όταν τα φίλτρα δεν επιστρέφουν αποτελέσματα. */
    .empty-state {
      grid-column: 1 / -1;
      border: 1px dashed #cfb8bd;
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .55);
      padding: 30px;
      text-align: center;
      color: var(--ink-soft);
    }

    /* Διάταξη του υπομνήματος εποχικής έντασης. */
    .legend {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      color: var(--ink-soft);
      font-size: .82rem;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .legend-item. */
    .legend-item { display: inline-flex; align-items: center; gap: 5px; }

    /* Μορφοποίηση και διάταξη για τον selector: .legend-dot. */
    .legend-dot { width: 10px; height: 10px; border-radius: 50%; }

    /* Χρωματική εμφάνιση για επίπεδο 0: εκτός συνήθους περιόδου. */
    .legend-dot.level-0 { background: #edf1ef; }
    /* Χρωματική εμφάνιση για χαμηλή εποχική ένταση. */
    .legend-dot.level-1 { background: #cfe1e5; }
    /* Χρωματική εμφάνιση για μέτρια εποχική ένταση. */
    .legend-dot.level-2 { background: #ecd29e; }
    /* Χρωματική εμφάνιση για πιθανή κορύφωση εποχικής έντασης. */
    .legend-dot.level-3 { background: #df9a83; }

    /* Scrollable wrapper του πίνακα εποχικότητας. */
    .calendar-wrap {
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: var(--surface-solid);
      box-shadow: var(--shadow);
      overflow-x: auto;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .calendar-wrap.spaced. */
    .calendar-wrap.spaced { margin-top: 14px; }

    /* Βασική εμφάνιση του πίνακα εποχικότητας. */
    .calendar-table {
      width: 100%;
      min-width: 900px;
      border-collapse: collapse;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .calendar-table th, .calendar-table td. */
    .calendar-table th, .calendar-table td {
      border-bottom: 1px solid #eee5e7;
      padding: 11px 7px;
      text-align: center;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .calendar-table thead th. */
    .calendar-table thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: #faf7f8;
      color: var(--ink-soft);
      font-size: .75rem;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .calendar-table th:first-child, .calendar-table td:first-child. */
    .calendar-table th:first-child, .calendar-table td:first-child {
      position: sticky;
      left: 0;
      z-index: 1;
      width: 180px;
      background: var(--surface-solid);
      text-align: left;
      padding-left: 16px;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .calendar-table thead th:first-child. */
    .calendar-table thead th:first-child { z-index: 3; background: #faf7f8; }

    /* Clickable όνομα γυρεοκόκκου μέσα στον πίνακα. */
    .calendar-name {
      border: 0;
      background: transparent;
      color: var(--ink);
      cursor: pointer;
      font-weight: 800;
      text-align: left;
    }

    /* Κατάσταση hover για: .calendar-name. */
    .calendar-name:hover { color: var(--green); text-decoration: underline; }

    /* Μορφοποίηση και διάταξη για τον selector: .season-cell. */
    .season-cell { width: 56px; }

    /* Χρωματική μπάρα που αποδίδει το επίπεδο εποχικής έντασης. */
    .season-mark {
      height: 14px;
      border-radius: 999px;
      background: #edf1ef;
    }

    /* Χρωματική εμφάνιση για χαμηλή εποχική ένταση. */
    .season-mark[data-level="1"] { background: #cfe1e5; }
    /* Χρωματική εμφάνιση για μέτρια εποχική ένταση. */
    .season-mark[data-level="2"] { background: #ecd29e; }
    /* Χρωματική εμφάνιση για πιθανή κορύφωση εποχικής έντασης. */
    .season-mark[data-level="3"] { background: #df9a83; }

    /* Οπτική επισήμανση της στήλης του τρέχοντος μήνα. */
    .current-month-column { background: rgba(244, 231, 234, .55); }

    /* Μορφοποίηση και διάταξη για τον selector: .calendar-note. */
    .calendar-note {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      flex-wrap: wrap;
      padding: 14px 16px 16px;
      color: var(--ink-soft);
      font-size: .82rem;
    }

    /* Διάταξη λίστας περιοχών και αναλυτικής κάρτας. */
    .region-layout {
      display: grid;
      grid-template-columns: minmax(260px, .36fr) minmax(0, .64fr);
      gap: 18px;
    }

    /* Κάθετη λίστα επιλογής γεωγραφικών περιοχών. */
    .region-list { display: grid; gap: 9px; }

    /* Κουμπί επιλογής γεωγραφικής περιοχής. */
    .region-button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--surface-solid);
      cursor: pointer;
      padding: 14px;
      text-align: left;
      font-weight: 820;
    }

    /* Κατάσταση hover για: .region-button. */
    .region-button:hover { border-color: #c9a8af; }

    /* Ενεργή εμφάνιση του επιλεγμένου διαδραστικού στοιχείου. */
    .region-button[aria-pressed="true"] {
      border-color: var(--green-deep);
      background: var(--green-soft);
      color: var(--green-deep);
    }

    /* Αναλυτική κάρτα για την επιλεγμένη γεωγραφική ζώνη. */
    .region-card {
      min-height: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background:
        radial-gradient(circle at 100% 0, rgba(83, 127, 142, .16), transparent 20rem),
        var(--surface-solid);
      box-shadow: var(--shadow);
      padding: clamp(22px, 4vw, 38px);
    }

    /* Μορφοποίηση και διάταξη για τον selector: .region-kicker. */
    .region-kicker { color: var(--green); font-size: .8rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }

    /* Μορφοποίηση και διάταξη για τον selector: .region-card h3. */
    .region-card h3 { margin: 5px 0 10px; font-size: clamp(1.6rem, 4vw, 2.5rem); letter-spacing: -.04em; }

    /* Μορφοποίηση και διάταξη για τον selector: .region-card > p. */
    .region-card > p { color: var(--ink-soft); }

    /* Λίστα με τις κυρίαρχες ομάδες γύρης της περιοχής. */
    .dominant-list { display: flex; gap: 7px; flex-wrap: wrap; margin: 20px 0; }

    /* Μορφοποίηση και διάταξη για τον selector: .dominant-chip. */
    .dominant-chip {
      border: 1px solid #dec7cc;
      border-radius: 999px;
      background: #faf3f5;
      padding: 6px 9px;
      font-size: .83rem;
      font-weight: 800;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .region-fact. */
    .region-fact {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      border-top: 1px solid var(--line);
      padding-top: 16px;
      color: var(--ink-soft);
    }

    /* Μορφοποίηση και διάταξη για τον selector: .region-fact svg. */
    .region-fact svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--green); }

    /* Grid των συμβουλών μείωσης έκθεσης. */
    .tips-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    /* Κάρτα μεμονωμένης συμβουλής. */
    .tip-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--surface-solid);
      padding: 17px;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .tip-number. */
    .tip-number {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--green-soft);
      color: var(--green-deep);
      font-size: .82rem;
      font-weight: 900;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .tip-card h3. */
    .tip-card h3 { margin: 14px 0 7px; font-size: 1rem; }

    /* Μορφοποίηση και διάταξη για τον selector: .tip-card p. */
    .tip-card p { margin-bottom: 0; color: var(--ink-soft); font-size: .9rem; }

    /* Έντονο πλαίσιο ιατρικής προειδοποίησης. */
    .safety-box {
      margin-top: 16px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 14px;
      border: 1px solid #e7c4b7;
      border-radius: var(--radius-lg);
      background: var(--coral-soft);
      padding: 16px;
      color: #673526;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .safety-icon. */
    .safety-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, .6);
    }

    /* Μορφοποίηση και διάταξη για τον selector: .safety-icon svg. */
    .safety-icon svg { width: 23px; height: 23px; }

    /* Μορφοποίηση και διάταξη για τον selector: .safety-box strong. */
    .safety-box strong { display: block; margin-bottom: 2px; }

    /* Μορφοποίηση και διάταξη για τον selector: .safety-box p. */
    .safety-box p { margin: 0; font-size: .9rem; }

    /* Grid των εκπαιδευτικών αναδιπλούμενων blocks. */
    .education-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    /* Εμφάνιση των αναδιπλούμενων εκπαιδευτικών blocks. */
    details {
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--surface-solid);
      padding: 15px;
    }

    /* Μορφοποίηση και διάταξη για τον selector: summary. */
    summary { cursor: pointer; font-weight: 850; }

    /* Μορφοποίηση και διάταξη για τον selector: details p. */
    details p { margin: 10px 0 0; color: var(--ink-soft); font-size: .91rem; }

    /* Ενότητα επιστημονικών πηγών και περιορισμών. */
    .source-panel {
      border-top: 1px solid var(--line);
      padding: 30px 0 50px;
      color: var(--ink-soft);
      font-size: .84rem;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .source-panel h2. */
    .source-panel h2 { color: var(--ink); font-size: 1rem; }

    /* Διάταξη της λίστας πηγών σε στήλες. */
    .source-list {
      columns: 2;
      column-gap: 36px;
      padding-left: 20px;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .source-list li. */
    .source-list li { break-inside: avoid; margin-bottom: 8px; }

    /* Βασική εμφάνιση του footer. */
    .footer {
      border-top: 1px solid var(--line);
      padding: 24px 0 34px;
      color: var(--ink-soft);
      font-size: .83rem;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .footer-row. */
    .footer-row { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

    /* Κύριο modal παράθυρο με τις αναλυτικές πληροφορίες. */
    dialog {
      width: min(calc(100% - 24px), 720px);
      max-height: calc(100dvh - 32px);
      border: 0;
      border-radius: var(--radius-xl);
      background: var(--surface-solid);
      color: var(--ink);
      box-shadow: 0 32px 100px rgba(16, 51, 41, .35);
      padding: 0;
    }

    /* Σκοτεινό και θολωμένο φόντο πίσω από το modal. */
    dialog::backdrop { background: rgba(15, 39, 32, .54); backdrop-filter: blur(5px); }

    /* Μορφοποίηση και διάταξη για τον selector: .dialog-inner. */
    .dialog-inner { padding: clamp(20px, 4vw, 32px); }

    /* Μορφοποίηση και διάταξη για τον selector: .dialog-head. */
    .dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }

    /* Μορφοποίηση και διάταξη για τον selector: .dialog-head h2. */
    .dialog-head h2 { margin: 10px 0 2px; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -.045em; }

    /* Μορφοποίηση και διάταξη για τον selector: .close-button. */
    .close-button {
      width: 42px;
      height: 42px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      cursor: pointer;
      font-size: 1.4rem;
    }

    /* Μορφοποίηση και διάταξη για τον selector: .dialog-summary. */
    .dialog-summary { margin: 20px 0; color: var(--ink-soft); }

    /* Grid των πληροφοριακών blocks μέσα στο modal. */
    .dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    /* Μορφοποίηση και διάταξη για τον selector: .dialog-block. */
    .dialog-block { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; }

    /* Μορφοποίηση και διάταξη για τον selector: .dialog-block h3. */
    .dialog-block h3 { margin-bottom: 6px; font-size: .9rem; }

    /* Μορφοποίηση και διάταξη για τον selector: .dialog-block p. */
    .dialog-block p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

    /* Μορφοποίηση και διάταξη για τον selector: .mini-season. */
    .mini-season { margin-top: 18px; }

    /* Μορφοποίηση και διάταξη για τον selector: .mini-season h3. */
    .mini-season h3 { font-size: .92rem; }

    /* Grid των 12 μηνών στο μικρό εποχικό διάγραμμα του modal. */
    .mini-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }

    /* Μορφοποίηση και διάταξη για τον selector: .mini-month. */
    .mini-month { min-width: 0; text-align: center; color: var(--ink-soft); font-size: .7rem; }

    /* Μορφοποίηση και διάταξη για τον selector: .mini-month span. */
    .mini-month span { height: 10px; display: block; margin-bottom: 4px; border-radius: 999px; background: #edf1ef; }

    /* Χρωματική εμφάνιση για χαμηλή εποχική ένταση. */
    .mini-month span[data-level="1"] { background: #cfe1e5; }
    /* Χρωματική εμφάνιση για μέτρια εποχική ένταση. */
    .mini-month span[data-level="2"] { background: #ecd29e; }
    /* Χρωματική εμφάνιση για πιθανή κορύφωση εποχικής έντασης. */
    .mini-month span[data-level="3"] { background: #df9a83; }

    /* Μορφοποίηση και διάταξη για τον selector: .dialog-note. */
    .dialog-note {
      margin-top: 18px;
      border-radius: var(--radius-md);
      background: var(--green-soft);
      padding: 13px;
      color: var(--green-deep);
      font-size: .88rem;
    }

    /* Responsive προσαρμογές για tablets και μικρότερα desktop πλάτη. */
    @media (max-width: 980px) {
      /* Κύρια hero ενότητα σε διάταξη δύο στηλών. */
      .hero { grid-template-columns: 1fr; padding-top: 58px; }
      /* Πλαίσιο του διακοσμητικού γραφικού γύρης. */
      .hero-visual { min-height: 340px; }
      /* Grid των καρτών γυρεοκόκκων. */
      .pollen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      /* Grid των συμβουλών μείωσης έκθεσης. */
      .tips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      /* Grid των εκπαιδευτικών αναδιπλούμενων blocks. */
      .education-grid { grid-template-columns: 1fr; }
    }

    /* Responsive προσαρμογές για κινητά και στενά tablets. */
    @media (max-width: 760px) {
      /* Sticky κεφαλίδα με ημιδιαφανές φόντο και blur. */
      .site-header { position: static; }
      /* Διάταξη της κύριας πλοήγησης. */
      .nav { align-items: flex-start; padding: 14px 0; flex-direction: column; }
      /* Διάταξη των συνδέσμων του κύριου menu. */
      .nav-links { justify-content: flex-start; }
      /* Κύρια hero ενότητα σε διάταξη δύο στηλών. */
      .hero { padding-top: 42px; gap: 24px; }
      /* Floating κάρτα με τον επιλεγμένο μήνα και τη σύνοψη εποχικότητας. */
      .hero-status { right: 4%; }
      /* Grid διάταξη για επιλογή μήνα και περιοχής. */
      .control-row { grid-template-columns: 1fr; }
      /* Grid για τα 12 κουμπιά επιλογής μήνα. */
      .month-grid { grid-template-columns: repeat(6, 1fr); }
      /* Grid για τα τρία συνοπτικά metrics. */
      .summary-grid { grid-template-columns: 1fr; }
      /* Διάταξη λίστας περιοχών και αναλυτικής κάρτας. */
      .region-layout { grid-template-columns: 1fr; }
      /* Έντονο πλαίσιο ιατρικής προειδοποίησης. */
      .safety-box { grid-template-columns: auto 1fr; }
      /* Μορφοποίηση και διάταξη για τον selector: .safety-box .button. */
      .safety-box .button { grid-column: 1 / -1; }
      /* Διάταξη της λίστας πηγών σε στήλες. */
      .source-list { columns: 1; }
      /* Grid των πληροφοριακών blocks μέσα στο modal. */
      .dialog-grid { grid-template-columns: 1fr; }
    }

    /* Πρόσθετες responsive προσαρμογές για πολύ μικρές οθόνες. */
    @media (max-width: 540px) {
      /* Κεντρικός wrapper που περιορίζει και κεντράρει το πλάτος του περιεχομένου. */
      .shell { width: min(calc(100% - 20px), var(--max)); }
      /* Μορφοποίηση και διάταξη για τον selector: .nav-links a. */
      .nav-links a { padding: 6px 8px; font-size: .83rem; }
      /* Τυπογραφία της κύριας επικεφαλίδας. */
      h1 { font-size: clamp(2.5rem, 17vw, 4.2rem); }
      /* Μορφοποίηση και διάταξη για τον selector: .hero-actions .button. */
      .hero-actions .button { width: 100%; }
      /* Πλαίσιο του διακοσμητικού γραφικού γύρης. */
      .hero-visual { min-height: 300px; }
      /* Δημιουργεί τον μεγάλο κυκλικό γυρεόκοκκο με CSS gradients. */
      .pollen-orb { width: 250px; }
      /* Floating κάρτα με τον επιλεγμένο μήνα και τη σύνοψη εποχικότητας. */
      .hero-status { right: 0; bottom: 0; }
      /* Κοινό κάθετο spacing των βασικών ενοτήτων. */
      .section { padding: 42px 0; }
      /* Κύριο panel των φίλτρων και των συνοπτικών στοιχείων. */
      .control-panel { padding: 14px; }
      /* Μορφοποίηση και διάταξη για τον selector: .pollen-grid, .tips-grid. */
      .pollen-grid, .tips-grid { grid-template-columns: 1fr; }
      /* Μορφοποίηση και διάταξη για τον selector: .search-wrap. */
      .search-wrap { width: 100%; }
      /* Grid των 12 μηνών στο μικρό εποχικό διάγραμμα του modal. */
      .mini-months { grid-template-columns: repeat(6, 1fr); row-gap: 10px; }
    }

    /* Απενεργοποιεί animations και transitions όταν ο χρήστης προτιμά μειωμένη κίνηση. */
    @media (prefers-reduced-motion: reduce) {
      /* Μορφοποίηση και διάταξη για τον selector: *, *::before, *::after. */
      *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
    }

    /* Ειδική μορφοποίηση της σελίδας για εκτύπωση. */
    @media print {
      /* Μορφοποίηση και διάταξη για τον selector: .site-header, .hero-visual, .hero-actions, .control-panel, .card-button, .button, dialog. */
      .site-header, .hero-visual, .hero-actions, .control-panel, .card-button, .button, dialog { display: none !important; }
      /* Βασική εμφάνιση ολόκληρης της σελίδας: φόντο, χρώματα και γραμματοσειρά. */
      body { background: #fff; }
      /* Κύρια hero ενότητα σε διάταξη δύο στηλών. */
      .hero { display: block; padding: 20px 0; }
      /* Κοινό κάθετο spacing των βασικών ενοτήτων. */
      .section { padding: 18px 0; }
      /* Βασική εμφάνιση κάθε κάρτας γυρεοκόκκου. */
      .pollen-card { min-height: 0; break-inside: avoid; }
      /* Μορφοποίηση και διάταξη για τον selector: .pollen-card::after. */
      .pollen-card::after { content: attr(data-print); display: block; padding: 14px; }
      /* Μορφοποίηση και διάταξη για τον selector: .calendar-wrap, .region-card. */
      .calendar-wrap, .region-card { box-shadow: none; }
    }


/* ========================================================================== 
   ALLERGOLOGY.GR — ΕΤΑΙΡΙΚΗ ΠΡΟΣΑΡΜΟΓΗ
   Οι κανόνες αυτής της ενότητας προσαρμόζουν τη σελίδα στην αισθητική του
   allergology.gr και συμπληρώνουν το βασικό responsive layout.
   ========================================================================== */

/* Σκούρο μπορντό header ώστε το λευκό λογότυπο να εμφανίζεται σωστά. */
.site-header {
  background: rgba(95, 0, 18, .97);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 8px 28px rgba(71, 0, 14, .18);
  backdrop-filter: blur(14px);
}

/* Αυξάνει ελαφρά το ύψος της κεφαλίδας για το οριζόντιο εταιρικό λογότυπο. */
.nav {
  min-height: 94px;
}

/* Container του λογοτύπου. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

/* Πραγματικό λογότυπο που υπάρχει μέσα στο index.html ως <img>. */
.site-logo {
  display: block;
  width: auto;
  height: 66px;
  max-width: min(420px, 42vw);
  object-fit: contain;
}

/* Σύνδεσμοι πλοήγησης πάνω στο μπορντό header. */
.nav-links a {
  color: rgba(255, 255, 255, .88);
  border: 1px solid transparent;
}

/* Hover/focus στα links του menu με λευκό ημιδιαφανές φόντο. */
.nav-links a:hover,
.nav-links a:focus-visible {
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
}

/* Hero με καθαρό θερμό λευκό background και διακριτική μπορντό λάμψη. */
.hero {
  position: relative;
}

/* Μικρές κεφαλίδες ενοτήτων στο βασικό εταιρικό μπορντό. */
.eyebrow {
  color: var(--green);
}

/* Το κύριο κουμπί χρησιμοποιεί το εταιρικό μπορντό. */
.button.primary {
  border-color: var(--green-deep);
  background: var(--green-deep);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(114, 0, 21, .16);
}

/* Hover του κύριου κουμπιού με ελαφρώς φωτεινότερο μπορντό. */
.button.primary:hover {
  background: var(--green);
  border-color: var(--green);
}

/* Το κεντρικό pollen visual αποκτά μπορντό/σαμπανί χρωματική ταυτότητα. */
.pollen-orb {
  border-color: rgba(147, 0, 31, .18);
  background:
    radial-gradient(circle at 38% 34%, #fff9f4 0 12%, transparent 13%),
    radial-gradient(circle at 50% 50%, #ead5d9 0 14%, #b5435a 15% 42%, #7a0018 43% 52%, transparent 53%),
    radial-gradient(circle at 50% 50%, rgba(147, 0, 31, .15), rgba(185, 149, 98, .08));
  box-shadow: 0 30px 80px rgba(114, 0, 21, .17), inset 0 0 70px rgba(255, 255, 255, .68);
}

/* Τα κινούμενα σωματίδια ακολουθούν τον συμπληρωματικό χρυσαφί τόνο. */
.particle {
  background: var(--gold);
  box-shadow: 0 0 0 5px rgba(185, 149, 98, .16);
}

/* Κάρτα κατάστασης του hero με καθαρή λευκή επιφάνεια. */
.hero-status {
  border-color: var(--line);
  background: rgba(255, 255, 255, .94);
}

/* Κύρια panels με λεπτό περίγραμμα και πιο καθαρή εταιρική εμφάνιση. */
.control-panel,
.calendar-wrap,
.region-card,
.pollen-card,
.tip-card,
details,
.dialog-block {
  border-color: var(--line);
}

/* Επιλεγμένοι μήνες σε πλήρες μπορντό. */
.month-button[aria-pressed="true"] {
  border-color: var(--green-deep);
  background: var(--green-deep);
  color: #ffffff;
}

/* Επιλεγμένα φίλτρα με απαλό μπορντό φόντο. */
.filter-button[aria-pressed="true"],
.region-button[aria-pressed="true"] {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green-deep);
}

/* Εικονίδια καρτών και αριθμοί συμβουλών με το εταιρικό accent. */
.taxon-icon,
.tip-number {
  background: var(--green-soft);
  color: var(--green-deep);
}

/* Pills και chips σε απαλές μπορντό επιφάνειες αντί για πράσινες. */
.group-pill,
.dominant-chip {
  background: #faf1f3;
  border-color: #e5cfd4;
  color: var(--green-deep);
}

/* Πληροφοριακό box με θερμό, διακριτικό background. */
.notice {
  border-color: #e6d8c2;
  background: var(--gold-soft);
}

/* Footer σε σκούρο μπορντό ώστε η σελίδα να κλείνει με την εταιρική ταυτότητα. */
.footer {
  border-top: 0;
  background: var(--green-deep);
  color: rgba(255, 255, 255, .82);
  padding-top: 30px;
  padding-bottom: 34px;
}

/* Responsive προσαρμογή του λογοτύπου και της κεφαλίδας σε tablet. */
@media (max-width: 760px) {
  .site-header {
    position: static;
  }

  .nav {
    align-items: stretch;
    gap: 10px;
    padding: 12px 0 14px;
  }

  .site-logo {
    height: 58px;
    max-width: min(390px, 88vw);
  }

  .nav-links {
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }

  .nav-links a {
    padding: 7px 9px;
    font-size: .84rem;
  }
}

/* Μικρότερο λογότυπο σε πολύ στενές οθόνες. */
@media (max-width: 540px) {
  .site-logo {
    height: 52px;
    max-width: 92vw;
  }
}