/*
Theme Name: Zivogosce Ivop
Theme URI: https://zivogosce-apartmany.cz/
Author: ilstudio
Author URI: https://ilstudio.hr/
Description: Custom WordPress tema za Zivogosce Apartmany, izradena po strukturi Ivop Apartmani teme. Bootstrap 5 grid i komponente, WPML kompatibilno, custom post type "apartman" za smjestajne jedinice.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ilstudio
*/

/* ==========================================================================
   Design tokens (ista paleta kao u HTML mockupu za Zivogosce Apartmany)
   ========================================================================== */
:root{
  --pine:#1F3B2C;
  --pine-dark:#132A1E;
  --sand:#F2E9D8;
  --sand-light:#F8F3E9;
  --teal:#2E6E7E;
  --amber:#D98E3B;
  --ink:#2A2621;
  --paper:#FFFCF6;

  --font-display:'Fraunces', serif;
  --font-body:'Public Sans', sans-serif;
}

body{
  font-family: var(--font-body);
  background: var(--sand-light);
  color: var(--ink);
}

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

em{
  font-style: italic;
  color: var(--teal);
}

a{
  color: var(--pine);
}
a:hover{
  color: var(--teal);
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.site-navbar{
  background: rgba(248,243,233,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(31,59,44,0.1);
}
.site-navbar .navbar-brand{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--pine) !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-navbar .navbar-brand svg{
  width: 22px;
  height: 22px;
  color: var(--amber);
}
.site-navbar .nav-link{
  font-weight: 500;
  color: var(--ink) !important;
  position: relative;
}
.site-navbar .nav-link::after{
  content:"";
  position:absolute; left:0.75rem; bottom:0.25rem;
  width:0; height:1.5px; background: var(--amber);
  transition: width .25s;
}
.site-navbar .nav-link:hover::after{ width: calc(100% - 1.5rem); }
.btn-navcta{
  background: var(--pine);
  color: var(--sand-light) !important;
  font-weight: 600;
  border-radius: 2px;
  padding: 0.55rem 1.4rem;
}
.btn-navcta:hover{ background: var(--pine-dark); color: #fff !important; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-amber{
  background: var(--amber);
  border-color: var(--amber);
  color: var(--pine-dark);
  font-weight: 600;
  border-radius: 2px;
}
.btn-amber:hover{
  background: #c07d2e;
  border-color: #c07d2e;
  color: var(--pine-dark);
}
.btn-outline-pine{
  border: 1.5px solid var(--pine);
  color: var(--pine);
  font-weight: 600;
  border-radius: 2px;
}
.btn-outline-pine:hover{
  background: var(--pine);
  color: var(--sand-light);
}

/* ==========================================================================
   Section utility
   ========================================================================== */
.section{ padding: 5.5rem 0; }
.section-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700;
  color: var(--teal); margin-bottom: 1.2rem;
}
.section-eyebrow::before{ content:""; width:22px; height:1px; background: var(--teal); }
.bg-paper{ background: var(--paper); }
.bg-pine{ background: var(--pine); color: var(--sand-light); }
.bg-pine .section-eyebrow{ color: var(--amber); }
.bg-pine .section-eyebrow::before{ background: var(--amber); }
.bg-pine h2{ color: var(--sand-light); }
.text-pine{ color: var(--pine); }
.text-teal{ color: var(--teal); }
.text-amber{ color: var(--amber); }

/* ==========================================================================
   Hero - postcard layout
   ========================================================================== */
.hero{ padding: 4.5rem 0 5.5rem; }
.hero h1{ font-size: clamp(2.2rem, 4.4vw, 3.4rem); color: var(--pine); }
.hero .lead{ max-width: 46ch; color:#4a453d; }
.postcards{ position:relative; min-height: 360px; }
.pc{
  position:absolute; border:6px solid var(--paper);
  box-shadow: 0 14px 34px rgba(31,59,44,0.22); border-radius:3px; background-size:cover; background-position:center;
}
.pc1{ width:78%; height:78%; top:0; left:8%; transform: rotate(-4deg); z-index:1; }
.pc2{ width:52%; height:52%; bottom:-4%; right:0; transform: rotate(6deg); z-index:2; }
.pc-label{
  position:absolute; bottom:14px; left:16px; color:#fff;
  font-family: var(--font-display); font-style: italic; font-size:0.95rem; opacity:0.9;
}

/* ==========================================================================
   Apartman cards
   ========================================================================== */
.apt-card{
  background: var(--paper);
  border: none;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(31,59,44,0.08);
  transition: transform .25s, box-shadow .25s;
  height: 100%;
}
.apt-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 34px rgba(31,59,44,0.15); }
.apt-card .apt-photo{
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: var(--teal);
}
.apt-card .apt-tag{
  position:absolute; top:14px; left:14px;
  background: var(--pine); color: var(--sand-light);
  padding:4px 12px; border-radius:2px; font-size:0.78rem; font-weight:700; letter-spacing:0.03em;
}
.apt-card .card-body h3{ font-size:1.2rem; color: var(--pine); }
.apt-card .cap{ font-size:0.86rem; color: var(--teal); font-weight:600; }
.apt-amenity{
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.78rem; color:#5a544a; margin:2px 8px 2px 0;
}
.apt-amenity i{ color: var(--teal); }

/* ==========================================================================
   Amenity / feature blocks
   ========================================================================== */
.feature-box{
  background: var(--paper);
  border-radius: 4px;
  padding: 2rem 1rem;
  text-align: center;
  height: 100%;
}
.feature-box .icon-circle{
  width:46px; height:46px; border-radius:50%;
  background: var(--sand);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 1rem;
  color: var(--teal); font-size:1.2rem;
}
.feature-box h4{ font-size:1rem; color: var(--pine); }
.feature-box p{ font-size:0.85rem; color:#6a6459; margin-bottom:0; }

/* ==========================================================================
   Location facts
   ========================================================================== */
.fact{ border-top:1px solid rgba(242,233,216,0.25); padding-top:1rem; }
.fact .num{ font-family: var(--font-display); font-size:1.8rem; color: var(--amber); }
.fact .lbl{ font-size:0.86rem; color:#c9d4c9; }
.loc-map{
  aspect-ratio: 1/1;
  border-radius:4px;
  background: radial-gradient(circle at 30% 30%, var(--teal), var(--pine-dark) 75%);
  position: relative;
}
.loc-map .pin{
  position:absolute; top:46%; left:38%; width:16px; height:16px;
  background: var(--amber); border-radius:50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 0 0 6px rgba(217,142,59,0.25);
}

/* ==========================================================================
   News / blog cards
   ========================================================================== */
.news-card{
  background: var(--paper);
  border: none;
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
}
.news-card .news-thumb{
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: var(--sand);
}
.news-card .card-title{ color: var(--pine); font-size:1.05rem; }
.news-card .card-text{ font-size:0.9rem; color:#5a544a; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-card{
  background: var(--pine);
  color: var(--sand-light);
  border-radius: 6px;
  padding: 2.75rem;
  border-top: 3px solid var(--amber);
}
.contact-card .k{ color: var(--amber); font-weight:700; min-width:100px; display:inline-block; }
.contact-form .form-control{
  border: 1.5px solid rgba(31,59,44,0.2);
  border-radius: 3px;
  background: var(--sand-light);
}
.contact-form .form-control:focus{
  border-color: var(--teal);
  box-shadow: 0 0 0 0.2rem rgba(46,110,126,0.15);
}
label {
    display: inline-block;
    width: 100%;
}
/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--pine-dark);
  color: #a9b8ab;
  padding: 2.75rem 0;
  font-size: 0.88rem;
}
.site-footer a{ color: #c9d4c9; }

@media (max-width: 767.98px){
  .postcards{ min-height: 280px; margin-top: 1.5rem; }
}