/* Lophams' Village Hall - redesign prototype
   Uses only: web-safe layout (flex rows/columns), heading levels H1-H6,
   two button styles (primary/secondary), images, simple colour & spacing.
   Fonts (Oswald + Roboto) are already confirmed available in the site's
   123-reg font picker, so this palette/type pairing is safe to rebuild. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root{
  --green-dark:#2c3e2f;
  --green-mid:#3f5c46;
  --cream:#faf6ee;
  --cream-alt:#f1ead9;
  --terracotta:#d9603b;
  --terracotta-dark:#b94b2b;
  --text-dark:#25302a;
  --text-muted:#5b675e;
  --white:#ffffff;
  --radius:10px;
  --shadow:0 4px 16px rgba(44,62,47,0.10);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Roboto',Arial,sans-serif;
  color:var(--text-dark);
  background:var(--cream);
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Oswald',Arial,sans-serif;
  color:var(--green-dark);
  font-weight:600;
  line-height:1.25;
  margin:0 0 0.6em 0;
}
h1{font-size:2.6rem;color:var(--white);}
h2{font-size:1.9rem;}
h3{font-size:1.3rem;}
p{margin:0 0 1em 0;}
a{color:var(--terracotta-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
ul{margin:0 0 1em 0;padding-left:1.2em;}
.small{font-size:0.9rem;color:var(--text-muted);}
.note{font-size:0.85rem;color:var(--text-muted);}

/* header */
.site-header{
  background:var(--green-dark);
  position:sticky;top:0;z-index:20;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.header-inner{
  max-width:1180px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.logo-link{display:flex;align-items:center;gap:10px;color:var(--white);}
.logo-link:hover{text-decoration:none;}
.logo{width:44px;height:44px;border-radius:50%;object-fit:cover;}
.logo-text{font-family:'Oswald',Arial,sans-serif;font-size:1.1rem;color:var(--white);font-weight:600;}
.main-nav{flex:1;}
.main-nav ul{
  display:flex;flex-wrap:wrap;gap:4px 22px;
  list-style:none;margin:0;padding:0;
}
.main-nav a{
  color:#e7ede8;font-size:0.92rem;font-weight:500;
  letter-spacing:.02em;text-transform:uppercase;
  padding:6px 2px;border-bottom:2px solid transparent;
}
.main-nav a:hover,.main-nav a.active{
  color:var(--white);border-bottom:2px solid var(--terracotta);text-decoration:none;
}

/* buttons */
.btn{
  display:inline-block;padding:11px 22px;border-radius:6px;
  font-family:'Oswald',Arial,sans-serif;font-weight:600;font-size:0.95rem;
  letter-spacing:.02em;text-transform:uppercase;
  border:2px solid transparent;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--terracotta);color:var(--white);}
.btn-primary:hover{background:var(--terracotta-dark);}
.btn-secondary{background:transparent;color:var(--white);border-color:var(--white);}
.btn-secondary:hover{background:var(--white);color:var(--green-dark);}
/* use btn-outline (not btn-secondary) for buttons on light/cream/white backgrounds -
   btn-secondary is white-on-transparent and is only readable over a dark hero image */
.btn-outline{background:transparent;color:var(--green-dark);border-color:var(--green-dark);}
.btn-outline:hover{background:var(--green-dark);color:var(--white);}
.nav-contact{
  background:var(--terracotta);color:var(--white);border-color:var(--terracotta);
  padding:9px 20px;font-size:0.85rem;
}
.nav-contact:hover{background:var(--terracotta-dark);border-color:var(--terracotta-dark);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0;align-items:center;}

/* hero */
.hero{
  background-size:cover;background-position:center;
  padding:80px 24px;text-align:center;
}
.hero-inner{max-width:760px;margin:0 auto;}
.hero-subtitle{color:#f1ede4;font-size:1.15rem;max-width:640px;margin:0 auto;}

/* sections */
.section{padding:56px 24px;}
.section.alt{background:var(--cream-alt);}
.section-inner{max-width:1180px;margin:0 auto;}

.row{display:flex;gap:32px;flex-wrap:wrap;}
.row .col{flex:1 1 280px;}
.row.two-up .col{flex:1 1 360px;}
.row.three-up .col{flex:1 1 280px;}

.intro-card{
  background:var(--white);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);
}

.card{
  background:var(--white);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);
}
.card-contact{margin:0.2em 0;font-size:0.92rem;color:var(--text-muted);}

.banner{
  background:var(--terracotta);color:var(--white);
  border-radius:var(--radius);padding:32px;text-align:center;
}
.banner p{color:var(--white);}
.banner-date{font-family:'Oswald',Arial,sans-serif;font-size:1.4rem;font-weight:600;margin-bottom:8px;}

.cta-strip{
  background:var(--white);border:2px dashed var(--terracotta);
  border-radius:var(--radius);padding:20px;text-align:center;
}
.cta-strip p{margin:0;font-weight:500;}

.plain-list{list-style:none;padding:0;margin:0 0 1em 0;}
.plain-list li{
  padding:6px 0 6px 22px;position:relative;
}
.plain-list li::before{
  content:"";position:absolute;left:0;top:14px;width:8px;height:8px;
  background:var(--terracotta);border-radius:50%;
}
.plain-list.two-col{columns:2;column-gap:32px;}
.plain-list.two-col li{break-inside:avoid;}

.gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
}
.gallery-item img{
  width:100%;height:190px;object-fit:cover;border-radius:var(--radius);
  box-shadow:var(--shadow);display:block;
}

/* pricing table - built from plain rows/columns (no <table> tag needed),
   so it maps directly onto 123-reg's row/column blocks */
.price-table-scroll{overflow-x:auto;margin-bottom:28px;}
.price-table{
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;min-width:640px;
}
.price-row{display:flex;flex-wrap:nowrap;border-bottom:1px solid var(--cream-alt);}
.price-row:last-child{border-bottom:none;}
.price-row.head{background:var(--green-dark);}
.price-row.head .price-cell{color:var(--white);font-family:'Oswald',Arial,sans-serif;font-weight:600;font-size:0.85rem;text-transform:uppercase;letter-spacing:.03em;}
.price-cell{
  flex:1 1 0;min-width:110px;padding:12px 14px;font-size:0.95rem;
  color:var(--text-dark);
}
.price-cell.label{flex:1 1 220px;font-weight:600;color:var(--green-dark);}
.price-row:nth-child(even):not(.head){background:var(--cream-alt);}
.price-subhead{font-size:0.78rem;color:var(--text-muted);}
.price-summary{display:flex;gap:32px;flex-wrap:wrap;margin:0 0 24px 0;}
.price-summary .card{flex:1 1 220px;text-align:center;}
.price-summary .amount{font-family:'Oswald',Arial,sans-serif;font-size:1.8rem;color:var(--terracotta-dark);font-weight:700;}

/* footer */
.site-footer{background:var(--green-dark);color:#dbe4dc;padding:48px 24px 0;}
.footer-inner{
  max-width:1180px;margin:0 auto;
  display:flex;gap:40px;flex-wrap:wrap;padding-bottom:32px;
}
.footer-col{flex:1 1 220px;}
.site-footer h3{color:var(--white);font-size:1.05rem;margin-bottom:0.6em;}
.site-footer a{color:#f1ede4;}
.footer-links{list-style:none;padding:0;margin:0;}
.footer-links li{padding:4px 0;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.15);
  text-align:center;padding:16px 24px;font-size:0.82rem;color:#b9c4bb;
}

/* responsive */
@media (max-width:720px){
  h1{font-size:2rem;}
  .hero{padding:56px 20px;}
  .header-inner{flex-direction:column;align-items:flex-start;}
  .main-nav ul{gap:10px 16px;}
  .plain-list.two-col{columns:1;}
}