/* === Advanced Theme System (colors + fonts + layout) ===
Link after your base CSS so these overrides win:
  <link rel="stylesheet" href="themes_v2.css">
  <link rel="stylesheet" href="themes_pro.css">

Assumes your markup uses these hooks:
  .nav .nav-links
  .hero (with inner .col-text and .col-media)
  .features .grid .card
  .section (generic container)

You can rename selectors to match your site.
*/

/* Google Fonts imports (only valid families) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800;900&display=swap');

/* --- Shared layout tokens (can vary per theme) --- */
:root{
  --container-max: 1100px;
  --space: 16px;
  --heading-size: clamp(1.8rem, 3.2vw, 2.6rem);
  --hero-gap: 24px;
  --hero-cols: 1fr; /* default 1-col */
}

/* Apply tokens */
.container{max-width: var(--container-max); margin: 0 auto; padding: calc(var(--space) * 1.2);}
.hero{display: grid; grid-template-columns: var(--hero-cols); gap: var(--hero-gap); align-items: center;}
.hero .col-text{order: 1}
.hero .col-media{order: 2}
.features .grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--space) * 1);}
.section h1, .section h2, .hero h1{font-size: var(--heading-size); line-height: 1.15;}

/* --- Theme-specific fonts + layout variants --- */

/* Důvěryhodný: Inter, vyvážený dvousloupec */
body[data-theme="duveryhodny"]{
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto;
  --container-max: 980px;
  --space: 20px;
  --heading-size: clamp(1.9rem, 3.2vw, 2.7rem);
  --hero-gap: 20px;
  --hero-cols: 1fr;
}
body[data-theme="duveryhodny"] .nav .nav-links{justify-content: flex-end; gap: 14px;}
body[data-theme="duveryhodny"] .features .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}

/* Moderní: Satoshi, velký hero, dvousloupec, media vpravo */
body[data-theme="moderni"]{
  --font: "Satoshi", system-ui, -apple-system, Segoe UI, Roboto;
  --container-max: 980px;
  --space: 20px;
  --heading-size: clamp(2rem, 4vw, 3rem);
  --hero-gap: 20px;
  --hero-cols: 1fr;
}
body[data-theme="moderni"] .hero .col-text{order:1}
body[data-theme="moderni"] .hero .col-media{order:2}

/* Minimalistický: Neue Montreal, jednokolonové zarovnání na střed, větší whitespace */
body[data-theme="minimalisticky"]{
  --font: "Neue Montreal", system-ui, -apple-system, Segoe UI, Roboto;
  --container-max: 980px;
  --space: 20px;
  --heading-size: clamp(1.9rem, 3.4vw, 2.5rem);
  --hero-gap: 20px;
  --hero-cols: 1fr;
}
body[data-theme="minimalisticky"] .hero{text-align:center}
body[data-theme="minimalisticky"] .hero .col-media{order:1}
body[data-theme="minimalisticky"] .features .grid{grid-template-columns: repeat(2, minmax(0, 1fr));}

/* Luxusní: Canela, asymetrické rozložení, větší typografie */
body[data-theme="luxusni"]{
  --font: "Canela", Georgia, "Times New Roman", serif;
  --container-max: 980px;
  --space: 20px;
  --heading-size: clamp(2.2rem, 4.2vw, 3.2rem);
  --hero-gap: 20px;
  --hero-cols: 1fr;
}
body[data-theme="luxusni"] .hero .col-text{order:1}
body[data-theme="luxusni"] .hero .col-media{order:2}
body[data-theme="luxusni"] .features .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}

/* Technický: Eurostile Next, hustší mřížka, media vlevo */
body[data-theme="technicky"]{
  --font: "Eurostile Next", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --container-max: 980px;
  --space: 20px;
  --heading-size: clamp(1.8rem, 3.2vw, 2.6rem);
  --hero-gap: 20px;
  --hero-cols: 1fr;
}
body[data-theme="technicky"] .hero .col-text{order:1}
body[data-theme="technicky"] .hero .col-media{order:2}
body[data-theme="technicky"] .features .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}

/* Přátelský: Baloo 2, zaoblenější, jednokolona na střed, větší spacing */
body[data-theme="pratelsky"]{
  --font: "Baloo 2", system-ui, -apple-system, Segoe UI, Roboto;
  --container-max: 980px;
  --space: 20px;
  --heading-size: clamp(2rem, 4vw, 3rem);
  --hero-gap: 20px;
  --hero-cols: 1fr;
}
body[data-theme="pratelsky"] .hero{text-align:center}
body[data-theme="pratelsky"] .features .grid{grid-template-columns: repeat(2, minmax(0, 1fr));}

/* Hravý: Fredoka, média pod textem na mobilu, výrazné karty */
body[data-theme="hravy"]{
  --font: "Fredoka", system-ui, -apple-system, Segoe UI, Roboto;
  --container-max: 980px;
  --space: 20px;
  --heading-size: clamp(2rem, 4vw, 3rem);
  --hero-gap: 20px;
  --hero-cols: 1fr;
}
body[data-theme="hravy"] .features .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}

/* Tradiční: Merriweather, seriózní typografie, tři sloupce */
body[data-theme="tradicni"]{
  --font: "Merriweather", Georgia, "Times New Roman", serif;
  --container-max: 980px;
  --space: 20px;
  --heading-size: clamp(2rem, 3.5vw, 2.8rem);
  --hero-gap: 20px;
  --hero-cols: 1fr;
}
body[data-theme="tradicni"] .features .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}

/* Seriózní: Libre Baskerville, dvousloupec, konzervativní spacing */
body[data-theme="seriozni"]{
  --font: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --container-max: 980px;
  --space: 20px;
  --heading-size: clamp(1.9rem, 3.3vw, 2.7rem);
  --hero-gap: 20px;
  --hero-cols: 1fr;
}

/* Dynamický: Urbanist, širší kontejner, asymetrie */
body[data-theme="dynamicky"]{
  --font: "Urbanist", system-ui, -apple-system, Segoe UI, Roboto;
  --container-max: 980px;
  --space: 20px;
  --heading-size: clamp(2.1rem, 4.4vw, 3.2rem);
  --hero-gap: 20px;
  --hero-cols: 1fr;
}
body[data-theme="dynamicky"] .hero .col-text{order:1}
body[data-theme="dynamicky"] .hero .col-media{order:2}

/* --- Responsive safeguards --- */
@media (max-width: 900px){
  .hero{grid-template-columns: 1fr !important; text-align: center;}
  .hero .col-text{order:1}
  .hero .col-media{order:2}
  .features .grid{grid-template-columns: 1fr 1fr !important;}
}
@media (max-width: 620px){
  .features .grid{grid-template-columns: 1fr !important;}
}


/* Pill hardening */
.style-pills .pill{
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.02) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  padding: .45rem .75rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.style-pills .pill[aria-pressed="true"]{
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border-color: transparent !important;
  font-weight: 800 !important;
}