/* ===== Organic-Surf base ===== */
:root{
  --green:#2F5D3A;
  --green-dark:#23442A;
  --sand:#D9C8A0;
  --cacao:#8B5E3C;
  --white:#fff;
  --overlay:rgba(0,0,0,.45);
}

*{box-sizing:border-box}

/* page bg */
html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-image: url('../assets/images/background.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* global text in content */
body, .page, .page p, .page h1, .page h2, .page h3, .page h4, .page h5, .page h6 {
  color: var(--white);
}

/* ===== Layout helpers ===== */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.page{
  padding:60px 0;
  background:var(--overlay);
  backdrop-filter:saturate(120%) blur(1px);
}

/* ===== Header & Nav ===== */
.site-header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  padding:14px 0 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.logo{height:180px; display:block; margin:0 auto 80px}

nav ul{
  list-style:none; margin:6px 0 0; padding:0;
  display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
}
nav a{
  color:var(--white); text-decoration:none; font-weight:700; letter-spacing:.3px;
  padding:6px 10px; border-radius:8px; transition:all .15s ease;
}
nav a:hover{background:rgba(255,255,255,.12)}
nav a.active{background:var(--green);}

/* ===== Hero ===== */
.hero-image{
  background-image:url('https://pavonesrealtypros.com/wp-content/uploads/WPL/210/img_20250715_101208_edited-1.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  color:var(--white);
  text-shadow:0 1px 3px rgba(0,0,0,.75);
  min-height:90vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.hero-image::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--overlay);
}
.hero-image > *{
  position:relative;
  z-index:1;
  max-width:800px;
  text-align:center;
}
.hero-image h1{
  font-family:'Cinzel', serif;
  font-size:clamp(28px, 4vw, 52px);
  font-weight:700;
  line-height:1.2;
  margin-bottom:20px;
}
.hero-image p{
  font-family:'Cinzel', serif;
  font-size:clamp(18px, 2.2vw, 28px);
  font-weight:400;
  max-width:700px;
  margin:0 auto;
}

/* ===== CTA row + green button ===== */
.hero-image .cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:20px;
}
.hero-image .btn-box{
  width:100%;
  text-align:center;
  margin-top:8px;
}

/* Link-style CTAs (readable on dark hero) */
.cta-button {
  color: var(--sand);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-bottom .2s ease;
  padding: 4px 0;
}
.cta-button:hover {
  color: #fff;
  border-bottom: 2px solid var(--sand);
}
.cta-button.cta-secondary {
  color: #ccc;
  font-weight: 600;
}
.cta-button.cta-secondary:hover {
  color: #fff;
  border-bottom: 2px solid #ccc;
}

/* Green CTA */
.btn-green{
  display:inline-block;
  padding:14px 28px;
  background-color:#2e7d32;
  color:#fff;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.2px;
  border-radius:14px;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:background-color .25s ease, box-shadow .25s ease, transform .15s ease;
}
.btn-green:hover{
  background-color:#1b5e20;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  transform:translateY(-1px);
}
.btn-green:active{
  transform:translateY(0);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* ===== Video responsive ===== */
.video-container{
  position:relative;
  padding-bottom:56.25%; /* 16:9 */
  height:0;
  overflow:hidden;
  max-width:100%;
}
.video-container iframe{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
}
.video-container.large{
  max-width:1200px;
  margin:0 auto;
}

/* ===== Footer (desktop/tablet default: one single line) ===== */
.site-footer{
  width:100%;
  text-align:center;
  padding:20px 0;
  background:linear-gradient(180deg, #6e2f2f 0%, #4e1f1e 100%);
  border-top:1px solid rgba(255,255,255,.08);
}

.footer-content{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;

  /* one-line layout on desktop/tablet */
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  flex-wrap:nowrap;
}

.footer-logo{ height:60px; width:auto; }

.footer-bottom{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:nowrap;
}

.footer-email a{
  color: var(--sand);
  text-decoration: none;
  font-size: 0.95rem;
}
.footer-email a:hover{ color:#fff; }

.footer-copy{
  opacity:.9;
  font-size:0.9rem;
}

/* Social icons */
.social-links{
  display:flex; gap:12px; align-items:center; justify-content:center;
}
.social-links a{
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
}
.social-links img{
  max-width:100%; max-height:100%; display:block;
  filter:none;
  transition:transform .3s ease, opacity .2s ease;
  opacity:.95;
}
.social-links img:hover{ transform:scale(1.1); opacity:1; }

/* Partners (if used) */
.footer-logos{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin:12px 0;
}
.partner-logo{
  height:40px;
  max-width:180px;
  object-fit:contain;
  opacity:.92;
  transition:opacity .2s ease, transform .2s ease;
}
.partner-logo:hover{ opacity:1; transform:translateY(-1px); }

/* ===== Facts list ===== */
.facts{background:rgba(0,0,0,.45); padding:14px 16px; border-radius:12px}
.facts li{margin:6px 0}

/* ===== Links in content ===== */
.page a{color:var(--sand); text-decoration:underline}
.page a:hover{color:#fff}

/* ===== Carousel ===== */
.carousel{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:rgba(0,0,0,.25);
}
.car-track{
  display:flex;
  transition:transform .4s ease;
  list-style:none;
  margin:0;
  padding:0;
}
.car-slide{ min-width:100%; }
.car-slide img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-radius:12px;
}
.car-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.45);
  color:#fff;
  border:0;
  width:42px; height:42px;
  border-radius:50%;
  cursor:pointer;
  font-size:26px; line-height:42px;
  user-select:none;
}
.car-btn:hover{ background:rgba(0,0,0,.65); }
.car-btn.prev{ left:10px; }
.car-btn.next{ right:10px; }
.car-dots{
  position:absolute;
  left:0; right:0; bottom:10px;
  display:flex; gap:6px; justify-content:center;
}
.car-dots button{
  width:9px; height:9px;
  border-radius:50%;
  border:0; cursor:pointer;
  background:rgba(255,255,255,.5);
}
.car-dots button.active{ background:#fff; }

/* ===== Responsive (≤700px) ===== */
@media (max-width:700px){
  /* Header: thinner */
  .site-header{ padding: 6px 0; }
  .logo{
    height: 120px;                 /* your last request */
    margin: 0 auto 12px;
  }
  nav ul{ gap: 10px; margin-top: 2px; }
  nav a{ font-size: 0.9rem; padding: 4px 6px; }

  /* Hero tighter */
  .hero-image{ padding: 60px 12px 40px; }
  .page{ padding: 32px 0; }

  /* Footer: 2-line compact version */
  .footer-content{
    flex-direction: column;        /* stack for mobile */
    gap: 6px;
  }

  /* Line 1: logo centered at 90px high */
  .footer-top{ text-align:center; margin-bottom:6px; }
  .footer-logo{ height:90px; width:auto; }

  /* Line 2: everything inline and centered */
  .footer-bottom{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    flex-wrap:nowrap;              /* keep single line */
    font-size:0.85rem;
    text-align:center;
  }

  .footer-bottom .social-links{ gap:8px; }
  .footer-bottom .social-links a{
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
  }
  .footer-bottom .social-links img{ max-width:100%; max-height:100%; }

  .footer-email a{ font-size:0.85rem; }
  .footer-copy{ font-size:0.8rem; opacity:.85; }
}

/* ===== Buttons (global) ===== */
.btn-primary{
  display:inline-block;
  padding:12px 22px;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  letter-spacing:.2px;
  text-decoration:none;
  border-radius:12px;
  border: 2px solid transparent;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary:hover{ background: var(--green-dark); transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.22); }
.btn-primary:active{ transform:none; box-shadow:0 6px 18px rgba(0,0,0,.18); }

.btn-secondary{
  display:inline-block;
  padding:12px 22px;
  background: transparent;
  color: var(--sand);
  font-weight: 700;
  letter-spacing:.2px;
  text-decoration:none;
  border-radius:12px;
  border: 2px solid var(--sand);
  transition: color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn-secondary:hover{ color:#fff; border-color:#fff; transform: translateY(-1px); }

/* ===== Thank-You Popup (modal) ===== */
.popup{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(1px);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.popup.show{ display:flex; }

.popup-content{
  background: var(--green-dark);
  color: var(--white);
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  animation: pop-in .18s ease-out;
}
.popup-content h2{
  margin: 0 0 10px 0;
  font-size: 1.6rem;
}
.popup-content p{
  margin: 0 0 16px 0;
  color: #EAEAEA;
}

.popup-actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}

.popup-close{
  margin-top: 8px;
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  background: #fff;
  color: var(--green-dark);
  font-weight: 700;
  cursor: pointer;
}
.popup-close:hover{ filter: brightness(0.95); }

@keyframes pop-in{
  from{ transform: translateY(6px) scale(.98); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

body.no-scroll{ overflow: hidden; }

@media (max-width:700px){
  .popup-content{ padding: 24px 18px; border-radius: 14px; }
  .popup-content h2{ font-size: 1.4rem; }
}