/* ukridingschools.co.uk - saddle brown, harness gold, cream (after the Jocey template) */
:root{
  --brown:#432818; --brown-2:#5a3a26; --brown-3:#2c1a0f;
  --gold:#bb9457; --gold-2:#a37d43; --tan:#e3ca94; --tan-soft:#f3e8d2;
  --paper:#fbf8f3; --surface:#ffffff; --surface-2:#f5efe5;
  --ink:#2b1d14; --ink-2:#4d3b2f; --muted:#7a6a5d; --hair:#e6dccd;
  --good:#4f6f45; --good-bg:#e5ecdf; --warn:#8a5d1c; --warn-bg:#f6e9cf;
  --r:6px; --shadow:0 2px 6px rgba(43,29,20,.06), 0 12px 30px rgba(43,29,20,.08);
  --font:'Nunito', 'Segoe UI', Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 var(--font)}
h1,h2,h3,h4{font-family:var(--font); font-weight:800; line-height:1.2;
  margin:0 0 .45em; letter-spacing:-.01em; text-wrap:balance; color:var(--brown)}
h1{font-size:2.3rem} h2{font-size:1.7rem} h3{font-size:1.12rem}
a{color:var(--gold-2)}
a:hover{color:var(--brown)}
p{margin:0 0 1em}
img{max-width:100%; display:block}
.wrap{max-width:1170px; margin:0 auto; padding-inline:20px}
.wrap.narrow{max-width:800px}
.small{font-size:.86rem; color:var(--muted)}
.lede{font-size:1.1rem; color:var(--ink-2); max-width:66ch}
ul.plain{list-style:none; padding:0; margin:0}
.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--gold-2);
  font-weight:700; font-size:.86rem; margin-bottom:6px}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--gold)}

/* top bar + header */
.topbar{background:var(--brown); color:var(--tan); font-size:.82rem}
.topbar .wrap{display:flex; justify-content:space-between; gap:12px; padding-block:7px; flex-wrap:wrap}
.topbar a{color:#fff; font-weight:700; text-decoration:none}
header.site{background:var(--surface); box-shadow:0 1px 0 var(--hair); position:sticky; top:0; z-index:20}
header.site .bar{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-block:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--brown)}
.brand .mark{width:44px; height:44px; border-radius:50%; background:var(--brown);
  display:grid; place-items:center; color:var(--tan)}
.brand .mark svg{width:26px; height:26px}
.brand b{display:block; font-weight:900; font-size:1.18rem; line-height:1.05; letter-spacing:-.01em}
.brand small{display:block; color:var(--gold-2); font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase}
header.site nav{margin-left:auto; display:flex; gap:24px; flex-wrap:wrap; align-items:center}
header.site nav a{font-weight:700; font-size:.95rem; text-decoration:none; color:var(--ink-2)}
header.site nav a:hover{color:var(--gold-2)}
header.site nav a.btn{color:#fff}
@media (max-width:700px){
  header.site{position:static}
  header.site nav{margin-left:0; gap:14px 18px; width:100%}
  header.site nav a.btn{padding:6px 12px; font-size:.85rem}
}

/* buttons */
.btn{font:inherit; font-weight:800; font-size:.92rem; cursor:pointer;
  padding:12px 24px; border-radius:var(--r); border:2px solid var(--brown);
  background:var(--brown); color:#fff; text-decoration:none; display:inline-block;
  transition:background .15s, border-color .15s}
.btn:hover{background:var(--gold); border-color:var(--gold); color:#fff}
.btn.gold{background:var(--gold); border-color:var(--gold)}
.btn.gold:hover{background:var(--brown); border-color:var(--brown)}
.btn.ghost{background:transparent; color:var(--brown)}
.btn.ghost:hover{background:var(--brown); color:#fff}

/* photo heroes: the home hero and every page banner */
.hero{position:relative; color:#fff; padding-block:70px 60px;
  background:var(--brown) var(--bg, none) center/cover no-repeat}
.hero::before{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(44,26,15,.88) 0%, rgba(44,26,15,.66) 55%, rgba(44,26,15,.35) 100%)}
.hero > .wrap{position:relative}
.hero h1{color:#fff; font-size:2.6rem; max-width:20ch}
.hero .lede{color:#f1e6d4}
.hero .crumb, .hero .crumb a{color:var(--tan)}
.hero .small{color:#e9dcc6}
.hero .tag{background:rgba(255,255,255,.14); color:#fff}
.hero .tag:hover{background:var(--gold)}
.hero .tag.bhs{background:var(--gold); color:#fff}
.hero.home{padding-block:110px 150px; background-position:center 22%}
.hero.home h1{font-size:3.2rem; max-width:16ch}
@media (max-width:700px){
  .hero{padding-block:46px 40px}
  .hero h1{font-size:1.9rem}
  .hero.home{padding-block:60px 110px}
  .hero.home h1{font-size:2.2rem}
}
.stats{display:flex; gap:34px; flex-wrap:wrap; margin-top:24px}
.stat b{display:block; font-size:2rem; font-weight:900; color:var(--tan); line-height:1.05}
.stat span{font-size:.78rem; color:#e9dcc6; text-transform:uppercase; letter-spacing:.08em; font-weight:700}

/* search box */
.searchbox{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; max-width:760px;
  background:rgba(255,255,255,.1); padding:8px; border-radius:calc(var(--r) + 4px)}
.searchbox input[type=search], .searchbox select{
  font:inherit; font-size:.95rem; padding:12px 14px; border:1px solid var(--hair);
  border-radius:var(--r); background:#fff; color:var(--ink); min-width:0}
.searchbox input[type=search]{flex:1 1 260px}
.searchbox .btn{background:var(--gold); border-color:var(--gold)}
.searchbox .btn:hover{background:#fff; color:var(--brown); border-color:#fff}

/* three overlapping feature tiles under the home hero */
.features{display:grid; grid-template-columns:repeat(3,1fr); margin-top:-90px;
  position:relative; z-index:2; box-shadow:var(--shadow)}
.feature{display:flex; gap:16px; align-items:flex-start; padding:26px 26px;
  background:var(--brown); color:#f1e6d4; text-decoration:none}
.feature:nth-child(2){background:var(--gold); color:#fff}
.feature:hover{filter:brightness(1.08); color:#fff}
.feature svg{flex:none; width:46px; height:46px; color:#fff}
.feature h3{color:#fff; margin:0 0 4px; font-size:1.12rem}
.feature p{margin:0; font-size:.88rem; line-height:1.5}
@media (max-width:860px){ .features{grid-template-columns:1fr; margin-top:-70px} }

/* sections */
section.block{padding-block:60px}
section.block.tight{padding-block:26px}
section.alt{background:var(--surface-2)}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  flex-wrap:wrap; margin-bottom:26px}
.sec-head h2{margin:0}
.sec-head p{margin:.4em 0 0; max-width:60ch}
.sec-head.center{flex-direction:column; align-items:center; text-align:center}

/* image cards with the template's brown title tab */
.grid{display:grid; gap:22px}
.grid.c3{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.photo-card{position:relative; display:block; text-decoration:none; padding:0 14px 14px 0}
.photo-card .ph{aspect-ratio:4/3; border-radius:var(--r) var(--r) 30px var(--r);
  overflow:hidden; background:var(--surface-2)}
.photo-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.photo-card:hover img{transform:scale(1.06)}
.photo-card .cap{position:absolute; left:0; bottom:0; right:44px; background:var(--brown);
  color:#fff; padding:12px 16px; font-weight:800; display:flex; justify-content:space-between;
  align-items:center; gap:10px}
.photo-card .cap::after{content:""; position:absolute; right:-14px; top:0; bottom:0; width:14px;
  background:var(--gold); clip-path:polygon(0 0,100% 0,0 100%)}
.photo-card .cap span{font-size:.78rem; font-weight:700; color:var(--tan); white-space:nowrap}
.photo-card:hover .cap{background:var(--gold)}

/* listing cards */
.card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r);
  padding:20px 22px; position:relative; transition:box-shadow .2s, transform .2s;
  border-top:3px solid var(--gold)}
.card:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.card h3{margin-bottom:.2em; font-size:1.06rem}
.card h3 a{text-decoration:none; color:var(--brown)}
.card h3 a:hover{color:var(--gold-2)}
.card .where{font-size:.85rem; color:var(--gold-2); font-weight:700; margin-bottom:9px}
.card p{margin:0; font-size:.92rem; color:var(--ink-2)}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.tag{font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:99px;
  background:var(--surface-2); color:var(--ink-2); text-decoration:none}
a.tag:hover{background:var(--brown); color:#fff}
.tag.bhs{background:var(--good-bg); color:var(--good)}
.tag.price{background:var(--warn-bg); color:var(--warn)}

/* dark band with icons (template's "beginners guide" strip) */
.band{background:var(--brown); color:#e9dcc6; padding-block:56px}
.band .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:34px; text-align:center}
.band svg{width:52px; height:52px; color:#fff; margin:0 auto 12px}
.band h3{color:#fff; font-size:1.25rem}
.band p{margin:0; font-size:.93rem}

/* full-width photo call to action */
.photo-cta{position:relative; color:#fff; text-align:center; padding-block:96px;
  background:var(--brown-3) var(--bg, none) center/cover no-repeat}
.photo-cta::before{content:""; position:absolute; inset:0; background:rgba(44,26,15,.55)}
.photo-cta .wrap{position:relative}
.photo-cta h2{color:#fff; font-size:2.2rem}
.photo-cta p{color:#f1e6d4; max-width:56ch; margin-inline:auto}

/* county / discipline index */
.arealist{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:2px 22px}
.arealist a{display:flex; justify-content:space-between; gap:10px; padding:9px 4px;
  text-decoration:none; border-bottom:1px solid var(--hair); color:var(--ink); font-weight:600}
.arealist a:hover{color:var(--gold-2)}
.arealist a span{color:var(--brown); background:var(--tan-soft); font-size:.78rem;
  font-weight:800; padding:1px 8px; border-radius:99px; align-self:center}

/* entity page */
.entity{display:grid; grid-template-columns:1fr 330px; gap:40px; padding-block:44px}
@media (max-width:900px){ .entity{grid-template-columns:1fr; gap:26px} }
.crumb{font-size:.85rem; color:var(--muted); margin-bottom:12px; font-weight:600}
.crumb a{text-decoration:none}
.article p{max-width:70ch}
.panel{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r);
  padding:20px 22px; margin-bottom:18px}
.panel h3{font-size:.8rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--gold-2); margin-bottom:12px}
.panel.dark{background:var(--brown); border-color:var(--brown); color:#e9dcc6}
.panel.dark h3{color:var(--tan)}
.panel.dark a{color:#fff}
.panel.dark .kv dt{color:var(--tan)}
.kv{margin:0; font-size:.94rem}
.kv dt{color:var(--muted); font-size:.78rem; margin-top:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em}
.kv dt:first-child{margin-top:0}
.kv dd{margin:1px 0 0; overflow-wrap:anywhere}
.facts{list-style:none; padding:0; margin:0; font-size:.93rem}
.facts li{padding:6px 0; border-bottom:1px solid var(--hair); display:flex;
  justify-content:space-between; gap:12px}
.facts li:last-child{border-bottom:0}
.facts .y{color:var(--good); font-weight:800}
.facts .n{color:var(--muted)}

/* tables */
.tbl{width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; font-size:.93rem}
.tbl th,.tbl td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--hair); vertical-align:top}
.tbl th{font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--tan);
  background:var(--brown)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--tan-soft)}
.tblwrap{overflow-x:auto}

/* pagination */
.pager{display:flex; gap:7px; flex-wrap:wrap; margin-top:26px; align-items:center}
.pager a,.pager span{font-weight:700; font-size:.9rem; padding:8px 14px;
  border:1px solid var(--hair); border-radius:var(--r); text-decoration:none; background:var(--surface)}
.pager a:hover{border-color:var(--gold)}
.pager .on{background:var(--brown); border-color:var(--brown); color:#fff}

/* footer */
footer.site{background:var(--brown-3); color:#cdbba3; margin-top:0; padding-block:56px 24px}
footer.site a{color:#f1e6d4; text-decoration:none}
footer.site a:hover{color:var(--tan)}
.fcols{display:grid; grid-template-columns:1.4fr 1fr 1.4fr; gap:36px; margin-bottom:34px}
@media (max-width:800px){ .fcols{grid-template-columns:1fr} }
.fcols strong{display:block; color:#fff; font-size:1.05rem; margin-bottom:10px; font-weight:800}
.fcols p{margin:.5em 0 0}
.fcols li{padding:4px 0}
.fcols .small{color:#cdbba3}
footer.site .brand{color:#fff; margin-bottom:6px}
footer.site .brand .mark{background:var(--gold); color:#fff}
.copy{border-top:1px solid rgba(255,255,255,.12); padding-top:18px; margin:0;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* phones: two photo cards per row */
@media (max-width:700px){
  .grid.c4{grid-template-columns:repeat(2,1fr); gap:12px}
  .photo-card{padding:0 8px 8px 0}
  .photo-card .cap{right:20px; padding:8px 10px; font-size:.85rem}
  .photo-card .cap span{display:none}
}