/*
Theme Name: Pacha Estate
Theme URI: https://example.com
Author: Pacha Estate
Description: A resort/hill-estate theme with Home, About, Facilities, Tariff, Gallery and Contact pages built in. Activating this theme automatically creates all six pages with the correct design.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: pacha-estate
*/

/* ============================================================
   PACHA ESTATE — design tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #1A231D;
  --tea:        #35533F;
  --tea-deep:   #223629;
  --sage:       #EEF0E6;
  --paper:      #F8F7F1;
  --gold:       #C9962F;
  --gold-deep:  #A5761E;
  --mist:       #8FA79B;
  --line:       rgba(26,35,29,0.12);
  --shadow:     0 12px 32px rgba(26,35,29,0.10);
  --radius:     2px;
  --maxw:       1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--sage);
  color: var(--ink);
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight: 600;
  color: var(--tea-deep);
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 5vw, 4rem); font-weight:700; line-height:1.05; }
h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1em; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--gold-deep);
  display:inline-block;
  margin-bottom: .9em;
}
.lede{ font-size: 1.15rem; color: #3C4A40; max-width: 640px; }
.mono{ font-family:'IBM Plex Mono', monospace; }

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding: .85em 1.6em;
  border-radius: var(--radius);
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:.92rem;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background: var(--tea-deep); color: var(--paper); }
.btn-primary:hover{ background: var(--gold-deep); transform: translateY(-2px); }
.btn-ghost{ background:transparent; border-color: rgba(248,247,241,.5); color: var(--paper); }
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold); }
.btn-outline{ background:transparent; border-color: var(--tea-deep); color: var(--tea-deep); }
.btn-outline:hover{ background: var(--tea-deep); color: var(--paper); }
:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: 3px; }

header.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(248,247,241,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.top-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 32px;
  max-width: var(--maxw); margin:0 auto;
}
.brand{
  font-family:'Fraunces', serif; font-weight:700; font-size:1.25rem;
  color: var(--tea-deep); display:flex; align-items:center; gap:.55em;
  letter-spacing: -.01em;
}
.brand .mark{ width: 28px; height:28px; flex-shrink:0; }
.brand .sub{
  font-family:'IBM Plex Mono', monospace; font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color: var(--mist); display:block; font-weight:500;
}
nav.primary{ display:flex; gap: 30px; }
nav.primary a{
  font-size:.88rem; font-weight:500; color: var(--tea-deep);
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
nav.primary a:hover, nav.primary a.active{ border-color: var(--gold); color: var(--gold-deep); }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; }

@media (max-width: 860px){
  nav.primary{
    position:fixed; inset: 66px 0 auto 0; background: var(--paper);
    flex-direction:column; padding: 18px 32px 26px; gap:14px;
    border-bottom: 1px solid var(--line); transform: translateY(-140%);
    transition: transform .25s ease;
  }
  nav.primary.open{ transform: translateY(0); }
  .menu-toggle{ display:block; }
  .nav-cta .btn-outline{ display:none; }
}

.hero{
  position:relative;
  background: linear-gradient(180deg, var(--tea-deep) 0%, var(--tea) 68%, var(--tea) 100%);
  color: var(--paper);
  overflow:hidden;
  padding: 96px 0 0;
}
.hero .wrap{ position:relative; z-index:2; padding-bottom: 70px; }
.hero .eyebrow{ color: var(--gold); }
.hero h1{ color: var(--paper); max-width: 780px; }
.hero .lede{ color: rgba(248,247,241,.82); }
.hero-actions{ display:flex; gap:16px; margin-top: 30px; flex-wrap:wrap; }
.hero-hills{ position:absolute; left:0; right:0; bottom:-2px; z-index:1; opacity:.9; }
.hero-mote{ position:absolute; inset:0; z-index:0;
  background-image: radial-gradient(circle at 20% 30%, rgba(201,150,47,0.14), transparent 55%);
}
.page-hero{
  background: linear-gradient(180deg, var(--tea-deep), var(--tea));
  color: var(--paper); padding: 64px 0 56px; position:relative; overflow:hidden;
}
.page-hero h1{ color:var(--paper); }
.page-hero .lede{ color: rgba(248,247,241,.82); }

.subnav{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 66px; z-index: 40;
}
.subnav .wrap{ display:flex; gap: 26px; overflow-x:auto; padding: 14px 32px; }
.subnav a{
  font-family:'IBM Plex Mono', monospace; font-size: .74rem; letter-spacing:.06em;
  text-transform: uppercase; white-space:nowrap; color: var(--mist);
  padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.subnav a:hover, .subnav a.active{ color: var(--gold-deep); border-color: var(--gold); }

.hill-divider{ display:block; width:100%; height:auto; }
.hill-divider.flip{ transform: scaleY(-1); }

section{ padding: 84px 0; }
section.tight{ padding: 56px 0; }
.section-head{ max-width: 640px; margin-bottom: 50px; }
.dark{ background: var(--tea-deep); color: var(--paper); }
.dark h2, .dark h3{ color: var(--paper); }
.dark .lede{ color: rgba(248,247,241,.8); }

.grid{ display:grid; gap: 28px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.card .num{ font-family:'IBM Plex Mono', monospace; color: var(--gold-deep); font-size:.8rem; }
.icon-tile{
  width: 46px; height:46px; border-radius: 50%;
  background: var(--sage); display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px; color: var(--tea-deep);
}

.tile{
  position:relative; border-radius: var(--radius); overflow:hidden;
  aspect-ratio: 4/3; display:flex; align-items:flex-end; padding: 18px;
  color: var(--paper); font-family:'IBM Plex Mono', monospace; font-size:.78rem;
  letter-spacing:.04em; background: var(--tea-deep);
}
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.tile span{ position:relative; z-index:2; text-transform:uppercase; }
.tile::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(26,35,29,0) 40%, rgba(26,35,29,.78)); z-index:1; }
.tile.wide{ aspect-ratio: 16/9; }
.tile.tall{ aspect-ratio: 3/4; }

.quote{
  font-family:'Fraunces', serif; font-style: italic; font-weight:500;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--tea-deep);
  max-width: 760px; line-height:1.5;
}
.quote-attr{ font-family:'IBM Plex Mono', monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--mist); margin-top: 18px; }

table.tariff{ width:100%; border-collapse: collapse; background: var(--paper); }
table.tariff th, table.tariff td{ text-align:left; padding: 16px 18px; border-bottom: 1px solid var(--line); }
table.tariff thead th{
  font-family:'IBM Plex Mono', monospace; text-transform:uppercase; font-size:.72rem;
  letter-spacing:.08em; color: var(--mist); font-weight:500; border-bottom: 2px solid var(--tea-deep);
}
table.tariff td.price{ font-family:'IBM Plex Mono', monospace; color: var(--gold-deep); font-weight:500; }
.table-wrap{ overflow-x:auto; border: 1px solid var(--line); }
.tariff-note{ font-size:.9rem; color:#5B6A60; margin-top: 18px; }

form.contact-form{ display:grid; gap: 18px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px){ .form-row{ grid-template-columns: 1fr; } }
label{ font-size:.82rem; font-weight:600; margin-bottom:6px; display:block; color: var(--tea-deep); }
input, textarea, select{
  width:100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); font-family:'Work Sans', sans-serif; font-size: .95rem; color: var(--ink);
}
input:focus, textarea:focus, select:focus{ border-color: var(--gold-deep); }
textarea{ min-height: 130px; resize: vertical; }

.info-list{ list-style:none; margin:0; padding:0; display:grid; gap: 16px; }
.info-list li{ display:flex; gap: 14px; align-items:flex-start; }
.info-list .k{ font-family:'IBM Plex Mono', monospace; font-size:.72rem; text-transform:uppercase; color: var(--mist); min-width: 92px; padding-top:2px; }

footer.site-footer{ background: var(--ink); color: rgba(248,247,241,.78); position: relative; overflow:hidden; }
footer .wrap{ position:relative; z-index:2; padding: 64px 32px 34px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr; } }
footer h4{ color: var(--paper); font-size:.85rem; font-family:'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:.08em; margin-bottom: 18px; }
footer .brand{ color: var(--paper); }
footer .brand .sub{ color: var(--mist); }
footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
footer a:hover{ color: var(--gold); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 10px;
  border-top: 1px solid rgba(248,247,241,.14); margin-top: 46px; padding-top: 24px;
  font-size:.8rem; color: rgba(248,247,241,.5);
}
.social-row{ display:flex; gap: 14px; margin-top: 6px; }
.social-row a{
  width:34px; height:34px; border:1px solid rgba(248,247,241,.24); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.social-row a:hover{ border-color: var(--gold); }

.sister-strip{ background: var(--sage); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sister-scroll{ display:flex; gap: 20px; overflow-x:auto; padding: 8px 0; }
.sister-item{ flex: 0 0 220px; background: var(--paper); border:1px solid var(--line); padding: 20px; }
.sister-item h4{ font-family:'Fraunces', serif; font-size:1.02rem; color: var(--tea-deep); margin: 0 0 6px; }
.sister-item span{ font-family:'IBM Plex Mono', monospace; font-size:.68rem; color: var(--mist); text-transform:uppercase; }

.divider-line{ height:1px; background: var(--line); border:none; margin: 0; }
.cta-band{ background: var(--gold); color: var(--ink); padding: 56px 0; text-align:center; }
.cta-band h2{ color: var(--ink); }

.form-success{ background: var(--sage); border:1px solid var(--line); padding: 20px 24px; border-radius: var(--radius); color: var(--tea-deep); font-weight: 500; }
.form-error{ background: #F7E3E0; border:1px solid #D98C7F; padding: 20px 24px; border-radius: var(--radius); color: #7A2E22; }