/*
 * overrides.css - RJL changes layered over the original stylesheet.
 * Loaded after /assets/index-By4YIubB.css so these rules win.
 *
 * 1. Bigger logo. The logo file now has its empty border trimmed
 *    (/images/rjl-logo-trim.png), so the visible logo fills its box.
 * 2. Light footer so the black circle and "& GATES" in the logo show.
 */

/* ---- 1. Header logo ------------------------------------------------- */
.brand { width: 250px; min-width: 250px; }
.brand img { width: 250px; height: 70px; object-fit: contain; object-position: left center; }
@media (width <= 560px) {
  .brand { width: 175px; min-width: 175px; }
  .brand img { width: 175px; height: 49px; }
}

/* ---- 2. Footer: light background ----------------------------------- */
.footer { background: var(--paper); color: var(--ink); border-top: 4px solid var(--orange); }
.footer-brand > img { width: 300px; height: 84px; object-fit: contain; object-position: left center; }
.footer-brand > p { color: var(--muted); }
.footer-contact a, .footer-contact span { color: var(--ink); }
.footer h2 { color: var(--orange); }
.footer li, .footer li a { color: var(--ink); }
.footer li a:hover, .footer-contact a:hover { color: var(--orange); }
.footer-base { border-top: 1px solid var(--line); color: var(--muted); }

/* ---- 3. Rating lockup: 4.4 shown as four full stars + a faded fifth -- */
.star-part { opacity: .35; }

/* ---- 4. Accessibility: text contrast (WCAG AA) ---------------------- */
/* Orange small text on light backgrounds was 2.3-4.0:1; this is >= 4.9:1. */
.eyebrow:not(.eyebrow-light), .service-card-body small, .footer h2 { color: #a83c0e; }
/* Muted grey on grey panels was 4.39:1; this is >= 5.2:1. */
:root { --muted: #555d63; }

/* ---- 5. Accessibility: tap targets at least 24px --------------------- */
.footer-contact a, .contact-detail a { display: inline-block; min-height: 24px; padding: 3px 0; }
/* Article card category labels (orange on white was 4.0:1). */
.article-card > div > span { color: #a83c0e; }

/* ---- 6. 24/7 Rapid Response bar (Oct 2026) --------------------------- */
/* Gate/fence emergencies go to the RJL Group 24/7 line, 0400 101 132.   */
.rapid-bar { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 36px;
  padding: 6px 16px; background: linear-gradient(90deg, #b3121f, #d7192b); color: #fff;
  font: 600 14px/1.3 var(--body); text-decoration: none; text-align: center; }
.rapid-bar strong { letter-spacing: .02em; }
.rapid-bar b { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.rapid-bar:hover, .rapid-bar:focus-visible { background: #9e0f1b; color: #fff; }
.rapid-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #ffffff55; flex: none; }
@media (prefers-reduced-motion: no-preference) { .rapid-dot { animation: rapid-pulse 1.6s ease-in-out infinite; } }
@keyframes rapid-pulse { 50% { box-shadow: 0 0 0 6px #ffffff00; } }
@media (width <= 560px) { .rapid-bar-text { display: none; } .rapid-bar { font-size: 13px; } }
.rapid-button { background: #b3121f !important; border-color: #b3121f !important; color: #fff !important; }
.rapid-button:hover { background: #9e0f1b !important; }
.hero-actions { margin: 1.25rem 0; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.small-print { font-size: .9rem; color: var(--muted); }

/* ---- 7. Sample maintenance report gallery ---------------------------- */
.sample-report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.sample-page { margin: 0; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px #071f3814; }
.sample-page img { display: block; width: 100%; height: auto; }
.sample-page figcaption { padding: .75rem 1rem; font-size: .9rem; color: var(--muted); }
@media (width <= 900px) { .sample-report-grid { grid-template-columns: 1fr; } }

/* 8. Service-area chips that link to a suburb page (Oct 2026). */
.area-group>div>a{background:var(--paper);color:var(--navy,#071f38);border-radius:20px;padding:7px 11px;font-size:.77rem;font-weight:700;text-decoration:underline;text-decoration-color:var(--orange,#f36f21);text-underline-offset:3px}
.area-group>div>a:hover{background:var(--orange,#f36f21);color:#fff;text-decoration:none}
.content-body p a,.content-body .feature-list a{color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--orange-bright);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---- Zing Sans Rust (Fontfabric free font, commercial use allowed under FFF EULA 2.0) - whole site ---- */
@font-face{font-family:"Zing Sans Rust";src:url(/assets/fonts/zing-sans-rust.woff2) format("woff2"),url(/assets/fonts/zing-sans-rust.woff) format("woff");font-style:normal;font-display:swap}
html body,html body *:not(svg):not(svg *),html body input,html body select,html body textarea,html body button{font-family:"Zing Sans Rust",system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important}

/* Residential suburb layout and accessible service-suburb navigation. */
.desktop-nav{gap:clamp(12px,1.35vw,22px)}
.suburb-nav{position:relative}
.suburb-nav summary{cursor:pointer;list-style:none;border-bottom:2px solid transparent;padding:12px 0 10px;white-space:nowrap}
.suburb-nav summary::-webkit-details-marker{display:none}
.suburb-nav summary:hover,.suburb-nav[open] summary{border-color:var(--orange-bright)}
.suburb-nav summary:focus-visible{outline:2px solid var(--orange-bright);outline-offset:4px}
.suburb-nav-panel{position:absolute;z-index:60;top:100%;left:50%;transform:translateX(-50%);display:grid;min-width:230px;padding:12px 18px;background:#fff;color:var(--navy);border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 38px #071f382b}
.desktop-nav .suburb-nav-panel a{padding:10px 4px;white-space:nowrap}
.mobile-suburb-nav summary{font-size:inherit;font-weight:900;padding:16px 0;color:var(--navy)}
.mobile-suburb-nav .suburb-nav-panel{position:static;transform:none;min-width:0;padding:0 0 10px 18px;border:0;box-shadow:none;top:auto;left:auto;background:transparent}
.footer-suburb-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:26px 0 14px;padding:20px 0;border-top:1px solid #ffffff26;color:#ffffffc7;font-size:.82rem}
.footer-suburb-links a:hover{color:var(--orange-bright)}
.suburb-hero h1{max-width:1050px;font-size:clamp(2.8rem,5.1vw,5.1rem)}
.suburb-hero .lead{max-width:820px}
.suburb-hero .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0}
.suburb-hero .breadcrumbs{flex-wrap:wrap}
.suburb-gallery{padding-top:52px;padding-bottom:52px}
.suburb-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.suburb-gallery-grid figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.suburb-gallery-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.suburb-gallery-grid figcaption{padding:16px 18px;color:var(--navy);font-weight:800}
.suburb-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:center}
.suburb-service-text{min-width:0;order:1}
.suburb-service-text p{color:var(--muted);line-height:1.75}
.suburb-service-text h2{margin-bottom:24px}
.suburb-service-text .feature-list{margin:24px 0}
.suburb-service-visual{min-width:0;margin:0;order:2}
.suburb-service-visual img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.suburb-service-visual figcaption{font-size:.82rem;line-height:1.5;color:var(--muted);margin-top:12px}
.suburb-split-reverse .suburb-service-text{order:2}
.suburb-split-reverse .suburb-service-visual{order:1}
@media(max-width:900px){.suburb-split{grid-template-columns:1fr}.suburb-split-reverse .suburb-service-text{order:1}.suburb-split-reverse .suburb-service-visual{order:2}.suburb-gallery-grid{gap:14px}}
@media(max-width:600px){.suburb-gallery-grid{grid-template-columns:1fr}.suburb-hero h1{font-size:clamp(2.45rem,10vw,3.5rem)}.suburb-hero .hero-actions .button{width:100%;justify-content:center}.suburb-gallery{padding-top:36px;padding-bottom:36px}}

/* Give the additional north-west service area card the full available row. */
.area-group.area-group-wide{grid-column:1/-1}

/* align-with-commercial 2026-10-13 */
/* 1. Page headers: same title size rule as RJL Commercial, shorter heroes site-wide */
html body :is(.res-hero-content,.page-hero,.regulation-hero) h1{
  font-size:clamp(30px,4.4vw,56px)!important;line-height:1.12!important;letter-spacing:-.025em!important;
  max-width:1000px;margin-bottom:18px!important}
html body .res-hero-content h1 em{letter-spacing:-.02em!important}
html body :is(.res-hero-content,.page-hero,.regulation-hero) :is(h1 ~ p):not(.eyebrow){
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;font-size:1rem!important;font-weight:400!important;
  line-height:1.65!important;text-transform:none!important;letter-spacing:normal!important;max-width:760px}
html body .res-hero{min-height:0!important}
html body .res-hero-content{min-height:520px!important;padding:56px 0 140px!important;justify-content:center!important}
html body :is(.page-hero,.regulation-hero){padding-top:56px!important;padding-bottom:56px!important}
@media (max-width:900px){
  html body .res-hero-content{min-height:0!important;padding:44px 0 36px!important}
  html body :is(.page-hero,.regulation-hero){padding-top:40px!important;padding-bottom:40px!important}
}

/* 2. Request a quote = orange, same as RJL Commercial's main buttons */
html body .site-header .button,
html body .mobile-menu-actions a[href="/contact-us"],
html body a.button.button-light[href^="/contact-us"]{
  background:var(--orange-bright,#f36f21)!important;border-color:var(--orange-bright,#f36f21)!important;color:var(--navy,#071f38)!important}
html body .site-header .button:hover,html body .site-header .button:focus-visible,
html body .mobile-menu-actions a[href="/contact-us"]:hover,
html body a.button.button-light[href^="/contact-us"]:hover{
  background:var(--orange,#d95420)!important;border-color:var(--orange,#d95420)!important;color:#fff!important}

/* 3. 24/7 Rapid Response tab */
html body .desktop-nav a.nav-rapid{color:#b3121f!important;font-weight:800;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
html body .desktop-nav a.nav-rapid::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#e0202a;animation:rjlRapidPulse 1.8s ease-out infinite}
html body .desktop-nav a.nav-rapid:hover,html body .desktop-nav a.nav-rapid:focus-visible{color:#7d0a14!important}
html body .mobile-menu-panel a.mobile-rapid{background:#9e0f1b;color:#fff!important;border-radius:8px;padding-left:14px;padding-right:14px}
html body .mobile-menu-panel a.mobile-rapid b{color:#fff}
@keyframes rjlRapidPulse{0%{box-shadow:0 0 0 0 rgba(224,32,42,.55)}70%{box-shadow:0 0 0 7px rgba(224,32,42,0)}100%{box-shadow:0 0 0 0 rgba(224,32,42,0)}}
@media (prefers-reduced-motion:reduce){html body .desktop-nav a.nav-rapid::before{animation:none}}
/* page-header photo kept compact; desktop menu on one line with the Rapid Response tab */
html body .page-hero-image{max-height:420px;overflow:hidden}
html body .page-hero-image img{width:100%;height:100%;max-height:420px;object-fit:cover}
html body .desktop-nav>a{white-space:nowrap!important}
@media (max-width:1320px){html body .desktop-nav{gap:11px!important}html body .desktop-nav>a{font-size:10px!important}}