/*
Theme Name: Plant Vila
Theme URI: https://plantvila.com
Author: Guill-E (build) · Fran (design)
Description: Plant Vila custom theme. Design v1 "A / Panorama" by Fran; navigation and copy from Max's site direction v2. No external requests, no builder.
Version: 0.5.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: plantvila
*/

/* ---------- Tokens (Fran, DESIGN.md) ---------- */
:root{--ink:#1C4434;--sage:#6C8464;--paper:#F7F3EA;--gutter:64px;--space:112px;--header:88px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.55 Arial,Helvetica,sans-serif;-webkit-text-size-adjust:100%}
a{color:inherit}
img{max-width:100%}
button,input,select,textarea{font:inherit}
button,a,input{touch-action:manipulation}
button{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:5px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:60px;line-height:1.07}
h2{font-size:56px;line-height:1.12}
h3{font-size:28px;line-height:1.2;letter-spacing:-.02em}
p{max-width:590px}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-100px;padding:10px 14px;background:var(--paper);z-index:20}
.skip:focus{top:10px}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:10;height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px var(--gutter);border-bottom:1px solid #1c44342b;background:var(--paper)}
.logo{width:205px;height:auto;display:block}
.header-right{display:flex;align-items:center;gap:28px}
.main-nav .menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.main-nav .menu a{display:flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-size:15px}
.main-nav .menu a:hover{text-decoration:underline;text-underline-offset:6px}
.main-nav .current-menu-item>a,.main-nav .current_page_item>a{text-decoration:underline;text-underline-offset:6px}
.main-nav .menu-cta>a{background:var(--ink);color:var(--paper);padding:0 18px;margin-left:8px}
.main-nav .menu-cta>a:hover{text-decoration:none;background:#123024}
.nav-toggle{display:none}
.langs ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;font-size:14px}
.langs li+li::before{content:"·";padding:0 2px;opacity:.6}
.langs a{display:inline-grid;place-items:center;min-width:44px;min-height:44px;text-decoration:none}
.langs a[aria-current]{text-decoration:underline;text-underline-offset:7px}

/* ---------- Buttons ---------- */
.button,.actions a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;font-size:16px;line-height:1.2}
.button:hover,.actions a:hover{background:#123024}
.button.ghost,.actions a.ghost{background:transparent;color:var(--ink)}
.button.ghost:hover,.actions a.ghost:hover{background:#1c443412}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.on-ink .button,.on-ink .actions a{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.on-ink .button:hover,.on-ink .actions a:hover{background:#fff}

/* ---------- Hero (Fran rev. 2: immersive opening, source uncropped) ---------- */
.hero{position:relative;height:calc(100svh - var(--header));min-height:560px;overflow:hidden}
.hero-figure{position:absolute;inset:0;margin:0;height:100%;width:100%}
.hero .art{position:absolute;inset:0;height:100%;animation:river-drift 36s ease-in-out infinite alternate;transform-origin:88% 18%}
.hero picture{display:block;width:100%;height:100%}
.hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-copy{position:absolute;top:32px;left:var(--gutter);max-width:720px;background:var(--paper);padding:24px 30px 28px;z-index:2}
.hero-copy h1{max-width:660px}
.hero-copy p{font-size:17px;margin-top:14px}
.hero figcaption{position:absolute;bottom:0;left:0;width:100%;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px var(--gutter);font-size:12px;letter-spacing:.025em}
.hero figcaption>span,.hero .pause{background:var(--paper);padding:10px 12px}
.pause{border:1px solid var(--ink);color:var(--ink);font-size:12px;min-height:44px}
.hero.paused .art{animation-play-state:paused}
@keyframes river-drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.06) translate(-.6%,.4%)}}

/* ---------- Dusk (static version of the v4 concept: sections darken as you scroll) ---------- */
.intro .lead{font:24px/1.35 Georgia,serif;letter-spacing:-.01em;margin-top:20px}
.dusk-1{background:linear-gradient(var(--paper),#efe4cf)}
.dusk-2{background:linear-gradient(#efe4cf,#d9cdbb)}
.dusk-1 figcaption,.dusk-2 figcaption{background:transparent}
.pillars{background:linear-gradient(#24364a,#14263a);color:var(--paper);padding:var(--space) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:28px 72px}
.pillars .pillar{border-top:1px solid #f7f3ea66;padding-top:24px}
.pillars h2,.pillars h3{font-size:44px;line-height:1.1}
.pillars .pillar p{margin-top:16px;font-size:20px}
.pillars-close{grid-column:1/-1;font:28px/1.3 Georgia,serif;margin-top:40px;max-width:820px}

.page-intro>p:not(.eyebrow):not(.status){font-size:22px}

/* ---------- Story sections ---------- */
figcaption{font-size:12px;letter-spacing:.025em;padding:12px var(--gutter);color:var(--ink)}
.eyebrow{font-size:14px;letter-spacing:.04em;margin-bottom:18px;max-width:none}
.story{padding-top:var(--space)}
.intro{padding:0 var(--gutter) 48px;display:grid;grid-template-columns:1.5fr 1fr;gap:72px;align-items:end}
.intro p{padding-bottom:4px}
.intro p+p{margin-top:16px}
.pv-figure img{display:block;width:100%;height:auto}
.pv-figure picture{display:block}
.night{margin-top:0;padding-top:72px;background:linear-gradient(#14263a,var(--ink) 40%);color:var(--paper)}
.night h2{max-width:870px}
.night .intro{display:block}
.night figcaption{background:var(--ink);color:var(--paper)}
.programs{list-style:none;margin:0;padding:0 var(--gutter) 40px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.programs li{border-top:1px solid var(--sage);padding:22px 0;font:22px/1.25 Georgia,serif}
.statement{padding:var(--space) var(--gutter);text-align:center}
.statement h2{max-width:1000px;margin:0 auto}
.statement p{margin:28px auto 0;font-size:20px}
.invite{background:var(--ink);color:var(--paper);padding:96px var(--gutter) 88px}
.invite h2{font-size:68px;max-width:1000px}
.invite p{margin-top:26px;font-size:20px}
.invite .actions{margin-top:36px}

/* ---------- Inner pages ---------- */
.page-intro{padding:96px var(--gutter) 56px}
.page-intro h1{max-width:1060px}
.page-intro p{margin-top:28px;font-size:20px}
.page-intro .status{font-size:13px;margin-top:20px}
.manifesto{padding:0 var(--gutter) var(--space);display:grid;grid-template-columns:1fr 1.5fr;gap:72px}
.manifesto .text p{font-size:22px;line-height:1.5;max-width:640px}
.manifesto .text p+p{margin-top:24px}
.pull{padding:var(--space) var(--gutter);background:var(--ink);color:var(--paper)}
.pull h2{max-width:1000px}
.building{padding:0 var(--gutter) var(--space)}
.gallery-main{background:var(--paper)}
.gallery-main img{display:block;width:100%;height:auto;max-height:780px;object-fit:contain}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:20px}
.thumbs button{border:2px solid transparent;background:none;padding:4px}
.thumbs button[aria-pressed=true]{border-color:var(--ink)}
.thumbs img{width:100%;height:auto;display:block}
.gallery-count{font-size:13px;padding-top:14px}
.where{padding:var(--space) var(--gutter);display:grid;grid-template-columns:1fr 1.3fr;align-items:center;gap:64px;border-top:1px solid #1c44342b}
.where h2{font-size:46px}
.where p{margin-top:24px}
.where img{width:100%;height:auto;display:block}
.where figcaption{padding:8px 0}
.ways{list-style:none;margin:0;padding:0 var(--gutter) var(--space);display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.ways li{border-top:1px solid var(--sage);padding-top:22px}
.ways-3{grid-template-columns:repeat(3,1fr)}
.hero-copy h1#hero-title{font-size:76px}
.ways h2{font-size:30px;line-height:1.15;letter-spacing:-.02em}
.ways p{margin-top:12px;font-size:17px}
.involve{background:var(--ink);color:var(--paper);padding:88px var(--gutter)}
.involve h2{font-size:46px;max-width:900px}
.contact-direct{font-size:22px;margin-top:24px;max-width:none}
.contact-direct a{text-underline-offset:6px}

/* ---------- Form (inactive until the privacy text is approved) ---------- */
.involve-form{max-width:680px;margin-top:32px}
.involve-form p{max-width:none;margin-bottom:18px}
.involve-form label{display:block;font-size:14px;margin-bottom:6px}
.involve-form input[type=text],.involve-form input[type=email],.involve-form select,.involve-form textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--paper);border-radius:0;background:transparent;color:var(--paper)}
.involve-form select option{color:var(--ink)}
.involve-form .consent{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.involve-form .consent label{display:inline;margin:0;font-size:14px}
.involve-form .consent input{width:22px;height:22px;flex:none;margin-top:1px}
.involve-form .hp{position:absolute;left:-9999px}
.form-status{padding:12px 14px;border:1px solid var(--paper)}

/* ---------- Coming soon (PT / ES until translations arrive) ---------- */
.soon{min-height:calc(100svh - var(--header) - 260px);display:grid;align-content:center;padding:96px var(--gutter)}
.soon h1{max-width:900px}
.soon p{margin-top:24px;font-size:20px}

.notfound{min-height:50vh}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--paper);padding:72px var(--gutter) 40px}
.site-footer .logo{width:240px;margin-bottom:36px}
.site-footer .contact{font-size:15px}
.footerline{margin-top:40px;border-top:1px solid #f7f3ea66;padding-top:22px;display:flex;justify-content:space-between;gap:16px;font-size:13px}
.invite+.site-footer,.involve+.site-footer{border-top:1px solid #f7f3ea33}

/* ---------- Mobile (breakpoint 700px, Fran) ---------- */
@media(max-width:1100px){
  .header-right{gap:12px}
  .nav-wide{display:none}
  .nav-toggle{display:block;position:relative}
  .nav-toggle summary{list-style:none;display:flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--ink);font-size:15px;cursor:pointer}
  .nav-toggle summary::-webkit-details-marker{display:none}
  .nav-toggle[open] summary{background:var(--ink);color:var(--paper)}
  .nav-toggle .menu{position:absolute;right:0;top:calc(100% + 12px);min-width:240px;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border:1px solid var(--ink);padding:8px}
  .nav-toggle .menu a{min-height:48px;font-size:17px}
  .nav-toggle .menu-cta>a{margin:8px 0 0}
  .ways{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  :root{--gutter:24px;--space:72px;--header:80px}
  body{font-size:17px}
  .site-header{padding:12px 16px 12px 24px}
  .logo{width:150px}
  .langs a{min-width:36px}
  h1{font-size:40px}
  h2{font-size:38px;line-height:1.14}
  .hero{min-height:520px}
  .hero img{object-position:92% 50%}
  .hero-copy{top:22%;left:24px;right:24px;max-width:none;padding:16px 18px 18px}
  .hero-copy h1{font-size:34px;line-height:1.07}
  .hero-copy h1#hero-title{font-size:48px}
  .hero-copy p{font-size:14px;margin-top:10px}
  .hero .actions{margin-top:16px;gap:8px}
  .hero .actions a{min-height:46px;padding:10px 16px;font-size:15px}
  .hero figcaption{padding:12px 16px;font-size:10px;gap:8px}
  .hero .pause{font-size:10px}
  .intro{display:block;padding-bottom:28px}
  .intro p{margin-top:24px}
  .programs{grid-template-columns:1fr 1fr;gap:12px 24px;padding-bottom:24px}
  .programs li{font-size:20px;padding:16px 0}
  .programs li:last-child{grid-column:1/-1}
  .night{padding-top:48px}
  .statement{text-align:left}
  .statement p{margin-left:0}
  .invite{padding:64px var(--gutter)}
  .invite h2{font-size:44px}
  .page-intro{padding:64px var(--gutter) 40px}
  .manifesto{grid-template-columns:1fr;gap:32px}
  .pillars{grid-template-columns:1fr;gap:24px}
  .pillars h2,.pillars h3{font-size:34px}
  .pillars-close{font-size:22px;margin-top:16px}
  .intro .lead{font-size:20px}
  .page-intro>p:not(.eyebrow):not(.status){font-size:19px}
  .manifesto .text p{font-size:19px}
  .thumbs{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
  .where{grid-template-columns:1fr;gap:32px}
  .where h2{font-size:34px}
  .ways{grid-template-columns:1fr;gap:24px}
  .involve{padding:64px var(--gutter)}
  .involve h2{font-size:34px}
  .contact-direct{font-size:19px;overflow-wrap:anywhere}
  .site-footer{padding:56px var(--gutter) 32px}
  .site-footer .logo{width:200px}
  .footerline{display:block}
  .footerline span{display:block;margin-bottom:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero .art{animation:none;transform:none}}

/* ---------- Dusk layers (site.js; Fran v2 light states, opacity only) ---------- */
.dusk-art{position:relative}
.dusk-layer{position:absolute;inset:0;pointer-events:none;will-change:opacity}
.dusk-layer img{display:block;width:100%;height:100%;object-fit:cover}
.hero .dusk-layer img{object-position:inherit}
.hero-copy{top:auto;bottom:76px}
@media(max-width:700px){.hero img{object-position:46% 50%}.hero-copy{top:auto;bottom:64px}}
@media(prefers-reduced-motion:reduce){.dusk-layer{display:none}}
.pillars .pv-figure{margin-top:28px}
.pillars .pv-figure figcaption{padding:10px 0;color:inherit;background:transparent;opacity:.75}