/*
Theme Name: Anglian Recovery
Theme URI: https://anglianrecovery.com/
Description: Custom one-page theme for Anglian Recovery, Southend-on-Sea. Photos, logos and contact details are set under Appearance > Customise > Anglian Recovery. Gallery photos are added by editing the Home page.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: anglian-recovery
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ---------- Fonts (self-hosted, no Google requests) ---------- */
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/barlow-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url("assets/fonts/barlow-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url("assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-style:normal;font-display:swap;src:url("assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
	--ar-accent:#F5A300;
	--ar-ink:#16181B;
	--ar-ink-2:#23262B;
	--ar-ground:#F3F1EC;
	--ar-sand:#E9E6DF;
	--ar-line:#DCD8D0;
	--ar-muted:#4A4E55;
	--ar-on-dark:#F3F1EC;
	--ar-on-dark-muted:#C9CCD1;
	--ar-on-dark-soft:#B9BDC4;
	--ar-link:#8A5A00;
	--ar-display:"Barlow Condensed","Arial Narrow",sans-serif;
	--ar-body:"Barlow","Helvetica Neue",Helvetica,sans-serif;
	--ar-gutter:clamp(20px,5.5vw,80px);
	--ar-section:clamp(56px,8vw,112px);
	--ar-radius:16px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ar-ground);color:var(--ar-ink);font-family:var(--ar-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ar-ink);text-decoration:none}
a:hover{color:var(--ar-link)}
:focus-visible{outline:3px solid var(--ar-accent);outline-offset:3px}
p{margin:0}
.ar-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ar-accent);color:var(--ar-ink);padding:12px 18px;font-weight:700}
.ar-skip:focus{left:12px;top:12px}
.ar-icon{flex-shrink:0}

.ar-wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:var(--ar-gutter)}
.ar-wrap--narrow{max-width:880px}

.ar-h2{margin:0;font-family:var(--ar-display);font-weight:800;font-size:clamp(42px,5vw,68px);line-height:1;text-transform:uppercase;letter-spacing:.005em}
.ar-h3{margin:0;font-family:var(--ar-display);font-weight:800;font-size:clamp(25px,2.3vw,32px);line-height:1.05;text-transform:uppercase}
.ar-muted{color:var(--ar-muted)}
.ar-lg{font-size:clamp(17px,1.4vw,19px);line-height:1.6}

/* ---------- Header ---------- */
.ar-header{position:sticky;top:0;z-index:50;background:var(--ar-ink)}
.ar-header__inner{max-width:1440px;margin:0 auto;padding-inline:var(--ar-gutter);height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ar-brand{display:flex;align-items:center;gap:14px;min-width:0}
.ar-brand__logo{width:auto;height:72px;border-radius:8px}
.ar-wordmark{font-family:var(--ar-display);font-weight:800;font-size:30px;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--ar-on-dark);white-space:nowrap}
.ar-wordmark span{color:var(--ar-accent)}
.ar-wordmark--sm{font-size:26px}
.ar-nav{display:flex;gap:40px;font-size:17px;font-weight:600}
.ar-nav a{color:#E6E3DD}
.ar-nav a:hover{color:var(--ar-accent)}
.ar-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:10px;font-family:var(--ar-display);font-weight:800;font-size:24px;letter-spacing:.03em}
.ar-btn--accent{background:var(--ar-accent);color:var(--ar-ink)}
.ar-btn--accent:hover{color:var(--ar-ink);filter:brightness(1.07)}
.ar-menu-toggle{display:none;width:48px;height:48px;border:0;border-radius:10px;background:var(--ar-ink-2);color:var(--ar-on-dark);cursor:pointer;align-items:center;justify-content:center}
.ar-menu-toggle__close{display:none}
.ar-chevron{height:14px;background:repeating-linear-gradient(-45deg,var(--ar-accent) 0 22px,var(--ar-ink) 22px 44px)}

/* ---------- Placeholders (shown until a photo is chosen) ---------- */
.ar-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;padding:16px;background:#E4E0D8;border:2px dashed #B8B2A7;border-radius:14px;color:#5A5650;font-size:15px;text-align:center}
.ar-ph strong{font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ar-ph--dark{background:var(--ar-ink-2);border-color:#4A4F57;color:var(--ar-on-dark-soft)}

/* ---------- Hero ---------- */
.ar-hero{background:var(--ar-ink);color:var(--ar-on-dark)}
.ar-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:72px;align-items:center;padding-block:88px 104px}
.ar-hero__text{display:flex;flex-direction:column;gap:28px}
.ar-hero__kicker{display:flex;align-items:center;gap:12px;font-family:var(--ar-display);font-weight:700;font-size:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--ar-accent)}
.ar-dot{width:12px;height:12px;border-radius:50%;background:var(--ar-accent)}
.ar-hero__title{margin:0;font-family:var(--ar-display);font-weight:800;font-size:clamp(56px,7.2vw,104px);line-height:.92;text-transform:uppercase}
.ar-hero__lead{max-width:600px;font-size:clamp(17px,1.5vw,21px);color:var(--ar-on-dark-muted)}
.ar-hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.ar-hero__since{font-weight:600;color:#9EA3AB}
.ar-hero__media .ar-ph,.ar-hero__img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:var(--ar-radius)}

.ar-callbtn{display:flex;flex-direction:column;justify-content:center;min-height:76px;padding:10px 30px;border-radius:12px}
.ar-callbtn__label{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ar-callbtn__num{font-family:var(--ar-display);font-weight:800;font-size:32px;line-height:1}
.ar-callbtn--accent{background:var(--ar-accent);color:var(--ar-ink)}
.ar-callbtn--accent:hover{color:var(--ar-ink);filter:brightness(1.07)}
.ar-callbtn--outline{border:2px solid #5A5F68;color:var(--ar-on-dark)}
.ar-callbtn--outline .ar-callbtn__label{color:var(--ar-on-dark-soft)}
.ar-callbtn--outline:hover{color:var(--ar-on-dark);border-color:var(--ar-accent)}

/* ---------- Sections ---------- */
.ar-section{padding-block:var(--ar-section)}
.ar-section--flush-top{padding-top:0}
.ar-section--sand{background:var(--ar-sand)}
.ar-section--dark{background:var(--ar-ink);color:var(--ar-on-dark)}
.ar-section__head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(28px,4vw,52px)}
.ar-section__head--split{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:48px}
.ar-section__head--split .ar-muted{max-width:480px;font-size:18px}

/* Services */
.ar-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ar-card{display:flex;flex-direction:column;gap:16px;padding:36px;background:#fff;border:1px solid var(--ar-line);border-radius:var(--ar-radius)}
.ar-card p{color:var(--ar-muted)}
.ar-card__icon{width:56px;height:56px;border-radius:12px;background:var(--ar-accent);color:var(--ar-ink);display:flex;align-items:center;justify-content:center}
.ar-card--dark{background:var(--ar-ink);border-color:var(--ar-ink);color:var(--ar-on-dark);justify-content:space-between}
.ar-card--dark p{color:var(--ar-on-dark-muted)}
.ar-card--dark:hover{color:var(--ar-on-dark)}
.ar-card__cta{font-family:var(--ar-display);font-weight:800;font-size:22px;letter-spacing:.05em;text-transform:uppercase;color:var(--ar-accent)}
.ar-card--dark:hover .ar-card__cta{text-decoration:underline;text-underline-offset:4px}

/* Split (about / coverage) */
.ar-split{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:80px;align-items:center}
.ar-split--reverse{grid-template-columns:minmax(0,1fr) minmax(0,600px)}
.ar-split__text{display:flex;flex-direction:column;gap:22px}
.ar-media{width:100%;aspect-ratio:13/10;object-fit:cover;border-radius:var(--ar-radius)}
.ar-split__media .ar-ph{aspect-ratio:13/10}

.ar-areas{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.ar-areas li{display:flex;align-items:center;gap:16px;padding:18px 22px;background:#fff;border:1px solid var(--ar-line);border-radius:12px;font-size:18px;font-weight:600}
.ar-areas .ar-areas__main{background:var(--ar-ink);border-color:var(--ar-ink);color:var(--ar-on-dark);font-weight:700}
.ar-areas__main .ar-icon{color:var(--ar-accent)}

/* Clients */
.ar-pills{list-style:none;margin:0 0 36px;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.ar-pills li{padding:12px 20px;border-radius:999px;background:#fff;border:1px solid var(--ar-line);font-weight:600}
.ar-logos{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px}
.ar-logos__item{display:flex;align-items:center;justify-content:center;height:110px;padding:14px;background:#fff;border:1px solid var(--ar-line);border-radius:14px}
.ar-logos__item img{max-height:100%;width:auto;object-fit:contain}
.ar-logos .ar-ph{min-height:0;font-size:13px}

/* Reviews */
.ar-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ar-review{margin:0;display:flex;flex-direction:column;gap:22px;padding:36px;background:var(--ar-ink-2);border-radius:var(--ar-radius)}
.ar-review__stars{font-size:22px;letter-spacing:4px;color:var(--ar-accent)}
.ar-review blockquote{margin:0;font-size:clamp(18px,1.5vw,21px);line-height:1.5}
.ar-review figcaption{font-weight:700;color:var(--ar-on-dark-soft)}

/* Gallery */
.ar-textlink{font-size:18px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.ar-gallery--empty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ar-gallery__ph{aspect-ratio:4/3}
.ar-gallery .wp-block-gallery{gap:20px}
.ar-gallery .wp-block-gallery img,.ar-gallery .wp-block-image img{border-radius:14px}
.ar-gallery .wp-block-gallery.has-nested-images figure.wp-block-image img{aspect-ratio:4/3;object-fit:cover}

/* Contact */
.ar-contact{background:var(--ar-accent);color:var(--ar-ink);padding-block:clamp(48px,7vw,96px)}
.ar-contact__inner{display:flex;justify-content:space-between;align-items:center;gap:64px}
.ar-contact__text{display:flex;flex-direction:column;gap:16px;max-width:560px}
.ar-contact__text p{font-size:clamp(17px,1.5vw,20px);font-weight:500}
.ar-contact__title{margin:0;font-family:var(--ar-display);font-weight:800;font-size:clamp(52px,5.8vw,80px);line-height:.95;text-transform:uppercase}
.ar-contact__links{display:flex;flex-direction:column;gap:14px;width:min(500px,100%);flex-shrink:0}
.ar-contactlink{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px;background:var(--ar-ink);color:var(--ar-on-dark);border-radius:12px}
.ar-contactlink:hover{color:var(--ar-on-dark);outline:3px solid var(--ar-ink);outline-offset:2px}
.ar-contactlink__label{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ar-on-dark-soft)}
.ar-contactlink__value{font-size:22px;font-weight:700;overflow-wrap:anywhere}
.ar-contactlink__value--num{font-family:var(--ar-display);font-weight:800;font-size:34px}
.ar-contactlink--light{background:#fff;color:var(--ar-ink)}
.ar-contactlink--light:hover{color:var(--ar-ink)}
.ar-contactlink--light .ar-contactlink__label{color:var(--ar-muted)}

/* Footer */
.ar-footer{background:var(--ar-ink);color:var(--ar-on-dark-soft);padding-block:48px}
.ar-footer__inner{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap;font-size:16px}
.ar-footer__inner p{margin-top:8px}
.ar-footer__social{display:flex;gap:28px;font-weight:600}
.ar-footer__social a{color:#E6E3DD}
.ar-footer__social a:hover{color:var(--ar-accent)}
.ar-footer .ar-footer__copy{margin:0}

/* Mobile call bar (phones only) */
.ar-callbar{display:none}

/* Inner pages */
.ar-page{padding-block:var(--ar-section)}
.ar-page .ar-h2{margin-bottom:28px}
.ar-content > * + *{margin-top:1em}
.ar-content a{text-decoration:underline;text-underline-offset:3px}
.ar-entry + .ar-entry{margin-top:48px}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
	.ar-nav{gap:26px}
	.ar-hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px}
	.ar-services,.ar-reviews{grid-template-columns:repeat(2,minmax(0,1fr))}
	.ar-split,.ar-split--reverse{gap:48px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
	.ar-logos{grid-template-columns:repeat(4,minmax(0,1fr))}
	.ar-contact__inner{flex-direction:column;align-items:stretch}
	.ar-contact__links{width:100%}
}

@media (max-width:900px){
	html{scroll-padding-top:84px}
	body{padding-bottom:76px}
	.ar-header__inner{height:68px}
	.ar-brand__logo{height:56px}
	.ar-wordmark{font-size:23px}
	.ar-header__call{display:none}
	.ar-menu-toggle{display:inline-flex}
	.ar-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--ar-ink);border-top:1px solid #33373D;padding:8px var(--ar-gutter) 20px}
	.ar-nav a{padding:16px 0;font-size:20px;border-bottom:1px solid #2C3035}
	.ar-nav-open .ar-nav{display:flex}
	.ar-nav-open .ar-menu-toggle__open{display:none}
	.ar-nav-open .ar-menu-toggle__close{display:inline-flex}
	.ar-chevron{height:10px;background:repeating-linear-gradient(-45deg,var(--ar-accent) 0 16px,var(--ar-ink) 16px 32px)}

	.ar-hero__inner{grid-template-columns:1fr;gap:28px;padding-block:36px 44px}
	.ar-hero__text{gap:22px}
	.ar-hero__kicker{font-size:16px}
	.ar-hero__actions{flex-direction:column}
	.ar-callbtn{align-items:center;text-align:center}
	.ar-hero__media .ar-ph,.ar-hero__img{aspect-ratio:4/3}

	.ar-section__head--split{flex-direction:column;align-items:flex-start;gap:12px}
	.ar-services,.ar-reviews{grid-template-columns:1fr;gap:16px}
	.ar-card{padding:24px}
	.ar-review{padding:24px}
	.ar-split,.ar-split--reverse{grid-template-columns:1fr;gap:28px}
	.ar-split--reverse .ar-split__media{order:2}
	.ar-areas li{font-size:16px;padding:16px}
	.ar-pills{gap:8px}
	.ar-pills li{padding:9px 14px;font-size:15px}
	.ar-logos{gap:10px}
	.ar-logos__item{height:80px;padding:8px}
	.ar-gallery--empty{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
	.ar-contactlink{flex-direction:column;align-items:flex-start;gap:2px;padding:16px 20px}
	.ar-contactlink__value--num{font-size:30px}
	.ar-footer__inner{flex-direction:column}

	.ar-callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));background:var(--ar-accent);color:var(--ar-ink);font-family:var(--ar-display);font-weight:800;font-size:26px;text-transform:uppercase;box-shadow:0 -2px 0 var(--ar-ink)}
	.ar-callbar:hover{color:var(--ar-ink)}
}

@media (max-width:420px){
	.ar-wordmark{font-size:20px}
	.ar-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}