/* Page-specific: Vaatamateenuut - use larger text and center */
.vaatamateenuut-page {
  font-size: 1.13rem;
  line-height: 1.6;
  text-align: center;
}
.vaatamateenuut-page h2 {
  font-size: 2.1rem;
  margin-bottom: 1.2rem;
}
.vaatamateenuut-page .archive-links {
  margin-top: 1.5rem;
}
.vaatamateenuut-page .archive-links a {
  color: #2056a8;
  text-decoration: underline;
  font-weight: 500;
  transition: color .2s;
}
.vaatamateenuut-page .archive-links a:hover {
  color: #174080;
}
/* Larger text for toeta page */
.toeta-page {
  font-size: 1.18rem;
  line-height: 1.65;
}
.toeta-page h1 {
  font-size: 2.2rem;
  margin-bottom: 1.2rem;
}
:root {
  --header-h: 150px;
  --nav-h: 48px;
  --side-w: 210px; /* widened by 50px for audio container */
  --gap: 1.25rem;
  --panel: #fff9f1; /* lighter */
  --accent: #e7b400;
  --text: #22252a;
  --muted: #5d6670;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: #ffffff; /* changed from dark image to white */
  background-image: url('../images/suurtaust.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* fill outside containers */
  font-family: 'Roboto', Arial, sans-serif;
}
/* Reserve vertical scrollbar space to avoid horizontal layout shift */
html { overflow-y: auto; scrollbar-gutter: stable both-edges; }
@supports not (scrollbar-gutter: stable both-edges) {
  html { overflow-y: scroll; }
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header {
  background: #ffffff;
  border-bottom: none; /* removed border between header and nav */
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem 0.5rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.18);
}
/* Centering wrapper matching layout width */
.container { width: 100%; max-width: 1500px; margin: 0 auto; }
/* Header panel styling consistent with other containers */
.header-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 .25rem;
}
header .logo-strip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2.5rem;
  width: 100%;
  max-width: 1600px;
  flex-wrap: wrap;
  padding: 0 0 .75rem;
}
header .logo-strip img {
  width: 500px;
  height: auto;
  max-width: 100%;
  border: none;
  box-shadow: none;
  filter: none; /* removed previous drop-shadow */
  display: block;
  margin: 0;
}
@media (max-width: 1100px) { header .logo-strip img { width: 380px; } }
@media (max-width: 820px) { header .logo-strip img { width: 300px; } }
@media (max-width: 640px) {
  header .logo-strip { gap: 1.25rem; }
  header .logo-strip img { width: 210px; }
}

/* Adjust individual header logo sizes: first bigger, second smaller */
header .logo-strip img[alt="Pereraadio logo"] { width: 540px; }
/* Pildiraadio (pld.png) slightly smaller and spaced via anchor */
header .logo-strip a.pld-logo { margin-left: 3rem; margin-top: 30px; display: inline-flex; }
header .logo-strip img[alt="Pereraadio kohalik jaam"] { width: 390px; }
@media (max-width:1100px){
  header .logo-strip img[alt="Pereraadio logo"] { width: 410px; }
  header .logo-strip a.pld-logo { margin-left: 2rem; }
  header .logo-strip img[alt="Pereraadio kohalik jaam"] { width: 300px; }
}
@media (max-width:820px){
  header .logo-strip img[alt="Pereraadio logo"] { width: 320px; }
  header .logo-strip a.pld-logo { margin-left: 1.25rem; }
  header .logo-strip img[alt="Pereraadio kohalik jaam"] { width: 235px; }
}
@media (max-width:640px){
  header .logo-strip img[alt="Pereraadio logo"] { width: 225px; }
  header .logo-strip a.pld-logo { margin-left: .75rem; }
  header .logo-strip img[alt="Pereraadio kohalik jaam"] { width: 170px; }
}

nav.link-tree {
  background: transparent;
  border-bottom: none;
  position: static; /* inside header panel */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0 .15rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
nav.link-tree a {
  background: #ffedd3;
  color: #1a1a1a;
  white-space: nowrap;
  padding: .55rem 1rem;
  border-radius: 10px;
  font-size: .85rem;
  transition: background .2s,color .2s;
  font-weight: 400;
}
nav.link-tree a.active,
nav.link-tree a:hover {
  background: var(--accent);
  color: #2a1f00;
  text-decoration: none;
}

/* Make main link-tree hover more orange (override the yellow accent) */
nav.link-tree a:hover {
  background: #eb984e;
  color: #2a1f00;
  text-decoration: none;
}

/* Match the active state to the orange hover */
nav.link-tree a.active {
  background: #eb984e;
  color: #2a1f00;
  text-decoration: none;
}

/* === Mobile Menu (hamburger) === */
.mobile-menu-toggle {
  display: none; /* shown on mobile */
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border-radius: 8px; /* rectangular with slight rounding */
  border: 1px solid #f1cfa2;
  background: #ffedd3;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.mobile-menu-toggle .burger {
  position: relative;
  width: 22px; height: 2px; background: #2a1f00; display: inline-block;
}
.mobile-menu-toggle .burger::before,
.mobile-menu-toggle .burger::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #2a1f00;
}
.mobile-menu-toggle .burger::before { top: -6px; }
.mobile-menu-toggle .burger::after { top: 6px; }

/* Dropdown panel attached to header on mobile */
header .mobile-menu {
  display: none;
  position: fixed; /* pin to viewport so it can scroll independently */
  /* JS will set top to the live header height; fallback uses variable */
  top: var(--header-h);
  left: 0; right: 0;
  bottom: 0; /* fill to bottom to avoid clipping */
  background: #fffdf8;
  border: none;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.25);
  z-index: 1200;
  padding: .5rem .75rem .75rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Ensure last item isn't hidden behind mobile browser bars */
  padding-bottom: .9rem;
  padding-bottom: calc(.9rem + env(safe-area-inset-bottom));
}
header .mobile-menu.open { display: block; }
header .mobile-menu .menu-inner { display: flex; flex-direction: column; gap: .5rem; max-width: 1500px; margin: 0 auto; }
header .mobile-menu a {
  display: block;
  padding: .75rem 1rem;
  background: #ffedd3;
  color: #1a1a1a;
  border-radius: 10px;
  font-weight: 400;
  text-decoration: none;
}
header .mobile-menu a:hover,
header .mobile-menu a.active { background: #eb984e; color: #2a1f00; text-decoration: none; }

/* Show hamburger and hide desktop nav on mobile/tablets */
@media (max-width: 1024px) {
  nav.link-tree { display: none; }
  .mobile-menu-toggle { display: inline-flex; font-size: 1.1rem; padding: .7rem 1.1rem; border-radius: 10px; }
  .mobile-menu-toggle .burger,
  .mobile-menu-toggle .burger::before,
  .mobile-menu-toggle .burger::after { width: 26px; height: 3px; }
  .mobile-menu-toggle .burger::before { top: -7px; }
  .mobile-menu-toggle .burger::after { top: 7px; }
  header .mobile-menu a { font-size: 1.05rem; padding: .9rem 1.15rem; min-height: 44px; }
}

/* Main nav stays centered globally */

/* OVERRIDES */
/* Bigger navigation font */
nav.link-tree a { font-size: 1rem; }

/* Removed third (Tartu) logo */

.layout {
  display: grid;
  grid-template-columns: var(--side-w) 1fr var(--side-w);
  align-items: start;
  gap: var(--gap);
  width: 100%;
  max-width: 1500px; /* reduced by 100px to make main column narrower */
  margin: 0 auto;
  padding: 0.75rem var(--gap) 2.5rem;
  flex: 1;
}
aside {
  position: relative; /* don't make the grid item itself sticky */
  align-self: stretch; /* stretch to full row height so sticky works */
}
.sticky-box {
  background: var(--panel);
  border: none;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.18);
  position: sticky; /* inner box is sticky (most reliable) */
  top: calc(var(--header-h) + var(--nav-h) + var(--gap));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  z-index: 2; /* ensure visible above main panel */
  width: 100%; /* fill sidebar column width on all pages */
}
.sticky-box h2 {
  margin: 0 0 .5rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--accent);
}
/* Remove spacing when the heading is empty (sponsor box) */
.sticky-box h2:empty { margin: 0; display: none; }
/* Audio header adjustments */
.audio-player.sticky-box { gap: 0; }
.audio-player.sticky-box h2 { color: #000; margin-bottom: 0; }
.audio-player audio { width: 100%; height: 42px; background:#faf3e6; }

.sponsors-grid { display: grid; gap: 1rem; }
.sponsor { aspect-ratio: 3/1; background: #ffe3be; border: none; color: #5a6066; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .7rem; letter-spacing: .5px; font-weight: 500; }
.sponsors-grid img { width: 80%; display: block; margin: 0 auto; border-radius: 10px; background: #ffffff; padding: .5rem; border: none; }
/* Make sponsor container itself smaller on larger screens */
@media (min-width: 881px) {
  aside.right .sticky-box {
    width: 180px;
    margin-left: 0;
    margin-right: auto;
    padding: .75rem;
    gap: .75rem;
  }
}
/* Slightly reduce padding on sponsor container (right sidebar) */
aside.right .sticky-box { padding: .5rem; }
/* Make the top padding a bit smaller than the sides */
aside.right .sticky-box { padding-top: .35rem; }
/* Hide the 'Saage sponsoriks' CTA under sponsors */
.sticky-box > a[href="#"] { display: none !important; }

main {
  background: #fffdf8; /* even lighter */
  border: none;
  box-shadow: 0 8px 28px -10px rgba(0,0,0,.25);
  min-height: 60vh;
  border-radius: 16px;
  padding: 2rem clamp(1rem,2.5vw,2.5rem) 3.5rem;
  position: relative;
  overflow: hidden;
  /* Full width to match navigation (remove fixed max-width) */
  max-width: none;
  width: 100%;
}
/* Smaller padding for Vaba Rahva Laul page */
.vrlaul-page {
  padding: 1rem clamp(.5rem,1.75vw,1.25rem) 1.75rem !important;
}
main h2 { margin-top: 0; font-size: 1.9rem; letter-spacing:.5px; font-weight: 600; }
.lead { font-size: 1rem; max-width: 70ch; line-height: 1.55; color: #4f545a; font-weight: 400; text-align: center; margin-left: auto; margin-right: auto; }

/* Small page header on gallery page */
.page-header { margin: 0 0 1rem; text-align: center; }
.page-header h3 { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: .3px; color: #5a4b24; }
.page-header .subtitle { margin: .08rem 0 0; font-size: .95rem; color: #705727; }

/* Bring .lead.subtitle closer to header on gallery page */
.gallery-page .lead.subtitle { margin-top: 0.2rem; margin-bottom: 0.7rem; }

/* === Broadcast cards grid === */
.broadcast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
  max-width: 1000px;
  margin: 0 auto;
  align-items: start; /* avoid vertical stretching that adds empty space */
}
.broadcast-grid > a { text-decoration: none; color: inherit; width: 100%; display:block; }
.broadcast-card {
  margin: 0;
  background: #fff;
  border: none;
  padding: .6rem .6rem .3rem; /* smaller bottom padding */
  border-radius: 12px;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* allow natural height = image + caption only */
}
.broadcast-card img {
  width: 100%;
  aspect-ratio: 16 / 9; /* consistent media window */
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}
.broadcast-card figcaption {
  font-size: .95rem;
  color: #705727;
  margin-top: .6rem;
  font-weight: 600;
  letter-spacing: .2px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  display: -webkit-box; /* clamp long titles without reserving space */
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

footer {
  background: #ffffff; /* set to white */
  border-top: none; /* removed footer border */
  color: #4d555d;
  margin-top: auto;
  padding: 1.25rem 1.5rem 2.5rem;
  font-size: .75rem;
  text-align: center;
  font-weight: 400;
}
footer a { color: var(--accent); font-weight: 500; }
footer .footer-email { display:inline-flex; align-items:center; gap:.4rem; margin-top:.25rem; }
footer .footer-email:hover { text-decoration: underline; }

article { background: #fff4e4 !important; border: none !important; font-family: 'Roboto', Arial, sans-serif; }
#playPauseBtn { background: var(--accent); color:#2b2100; font-family:'Roboto',sans-serif; font-weight:600; }

@media (max-width: 1180px) {
  .layout { grid-template-columns: minmax(0,1fr) var(--side-w); }
  aside.left { order: -1; grid-column: 1 / -1; }
  .sticky-box { top: calc(var(--header-h) + var(--nav-h) + .75rem); }
}
/* Stack content in a single column on tablets/large phones */
@media (max-width: 1024px) {
  .layout { grid-template-columns: 1fr; }
  aside { grid-column: 1; }
  /* Keep left (audio) above, main in middle, sponsor below */
  aside.left { order: -1; }
  main { order: 0; }
  aside.right { order: 1; }
  .sticky-box { position: sticky; top: calc(var(--header-h) + var(--nav-h)); }
}
@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; }
  aside { grid-column: 1; }
  /* Keep sticky behavior on small screens too */
  .sticky-box { position: sticky; top: calc(var(--header-h) + var(--nav-h)); }
}

::selection { background: var(--accent); color: #1d1400; }
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 1) Smaller (3x) ekmlogo + center */
.sponsors-grid img[src*="ekmlogo"] {
  width: 19.5%;
  max-width: 135px;
  min-width: 90px;
  margin: 0 auto;
  display: block;
  padding: .5rem;
}

/* 2) Slightly bigger nav buttons */
nav.link-tree a { font-size: 1.1rem; padding: .65rem 1.15rem; }

/* 3) Bigger footer text */
footer { font-size: .95rem; line-height: 1.4; }

/* === Custom Stream Players === */
.players-wrapper address { font-style: normal; display:block; margin:.1rem 0 .4rem; font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; font-weight:600; }
.player { margin: 0 0 .85rem; }
.custom-player { display:flex; align-items:center; gap:.55rem; background:#ffedd3; border:none; padding:.5rem .65rem; border-radius:14px; position:relative; box-shadow:0 2px 4px -2px rgba(0,0,0,.18); }
.custom-player audio { display:none; }
/* New pill style adapted from reference (condensed width) */
.custom-player { background:#fff5eb; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.15); border-radius:44px; padding:6px 8px; gap:6px; justify-content:center; margin:0 auto; position: relative; overflow: visible; }
.play-btn { background:#e67e22; color:#fff; border:none; border-radius:50%; width:56px; height:56px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 6px rgba(0,0,0,0.22); transition:background .3s,color .3s, box-shadow .3s, transform .2s; }
.play-btn:hover { background:#fff; color:#e67e22; box-shadow:0 4px 8px rgba(0,0,0,0.25); transform:translateY(-1px); }
.volume-btn { background:#fff; color:#e67e22; border:1px solid #e67e22; border-radius:50%; width:42px; height:42px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .3s, color .3s; }
.volume-btn:hover { background:#e67e22; color:#fff; }
.play-btn svg { width:38px; height:38px; }
.volume-btn svg { width:22px; height:22px; }
.volume-btn[data-muted="true"] { background:#e67e22; color:#fff; }
.volume-slider { -webkit-appearance:none; appearance:none; width:clamp(140px, 50vw, 220px); height:6px; background:#f5cba7; border-radius:5px; outline:none; cursor:pointer; display:none; position:absolute; left:50%; transform:translateX(-50%); bottom:-16px; box-shadow:0 6px 14px rgba(0,0,0,.15); z-index: 5; }
.custom-player .volume-slider::before { content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%); border:6px solid transparent; border-bottom-color:#f5cba7; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:#e67e22; border:none; cursor:pointer; }
.volume-slider::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#e67e22; border:none; cursor:pointer; }
.current-show { font-size:.75rem; margin:.25rem 0 .75rem; color:#735b23; letter-spacing:.5px; text-transform:uppercase; font-weight:600; }
.current-show .label { font-size: .8em; opacity: .9; }
.current-show .show-title { display: inline-block; font-size: 1.15rem; text-transform:none; font-weight: 700; letter-spacing: .2px; color:#5a4b24; margin-top:.1rem; }
.current-show .show-extra { margin-left:.35rem; font-size:.85rem; color:#7a632e; font-weight:500; text-transform:none; }
.players-wrapper { display:flex; flex-direction:column; }
@media (max-width:880px){ .custom-player { border-radius:12px; } }

/* Audio container: force other text to black (except .current-show which has its own color) */
.audio-player { color: #000; }
.audio-player a { color: #000; }
.audio-player a:hover { color: #000; text-decoration: underline; }

/* Hide native seek / timeline for any fallback <audio controls> elements except on pages that allow seek */
body:not(.allows-seek) audio::-webkit-media-controls-timeline,
body:not(.allows-seek) audio::-webkit-media-controls-current-time-display,
body:not(.allows-seek) audio::-webkit-media-controls-time-remaining-display { display:none !important; }
/* Firefox (cannot fully hide timeline, but we can visually shrink) */
@-moz-document url-prefix() {
  body:not(.allows-seek) audio[controls] { height:34px; }
  body:not(.allows-seek) audio[controls]::-moz-range-track { background:transparent; }
}

  /* Generic centered width-constrained wrapper that can be placed inside <main> */
  .main-container {
  max-width: 1100px; /* reduced by 100px to align with narrower main */
    margin: 0 auto;
    padding: 20px;
  }

  /* === Global center alignment per request === */
  main { text-align: center; }
  main h1, main h2, main h3, main h4, main p, main ul, main li, main figure, main table, main address { text-align: center; }
  main ul { list-style-position: inside; padding-left: 0; margin-left: 0; }
  main table { margin-left: auto; margin-right: auto; }

  /* Restore left alignment specifically for saatekava page */
  .saatekava-page { text-align:left; }
  .saatekava-page h1,
  .saatekava-page h2,
  .saatekava-page h3,
  .saatekava-page h4,
  .saatekava-page p,
  .saatekava-page ul,
  .saatekava-page li,
  .saatekava-page table,
  .saatekava-page section { text-align:left; }
  /* Keep lead text centered even on Saatekava */
  .saatekava-page .lead { text-align: center; }
  .saatekava-page ul { list-style-position: outside; padding-left:1.15rem; }
  .saatekava-page table { margin-left:0; margin-right:0; font-size:1rem !important; }
  .saatekava-page th,
  .saatekava-page td { font-size:1rem !important; }

/* Episode list styling */
.episode-list article { background:#fff; border:none; border-radius:12px; padding:1rem; box-shadow:0 4px 14px -6px rgba(0,0,0,.12); text-align:left; }
.episode-list h4 { margin:.25rem 0 .5rem; font-size:1rem; color:#5a4b24; }
.episode-list audio { width:100%; height: 36px; }

/* Lightbox styles */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.95); display: none; align-items: center; justify-content: center; z-index: 2000; padding: 2rem; }
.lightbox-overlay.open { display: flex; }
.lightbox-figure { margin:0; max-width: 1200px; width: 95vw; display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.lightbox-img { width: 100%; max-width: 1200px; max-height: 85vh; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.lightbox-cap {
  color: #fff;
  font-size: 1.1rem;
  text-align: center;
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  max-width: 1200px;
  width: 95vw;
  box-sizing: border-box;
  max-height: 15vh;
  overflow-y: auto;
}
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; width: 44px; height: 44px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size: 24px; line-height: 1; backdrop-filter: blur(4px); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.24); }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* === Pildid page: slideshow + square thumbnail grid === */
.gallery-page { text-align: left; }
.slideshow { position: relative; background:#fff; border:none; border-radius:14px; padding: .75rem; display:flex; align-items:center; gap:.5rem; box-shadow:0 6px 18px -8px rgba(0,0,0,.18); }
.slideshow figure { margin:0; width:100%; display:flex; flex-direction:column; align-items:center; }
.slideshow img { width:100%; max-height: 62vh; object-fit: contain; border-radius:10px; background:#faf7f1; }
.slideshow figcaption { margin-top:.4rem; font-size:.9rem; color:#5a4b24; }
.slideshow .nav { position:relative; z-index:1; width:42px; height:42px; border-radius:50%; border:none; background:#fff2da; color:#5a4b24; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.slideshow .nav:hover { background:#ffe6b6; }

.thumb-grid { margin-top:1rem; display:grid; grid-template-columns: repeat(4, 1fr); gap:.75rem; }
.thumb { aspect-ratio: 1 / 1; position: relative; border:none; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 4px 12px -6px rgba(0,0,0,.12); }
.thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumb.active { outline:3px solid var(--accent); }

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

/* Day Navigation Styles */
.day-navigation {
  margin-bottom: 2rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.day-link {
  background: #ffedd3;
  color: #1a1a1a;
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.8rem;
  transition: background .2s, color .2s;
  font-weight: 500;
  text-decoration: none;
  font-family: 'Roboto', Arial, sans-serif;
}

.day-link.active,
.day-link:hover {
  background: #eb984e;
  color: #2a1f00;
  text-decoration: none;
}

@media (max-width: 640px) {
  /* Larger, more readable text on phones */
  html { font-size: 20px; }

  /* Even larger tap targets on small phones */
  .mobile-menu-toggle { font-size: 1.2rem; padding: .8rem 1.2rem; }
  header .mobile-menu a { font-size: 1.1rem; padding: 1rem 1.2rem; min-height: 48px; }

  .day-navigation {
    gap: 0.4rem;
  }
  
  .day-link {
    padding: 0.5rem 0.9rem;
    font-size: 0.95rem;
  }
}

/* Day pages: center header + day nav; keep table text left */
.saatekava-page h2,
.saatekava-page h3 { text-align: center; }
.saatekava-page .day-navigation { justify-content: center; }
.saatekava-page .day-link { text-align: center; }
/* Ensure only table content stays left-aligned */
.saatekava-page table,
.saatekava-page thead th,
.saatekava-page tbody td { text-align: left !important; }

/* Uniform time column width across schedule tables */
.saatekava-page table thead th:first-child,
.saatekava-page table tbody td:first-child {
  width: 7ch; /* fits HH:MM consistently across days */
}

/* Archive links: keep anchors blue even via SPA loads */
.archive-links a:link,
.archive-links a:visited { color: #1a73e8; }
.archive-links a:hover,
.archive-links a:focus,
.archive-links a:active { color: #1558c0; }

/* Sarvehääl page: center archive links under image */
.archive-links {
  margin-top: 1rem;
  display: block;
  text-align: center;
}
.archive-links p { margin: .35rem 0; }
.archive-links a { font-weight: 600; text-decoration: none; }
.archive-links a:hover { text-decoration: underline; }

/* === Contact form sizing === */
.contact-form { max-width: 100%; }
.form-group-container { max-width: 1100px; margin: 0 auto; }
.contact-form .form-input,
.contact-form .form-textarea {
  width: 100%;
  max-width: 100%;
  display: block;
  padding: 1.05rem 1.2rem;
  font-size: 1.2rem;
  border: 1px solid #f1cfa2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  margin: .35rem 0 1rem;
  line-height: 1.5;
}
.contact-form .form-textarea { min-height: 300px; resize: vertical; }
.contact-form .form-submit {
  font-size: 1.2rem;
  padding: 1rem 1.35rem;
  border-radius: 10px;
}

/* Page-specific larger type for õnnesoov page */
.onnitlus-page { font-size: 1.1rem; }
.onnitlus-page h2 { font-size: 2.2rem; }
.onnitlus-page .form-label { font-size: 1.12em; }
.onnitlus-page .contact-description { font-size: 1.12em; }

/* Use a different font for the message textarea on this page */
.onnitlus-page #message,
.onnitlus-page .form-textarea {
  font-family: Georgia, "Times New Roman", Times, serif;
}

/* Match font in the name input field */
.onnitlus-page #name {
  font-family: Georgia, "Times New Roman", Times, serif;
}