/*
Theme Name: Za lepší Odolenu Vodu
Description: Jednoduchá prezentační WordPress šablona.
Version: 1.0.0
Text Domain: za-lepsi-odolenu-vodu
*/

:root {
    --navy: #112f49;
    --yellow: #ffc92f;
    --aqua: #47c3d7;
    --coral: #f45b70;
    --ink: #172430;
    --paper: #f6f3eb;
    --white: #ffffff;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Trebuchet MS", "Arial Narrow", sans-serif;
    font-size: 18px;
    line-height: 1.55;
}

a { color: inherit; }

.site-header, .site-footer { background: var(--navy); color: var(--white); }
.site-footer { border-top: 10px solid var(--yellow); }
.header-inner, .content-wrap, .site-footer-inner { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 80px; gap: 24px; }
.site-brand { display: flex; align-items: center; gap: 14px; }
.site-logo img { display: block; height: 52px; width: auto; border-radius: 50%; }
.site-title { color: var(--white); font-size: 1.25rem; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.primary-menu { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.primary-menu a { color: var(--white); font-weight: 700; text-decoration: none; }
.primary-menu a:hover, .primary-menu .current-menu-item a { color: var(--yellow); }

.hero { position: relative; display: grid; min-height: 670px; overflow: hidden; background: var(--navy); }
.hero-image, .hero-overlay { position: absolute; inset: 0; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-image--empty { background: linear-gradient(135deg, var(--navy) 0%, var(--navy) 63%, var(--yellow) 63%, var(--yellow) 100%); }
.hero-overlay { background: linear-gradient(90deg, rgba(17, 47, 73, .92) 0%, rgba(17, 47, 73, .67) 52%, rgba(17, 47, 73, .06) 100%); }
.hero-content { position: relative; z-index: 1; align-self: center; width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 80px 0; color: var(--white); }
.eyebrow, .section-label { display: inline-block; margin: 0 0 24px; padding: 8px 20px; border-radius: 4px; font-size: .9rem; font-weight: 900; text-transform: uppercase; }
.eyebrow { background: var(--yellow); color: var(--navy); }
.section-label { background: var(--coral); color: var(--white); }
.hero h1, .page-heading { max-width: 850px; margin: 0; font-size: clamp(2.9rem, 7vw, 6.6rem); font-weight: 900; line-height: .98; text-transform: uppercase; }
.hero-lead { max-width: 670px; margin: 28px 0 0; font-size: clamp(1.25rem, 2.4vw, 1.8rem); font-weight: 700; }
.hero-rule { width: 220px; height: 12px; margin-top: 34px; background: var(--aqua); }

.intro, .page-layout { padding: 88px 0; }
.intro-grid, .page-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .9fr); gap: 70px; align-items: start; }
.intro h2, .page-content h1, .page-content h2, .page-content h3, .contact-box h2 { color: var(--navy); font-weight: 900; line-height: 1.1; }
.intro h2, .page-content h1 { font-size: clamp(2rem, 4vw, 3.5rem); text-transform: uppercase; }
.contact-box { padding: 34px; border-top: 10px solid var(--yellow); background: var(--navy); color: var(--white); }
.contact-box h2 { margin-top: 0; color: var(--white); font-size: 1.7rem; text-transform: uppercase; }
.page-heading-band { padding: 70px 0; background: var(--navy); color: var(--white); }
.page-heading { color: var(--white); font-size: clamp(2.5rem, 5vw, 5rem); }
.site-footer-inner { padding: 28px 0; font-size: .9rem; }

@media (max-width: 720px) {
    body { font-size: 17px; }
    .header-inner { flex-direction: column; align-items: flex-start; padding: 20px 0; }
    .primary-menu { flex-wrap: wrap; gap: 10px 18px; }
    .hero { min-height: 560px; }
    .hero-overlay { background: rgba(17, 47, 73, .78); }
    .hero-content { padding: 60px 0; }
    .intro, .page-layout { padding: 54px 0; }
    .intro-grid, .page-layout { grid-template-columns: 1fr; gap: 36px; }
}