/*
Theme Name: Rousseau Studio
Theme URI: https://example.com
Author: Rousseau Studio
Author URI: https://example.com
Description: Elegantna, minimalistična tema za foto/video portfolio v slogu Pixieset. Vsebuje samodejno filtrirano galerijo (fotografije in video), urejanje prek WordPress Customizerja in preprosto dodajanje del prek panela Portfolio.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: rousseau-studio
*/

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --ivory:      #F7F5F0;
  --ivory-dim:  #F1EEE7;
  --ink:        #1E1D1B;
  --stone:      #948B7E;
  --navy:       #1F2E44;
  --hairline:   #DDD6CB;

  --display: 'Cormorant Garamond', serif;
  --body:    'Jost', sans-serif;

  --nav-h: 92px;
  --gutter: clamp(24px, 5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }
ul{ list-style:none; }

::selection{ background:var(--navy); color:var(--ivory); }

.eyebrow{
  font-family:var(--body);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--stone);
}

h1,h2,h3{ font-family:var(--display); font-weight:400; letter-spacing:.01em; }

.container{ max-width:1360px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

:focus-visible{ outline:1px solid var(--navy); outline-offset:4px; }

/* =========================================================
   PRELOADER
   ========================================================= */
#preloader{
  position:fixed; inset:0; background:var(--ivory); z-index:9999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader span{ font-family:var(--display); font-size:15px; letter-spacing:.3em; color:var(--stone); }
#preloader.hidden{ opacity:0; visibility:hidden; }

/* =========================================================
   NAV
   ========================================================= */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), height .4s var(--ease);
}
header.site-nav .container{ display:flex; align-items:center; justify-content:space-between; width:100%; }
header.site-nav.solid{
  background:rgba(247,245,240,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--hairline);
}
header.site-nav.solid{ height:76px; }

.logo{
  font-family:var(--display);
  font-size:24px;
  letter-spacing:.04em;
  color:var(--ivory);
  transition:color .4s var(--ease);
}
.logo em{ font-style:italic; color:var(--ivory); transition:color .4s var(--ease); }
header.site-nav.solid .logo{ color:var(--ink); }
header.site-nav.solid .logo em{ color:var(--navy); }

nav.primary{ display:flex; align-items:center; gap:clamp(24px,3vw,48px); }
nav.primary ul{ display:flex; align-items:center; gap:clamp(24px,3vw,48px); }
nav.primary a{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ivory);
  position:relative;
  padding:6px 0;
  transition:color .4s var(--ease);
}
header.site-nav.solid nav.primary a{ color:var(--ink); }
nav.primary a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ivory); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease), background .4s var(--ease);
}
header.site-nav.solid nav.primary a::after{ background:var(--navy); }
nav.primary a:hover::after, nav.primary a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
nav.primary li.cta a{
  border:1px solid var(--ivory); padding:10px 20px; display:inline-block;
  transition:color .4s var(--ease), border-color .4s var(--ease), background .35s var(--ease);
}
header.site-nav.solid nav.primary li.cta a{ border-color:var(--ink); }
nav.primary li.cta a::after{ display:none; }
nav.primary li.cta a:hover{ background:var(--ivory); color:var(--ink); }
header.site-nav.solid nav.primary li.cta a:hover{ background:var(--ink); color:var(--ivory); }

.menu-toggle{ display:none; flex-direction:column; gap:5px; z-index:600; }
.menu-toggle span{ width:24px; height:1px; background:var(--ivory); transition:transform .3s var(--ease), opacity .3s var(--ease), background .4s var(--ease); }
header.site-nav.solid .menu-toggle span{ background:var(--ink); }
.menu-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
/* The hamburger sits on the light mobile panel once open, regardless of nav state. */
.menu-toggle.open span{ background:var(--ink); }

/* =========================================================
   FRAME COUNTER — signature element
   ========================================================= */
#frame-counter{
  position:fixed;
  right:clamp(16px,3vw,40px);
  top:50%;
  transform:translateY(-50%);
  z-index:400;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:var(--body); font-size:11px; letter-spacing:.15em; color:var(--stone);
}
#frame-counter .count{ font-family:var(--display); font-size:16px; color:var(--ink); letter-spacing:.05em; }
#frame-counter .track{
  width:1px; height:120px; background:var(--hairline); position:relative; overflow:hidden;
}
#frame-counter .track i{
  position:absolute; left:0; top:0; width:100%; background:var(--navy);
  transition:height .5s var(--ease);
}
@media (max-width: 880px){ #frame-counter{ display:none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; height:100vh; min-height:640px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  animation:heroZoom 16s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,20,28,.34) 0%, rgba(15,20,28,.14) 40%, rgba(15,20,28,.5) 100%);
}
.hero-content{
  position:relative; z-index:2; text-align:center; color:var(--ivory);
  opacity:0; animation:fadeUp 1s var(--ease) .5s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
.hero-content .eyebrow{ color:rgba(247,245,240,.75); }
.hero-content h1{
  font-size:clamp(48px, 8vw, 108px);
  line-height:1;
  margin:18px 0 22px;
  font-weight:300;
}
.hero-content h1 em{ font-style:italic; }
.hero-content p{ font-size:15px; letter-spacing:.04em; color:rgba(247,245,240,.85); max-width:36ch; margin:0 auto; }

.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  z-index:2; color:var(--ivory); display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.25em; text-transform:uppercase; opacity:.8;
}
.scroll-cue .line{ width:1px; height:34px; background:currentColor; position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--ivory);
  animation:cueDrip 2.2s ease-in-out infinite;
}
@keyframes cueDrip{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* =========================================================
   SECTION SCAFFOLDING
   ========================================================= */
section{ padding:120px 0; position:relative; }
section .head{ margin-bottom:64px; }
section .head h2{ font-size:clamp(34px,4.2vw,56px); margin-top:14px; }
section .head .eyebrow{ display:block; }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* =========================================================
   GALLERY
   ========================================================= */
.filters{
  display:flex; flex-wrap:wrap; gap:12px 32px; margin-bottom:48px;
}
.filters button{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone);
  padding-bottom:4px; border-bottom:1px solid transparent;
}
.filters button.active, .filters button:hover{ color:var(--ink); border-color:var(--navy); }

.gallery{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
}
.gallery figure{
  position:relative; overflow:hidden; aspect-ratio:4/5; cursor:pointer;
  grid-column:span 1;
}
.gallery figure > a{ display:block; width:100%; height:100%; }
.gallery figure.tile-tall{ grid-row:span 2; aspect-ratio:4/9.5; }
.gallery figure.tile-wide{ grid-column:span 2; aspect-ratio:8/5; }
.gallery figure img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s ease;
  filter:grayscale(.15);
}
.gallery figure:hover img{ transform:scale(1.06); filter:grayscale(0); }
.gallery figcaption{
  position:absolute; inset:auto 0 0 0; padding:22px 24px;
  background:linear-gradient(0deg, rgba(30,29,27,.62), transparent);
  color:var(--ivory);
  opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery figure:hover figcaption{ opacity:1; transform:translateY(0); }
.gallery figcaption .eyebrow{ color:rgba(247,245,240,.7); }
.gallery figcaption h3{ font-size:22px; margin-top:4px; }

.gallery figure.play-badge::before{
  content:'▶'; position:absolute; top:20px; right:20px; z-index:2;
  width:34px; height:34px; border-radius:50%; background:rgba(30,29,27,.55); color:var(--ivory);
  display:flex; align-items:center; justify-content:center; font-size:11px; padding-left:2px;
}

.gallery [data-cat]{ display:none; }
.gallery [data-cat].show{ display:block; }
.gallery figure.tile-wide[data-cat].show{ display:block; }

.gallery-empty{ color:var(--stone); font-size:14px; }

@media (max-width: 900px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery figure.tile-wide{ grid-column:span 2; }
  .gallery figure.tile-tall{ grid-row:span 1; aspect-ratio:4/5; }
}
@media (max-width: 560px){
  .gallery{ grid-template-columns:1fr; }
  .gallery figure.tile-wide{ grid-column:span 1; }
}

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{
  display:grid; grid-template-columns:.85fr 1fr; gap:clamp(32px,6vw,96px); align-items:center;
}
.about-grid .photo{ position:relative; }
.about-grid .photo img{ aspect-ratio:4/5; object-fit:cover; }
.about-grid .photo .frame{
  position:absolute; inset:20px -20px -20px 20px; border:1px solid var(--navy); z-index:-1;
}
.about-grid blockquote{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(22px,2.4vw,30px); line-height:1.5; color:var(--ink); margin:28px 0 32px;
}
.about-grid .signature{ font-family:var(--display); font-size:20px; font-style:italic; color:var(--navy); }
.about-grid p{ color:#4b473f; font-size:15px; max-width:52ch; }

@media (max-width: 880px){ .about-grid{ grid-template-columns:1fr; } .about-grid .photo{ order:2; } }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-info h2{ font-size:clamp(32px,4vw,48px); margin:14px 0 20px; }
.contact-info p{ color:#4b473f; font-size:15px; }
.contact-info ul{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.contact-info ul a{ font-family:var(--display); font-size:22px; }
.contact-info a:hover{ color:var(--navy); }
.social-row{ display:flex; gap:24px; margin-top:32px; }
.social-row a{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid var(--hairline); padding-bottom:3px; }
.social-row a:hover{ border-color:var(--navy); color:var(--navy); }

.contact-info--centered{
  text-align:center; max-width:560px; margin:0 auto;
}
.contact-info--centered p{ max-width:44ch; margin:0 auto 8px; }
.contact-info--centered ul{ align-items:center; margin-top:24px; }
.contact-info--centered .social-row{ justify-content:center; }

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer{ border-top:1px solid var(--hairline); padding:48px 0; }
footer.site-footer .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer.site-footer .f-logo{ font-family:var(--display); font-size:18px; }
footer.site-footer p{ font-size:11px; letter-spacing:.08em; color:var(--stone); }
.to-top{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); }
.to-top:hover{ color:var(--navy); }

/* =========================================================
   LIGHTBOX
   ========================================================= */
#lightbox{
  position:fixed; inset:0; background:rgba(30,29,27,.94); z-index:800;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
#lightbox.open{ opacity:1; visibility:visible; }
#lightbox img{ max-width:min(88vw,1100px); max-height:82vh; object-fit:contain; }
#lightbox .lb-video-wrap{ width:min(88vw,1100px); aspect-ratio:16/9; }
#lightbox .lb-video-wrap iframe{ width:100%; height:100%; border:0; }
#lightbox .lb-close, #lightbox .lb-prev, #lightbox .lb-next{
  position:absolute; color:var(--ivory); font-size:13px; letter-spacing:.2em; text-transform:uppercase;
}
#lightbox .lb-close{ top:32px; right:var(--gutter); }
#lightbox .lb-prev{ left:var(--gutter); top:50%; transform:translateY(-50%); }
#lightbox .lb-next{ right:var(--gutter); top:50%; transform:translateY(-50%); }
#lightbox .lb-cap{ position:absolute; bottom:36px; left:0; right:0; text-align:center; color:rgba(247,245,240,.75); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }

/* =========================================================
   MOBILE NAV
   ========================================================= */
@media (max-width: 880px){
  .menu-toggle{ display:flex; }
  nav.primary ul{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px); height:100vh;
    background:var(--ivory); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:28px; padding:0 48px; transform:translateX(100%); transition:transform .5s var(--ease); z-index:550;
  }
  nav.primary ul.open{ transform:translateX(0); }
  nav.primary ul a{ color:var(--ink) !important; font-size:15px; }
  nav.primary ul a::after{ background:var(--navy) !important; }
  nav.primary ul li.cta a{ border-color:var(--ink) !important; }
  nav.primary ul li.cta a:hover{ background:var(--ink) !important; color:var(--ivory) !important; }
}

/* =========================================================
   WP DEFAULTS / EDITOR SAFETY
   ========================================================= */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }