/*
Theme Name: Newark Saddler
Theme URI: https://www.thenewarksaddler.co.uk
Author: Will Samuels
Description: Warm, traditional brochure theme for The Newark Saddler — English saddlery, fitting and leatherwork in Newark-on-Trent. No e-commerce.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: newark-saddler
*/

/* ============================================================
   TOKENS — warm traditional leather / equestrian
   ============================================================ */
:root{
  --parchment:#f4ecdd;
  --parchment-2:#ece1cc;
  --cream:#fffdf7;
  --leather:#6f4a2a;
  --leather-dark:#43291690;
  --espresso:#3a2616;
  --tan:#a9774a;
  --brass:#a9823f;
  --brass-dark:#856231;
  --oxblood:#6e2a2a;
  --ink:#2c241d;
  --muted:#6e5f4d;
  --line:#d9cab0;
  --line-dk:#c3ad8a;
  --shadow:0 1px 2px rgba(58,38,22,.08);
  --maxw:1140px;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --body:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{font-size:18px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--parchment);
  line-height:1.65;
  font-size:1rem;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--oxblood);text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;width:100%;}

h1,h2,h3,h4{font-family:var(--serif);color:var(--espresso);line-height:1.18;font-weight:700;margin:0 0 .5em;}
h1{font-size:clamp(2.1rem,5vw,3.2rem);}
h2{font-size:clamp(1.6rem,3.5vw,2.3rem);}
h3{font-size:clamp(1.2rem,2.5vw,1.45rem);}
p{margin:0 0 1.1em;}
.lead{font-size:1.18rem;color:var(--muted);}

.eyebrow{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;font-weight:600;color:var(--brass-dark);margin-bottom:.6em;display:block;
}
.rule{width:64px;height:2px;background:var(--brass);border:0;margin:0 0 1.4rem;}
.center .rule{margin-left:auto;margin-right:auto;}
.center{text-align:center;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-block;font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:13px 26px;border:1.5px solid var(--leather);
  color:var(--leather);background:transparent;cursor:pointer;transition:all .15s ease;
  border-radius:0;line-height:1;min-height:44px;text-decoration:none;
}
.btn:hover{background:var(--leather);color:var(--cream);text-decoration:none;}
.btn-solid{background:var(--leather);color:var(--cream);border-color:var(--leather);}
.btn-solid:hover{background:var(--espresso);border-color:var(--espresso);color:var(--cream);}
.btn-ghost{border-color:var(--cream);color:var(--cream);}
.btn-ghost:hover{background:var(--cream);color:var(--leather);}

/* ============================================================
   TOP BAR + HEADER
   ============================================================ */
.topbar{
  background:var(--espresso);color:#e8d9c2;font-family:var(--sans);
  font-size:.78rem;letter-spacing:.02em;
}
.topbar .container{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;justify-content:center;padding-top:7px;padding-bottom:7px;}
.topbar a{color:#f0e3cf;}
.topbar a:hover{color:#fff;}
.topbar .sep{opacity:.4;}

.site-header{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px;}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;}
.brand .name{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--espresso);letter-spacing:.01em;}
.brand .tag{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-size:.6rem;color:var(--brass-dark);margin-top:6px;}
.brand:hover{text-decoration:none;}

.nav-toggle{display:none;background:none;border:1.5px solid var(--line-dk);color:var(--leather);width:46px;height:42px;cursor:pointer;align-items:center;justify-content:center;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:22px;height:2px;background:var(--leather);position:relative;transition:.2s;}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;}
.nav-toggle span::before{top:-7px;}
.nav-toggle span::after{top:7px;}

.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:center;}
.main-nav a{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:600;
  color:var(--espresso);padding:10px 14px;display:block;border-bottom:2px solid transparent;
}
.main-nav a:hover{color:var(--oxblood);text-decoration:none;border-bottom-color:var(--brass);}
.main-nav .current-menu-item>a,.main-nav .current_page_item>a{border-bottom-color:var(--leather);color:var(--leather);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;color:var(--cream);text-align:center;
  background:
    linear-gradient(rgba(40,25,13,.62),rgba(40,25,13,.72)),
    radial-gradient(120% 120% at 50% 0%,#7a5230 0%,#5a3a20 45%,#3c2613 100%);
  padding:clamp(56px,11vw,118px) 0;
}
.hero .eyebrow{color:#e6c98c;}
.hero h1{color:var(--cream);max-width:14ch;margin-left:auto;margin-right:auto;text-shadow:0 1px 14px rgba(0,0,0,.35);}
.hero p{color:#f1e6d4;font-size:1.2rem;max-width:60ch;margin-left:auto;margin-right:auto;}
.hero .rule{background:var(--brass);margin-left:auto;margin-right:auto;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px;}

/* ============================================================
   SECTIONS / BANDS
   ============================================================ */
.section{padding:clamp(48px,8vw,88px) 0;}
.section.alt{background:var(--parchment-2);}
.section.cream{background:var(--cream);}
.section-head{max-width:62ch;margin:0 auto clamp(34px,5vw,54px);}
.section-head.center{text-align:center;}

/* feature band (mobile fitting) */
.band{
  background:linear-gradient(135deg,#5a3a20,#43291680),var(--leather);
  color:var(--cream);text-align:center;padding:clamp(44px,7vw,72px) 0;
}
.band h2{color:var(--cream);}
.band p{color:#f1e6d4;max-width:60ch;margin-left:auto;margin-right:auto;font-size:1.12rem;}
.band .rule{background:var(--brass);margin-left:auto;margin-right:auto;}

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.card{
  background:var(--cream);border:1px solid var(--line);padding:28px 26px;box-shadow:var(--shadow);
}
.card.feature{border-top:3px solid var(--brass);}
.card h3{margin-bottom:.4em;}
.card .ico{font-size:1.4rem;color:var(--brass-dark);margin-bottom:.5rem;display:block;}
.card p:last-child{margin-bottom:0;}

.svc-list{list-style:none;margin:0;padding:0;}
.svc-list li{padding:18px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:flex-start;}
.svc-list li:last-child{border-bottom:0;}
.svc-list .mk{color:var(--brass);font-weight:700;font-family:var(--serif);font-size:1.3rem;line-height:1;flex:0 0 auto;}
.svc-list h3{margin:0 0 .25em;}
.svc-list p{margin:0;color:var(--muted);}
.tag-pill{display:inline-block;font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);background:var(--oxblood);padding:3px 8px;margin-left:8px;vertical-align:middle;}

/* ============================================================
   INFO PANEL (hours / location)
   ============================================================ */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;}
.hours-table{width:100%;border-collapse:collapse;font-size:1rem;}
.hours-table th,.hours-table td{text-align:left;padding:10px 4px;border-bottom:1px solid var(--line);}
.hours-table th{font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;color:var(--espresso);}
.hours-table td{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;}
.hours-table tr.closed td{color:#a99}
.note{font-style:italic;color:var(--muted);}

.contact-lines{list-style:none;margin:0;padding:0;font-size:1.05rem;}
.contact-lines li{padding:8px 0;border-bottom:1px solid var(--line);}
.contact-lines li:last-child{border-bottom:0;}
.contact-lines .lbl{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:var(--brass-dark);display:block;margin-bottom:2px;}

/* ============================================================
   MAP
   ============================================================ */
.map-wrap{border:1px solid var(--line-dk);background:var(--parchment-2);}
.map-wrap iframe{width:100%;height:380px;border:0;display:block;filter:sepia(12%) saturate(94%);}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.form{background:var(--cream);border:1px solid var(--line);padding:30px;box-shadow:var(--shadow);}
.form .row{margin-bottom:18px;}
.form label{display:block;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--espresso);margin-bottom:6px;}
.form label .req{color:var(--oxblood);}
.form input,.form textarea{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);background:#fffef9;
  border:1px solid var(--line-dk);padding:11px 12px;border-radius:0;
}
.form input:focus,.form textarea:focus{outline:2px solid var(--brass);outline-offset:0;border-color:var(--brass);}
.form textarea{min-height:140px;resize:vertical;}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.notice{padding:14px 18px;border-left:4px solid var(--brass);background:#f6eeda;margin-bottom:24px;}
.notice.ok{border-color:#4a7a3a;background:#eef4e6;}
.notice.err{border-color:var(--oxblood);background:#f6e6e6;}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gallery-grid .ph{
  aspect-ratio:4/3;background:repeating-linear-gradient(45deg,var(--parchment-2),var(--parchment-2) 12px,#e4d7bf 12px,#e4d7bf 24px);
  border:1px solid var(--line-dk);display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;color:var(--brass-dark);text-align:center;padding:10px;
}
.gallery-grid img{aspect-ratio:4/3;object-fit:cover;width:100%;border:1px solid var(--line-dk);}

/* ============================================================
   ARTICLE (generic pages / About)
   ============================================================ */
.article{max-width:72ch;margin:0 auto;}
.article h2{margin-top:1.6em;}
.article ul,.article ol{padding-left:1.3em;}
.article li{margin-bottom:.4em;}
.article blockquote{border-left:3px solid var(--brass);margin:1.4em 0;padding:.4em 0 .4em 1.2em;font-style:italic;color:var(--muted);font-size:1.15rem;}
.page-hero{background:var(--parchment-2);border-bottom:1px solid var(--line);padding:clamp(40px,7vw,72px) 0;text-align:center;}
.page-hero h1{margin-bottom:.2em;}
.page-hero .eyebrow{margin-bottom:.4em;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--espresso);color:#d9c8b0;font-size:.92rem;padding:54px 0 26px;}
.site-footer a{color:#ecdcc4;}
.site-footer a:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;margin-bottom:34px;}
.site-footer h4{color:#f3e6d2;font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;margin-bottom:1em;}
.site-footer .fname{font-family:var(--serif);font-size:1.3rem;color:#fff;margin-bottom:.3em;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer ul li{margin-bottom:.5em;}
.foot-bottom{border-top:1px solid #5a4129;padding-top:18px;font-size:.78rem;color:#b09c80;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;}

/* skip link */
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:8px;top:8px;background:var(--cream);color:var(--espresso);padding:8px 14px;z-index:200;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .nav-toggle{display:inline-flex;}
  .main-nav{display:none;width:100%;}
  .main-nav.open{display:block;}
  .site-header .container{flex-wrap:wrap;}
  .main-nav ul{flex-direction:column;align-items:stretch;width:100%;gap:0;border-top:1px solid var(--line);margin-top:12px;}
  .main-nav a{padding:14px 4px;border-bottom:1px solid var(--line);}
  .main-nav .current-menu-item>a{border-bottom-color:var(--line);}
  .info-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  html{font-size:17px;}
}

/* ============================================================
   PHOTOGRAPHY — graded shop photos (added with image placement)
   ============================================================ */
.media-frame{
  border:1px solid var(--line-dk);box-shadow:var(--shadow);
  background:var(--cream);margin:0;overflow:hidden;
}
.media-frame img{display:block;width:100%;height:auto;}

/* Home intro: text + portrait shop view */
.intro-split{align-items:center;}
.intro-split .media-frame{max-width:480px;margin-left:auto;margin-right:auto;}

/* About: workshop feature + 3-up craft strip */
.workshop-feature{max-width:920px;margin:0 auto 18px;}
.workshop-strip .media-frame img{aspect-ratio:4/3;object-fit:cover;height:100%;}

/* Services: image alongside each service block */
.svc-list .svc-body{flex:1 1 auto;min-width:0;}
.svc-media{flex:0 0 220px;}
.svc-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line-dk);display:block;}
@media(max-width:680px){
  .svc-list li{flex-wrap:wrap;}
  .svc-media{flex:1 1 100%;order:3;margin-top:8px;}
}