/*
Theme Name: Speleoklub UPJŠ
Theme URI: https://www.speleoupjs.sk/
Description: Šablóna pre web Speleoklubu UPJŠ. Ľavé stromové menu s rozbaľovacími položkami, generované z menu alebo z hierarchie stránok.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: speleoupjs
License: GPL-2.0-or-later
*/

:root{
  --bg:#F6F7F5; --surface:#FFFFFF; --side:#ECEFEB; --ink:#1F2522; --muted:#5C6660;
  --rule:#D3D9D3; --accent:#2D6A68; --accent-soft:#DCEBE9; --photo:#2A302D;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sidebar-w:300px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root.speleo-auto-dark{
    --bg:#151917; --surface:#1C211F; --side:#191E1C; --ink:#E4E8E5; --muted:#9AA59F;
    --rule:#2E3632; --accent:#7FC2BE; --accent-soft:#22403E; --photo:#0E1110;
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans)}
a{color:var(--accent)}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;width:auto;height:auto;clip:auto;background:var(--surface);color:var(--ink);padding:8px 12px;border:1px solid var(--rule)}

/* ---------- Header ---------- */
.site-header{background:var(--surface);border-bottom:1px solid var(--rule);position:relative;overflow:hidden;padding-top:env(safe-area-inset-top,0px)}
.site-header__inner{max-width:1240px;margin:0 auto;padding:28px 24px 24px;display:flex;align-items:flex-end;gap:24px;position:relative}
.site-branding,.menu-toggle{position:relative;z-index:1}
.site-branding{display:flex;align-items:center;gap:16px}
.custom-logo{max-height:64px;width:auto}
.site-title{margin:0;font:600 clamp(1.7rem,3.2vw,2.4rem)/1.1 var(--serif);letter-spacing:-.01em}
.site-title a{color:var(--ink);text-decoration:none}
.site-tagline{margin:6px 0 0;color:var(--muted);font-size:.98rem}
.survey{position:absolute;right:24px;top:0;height:100%;width:min(560px,60%);color:var(--accent);opacity:.55;pointer-events:none}
.menu-toggle{display:none;margin-left:auto;font:600 .95rem var(--sans);background:var(--accent);color:var(--surface);border:0;border-radius:4px;padding:9px 14px;cursor:pointer}

/* ---------- Layout ---------- */
.layout{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
.sidebar{background:var(--side);border-right:1px solid var(--rule);padding:20px 14px 40px;min-height:calc(100vh - 110px)}
.sidebar__sticky{position:static}
.content{background:var(--surface);padding:40px clamp(20px,5vw,64px) 64px;min-width:0}

/* ---------- Search ---------- */
.search-form{display:flex;margin:0 6px 18px}
.search-form input[type=search]{flex:1;min-width:0;font:inherit;font-size:.95rem;padding:8px 10px;border:1px solid var(--rule);border-right:0;border-radius:4px 0 0 4px;background:var(--surface);color:var(--ink)}
.search-form button{font:600 .9rem var(--sans);padding:0 12px;border:1px solid var(--accent);background:var(--accent);color:var(--surface);border-radius:0 4px 4px 0;cursor:pointer}
.content .search-form{margin:0 0 28px;max-width:480px}

/* ---------- Tree menu ---------- */
.tree-tools{display:flex;justify-content:space-between;align-items:baseline;margin:0 6px 8px;font-size:.85rem;color:var(--muted)}
.tree-tools button{font:inherit;background:none;border:0;color:var(--accent);cursor:pointer;padding:2px 0}
.no-js .tree-tools button{display:none}
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree ul{margin-left:15px;padding-left:10px;border-left:1px solid var(--rule)}
.tree li{margin:0}
.tree .row{display:flex;align-items:stretch;border-radius:4px}
.tree .row:hover{background:color-mix(in srgb,var(--accent-soft) 60%,transparent)}
.tree a{flex:1;display:block;padding:6px 8px;color:var(--ink);text-decoration:none;font-size:.97rem;line-height:1.35}
.tree .toggle{flex:none;width:28px;display:grid;place-items:center;background:none;border:0;color:var(--muted);cursor:pointer;border-radius:4px;padding:0}
.tree .toggle svg{width:12px;height:12px;transition:transform .18s ease}
.tree .toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.tree .spacer{flex:none;width:28px}
.tree .sub{display:none}
.tree .sub.is-open,.no-js .tree .sub{display:block}
.no-js .tree .toggle{visibility:hidden}
.tree .is-current>.row{background:var(--accent-soft)}
.tree .is-current>.row>a{font-weight:600;color:var(--accent)}
.tree .is-ancestor>.row>a{font-weight:600}

/* ---------- Content ---------- */
.breadcrumbs{font-size:.88rem;color:var(--muted);margin:0 0 14px}
.breadcrumbs a{color:var(--muted)}
.entry-title{font:600 clamp(1.9rem,3.6vw,2.6rem)/1.15 var(--serif);margin:0 0 22px;letter-spacing:-.01em}
.entry-title a{color:inherit;text-decoration:none}
.entry-meta{font-size:.9rem;color:var(--muted);margin:-12px 0 20px}
.entry-content{max-width:68ch;font:400 1.08rem/1.7 var(--serif)}
.entry-content>*{max-width:100%}
.entry-content p{margin:0 0 1.1em}
.entry-content h2,.entry-content h3,.entry-content h4{font-family:var(--serif);font-weight:600;line-height:1.25;margin:1.6em 0 .5em}
.entry-content h2{font-size:1.5rem}.entry-content h3{font-size:1.25rem}.entry-content h4{font-size:1.08rem}
.entry-content blockquote{margin:1.4em 0;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--accent);color:var(--muted)}
.entry-content figure{margin:1.6em 0}
.entry-content figcaption,.wp-caption-text,.wp-element-caption{font:italic 400 .95rem/1.5 var(--serif);color:var(--muted);margin-top:8px}
.entry-content table{border-collapse:collapse;width:100%;font:400 .95rem/1.45 var(--sans);margin:1.4em 0;display:block;overflow-x:auto}
.entry-content th,.entry-content td{border:1px solid var(--rule);padding:8px 10px;text-align:left;vertical-align:top}
.entry-content th{background:var(--side);font-weight:600}
.entry-content hr{border:0;border-top:1px solid var(--rule);margin:2em 0}
.entry-content .wp-block-image img,.entry-content img{border-radius:3px}
.alignleft{float:left;margin:.3em 1.4em 1em 0}
.alignright{float:right;margin:.3em 0 1em 1.4em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.entry-content::after{content:"";display:table;clear:both}
.entry-content .alignwide,.entry-content .alignfull{max-width:none;width:min(900px,100%)}
.featured{margin:32px 0 0;max-width:900px}
.featured img{display:block;width:100%;border-radius:3px;background:var(--photo)}
.featured figcaption{font:italic 400 .95rem/1.5 var(--serif);color:var(--muted);margin-top:10px}
.featured--top{margin:0 0 28px}
.child-pages{margin:44px 0 0;max-width:68ch;border-top:1px solid var(--rule);padding-top:20px}
.child-pages h2{font:600 1.15rem var(--sans);margin:0 0 10px}
.child-pages ul{margin:0;padding-left:1.1em;columns:2;column-gap:32px}
.child-pages li{break-inside:avoid;margin:0 0 4px}
.child-pages ul ul{columns:1;margin:4px 0 6px;padding-left:1.1em;border:0}
.post-list{list-style:none;margin:0;padding:0;max-width:68ch}
.post-list article{padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid var(--rule)}
.post-list .entry-title{font-size:1.45rem;margin:0 0 8px}
.post-list .entry-meta{margin:0 0 10px}
.pagination,.post-navigation{margin-top:32px;font-size:.95rem}
.pagination .nav-links,.post-navigation .nav-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.pagination .current{font-weight:600}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--rule);background:var(--surface);padding-bottom:env(safe-area-inset-bottom,0px)}
.site-footer__inner{max-width:1240px;margin:0 auto;padding:22px 24px;display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;font-size:.92rem;color:var(--muted)}
.site-footer p{margin:0}

/* ---------- Mobile ---------- */
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .menu-toggle{display:inline-block}
  .js .sidebar{display:none}
  .sidebar{min-height:0;border-right:0;border-bottom:1px solid var(--rule)}
  .js .sidebar.is-open{display:block}
  .survey{width:90%;opacity:.3}
  .child-pages ul{columns:1}
  .alignleft,.alignright{float:none;margin:1em 0}
}
@media (prefers-reduced-motion:reduce){.tree .toggle svg{transition:none}}
