/*
Theme Name: Sostarševstvo
Theme URI: https://example.com
Author: Maša
Description: WordPress theme for the "Sostarševstvo" coaching site, built Twenty-Seventeen style: the homepage is assembled from the front page's own content plus existing Pages you pick as panels in the Customizer, and other pages (Contact, About, etc.) use plain, editable templates styled with the same brand palette.
Version: 1.7
Requires at least: 5.0
Requires PHP: 7.4
Text Domain: sostarsevstvo
*/

/* ----------------------------------------------------------------
   Brand palette / base typography, shared by every template EXCEPT
   the landing page itself (front-page.php / page-sostarsevstvo.php),
   which stays fully self-contained on purpose, matching the original
   single-file design and its own <head>.
   ---------------------------------------------------------------- */
:root{
  --paper:#F3EEE1; --paper-2:#E8DCC4; --ink:#2F2B23; --ink-soft:#6E6555;
  --pine:#34526E; --sage:#A08C4A; --sage-line:#D8C9A8; --sage-fill:#E1D4B7;
  --plum:#C67B5C; --plum-deep:#AD6446; --paper-on-dark:#F2E8D4;
  --maxw:1120px; --textw:660px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"EB Garamond",Georgia,serif;font-size:19px;line-height:1.66;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"DM Serif Display",Georgia,serif;font-weight:400;line-height:1.15;letter-spacing:-.005em;margin:0 0 .5em;color:var(--pine)}
p{margin:0 0 1.1em}
a{color:var(--plum)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

.site-header{background:var(--pine);color:var(--paper-on-dark);padding:22px 0}
.site-header a.brand{color:var(--paper-on-dark);text-decoration:none;font-family:"DM Serif Display",Georgia,serif;font-size:24px}

main.site-main{padding:60px 0 80px}
main.site-main .entry-content{max-width:var(--textw)}

.site-footer{background:var(--ink);color:#A9B6AC;font-size:14.5px;padding:34px 0;text-align:center}
.site-footer a{color:var(--paper-on-dark)}

.btn{display:inline-flex;align-items:center;gap:10px;background:var(--plum);color:#fff !important;text-decoration:none;font-weight:600;font-size:17px;padding:14px 26px;border-radius:2px;transition:background .2s ease,transform .2s ease;border:none;cursor:pointer}
.btn:hover{background:var(--plum-deep);transform:translateY(-2px)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin:0 0 18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--sage);opacity:.7}

/* ---- contact page ---- */
.contact-grid{display:grid;grid-template-columns:3fr 2fr;gap:60px;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:40px}}
.contact-form p{margin:0 0 16px}
.contact-form label{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:6px}
.contact-form input,.contact-form textarea{width:100%;font-family:inherit;font-size:17px;padding:12px 14px;border:1px solid var(--sage-line);border-radius:3px;background:#fff;color:var(--ink)}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--pine);outline-offset:1px}
.form-notice{padding:14px 18px;border-radius:3px;margin-bottom:22px;font-size:16px}
.form-notice.success{background:#E1D4B7;color:var(--pine)}
.form-notice.error{background:#f4d9d0;color:#8a3a24}
.contact-quote{border-left:3px solid var(--plum);padding-left:22px;margin:26px 0}
.contact-quote q{quotes:none;font-family:"DM Serif Display",Georgia,serif;font-style:italic;font-size:22px;line-height:1.35;color:var(--pine);display:block}

/* ---- nav menu (header) ---- */
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:22px;margin:0;padding:0}
.site-nav a{color:var(--paper-on-dark);text-decoration:none;font-size:15px;letter-spacing:.02em}
.site-nav a:hover{text-decoration:underline}

/* ---- shared helpers used by the block patterns (O meni / Storitve / Cenik) ---- */
.sost-pullquote{border-left:3px solid var(--plum);padding:2px 0 2px 22px;margin:26px 0}
.sost-pullquote p{font-family:"DM Serif Display",Georgia,serif;font-style:italic;font-size:22px;line-height:1.35;color:var(--pine);margin:0}
.sost-pullquote cite{display:block;margin-top:10px;font-size:15px;font-style:normal;color:var(--plum)}

.sost-callout{background:var(--sage-fill);border-radius:4px;padding:22px 26px;margin:24px 0}
.sost-callout p{margin:0;color:var(--ink)}
.sost-callout strong{color:var(--pine)}

.sost-portrait img{border-radius:6px;box-shadow:0 22px 44px -28px rgba(47,43,35,.42)}
.sost-portrait figcaption{font-size:15px;font-style:italic;color:var(--plum);margin-top:10px;text-align:center}

.sost-card{background:var(--paper-2);border:1px solid var(--sage-line);border-radius:4px;padding:26px 24px;height:100%}
.sost-card h3{margin-top:0}
.sost-card .sost-tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--plum);display:block;margin-bottom:10px}
.sost-card .sost-price{font-family:"DM Serif Display",Georgia,serif;font-size:26px;color:var(--pine);display:block;margin:10px 0}

.sost-step .sost-step-num{font-family:"DM Serif Display",Georgia,serif;font-size:38px;color:var(--sage);line-height:1;display:block;margin-bottom:10px}

.sost-check li{position:relative;padding:10px 0 10px 30px;border-bottom:1px dotted var(--sage-line)}
.sost-check li::before{content:"";position:absolute;left:2px;top:18px;width:10px;height:10px;background:var(--sage);border-radius:2px;transform:rotate(45deg)}

/* Make core/button blocks match the brand everywhere, automatically */
.wp-block-button__link{background:var(--plum) !important;color:#fff !important;border-radius:2px !important;font-weight:600;padding:14px 26px !important;text-decoration:none}
.wp-block-button__link:hover{background:var(--plum-deep) !important}

/*--------------------------------------------------------------
>>> FRONT PAGE: hero / hook (used by the "Domov – uvod" pattern,
    the front page's own editable content, shown first)
----------------------------------------------------------------*/
.hero{padding:64px 0 54px}
.hero h1{font-size:clamp(36px,6vw,64px);max-width:14ch;margin-bottom:22px}
.hero h1 .l2{color:var(--pine)}
.hero .sub{font-size:clamp(18px,2vw,20px);color:var(--ink-soft);max-width:56ch;margin:0 0 14px;line-height:1.55}
.hero .sub.two{margin-bottom:30px}
.hero-mark{max-width:340px;opacity:.5;margin:0 0 20px}

.subq{font-size:21px;font-style:italic;color:var(--pine);margin:18px 0 6px}
.checks{list-style:none;padding:0;margin:26px 0}
.checks li{position:relative;padding:16px 0 16px 40px;border-bottom:1px solid var(--sage-line)}
.checks li:first-child{border-top:1px solid var(--sage-line)}
.checks li::before{content:"";position:absolute;left:6px;top:22px;width:13px;height:13px;border:1.5px solid var(--sage);border-radius:50%}
.checks li em{font-style:italic;color:var(--plum)}
.closer{font-size:20px;font-style:italic;color:var(--pine);margin-top:10px}

/*--------------------------------------------------------------
>>> FRONT PAGE: panels (existing Pages picked in the Customizer,
    Twenty-Seventeen style — see inc/customizer.php)
----------------------------------------------------------------*/
.panel{padding:64px 0}
.panel-alt{background:var(--paper-2)}
.panel-placeholder{padding:40px 0;text-align:center;color:var(--ink-soft);font-style:italic}

/*--------------------------------------------------------------
>>> FRONT PAGE: fixed closing block (FAQ, discretion note, final
    CTA — always shown, not an editable Page; see
    template-parts/front-page/closing.php)
----------------------------------------------------------------*/
.faq-list details{border-bottom:1px solid var(--sage-line);max-width:800px}
.faq-list summary{cursor:pointer;list-style:none;padding:20px 0;font-size:19px;font-weight:600;color:var(--pine);display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .plus{flex:0 0 auto;width:20px;height:20px;position:relative;transition:transform .25s ease}
.faq-list summary .plus::before,.faq-list summary .plus::after{content:"";position:absolute;background:var(--plum);border-radius:2px}
.faq-list summary .plus::before{left:0;top:9px;width:20px;height:2px}
.faq-list summary .plus::after{left:9px;top:0;width:2px;height:20px;transition:transform .25s ease}
.faq-list details[open] summary .plus::after{transform:scaleY(0)}
.faq-list details[open] summary .plus{transform:rotate(90deg)}
.faq-list .ans{padding:0 0 22px;color:var(--ink-soft);font-size:17px;max-width:70ch}

.discretion{text-align:center;max-width:640px;margin:0 auto}
.discretion .mark{margin-bottom:18px;opacity:.85}
.discretion h2{max-width:22ch;margin:0 auto 16px}

.final-cta{background:var(--pine);color:#fff;text-align:center;padding:64px 0}
.final-cta h2{color:#fff;max-width:22ch;margin:0 auto 14px}
.final-cta p{color:#CBD5C9;max-width:40ch;margin:0 auto 26px}
.final-cta .btn{background:var(--plum-deep)}
.final-cta .micro{color:#9FB3A4;font-size:14px;margin-top:14px}

/*--------------------------------------------------------------
>>> Accessibility (ported principle from Twenty Seventeen)
----------------------------------------------------------------*/
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--pine);color:#fff;padding:12px 20px;z-index:100000}
.skip-link:focus{left:8px;top:8px}

/*--------------------------------------------------------------
>>> RESTORED from base HTML: floating/decorative elements that
    got over-simplified in the first WordPress pass (hero mark,
    photo frame/wash/floating caption, band label, scroll-reveal)
----------------------------------------------------------------*/
.hero{position:relative;overflow:hidden;padding:96px 0 88px}
.hero .wrap-inner{position:relative;z-index:2}
.hero-mark{position:absolute;right:-40px;top:60px;width:min(46vw,520px);opacity:.5;z-index:1;pointer-events:none}
@media(max-width:820px){.hero-mark{opacity:.16;right:-60px;top:auto;bottom:-30px}}

.panel{padding:88px 0}

.story-layout{display:grid;grid-template-columns:43vw 1fr;align-items:start;gap:0}
@media(max-width:860px){.story-layout{display:block}}
.story-photo-col{padding:20px 0}
@media(max-width:860px){.story-photo-col{padding:0}}
.story-portrait{position:sticky;top:44px}
@media(max-width:860px){.story-portrait{position:static;max-width:400px;margin:8px auto 0}}
.frame{position:relative;overflow:hidden;border-radius:34% 34% 10px 10px / 18% 18% 3px 3px;box-shadow:0 32px 64px -34px rgba(47,43,35,.5)}
.frame img{display:block;width:100%;height:auto}
.wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(198,123,92,.05),rgba(52,82,110,.14));pointer-events:none}
.who{position:absolute;top:20%;left:30px;max-width:250px;z-index:2}
.who b{display:block;font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:clamp(26px,2.4vw,32px);line-height:1;color:var(--pine);text-shadow:0 2px 16px rgba(241,240,232,.95)}
.who span{display:block;margin-top:8px;font-size:12px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--plum);text-shadow:0 2px 12px rgba(241,240,232,.95)}
.story-text-col{padding:20px 0 20px 40px;max-width:760px}
@media(max-width:860px){.story-text-col{padding:36px 0 0}}

.story-photo-frame{margin:38px 0 6px;position:relative;border-radius:8px;overflow:hidden;box-shadow:0 22px 44px -28px rgba(47,43,35,.42);max-width:520px}
.story-photo-frame img{display:block;width:100%;height:auto}
.story-photo-frame .wash{background:linear-gradient(180deg,rgba(198,123,92,.04),rgba(52,82,110,.10))}
.story-cap{margin:12px 2px 0;font-size:16px;font-style:italic;color:var(--plum);max-width:520px}

.band{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 34px 66px -36px rgba(47,43,35,.5);max-width:960px;margin:0 auto}
.band img{display:block;width:100%;height:auto}
.band .wash{background:linear-gradient(105deg,rgba(52,82,110,.34),rgba(52,82,110,.06) 52%,rgba(198,123,92,.06))}
.band-label{position:absolute;left:28px;bottom:24px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.55)}

/* Scroll-reveal, restored: fades sections up into view as you scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/*--------------------------------------------------------------
>>> v1.7: richer styling for Kontakt / Rezervacija, nav, buttons
----------------------------------------------------------------*/
.btn{font-family:inherit}
.btn .arw{display:inline-block;transition:transform .2s ease}
.btn:hover .arw{transform:translateX(4px)}

/* header navigation: spacing, hover underline, current page */
.site-nav ul{gap:28px}
.site-nav a{position:relative;padding:6px 0;font-size:16px}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--paper-on-dark);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.site-nav a:hover{text-decoration:none}
.site-nav a:hover::after,.site-nav .current-menu-item > a::after,.site-nav .current_page_item > a::after{transform:scaleX(1)}

/* generic page title */
.entry-header h1{font-size:clamp(34px,5vw,54px);margin-bottom:.6em}

/* page hero (Kontakt, Rezervacija) */
.page-hero{position:relative;overflow:hidden;padding:72px 0 28px}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(38px,6vw,64px);margin-bottom:14px}
.page-hero .hero-mark{width:min(34vw,380px);top:10px;right:-20px;opacity:.35}
.page-lead{font-size:clamp(19px,2vw,22px);color:var(--ink-soft);max-width:48ch;margin:0}

/* two-column layout: form card + aside */
main.site-main:has(.page-hero){padding-top:0}
.contact-grid{grid-template-columns:1.35fr 1fr;gap:48px;align-items:start;padding-bottom:40px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:32px}.page-hero{padding:48px 0 16px}}

.form-card{background:#fff;border:1px solid var(--sage-line);border-radius:10px;padding:40px;box-shadow:0 30px 60px -40px rgba(47,43,35,.4)}
@media(max-width:560px){.form-card{padding:26px 20px}}
.form-hint{font-size:15px;font-style:italic;color:var(--plum);margin:0 0 22px}
.contact-form label{font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--pine);margin-bottom:8px}
.contact-form input,.contact-form textarea{background:var(--paper);border:1px solid var(--sage-line);border-radius:6px;padding:14px 16px;font-size:18px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.contact-form input:hover,.contact-form textarea:hover{border-color:var(--sage)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;background:#fff;border-color:var(--pine);box-shadow:0 0 0 4px rgba(52,82,110,.14)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.field-row p{margin:0 0 16px}
.form-notice{border-left:4px solid var(--sage);border-radius:4px}
.form-notice.error{border-left-color:#8a3a24}

/* aside card (pine, like the "dobra novica" section) */
.contact-aside{display:grid;gap:24px;position:sticky;top:32px}
@media(max-width:820px){.contact-aside{position:static}}
.aside-card{background:var(--pine);color:var(--paper-on-dark);border-radius:10px;padding:36px 34px;box-shadow:0 30px 60px -40px rgba(47,43,35,.5)}
.aside-card .eyebrow{color:#E4B79B}
.aside-card .eyebrow::before{background:#E4B79B}
.aside-card h2{color:#fff;font-size:clamp(24px,2.6vw,30px);margin-bottom:12px}
.aside-card p{color:#D9CBB0}
.aside-list{list-style:none;margin:22px 0 0;padding:0}
.aside-list li{position:relative;padding:12px 0 12px 30px;border-top:1px solid rgba(242,232,212,.18);color:var(--paper-on-dark);font-size:17px}
.aside-list li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:10px;border:1.5px solid #E4B79B;border-radius:50%}
.aside-extra{background:var(--paper-2);border:1px solid var(--sage-line);border-radius:10px;padding:26px 28px}