/*
Theme Name: Psí rezervace
Description: Rezervační web pro výcvik a výchovu psů.
Version: 1.16
Text Domain: psi-rezervace
*/

/* Fonts — Helvetica (system) for text; self-hosted Raleway only for the wordmark (SIL OFL, see assets/fonts/OFL-Raleway.txt) */
@font-face{ font-family:'Raleway'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(assets/fonts/raleway-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Raleway'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(assets/fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-017F,U+0218-021B,U+0304,U+0308,U+0329,U+1E9E,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113; }

:root{
  --primary:#16587B; --primary-dark:#0F3F59; --secondary:#84B3CE; --secondary-light:#B9D5E4;
  --bg:#F5EEDD; --text:#12303F; --muted:#45606F; --line:#D9DFD9; --white:#fff;
  --on-dark-muted:#B9D5E4; --header-h:72px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:var(--text);
  background:var(--bg); line-height:1.6; font-size:16px;
  min-height:100vh; display:flex; flex-direction:column;
}
body > main{ flex:1 0 auto; }
#main{ scroll-margin-top:var(--header-h); }
.site-header, .site-footer{ flex-shrink:0; }
h1,h2,h3,h4{ font-family:inherit; color:var(--primary); line-height:1.18; margin:0 0 .5em; font-weight:700; }
a{ color:var(--primary); }
img{ max-width:100%; height:auto; }
picture{ display:block; }
.container{ max-width:1140px; margin:0 auto; padding:0 22px; }

/* Focus */
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible{ outline-color:var(--secondary); }
.skip-link{ position:absolute; left:12px; top:-100px; z-index:300; background:var(--white); color:var(--primary-dark);
  padding:10px 16px; border-radius:8px; font-weight:600; text-decoration:none; }
.skip-link:focus{ top:12px; }

/* Cursor — blue paw instead of the arrow, Merino (--bg) paw instead of the hand (hotspot = tip of the top-left toe); body prefix outranks the plugin's cursor:pointer rules */
html{ cursor:url(assets/cursor-paw.svg) 5 6, url(assets/cursor-paw.png) 5 6, auto; }
body :is(a[href], button, [role="button"], label, select, summary, input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"], input[type="color"],
  .btn, .kb-btn, .kb-ev, .kb-span-bar, .kb-chip, .kb-mcell-has, .kb-more, .kb-day-row, .kb-lc-expandable, .kb-lc-more[role="button"]){
  cursor:url(assets/cursor-paw-pointer.svg) 5 6, url(assets/cursor-paw-pointer.png) 5 6, pointer; }
body :is(button:disabled, [aria-disabled="true"], .kb-modal-nav button[disabled]){ cursor:url(assets/cursor-paw.svg) 5 6, url(assets/cursor-paw.png) 5 6, auto; }
body :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="color"], [type="range"]), textarea){ cursor:text; }

/* Tennis balls (assets/ball.js) — fly position:fixed, rest in a pile at the bottom edge of the footer; can be grabbed and thrown.
   Only the inner svg rotates and the box clips it, so a resting ball never sticks out below the page and lengthens it. */
.psi-ball{ position:fixed; left:0; top:0; z-index:90; width:24px; height:24px; overflow:hidden; opacity:.9; touch-action:none; user-select:none; -webkit-user-select:none;
  filter:drop-shadow(0 1px 1.5px rgba(5,25,38,.3)); cursor:url(assets/cursor-paw-pointer.svg) 5 6, url(assets/cursor-paw-pointer.png) 5 6, grab; }
.psi-ball svg{ display:block; }
.psi-ball.is-piled{ position:absolute; top:auto; }

/* Header */
.site-header{ position:sticky; top:0; z-index:100; background:var(--primary); color:var(--bg); border-bottom:1px solid rgba(132,179,206,.28); }
.admin-bar .site-header{ top:32px; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }
.brand{ font-family:'Raleway',sans-serif; font-weight:800; font-size:26px; letter-spacing:.18em; color:var(--white); text-decoration:none; text-transform:uppercase; }
.brand{ display:inline-flex; align-items:center; }
.site-header .brand{ font-size:20px; letter-spacing:.14em; white-space:nowrap; }
.main-nav{ display:flex; align-items:center; gap:8px; }
.main-nav a{ color:var(--bg); text-decoration:none; font-weight:600; font-size:15px; padding:8px 14px; border-radius:6px; transition:background .15s; }
.main-nav a:hover{ background:rgba(132,179,206,.24); }
.main-nav a.btn{ background:var(--secondary); color:var(--primary-dark); min-height:0; }
.main-nav a.btn:hover{ background:var(--secondary-light); }
.nav-toggle{ display:none; width:44px; height:44px; margin-right:-10px; align-items:center; justify-content:center;
  background:none; border:0; border-radius:8px; color:var(--bg); cursor:pointer; padding:0; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{ display:block; width:22px; height:2px; border-radius:2px; background:currentColor; transition:transform .2s, background .2s; }
.nav-toggle-bars{ position:relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after{ content:''; position:absolute; left:0; }
.nav-toggle-bars::before{ top:-7px; }
.nav-toggle-bars::after{ top:7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{ transform:translateY(-7px) rotate(-45deg); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; background:var(--secondary); color:var(--primary-dark);
  padding:11px 26px; border-radius:8px; font-weight:700; line-height:1.25; text-decoration:none; border:2px solid var(--secondary);
  transition:transform .1s, background .15s, color .15s; cursor:pointer; }
.btn:hover{ transform:translateY(-2px); background:var(--secondary-light); border-color:var(--secondary-light); }
.btn-outline{ background:transparent; color:var(--bg); border-color:var(--secondary); }
.btn-outline:hover{ background:var(--secondary); color:var(--primary-dark); border-color:var(--secondary); }
.btn-dark{ background:var(--primary); color:var(--white); border-color:var(--primary); }
.btn-dark:hover{ background:var(--primary-dark); border-color:var(--primary-dark); }
.btn-line{ background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-line:hover{ background:var(--primary); color:var(--white); border-color:var(--primary); }

/* Hero — copy on the blue field, photo fills the right half edge to edge */
.hero{ position:relative; padding:0; background:var(--primary); color:var(--bg); overflow:hidden; }
.hero-text{ position:relative; z-index:1; padding-top:112px; padding-bottom:120px; }
.hero-copy{ max-width:calc(50% - 48px); }
.hero h1{ color:var(--white); font-size:clamp(34px,4.4vw,56px); line-height:1.1; max-width:15ch; margin-bottom:.45em; }
.hero p.lead{ font-size:19px; max-width:42ch; color:#DCE8EF; margin:0 0 32px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-photo{ position:absolute; top:0; right:0; bottom:0; width:50%; }
.hero-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 38%; }

/* Sections */
section{ padding:80px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.section-head h2{ font-size:clamp(28px,3.5vw,40px); margin-bottom:.3em; }
.section-head > p{ color:var(--muted); font-size:17px; margin:0; }
.bg-cream{ background:var(--bg); }

/* How it works — photo + the three steps */
.how-inner{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:72px; align-items:center; }
.how-photo img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:16px; }
.how h2{ font-size:clamp(28px,3.5vw,40px); margin-bottom:32px; }
.steps{ list-style:none; margin:0 0 36px; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:30px; }
.step{ position:relative; padding-left:72px; counter-increment:step; }
.step::before{ content:counter(step); position:absolute; left:0; top:-6px; width:48px; height:48px; border-radius:50%;
  background:var(--secondary); color:var(--primary-dark); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:20px; }
.step:not(:last-child)::after{ content:''; position:absolute; left:23px; top:50px; bottom:-26px; width:2px; border-radius:1px; background:rgba(22,88,123,.22); }
.step h3{ font-size:20px; margin-bottom:4px; }
.step p{ margin:0; color:var(--muted); max-width:46ch; }

/* About — text + portrait photo, mirrored to the "how" section below */
.about-inner{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:72px; align-items:center; }
.about-eyebrow{ margin:0 0 12px; font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); }
.about h2{ font-size:clamp(28px,3.5vw,40px); max-width:20ch; margin-bottom:28px; }
.about-text p:not(.about-eyebrow){ font-size:17px; max-width:62ch; margin:0 0 1em; }
.about-text p:last-child{ margin-bottom:0; }
.about-photo img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:16px; }

/* Calendar section (anchor target from the menu) */
#kalendar{ background:var(--primary); padding-bottom:16px; scroll-margin-top:calc(var(--header-h) - 40px); }
/* Paw-print trail where the calendar section meets the footer (both are the same blue) */
#kalendar::after{ content:''; display:block; height:60px; margin-top:64px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='232' height='60' viewBox='0 0 232 60'%3E%3Cg fill='%2384B3CE'%3E%3Cg transform='translate(58 17) rotate(76) scale(0.52) translate(-32 -34)'%3E%3Cellipse cx='17.5' cy='28' rx='5.2' ry='6.6' transform='rotate(-20 17.5 28)'/%3E%3Cellipse cx='26.5' cy='18.5' rx='5.4' ry='7' transform='rotate(-7 26.5 18.5)'/%3E%3Cellipse cx='37.5' cy='18.5' rx='5.4' ry='7' transform='rotate(7 37.5 18.5)'/%3E%3Cellipse cx='46.5' cy='28' rx='5.2' ry='6.6' transform='rotate(20 46.5 28)'/%3E%3Cpath d='M32 31.5c-6.6 0-13.2 7.6-13.2 13.6 0 4.3 3.3 6.6 7.1 6.6 2.6 0 4.2-1.4 6.1-1.4s3.5 1.4 6.1 1.4c3.8 0 7.1-2.3 7.1-6.6 0-6-6.6-13.6-13.2-13.6z'/%3E%3C/g%3E%3Cg transform='translate(174 43) rotate(104) scale(0.52) translate(-32 -34)'%3E%3Cellipse cx='17.5' cy='28' rx='5.2' ry='6.6' transform='rotate(-20 17.5 28)'/%3E%3Cellipse cx='26.5' cy='18.5' rx='5.4' ry='7' transform='rotate(-7 26.5 18.5)'/%3E%3Cellipse cx='37.5' cy='18.5' rx='5.4' ry='7' transform='rotate(7 37.5 18.5)'/%3E%3Cellipse cx='46.5' cy='28' rx='5.2' ry='6.6' transform='rotate(20 46.5 28)'/%3E%3Cpath d='M32 31.5c-6.6 0-13.2 7.6-13.2 13.6 0 4.3 3.3 6.6 7.1 6.6 2.6 0 4.2-1.4 6.1-1.4s3.5 1.4 6.1 1.4c3.8 0 7.1-2.3 7.1-6.6 0-6-6.6-13.6-13.2-13.6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / auto 60px space no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
#kalendar .section-head h2, #kalendar .section-head > p{ color:var(--bg); }
.admin-bar #kalendar{ scroll-margin-top:calc(var(--header-h) - 8px); }
.cal-wrap{ background:var(--bg); border:1px solid var(--bg); border-radius:16px; padding:26px; box-shadow:0 18px 50px rgba(5,25,38,.35); }
/* Calendar on Merino: white day columns, warm tints derived from --bg instead of the plugin's blue-grey ones.
   :where() keeps these at the plugin's own specificity, so its state rules (today, compact month) still win. */
:where(#kalendar) .kb-day, :where(#kalendar) .kb-mcell{ border-color:#E4DAC2; }
:where(#kalendar) .kb-day-head{ background:#EFE7D3; border-bottom-color:#E4DAC2; }
:where(#kalendar) .kb-ev{ background:#F8F3E7; }
:where(#kalendar) .kb-ev-cont{ background:#F3ECDC; }
:where(#kalendar) .kb-ev-full{ background:#EDE8DE; }
:where(#kalendar) .kb-ev-occ{ background:#EFE7D3; }
:where(#kalendar) .kb-mcell-out{ background:transparent; }
:where(#kalendar) .kb-cal-none{ background:var(--white); border-color:#C9BC9C; }
/* Individual lesson inquiry under the calendar — outlined band on the blue, form on Merino like the calendar */
#kalendar .kb-inquiry{ max-width:none; margin-top:40px; padding:26px 28px; border:1px solid rgba(132,179,206,.45); border-radius:16px; scroll-margin-top:calc(var(--header-h) + 16px); }
#kalendar .kb-inquiry-text h3{ color:var(--white); }
#kalendar .kb-inquiry-text p{ color:var(--bg); }
#kalendar .kb-inquiry-toggle{ min-height:48px; padding:11px 26px; border-radius:8px; font-size:16px; font-weight:700; background:var(--secondary); border:2px solid var(--secondary); color:var(--primary-dark); }
#kalendar .kb-inquiry-toggle:hover{ opacity:1; background:var(--secondary-light); border-color:var(--secondary-light); color:var(--primary-dark); }
#kalendar .kb-inquiry-toggle:focus-visible{ outline-color:var(--secondary); }
#kalendar .kb-inquiry-panel{ background:var(--bg); border-color:var(--bg); border-radius:16px; box-shadow:0 18px 50px rgba(5,25,38,.35); }
#kalendar .kb-inquiry-panel:has(> .kb-success-panel){ padding:0; background:none; border:0; box-shadow:none; }

/* Page content */
.page-wrap{ padding:56px 0 80px; }
.page-title{ margin-bottom:28px; font-size:clamp(28px,4vw,42px); }
.entry-content{ max-width:760px; margin:0 auto; }
.entry-content.entry-wide{ max-width:100%; }

/* Long-form text (legal pages, plain pages) */
.entry-prose{ max-width:70ch; }
.entry-prose h2{ font-size:clamp(21px,2.4vw,25px); margin:2em 0 .6em; }
.entry-prose h3{ font-size:19px; margin:1.6em 0 .5em; }
.entry-prose p, .entry-prose ul, .entry-prose ol{ margin:0 0 1em; }
.entry-prose ul, .entry-prose ol{ padding-left:1.5em; }
.entry-prose li{ margin-bottom:.45em; padding-left:.2em; }
.entry-prose li::marker{ color:var(--primary); font-weight:600; }
.entry-prose ol ol, .entry-prose ul ul, .entry-prose ol ul, .entry-prose ul ol{ margin:.45em 0 0; }
.entry-prose ol ol{ list-style:lower-alpha; }
.entry-prose a{ text-underline-offset:2px; }
.entry-prose mark, .entry-prose mark.kb-missing{ background:#FDEBD3; color:#A04C00; padding:0 .3em; border-radius:4px; }
.entry-prose .kb-seller{ background:var(--white); border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:10px; padding:18px 22px; margin:0 0 1.6em; }
/* Review markers on legal pages: client's draft vs. our additions (removed before launch) */
.op-legenda{ background:var(--white); border:1px dashed var(--primary); border-radius:10px; padding:14px 18px; margin:0 0 2em; font-size:15px; }
.op-legenda p{ margin:0; }
ins.op-doplneno, ins.op-opraveno{ text-decoration:none; padding:0 .2em; border-radius:3px; }
.op-doplneno{ background:#DCEBF4; }
p.op-doplneno, li.op-doplneno{ padding:.35em .6em; border-radius:6px; box-shadow:inset 3px 0 0 var(--primary); }
.op-opraveno{ background:#FFF0B3; }
.entry-prose .kb-seller p{ margin:0 0 .3em; }
.entry-prose .kb-seller p:last-child{ margin-bottom:0; }
.entry-prose table{ width:100%; border-collapse:collapse; margin:0 0 1.2em; font-size:15px; }
.entry-prose th, .entry-prose td{ text-align:left; vertical-align:top; padding:8px 12px 8px 0; border-bottom:1px solid var(--line); }

/* 404 */
.error-404 .entry-content{ max-width:560px; text-align:center; padding:24px 0 8px; }
.error-404 .paw{ display:block; width:56px; height:56px; margin:0 auto 20px; color:var(--secondary); }
.error-404 .page-title{ margin-bottom:14px; }
.error-404 p{ color:var(--muted); font-size:17px; margin:0 0 28px; }
.error-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Footer */
.site-footer{ position:relative; background:var(--primary); color:var(--bg); padding:56px 0 28px; margin-top:72px; font-size:15px; }
.home .site-footer{ margin-top:0; }
.footer-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,.9fr); gap:40px; }
.site-footer .brand{ font-size:20px; letter-spacing:.14em; }
.footer-tagline{ color:var(--on-dark-muted); margin:10px 0 0; max-width:30ch; }
.footer-social{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:4px 0; color:var(--bg); text-decoration:none; }
.footer-social svg{ width:22px; height:22px; flex-shrink:0; }
.footer-social:hover span{ text-decoration:underline; text-underline-offset:3px; }
.footer-heading{ font-size:16px; font-weight:700; color:var(--white); margin:0 0 10px; }
.seller p{ margin:0 0 3px; }
.seller-name{ font-weight:600; color:var(--bg); }
.seller a{ color:var(--bg); }
.seller-note{ font-size:13px; line-height:1.5; color:var(--on-dark-muted); max-width:44ch; margin-top:10px !important; }
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links a{ display:inline-block; padding:4px 0; color:var(--bg); text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; text-underline-offset:3px; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 24px; margin-top:40px; padding-top:20px;
  border-top:1px solid rgba(132,179,206,.25); font-size:13px; color:var(--on-dark-muted); }
.footer-bottom p{ margin:0; }
.footer-bottom a{ color:var(--bg); }

@media (max-width:899px){
  .hero{ display:flex; flex-direction:column; }
  .hero-photo{ position:relative; order:-1; width:100%; aspect-ratio:4/3; max-height:440px; }
  .hero-photo img{ object-position:50% 30%; }
  .hero-text{ width:100%; padding-top:36px; padding-bottom:52px; }
  .hero-copy{ max-width:none; }
  .how-inner{ grid-template-columns:1fr; gap:36px; }
  .how-photo img{ aspect-ratio:4/3; max-height:420px; object-position:50% 28%; }
  .about-inner{ grid-template-columns:1fr; gap:36px; }
  .about-photo{ order:-1; }
  .about-photo img{ aspect-ratio:4/3; max-height:420px; object-position:50% 62%; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:860px){
  .main-nav{ position:absolute; top:var(--header-h); left:0; right:0; background:var(--primary); flex-direction:column; align-items:stretch; padding:10px 22px 18px; gap:6px; display:none; }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:12px 14px; min-height:44px; }
  .main-nav a.btn{ min-height:48px; }
  .nav-toggle{ display:inline-flex; }
  .site-header .brand{ font-size:15px; letter-spacing:.1em; }
}
@media (max-width:782px){
  .admin-bar .site-header{ top:46px; }
  .admin-bar #kalendar{ scroll-margin-top:calc(var(--header-h) + 6px); }
}
@media (max-width:600px){
  .admin-bar .site-header{ top:0; }
  .admin-bar #kalendar{ scroll-margin-top:calc(var(--header-h) - 40px); }
}
@media (max-width:680px){
  section{ padding:56px 0; }
  .hero p.lead{ font-size:17px; }
  .hero-actions .btn{ flex:1 1 auto; }
  .cal-wrap{ padding:14px; border-radius:12px; }
  #kalendar .kb-inquiry{ margin-top:28px; padding:20px 16px; border-radius:12px; }
  #kalendar .kb-inquiry-toggle{ width:100%; }
  #kalendar::after{ height:44px; margin-top:44px; background-size:auto 44px; }
  #kalendar{ padding-bottom:12px; }
  .page-wrap{ padding:36px 0 56px; }
  .entry-prose .kb-seller{ padding:14px 16px; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .site-footer{ margin-top:56px; }
  .footer-bottom{ flex-direction:column; }
}