/*
Theme Name: Big 5 Catering
Theme URI: https://big5catering.co.uk
Author: Netrep
Description: Bespoke theme for Big 5 Catering — South African–style hog roast & BBQ catering, Chester. Faithful replica of the original Wix site.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: big5
*/

/* ============================================================
   TOKENS
   ============================================================ */
/* Display heading font — the exact "Army Chalk" face used on the Wix site, self-hosted. */
@font-face{
  font-family:'ArmyChalk';
  src:url('assets/fonts/armychalk.woff2') format('woff2'),
      url('assets/fonts/armychalk.woff') format('woff'),
      url('assets/fonts/armychalk.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}

:root{
  --display:  'ArmyChalk', 'Poppins', sans-serif;
  --orange:   #f3934b;
  --orange-2: #ef8136;
  --rust:     #c74d2c;
  --darkred:  #8b0000;
  --ink:      #191919;   /* dark section bg */
  --black:    #0d0d0d;   /* topbar / footer */
  --peach:    #f8e4c6;   /* hero panel */
  --grey:     #8f8f8f;
  --grey-lt:  #c9c9c9;
  --field:    #2a2a2a;
  --line:     #e2e2e2;
  --line-dk:  rgba(255,255,255,.12);

  --font: "Poppins", system-ui, Arial, sans-serif;
  --maxw: 1180px;
  --gutter: clamp(1rem, 4vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:#fff;
  line-height:1.65;
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; padding:0; }
button{ font:inherit; cursor:pointer; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.sec-dark{ background:var(--ink); color:#e6e6e6; padding-top:clamp(4rem,8vw,6.5rem); }
.sec-cream{ background:#fff; }

/* Headings */
h1,h2,h3,h4{ font-weight:700; line-height:1.15; }
.section-title{
  color:var(--orange); text-align:center; font-weight:400;
  font-family:var(--display); letter-spacing:.01em;
  font-size:clamp(1.9rem,3.8vw,2.7rem); margin-bottom:2rem;
}
.lead{ font-size:1rem; color:inherit; }

/* Buttons */
.btn-orange{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--orange); color:#fff; font-weight:600; font-size:.95rem;
  padding:.8rem 1.5rem; border:none; border-radius:40px;
  transition:background .25s, transform .2s;
}
.btn-orange:hover{ background:var(--orange-2); transform:translateY(-2px); }
.btn-orange svg{ width:16px; height:16px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{ position:relative; background:var(--black); }
.topbar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; padding-block:.6rem; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
}
.topbar .tb-left{ justify-self:start; }
.topbar .tb-right{ justify-self:end; }
.topbar a{ color:#fff; font-size:.86rem; display:inline-flex; align-items:center; gap:.5rem; }
.topbar a:hover{ color:var(--orange); }
.topbar svg{ width:15px; height:15px; color:var(--orange); }
.brand{ justify-self:center; }
.brand img{ height:128px; width:auto; }

.navbar{ background:var(--black); border-top:1px solid rgba(255,255,255,.06); }
.navbar .wrap{ display:flex; justify-content:center; }
.nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; padding-bottom:.9rem; }
.nav a{
  color:#fff; font-size:.9rem; font-weight:500;
  padding:.5rem 1.15rem; border-radius:30px;
  background:rgba(199,77,44,.32);
  transition:background .25s, color .25s;
}
.nav a:hover, .nav a.current-menu-item, .nav a.current_page_item{ background:var(--orange); color:#fff; }

.nav-toggle{ display:none; }
@media (max-width:860px){
  .topbar{ grid-template-columns:auto 1fr auto; }
  .topbar a span.txt{ display:none; }
  .brand img{ height:84px; }
  .nav-toggle{ display:inline-flex; position:absolute; right:var(--gutter); top:.7rem; background:none; border:none; color:#fff; }
  .nav-toggle svg{ width:28px; height:28px; }
  .nav{ display:none; flex-direction:column; align-items:stretch; padding:0 var(--gutter) 1rem; }
  .nav.open{ display:flex; }
  .nav a{ text-align:center; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ display:grid; grid-template-columns:1fr 1fr; min-height:clamp(420px,46vw,620px); }
.hero__panel{
  background:var(--peach); display:flex; flex-direction:column; justify-content:center;
  align-items:center;
  padding:clamp(1.8rem,4.5vw,4rem) clamp(1.8rem,5vw,5rem);
}
.hero__panel h1{
  color:var(--orange); font-weight:400; font-family:var(--display); letter-spacing:.01em;
  font-size:clamp(2.4rem,4.2vw,3.7rem); line-height:1.14; margin-bottom:1.1rem;
}
.hero__panel p{ color:#3a3a3a; font-size:.95rem; margin-bottom:1rem; max-width:46ch; }
.hero__panel .btn-orange{ margin-top:.6rem; align-self:center; }
.hero__img{
  background-color:var(--ink); background-size:cover; background-position:center;
  background-repeat:no-repeat; background-attachment:fixed; /* parallax, matches Wix */
}
@media (max-width:760px){
  .hero{ grid-template-columns:1fr; }
  .hero__img{ min-height:280px; background-attachment:scroll; }
}

/* ============================================================
   FEATURE BAND
   ============================================================ */
.features{ background:var(--peach); }
.features .wrap{ display:grid; grid-template-columns:repeat(3,1fr); }
.feature{ text-align:center; padding:2.8rem 1.5rem; position:relative; }
.feature + .feature::before{ content:""; position:absolute; left:0; top:8%; bottom:8%; width:2px; background:var(--orange); }
.feature .ic{ width:64px; height:64px; border-radius:50%; background:var(--darkred); color:#fff; display:grid; place-items:center; margin:0 auto 1.1rem; }
.feature .ic svg{ width:30px; height:30px; }
.feature h3{ color:var(--ink); font-size:1.05rem; font-weight:700; }
@media (max-width:760px){
  .features .wrap{ grid-template-columns:1fr; }
  .feature + .feature::before{ display:none; }
  .feature + .feature{ border-top:1px solid rgba(0,0,0,.12); }
}

/* ============================================================
   "DIFFERENCE" centred text block
   ============================================================ */
.textblock{ max-width:820px; margin-inline:auto; text-align:center; }
.textblock p{ color:#cfcfcf; margin-bottom:1.1rem; font-size:.98rem; }
.center-btn{ text-align:center; margin-top:1.5rem; }

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.svc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-inline:10%; }
.svc-card{
  position:relative; background-size:cover; background-position:center;
  aspect-ratio:1/1;
}
.svc-card__panel{
  position:relative;
  background:var(--peach); padding:1.8rem 1.6rem 1.6rem;
  width:68%; display:flex; flex-direction:column;
}
.svc-card__panel h3{
  color:var(--rust); font-family:var(--display); font-weight:400;
  font-size:clamp(1.25rem,1.8vw,1.55rem); line-height:1.2; margin-bottom:.9rem;
}
.svc-card__panel p{ color:var(--ink); font-size:.88rem; line-height:1.6; margin-bottom:1.8rem; }
.svc-card__arrow{
  position:absolute; bottom:-25px; left:1.6rem;
  width:50px; height:50px; border-radius:50%;
  background:var(--darkred); color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:background .2s;
}
.svc-card__arrow:hover{ background:var(--rust); }
.svc-card__arrow svg{ width:22px; height:22px; }
@media (max-width:820px){
  .svc-cards{ grid-template-columns:1fr; }
  .svc-card{ min-height:360px; }
  .svc-card__panel{ width:80%; }
}

/* ============================================================
   SPLIT ROWS (image + text)
   ============================================================ */
.splitrow{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; margin-inline:20%; }
.splitrow__media{ min-height:300px; position:relative; background:var(--ink); }
.splitrow__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.splitrow__text{ background:var(--ink); color:#d9d9d9; display:flex; flex-direction:column; justify-content:center; padding:clamp(1.8rem,4vw,3.4rem); }
.splitrow__text.rust{ background:var(--rust); color:#fff; }
.splitrow__text h2{ color:var(--orange); font-family:var(--display); font-weight:400; letter-spacing:.01em; font-size:clamp(1.6rem,2.9vw,2.3rem); margin-bottom:1rem; }
.splitrow__text.rust h2{ color:#fff; }
.splitrow__text p{ font-size:.95rem; margin-bottom:.9rem; }
.splitrow.flip .splitrow__media{ order:2; }
@media (max-width:760px){
  .splitrow{ grid-template-columns:1fr; }
  .splitrow.flip .splitrow__media{ order:0; }
  .splitrow__media{ min-height:240px; }
}

/* ============================================================
   WHAT WE DO
   ============================================================ */
.wwd{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.wwd__list{ columns:2; column-gap:2rem; }
.wwd__list li{ break-inside:avoid; padding:.5rem 0; color:#e0e0e0; font-weight:500; display:flex; gap:.6rem; }
.wwd__list li::before{ content:"\203A"; color:var(--orange); font-weight:700; }
.wwd__media{ position:relative; min-height:320px; }
.wwd__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:6px; }
@media (max-width:760px){ .wwd{ grid-template-columns:1fr; } .wwd__list{ columns:1; } }

/* ============================================================
   MENU PAGES
   ============================================================ */
.menu-intro{ max-width:820px; margin-inline:auto; text-align:center; color:#444; }
.pkg-table{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:.6rem; }
.pkg-row{ display:grid; grid-template-columns:160px 1fr; gap:1rem; align-items:center; padding:.9rem 1.3rem; background:#222; border-radius:4px; }
.pkg-row .pkg-name{ color:var(--orange); font-weight:700; font-size:1.05rem; }
.pkg-row .pkg-desc{ color:#d2d2d2; font-size:.92rem; }
@media (max-width:560px){ .pkg-row{ grid-template-columns:1fr; gap:.2rem; } }

.optlist-title{ color:var(--orange); text-align:center; font-family:var(--display); font-weight:400; letter-spacing:.01em; font-size:1.7rem; margin:2.5rem 0 1.2rem; }
.optlist{ max-width:760px; margin:0 auto; }
.optlist li{ padding:.5rem 0; border-bottom:1px solid var(--line); display:flex; gap:.6rem; }
.optlist li::before{ content:"\203A"; color:var(--orange); font-weight:700; }
.note{ max-width:760px; margin:1.5rem auto 0; background:var(--peach); border-left:4px solid var(--orange); padding:1rem 1.3rem; border-radius:4px; font-size:.92rem; color:#5a4a36; }
.price-flag{ display:inline-block; background:var(--orange); color:#fff; font-weight:700; padding:.5rem 1.1rem; border-radius:30px; }

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; }
@media (max-width:680px){ .gallery{ grid-template-columns:1fr; } }

/* CTA band */
.cta-band{ background:var(--ink); }
.cta-band .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.cta-band h2{ color:var(--orange); font-family:var(--display); font-weight:400; letter-spacing:.01em; font-size:clamp(1.8rem,3.2vw,2.5rem); margin-bottom:1.2rem; }
.cta-band__media{ min-height:240px; position:relative; }
.cta-band__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:6px; }
@media (max-width:760px){ .cta-band .wrap{ grid-template-columns:1fr; } }

/* ============================================================
   CONTACT FORM (CF7)
   ============================================================ */
.form-wrap{ max-width:560px; margin:0 auto; }
.wpcf7-form p{ margin:0 0 1rem; }
.wpcf7-form label{ display:block; color:#cfcfcf; font-size:.86rem; margin-bottom:.35rem; }
.wpcf7-form input, .wpcf7-form textarea{
  width:100%; padding:.7rem .9rem; background:var(--field); border:1px solid #3a3a3a; border-radius:4px;
  color:#fff; font:inherit; font-size:.92rem;
}
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder{ color:#7c7c7c; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus{ outline:none; border-color:var(--orange); }
.wpcf7-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .wpcf7-form .row{ grid-template-columns:1fr; } }
.wpcf7-form .wpcf7-submit{ width:auto; background:var(--orange); color:#fff; border:none; border-radius:30px; padding:.75rem 2.2rem; font-weight:600; float:right; }
.wpcf7-form .wpcf7-submit:hover{ background:var(--orange-2); }
.wpcf7 .wpcf7-response-output{ clear:both; border-radius:4px; color:#fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--black); color:#cfcfcf; padding-block:2.5rem 1.2rem; }
.footer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.site-footer h4{ color:#fff; font-size:1rem; font-weight:700; margin-bottom:.9rem; }
.site-footer a{ color:#cfcfcf; }
.site-footer a:hover{ color:var(--orange); }
.footer-col p, .footer-col li{ font-size:.9rem; padding:.15rem 0; }
.socials{ display:flex; gap:.7rem; margin:.4rem 0 1rem; }
.socials img{ width:30px; height:30px; border-radius:6px; }
.yell-badge img{ height:46px; width:auto; }
.footer-legal{ max-width:var(--maxw); margin:1.8rem auto 0; padding:1rem var(--gutter) 0; border-top:1px solid var(--line-dk); text-align:center; font-size:.78rem; color:#9a9a9a; }
.footer-legal a{ color:#9a9a9a; }
.footer-legal a:hover{ color:var(--orange); }
.footer-legal .sep{ margin:0 .5rem; }