/*
Theme Name: Sarafina Events
Theme URI: https://www.sarafinaevents.com
Author: Sarafina Events
Description: Custom quiet-luxury theme for Sarafina Events — UK wedding, party and event-hire specialists. Built with editable Pages, a Portfolio post type (Weddings / Parties / Rentals) for image & video uploads, and a native enquiry form emailed via WordPress.
Version: 1.0
Requires PHP: 7.4
Text Domain: sarafina-events
*/

/* ============ Sarafina Events — shared stylesheet ============ */
:root{
  --cream:#f8f4ee;
  --cream-deep:#f1ebe1;
  --brown:#3e3229;
  --brown-soft:#5c4c3e;
  --taupe:#a68a6d;
  --taupe-light:#cdb99b;
  --line:#e2d8c8;
  --white:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost', sans-serif;
  color:var(--brown);
  background:var(--cream);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.serif{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  letter-spacing:.01em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{cursor:pointer;}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px;}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  color:var(--taupe);
  font-weight:400;
}

/* ============ HEADER ============ */
header{
  position:absolute;
  top:0;left:0;right:0;
  z-index:50;
  padding:30px 0 0;
}
header.solid{
  position:fixed;
  background:var(--brown);
  padding:18px 0;
  box-shadow:0 2px 18px rgba(0,0,0,.15);
}
header .wrap{display:flex;align-items:flex-start;justify-content:space-between;}
.logo-link{display:flex;flex-direction:column;align-items:flex-start;gap:7px;}
.logo-badge{background:var(--white);border-radius:10px;padding:5px 14px;display:inline-flex;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,.18);}
.logo-badge img{height:38px;width:auto;display:block;}
.nav-tagline{font-size:.64rem;color:var(--white);font-style:italic;letter-spacing:.01em;max-width:320px;line-height:1.35;text-shadow:0 1px 4px rgba(0,0,0,.55);}
header.solid .nav-tagline{color:var(--cream-deep);}
.footer-logo{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.footer-badge{background:var(--white);border-radius:10px;padding:8px 18px;display:inline-flex;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,.18);}
.footer-badge img{height:60px;width:auto;display:block;}
.footer-tagline{font-size:.78rem;color:var(--taupe-light);font-style:italic;line-height:1.4;max-width:280px;}

/* ============ THEN & NOW GALLERY ============ */
.then-now-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:900px;margin:0 auto;}
.then-now-item .img-wrap{height:380px;overflow:hidden;background:var(--cream-deep);}
.then-now-item img{width:100%;height:100%;object-fit:cover;}
.then-now-item .cap{padding:18px 4px 0;text-align:center;}
.then-now-item .cap h3{font-size:1.4rem;margin-top:6px;}
nav.main-nav ul{list-style:none;display:flex;gap:36px;}
nav.main-nav a{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--white);
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
nav.main-nav a:hover, nav.main-nav .current-menu-item a{border-color:var(--white);}
.nav-right{display:flex;align-items:center;gap:30px;padding-top:2px;}
.btn-enquire{
  border:1px solid var(--white);
  color:var(--white);
  padding:11px 24px;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:.25s ease;
  white-space:nowrap;
}
.btn-enquire:hover{background:var(--white);color:var(--brown);}

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;border:none;
  padding:6px;
  z-index:120;
}
.hamburger span{width:26px;height:1px;background:var(--white);display:block;transition:.3s ease;}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mobile-nav{
  position:fixed;inset:0;
  background:var(--brown);
  z-index:110;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:34px;
  transform:translateX(100%);
  transition:transform .4s ease;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav ul{list-style:none;display:flex;flex-direction:column;align-items:center;gap:34px;}
.mobile-nav a{
  font-family:'Cormorant Garamond',serif;
  font-size:2.1rem;
  font-style:italic;
  color:var(--cream);
}
.mobile-nav .btn-enquire{margin-top:10px;}

/* ============ HERO (page banners) ============ */
.hero{
  position:relative;
  height:100vh;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--white);
  overflow:hidden;
}
.hero.page-hero{height:62vh;min-height:400px;}
.hero img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.hero::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(30,22,15,.45) 0%, rgba(30,22,15,.15) 40%, rgba(30,22,15,.55) 100%);
}
.hero-content{position:relative;z-index:2;max-width:780px;padding:0 24px;}
.hero-content .eyebrow{color:var(--taupe-light);margin-bottom:22px;display:block;}
.hero-content h1{
  font-size:clamp(2.1rem, 5vw, 4.3rem);
  font-weight:300;
  line-height:1.15;
  font-style:italic;
}

/* ============ SECTIONS ============ */
section{padding:110px 0;}
.section-head{max-width:680px;margin:0 auto 56px;text-align:center;}
.section-head .eyebrow{margin-bottom:16px;display:block;}
.section-head h2{font-size:clamp(2rem,3.4vw,2.9rem);}

.intro{text-align:center;}
.intro p{max-width:760px;margin:0 auto 22px;font-size:1.08rem;color:var(--brown-soft);}
.intro .signoff{margin-top:36px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem;color:var(--taupe);}

.copy-block{max-width:760px;margin:0 auto;}
.copy-block p{margin-bottom:20px;color:var(--brown-soft);font-size:1.05rem;}
.copy-block h2{margin:44px 0 18px;font-size:2rem;}
.copy-block h2:first-child{margin-top:0;}

/* ============ PILLARS ============ */
.pillars{background:var(--white);}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;}
.pillar{position:relative;}
.pillar-img{height:520px;overflow:hidden;}
.pillar-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.pillar:hover .pillar-img img{transform:scale(1.06);}
.pillar-text{padding:34px 0 0;}
.pillar-text .eyebrow{margin-bottom:10px;display:block;}
.pillar-text h3{font-size:1.7rem;margin-bottom:14px;}
.pillar-text p{color:var(--brown-soft);font-size:.96rem;margin-bottom:20px;}
.link-more{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;border-bottom:1px solid var(--brown);padding-bottom:3px;}

/* ============ VALUES ============ */
.values{background:var(--cream-deep);}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px;text-align:center;}
.value h3{font-size:1.35rem;margin-bottom:16px;}
.value p{font-size:.92rem;color:var(--brown-soft);}

/* ============ GALLERY / PORTFOLIO GRID ============ */
.strip{display:grid;grid-template-columns:repeat(4,1fr);}
.strip img{height:280px;width:100%;object-fit:cover;}

.portfolio-filter{display:flex;justify-content:center;gap:30px;margin-bottom:50px;flex-wrap:wrap;}
.portfolio-filter button{
  background:none;border:none;font-family:'Jost',sans-serif;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--brown-soft);padding-bottom:6px;border-bottom:1px solid transparent;
}
.portfolio-filter button.active,.portfolio-filter button:hover{color:var(--brown);border-color:var(--taupe);}

.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.portfolio-card{position:relative;overflow:hidden;background:var(--white);}
.portfolio-card .img-wrap{height:300px;overflow:hidden;background:var(--cream-deep);}
.portfolio-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.portfolio-card:hover img{transform:scale(1.07);}
.portfolio-card .cap{padding:20px 4px;}
.portfolio-card .cap .eyebrow{margin-bottom:6px;display:block;}
.portfolio-card .cap h3{font-size:1.25rem;}
.portfolio-card .video-badge{
  position:absolute;top:14px;right:14px;background:rgba(62,50,41,.8);
  color:var(--cream);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;
}
.empty-note{text-align:center;color:var(--brown-soft);font-size:.95rem;padding:20px 0;}

/* ============ RENTALS LIST ============ */
.rentals-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 60px;max-width:900px;margin:0 auto;}
.rentals-grid li{
  list-style:none;padding:16px 0;border-bottom:1px solid var(--line);
  font-size:1rem;color:var(--brown-soft);
  display:flex;align-items:center;gap:12px;
}
.rentals-grid li::before{content:'—';color:var(--taupe);}

/* ============ CTA ============ */
.cta{text-align:center;padding:140px 0;background:var(--brown);color:var(--cream);}
.cta .eyebrow{color:var(--taupe-light);margin-bottom:18px;}
.cta h2{font-size:clamp(2rem,4vw,3rem);font-style:italic;margin-bottom:38px;}
.btn-light{
  display:inline-block;border:1px solid var(--cream);
  padding:15px 42px;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  transition:.25s ease;
}
.btn-light:hover{background:var(--cream);color:var(--brown);}

/* ============ ENQUIRY FORM ============ */
.enquiry-wrap{max-width:760px;margin:0 auto;}
.enquiry-intro{text-align:center;margin-bottom:56px;}
.enquiry-intro h1{font-size:clamp(2.2rem,4vw,3.2rem);font-style:italic;margin-bottom:18px;}
.enquiry-intro p{color:var(--brown-soft);}
.enquiry-direct{text-align:center;margin-bottom:56px;}
.enquiry-direct h3{font-size:1.3rem;margin-bottom:6px;}
.enquiry-direct a{color:var(--taupe);}

form.enquiry-form{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;}
form.enquiry-form .full{grid-column:1 / -1;}
.field label{
  display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.15em;color:var(--brown-soft);margin-bottom:10px;
}
.field input, .field select, .field textarea{
  width:100%;border:none;border-bottom:1px solid var(--line);
  background:transparent;padding:10px 2px;font-family:'Jost',sans-serif;
  font-size:.98rem;color:var(--brown);
}
.field textarea{resize:vertical;min-height:120px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--taupe);}
.submit-row{grid-column:1 / -1;text-align:center;margin-top:16px;}
.btn-submit{
  border:1px solid var(--brown);background:var(--brown);color:var(--cream);
  padding:15px 48px;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  transition:.25s ease;
}
.btn-submit:hover{background:transparent;color:var(--brown);}
.form-note{grid-column:1 / -1;font-size:.8rem;color:var(--brown-soft);text-align:center;margin-top:6px;}
.form-success{
  display:none;text-align:center;padding:60px 20px;
  border:1px solid var(--line);
}
.form-success.show{display:block;}
.form-success h3{font-size:1.6rem;margin-bottom:10px;}
.form-error{
  text-align:center;padding:20px;margin-bottom:30px;
  border:1px solid #b5544a;color:#b5544a;font-size:.9rem;
}

/* ============ FOOTER ============ */
footer{background:var(--brown);color:var(--taupe-light);padding:70px 0 30px;font-size:.85rem;}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-logo{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.6rem;color:var(--cream);margin-bottom:14px;}
.footer-col h4{text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;color:var(--white);margin-bottom:18px;font-weight:400;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px;}
.footer-col a:hover{color:var(--white);}
.social-row{display:flex;gap:16px;margin-top:6px;}
.social-row a{width:36px;height:36px;border:1px solid rgba(255,255,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.25s ease;}
.social-row a:hover{background:var(--cream);border-color:var(--cream);}
.social-row svg{width:15px;height:15px;fill:var(--cream-deep);}
.social-row a:hover svg{fill:var(--brown);}
.footer-bottom{padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:.75rem;color:rgba(232,222,205,.7);}
.footer-bottom .links a{margin-left:20px;}
.footer-bottom .links button{background:none;border:none;color:inherit;font:inherit;cursor:pointer;margin-left:20px;text-decoration:underline;text-underline-offset:3px;}

/* ============ POLICY MODAL ============ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(30,22,15,.6);z-index:200;align-items:center;justify-content:center;padding:24px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--cream);color:var(--brown);max-width:640px;max-height:80vh;overflow-y:auto;padding:48px;position:relative;}
.modal-box h3{font-size:1.7rem;margin-bottom:18px;}
.modal-box p{font-size:.92rem;color:var(--brown-soft);margin-bottom:14px;}
.modal-close{position:absolute;top:18px;right:22px;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--brown);}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .pillar-grid{gap:0 24px;}
  .value-grid{gap:30px;}
  .wrap{padding:0 28px;}
}
@media(max-width:900px){
  nav.main-nav, .nav-right .btn-enquire{display:none;}
  .hamburger{display:flex;}
  .pillar-grid{grid-template-columns:1fr;gap:50px;}
  .pillar-img{height:420px;}
  .value-grid{grid-template-columns:1fr 1fr;}
  .strip{grid-template-columns:repeat(2,1fr);}
  .portfolio-grid{grid-template-columns:1fr 1fr;}
  section{padding:80px 0;}
  .rentals-grid{grid-template-columns:1fr;}
  form.enquiry-form{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .wrap{padding:0 22px;}
  .value-grid{grid-template-columns:1fr;}
  .strip{grid-template-columns:1fr 1fr;}
  .strip img{height:180px;}
  .portfolio-grid{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .hero{min-height:520px;}
  .hero.page-hero{height:48vh;min-height:340px;}
  .cta{padding:90px 0;}
  .footer-top{flex-direction:column;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .footer-bottom .links{display:flex;flex-wrap:wrap;}
  .footer-bottom .links a, .footer-bottom .links button{margin-left:0;margin-right:20px;}
  .nav-tagline{display:none;}
  .logo-badge img{height:30px;}
  .then-now-grid{grid-template-columns:1fr;}
  .then-now-item .img-wrap{height:260px;}
}