/*
Theme Name: Salon Rio
Theme URI: https://javv-digital.com
Author: JAVV Digital
Author URI: https://javv-digital.com
Description: Prilagodljiva WordPress tema za frizerski salon. Sav sadržaj (tekstovi, slike, cijenik, kontakt podaci) uređuje se putem Izgled → Prilagodi (Customizer) — bez potrebe za dodacima ili uređivanjem koda.
Version: 1.4.4
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salonrio
*/

:root{
  --bg:#FAF3F1;
  --bg-alt:#F1E3DE;
  --surface:#FFFDFC;
  --ink:#2B1620;
  --ink-soft:#6E4C56;
  --ink-faint:#9C7C84;
  --accent:#7C2043;
  --accent-soft:#A8425F;
  --gold:#A87B3F;
  --gold-soft:#D8B98A;
  --border:rgba(43,22,32,0.14);
  --border-strong:rgba(43,22,32,0.28);
  --shadow:0 24px 48px -28px rgba(43,22,32,0.35);
  --radius-s:6px;
  --radius-m:14px;
  --radius-l:28px;
  --maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1C1116;
    --bg-alt:#241620;
    --surface:#251720;
    --ink:#F6E9E6;
    --ink-soft:#CBA6AE;
    --ink-faint:#8F6B73;
    --accent:#E58AA6;
    --accent-soft:#C65D82;
    --gold:#E3C08A;
    --gold-soft:#C9A46A;
    --border:rgba(246,233,230,0.14);
    --border-strong:rgba(246,233,230,0.26);
    --shadow:0 24px 48px -28px rgba(0,0,0,0.6);
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
h1,h2,h3{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:600;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
  color:var(--ink);
}
p{margin:0;}
a{color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
section{padding:96px 0;}
@media (max-width:720px){section{padding:64px 0;}}

/* Home page is assembled from stacked blocks (not one plain section),
   so it opts out of the generic section padding; each block below sets its own. */
.home{padding:0;}
.block{padding-top:96px;padding-bottom:96px;}
@media (max-width:720px){.block{padding-top:64px;padding-bottom:64px;}}

.eyebrow{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:0.95rem;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  color:#2B1620;
  box-shadow:0 14px 30px -14px rgba(168,123,63,0.6);
}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--ink);}
.btn-ghost:hover{background:var(--bg-alt);}
.btn-on-accent{background:var(--bg);color:var(--accent);}
.btn-outline-accent{background:transparent;border-color:rgba(251,239,236,0.5);color:#FBEFEC;}
.btn-outline-accent:hover{background:rgba(251,239,236,0.12);}
.btn-sm{padding:11px 20px;font-size:0.88rem;}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  font-size:0.95rem;
  color:var(--accent);
  text-decoration:none;
  margin-top:20px;
  transition:gap 0.15s ease;
}
.link-arrow:hover{gap:10px;}

/* NAV */
header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 28px;
  max-width:var(--maxw);
  margin:0 auto;
}
.logo{display:flex;align-items:center;flex-shrink:0;}
.logo a{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.35rem;
  text-decoration:none;
  color:var(--ink);
}
.logo svg{width:26px;height:26px;flex-shrink:0;}
.logo img{max-height:44px;width:auto;display:block;}
.nav-mid{display:flex;align-items:center;gap:20px;}
.navlinks{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.navlinks::-webkit-scrollbar{display:none;}
.navlinks li{white-space:nowrap;}
.navlinks a{
  text-decoration:none;
  font-weight:600;
  font-size:0.94rem;
  color:var(--ink-soft);
  white-space:nowrap;
  transition:color 0.15s ease;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.navlinks a:hover{color:var(--accent);}
.navlinks .current-menu-item>a,
.navlinks .current_page_item>a{color:var(--accent);border-bottom-color:var(--accent);}
.nav-cta{flex-shrink:0;}
.mobile-menu{display:none;position:relative;}
.mobile-menu summary{
  list-style:none;
  cursor:pointer;
  padding:10px 14px;
  border:1px solid var(--border-strong);
  border-radius:999px;
  font-weight:700;
  font-size:0.85rem;
}
.mobile-menu summary::-webkit-details-marker{display:none;}
.mobile-menu[open] summary{color:var(--accent);border-color:var(--accent);}
.mobile-menu-panel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  padding:10px;
  min-width:170px;
  box-shadow:var(--shadow);
  z-index:60;
}
.mobile-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.mobile-menu-list a{display:block;padding:10px 12px;border-radius:6px;text-decoration:none;color:var(--ink);font-weight:600;font-size:0.92rem;}
.mobile-menu-list a:hover{background:var(--bg-alt);}
.mobile-menu-list .current-menu-item>a,
.mobile-menu-list .current_page_item>a{color:var(--accent);}
@media (max-width:640px){
  .navlinks{display:none;}
  .mobile-menu{display:block;}
  /* Logo + "Meni" + booking gumb ne stanu u jedan red na uskim ekranima —
     na mobitelu gumb za rezervaciju umjesto toga živi u fiksnoj traci na dnu. */
  .nav-cta{display:none;}
}

/* MOBILE BOOKING BAR — zamjenjuje gumb za rezervaciju iz headera na uskim
   ekranima: uvijek vidljiv na dnu, bez guranja s logom i "Meni" gumbom. */
.mobile-cta-bar{display:none;}
@media (max-width:640px){
  .mobile-cta-bar{
    display:block;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:60;
    background:var(--bg);
    border-top:1px solid var(--border);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -12px 24px -16px rgba(43,22,32,0.3);
  }
  .mobile-cta-bar .btn{width:100%;justify-content:center;}
  body{padding-bottom:78px;}
}

/* Gumbi koji na uskim ekranima idu jedan ispod drugog, preko cijele širine,
   umjesto da se sudaraju ili prelijevaju preko ruba ekrana. */
@media (max-width:640px){
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;justify-content:center;}
  .cta-actions{flex-direction:column;align-items:stretch;width:100%;}
  .cta-actions .btn{width:100%;justify-content:center;}
}

/* HERO */
.hero{padding:72px 0 56px;position:relative;overflow:hidden;}
@media (max-width:720px){.hero{padding:48px 0 40px;}}
.hero-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.2rem);letter-spacing:-0.01em;}
.hero h1 em{font-style:italic;color:var(--accent);position:relative;}
.hero-lede{margin-top:22px;max-width:46ch;font-size:1.1rem;color:var(--ink-soft);}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}
.hero-stats{display:flex;gap:32px;margin-top:56px;padding-top:32px;border-top:1px solid var(--border);flex-wrap:wrap;}
.stat b{display:block;font-family:'Fraunces',serif;font-size:1.9rem;font-weight:600;color:var(--ink);}
.stat span{font-size:0.82rem;color:var(--ink-faint);}
.hero-art{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--radius-l);
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--gold) 35%, transparent), transparent 60%),
    linear-gradient(155deg,var(--accent) 0%, #4A1530 60%, #2B1620 100%);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:28px;
}
.hero-art svg{position:absolute;inset:0;width:100%;height:100%;opacity:0.5;}
.hero-art-caption{position:relative;color:#F6E9E6;font-size:0.85rem;font-weight:600;letter-spacing:0.04em;}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
@media (max-width:820px){.about-grid{grid-template-columns:1fr;gap:32px;}}
.about-grid h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-top:14px;}
.about-copy{margin-top:22px;color:var(--ink-soft);font-size:1.02rem;max-width:52ch;}
.about-copy + .about-copy{margin-top:14px;}
.quote-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:32px;}
.quote-card p{font-family:'Fraunces',serif;font-style:italic;font-size:1.3rem;line-height:1.4;color:var(--ink);}
.quote-card footer{margin-top:18px;font-size:0.85rem;font-weight:700;color:var(--ink-faint);font-style:normal;}

.values-row{display:flex;gap:28px;margin-top:36px;flex-wrap:wrap;}
.value-item{display:flex;align-items:flex-start;gap:10px;max-width:230px;}
.value-item svg{flex-shrink:0;width:20px;height:20px;color:var(--accent);margin-top:2px;}
.value-item b{display:block;font-size:0.94rem;}
.value-item span{font-size:0.82rem;color:var(--ink-faint);}

.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;}
@media (max-width:780px){.team-grid{grid-template-columns:1fr;}}
.team-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:26px;}
.team-avatar{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(155deg,var(--accent),var(--gold));
  display:flex;align-items:center;justify-content:center;
  color:#FBEFEC;font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;
  margin-bottom:16px;
}
.team-card h4{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:600;color:var(--ink);}
.team-card .role{font-size:0.8rem;color:var(--accent);font-weight:700;margin:4px 0 10px;}
.team-card p{font-size:0.87rem;color:var(--ink-soft);}

/* SECTION HEAD */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-top:12px;max-width:20ch;}
.section-head p{color:var(--ink-soft);max-width:40ch;}

.bg-alt{background:var(--bg-alt);}

/* GALLERY */
.gallery-note{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--surface);
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-s);
  padding:14px 18px;margin-bottom:36px;
  font-size:0.9rem;color:var(--ink-soft);
}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:880px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.gallery-grid{grid-template-columns:1fr;}}
.gallery-item{
  position:relative;aspect-ratio:1/1;border-radius:var(--radius-m);
  overflow:hidden;display:flex;align-items:flex-end;box-shadow:var(--shadow);
  background-color:var(--bg-alt);
}
.gallery-item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%, rgba(20,8,14,0.78) 100%);
}
.gallery-item .tag{position:relative;z-index:2;margin:18px;color:#FBEFEC;}
.gallery-item .tag b{display:block;font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;}
.gallery-item .tag span{font-size:0.76rem;letter-spacing:0.06em;text-transform:uppercase;color:#E3C4CC;}
.g1{background:linear-gradient(155deg,#8A5A2E,#4A2E14);}
.g2{background:linear-gradient(155deg,#D8B98A,#8A6B3F);}
.g3{background:linear-gradient(155deg,#3A2018,#1C0F0A);}
.g4{background:linear-gradient(155deg,#C88A8E,#7C2043);}
.g5{background:linear-gradient(155deg,#E8D9C4,#B79A6E);}
.g6{background:linear-gradient(155deg,#5C2A3A,#2B1620);}
.g7{background:linear-gradient(155deg,#B5C4A0,#5E6E4C);}
.g8{background:linear-gradient(155deg,#4A3A5C,#241A2E);}
.g9{background:linear-gradient(155deg,#E0A96A,#8A4A2E);}

.center-cta{text-align:center;margin-top:44px;}

/* REVIEWS */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;}
@media (max-width:780px){.reviews-grid{grid-template-columns:1fr;}}
.review-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:28px;display:flex;flex-direction:column;gap:16px;}
.review-stars{display:flex;gap:3px;color:var(--gold);}
.review-stars svg{width:15px;height:15px;}
.review-card p{font-family:'Fraunces',serif;font-style:italic;font-size:1.03rem;line-height:1.45;color:var(--ink);}
.review-author{display:flex;align-items:center;gap:10px;margin-top:auto;}
.review-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(155deg,var(--accent),var(--gold));
  display:flex;align-items:center;justify-content:center;
  color:#FBEFEC;font-family:'Fraunces',serif;font-weight:600;font-size:0.85rem;flex-shrink:0;
}
.review-author b{display:block;font-size:0.88rem;color:var(--ink);}
.review-author span{font-size:0.76rem;color:var(--ink-faint);}

/* PRICING */
.pricing-downloads{display:flex;align-items:center;gap:10px;margin-bottom:36px;font-size:0.88rem;color:var(--ink-soft);flex-wrap:wrap;}
.price-cols{display:grid;grid-template-columns:1fr 1fr;gap:52px 64px;}
@media (max-width:780px){.price-cols{grid-template-columns:1fr;gap:40px;}}
.price-cat h3{font-size:1.3rem;padding-bottom:14px;border-bottom:2px solid var(--accent);}
.price-list{list-style:none;margin:22px 0 0;padding:0;}
.price-row{display:flex;align-items:baseline;gap:8px;padding:11px 0;border-bottom:1px dotted var(--border-strong);}
.price-row .name{font-weight:600;}
.price-row .name small{display:block;font-weight:400;color:var(--ink-faint);font-size:0.82rem;margin-top:2px;}
.price-row .fill{flex:1;}
.price-row .amount{font-family:'Manrope',sans-serif;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap;}
.price-footnote{margin-top:32px;font-size:0.88rem;color:var(--ink-faint);}

/* CTA BAND */
.cta-band{
  background:linear-gradient(135deg,var(--accent),#4A1530);
  color:#FBEFEC;border-radius:var(--radius-l);padding:64px;
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
}
@media (max-width:640px){.cta-band{padding:40px 28px;}}
.cta-band h2{color:#FBEFEC;font-size:clamp(1.7rem,3.2vw,2.3rem);max-width:16ch;}
.cta-band p{color:#E3C4CC;margin-top:10px;max-width:38ch;}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0;}

/* CONTACT */
.form-notice{padding:14px 18px;border-radius:var(--radius-s);margin-bottom:28px;font-size:0.92rem;font-weight:600;}
.form-notice-success{background:color-mix(in srgb, var(--accent) 12%, var(--surface));border:1px solid var(--accent);color:var(--accent);}
.form-notice-error{background:color-mix(in srgb, #B23A3A 14%, var(--surface));border:1px solid #B23A3A;color:#B23A3A;}
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:start;}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr;}}
form.contact-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:36px;display:grid;gap:18px;}
.form-row{display:grid;gap:6px;}
.form-row label{font-size:0.85rem;font-weight:700;color:var(--ink-soft);}
.form-row input,.form-row select,.form-row textarea{
  font-family:'Manrope',sans-serif;font-size:0.98rem;padding:12px 14px;
  border-radius:var(--radius-s);border:1px solid var(--border-strong);
  background:var(--bg);color:var(--ink);width:100%;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:480px){.form-row-2{grid-template-columns:1fr;}}
.contact-form .btn{justify-self:start;margin-top:6px;}

.info-card{background:var(--bg-alt);border-radius:var(--radius-m);padding:32px;}
.info-card h3{font-size:1.2rem;margin-bottom:18px;}
.info-line{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);}
.info-line:last-of-type{border-bottom:none;}
.info-line svg{flex-shrink:0;width:19px;height:19px;color:var(--accent);margin-top:2px;}
.info-line .lbl{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-faint);}
.info-line .val{font-weight:600;}
.info-line .val a{text-decoration:none;}
.info-line .val a:hover{color:var(--accent);}
.map-block{
  margin-top:22px;border-radius:var(--radius-s);
  background:repeating-linear-gradient(45deg, var(--border) 0 1px, transparent 1px 14px), var(--bg);
  border:1px solid var(--border-strong);
  aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--ink-faint);font-size:0.82rem;text-align:center;padding:14px;
}
.map-block svg{width:24px;height:24px;color:var(--accent);}
.map-block-embed{padding:0;overflow:hidden;background:none;}
.map-block-embed iframe{width:100%;height:100%;display:block;border:0;}

footer.site{border-top:1px solid var(--border);padding:56px 0 28px;margin-top:40px;}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  padding-bottom:36px;
  border-bottom:1px solid var(--border);
}
@media (max-width:720px){.footer-top{grid-template-columns:1fr;gap:30px;}}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:600;font-size:1.1rem;}
.footer-brand svg{width:20px;height:20px;flex-shrink:0;}
.footer-tagline{margin:10px 0 0;font-size:0.88rem;color:var(--ink-soft);max-width:34ch;}
.footer-col-brand .social{margin-top:18px;}
.social{display:flex;gap:14px;}
.social a{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
  transition:background 0.15s ease, color 0.15s ease;
}
.social a:hover{background:var(--accent);color:#FBEFEC;}
.footer-col h4{font-family:'Fraunces',serif;font-size:0.98rem;font-weight:600;margin:0 0 14px;color:var(--ink);}
.footer-col a,
.footer-col p{
  display:block;
  font-size:0.9rem;
  color:var(--ink-soft);
  text-decoration:none;
  margin:0 0 8px;
  line-height:1.5;
}
.footer-col a:hover{color:var(--accent);}
.footer-fine{
  margin-top:24px;
  font-size:0.8rem;
  color:var(--ink-faint);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.footer-legal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.footer-legal a{color:var(--ink-faint);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;}
.footer-legal a:hover{color:var(--accent);}
.footer-dot{color:var(--ink-faint);}

/* Generic content page (page.php) */
.entry-content p{margin-bottom:1em;}
.entry-content a{color:var(--accent);}