/* Bell Plumbing — WordPress additions to the mockup stylesheet (site.css stays as delivered).
   Sections: fonts · inline-style replacements · mockup bug fixes · images · menu sub-levels · footer · badge · dock · WordPress */

/* ---------- Fonts (self-hosted, latin subset of the Google Fonts files the mockup loaded) ---------- */
/* Same faces as the mockup's Google Fonts request (Archivo 600/800 at 112% width, 900 at 125%; Albert Sans 400–700),
   one variable file each — so a "bolder" heading resolves to the same weight as in the mockup. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-stretch:112%;font-display:swap;src:url(../fonts/archivo-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-stretch:112%;font-display:swap;src:url(../fonts/archivo-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:900;font-stretch:125%;font-display:swap;src:url(../fonts/archivo-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/albert-sans-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/albert-sans-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/albert-sans-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/albert-sans-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Inline-style replacements (the mockup's style="" attributes, same values) ---------- */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.self-start{justify-self:start}
.contact .lhs .ccard{background:var(--navy-3);border-color:transparent}
.contact .lhs .ccard .ic{background:var(--yellow);color:var(--navy)}
.contact .lhs .ccard small{color:#c9c2e3}
.contact .lhs .ccard b{color:#fff}
.box.yellow h3{color:var(--navy)}
.box.yellow p{font-weight:600}
.qa > .prose{padding:0 0 24px}
.reviews .eyebrow{color:#c9c2e3}
.rv-tools{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.sec-head.more{margin-bottom:8px}
.sec-head.more h2{margin-top:12px}
.svc img.pos-30{object-position:center 30%}
.band.split-bg{padding-top:0;background:linear-gradient(var(--paper) 0 30%,var(--white) 30%)}

/* ---------- Mockup bug fixes ---------- */
/* Top bar lines up with the header (mockup: 1200px top bar, 1360px header). */
.topbar .wrap{max-width:1360px}
/* 320–374px: the email address in the contact cards could not wrap, so the card pushed the page
   9px wider (home, contact, service areas) and the "Get in Touch" panel was cut on the right. */
@media (max-width:374px){
  /* long single words in a page title ("INSTALLATIONS", "INDOOROOPILLY") were wider than a 320px screen and got cut */
  .page-hero .ttl{font-size:min(2rem,8.25vw)}
  .ccard > span{min-width:0}
  .ccard b,.contact .lhs .ccard b{overflow-wrap:anywhere}
  .contact .lhs{min-width:0}
}

/* Service area "Why choose us" box (.box.navybox in .sec.alt): .sec.alt .box makes it light, but the mockup kept white
   text on it — unreadable. Dark text like the box beside it; the navy border stays (user feedback 2026-10-29). */
.sec.alt .box.navybox{color:var(--ink)}
.sec.alt .box.navybox h2{color:var(--navy)}
.sec.alt .box.navybox .ticks li{color:var(--navy)}
/* Careers "On offer is": the photo is cut at the knees, so the section has no bottom padding and the photo
   sits on the section's bottom edge (user feedback 2026-10-29). */
.sec.flush-bottom{padding-bottom:0}
.sec.flush-bottom .cols > .stack:last-child{align-self:end}
.sec.flush-bottom figure.img img{border-radius:0}

/* ---------- Images ---------- */
/* WordPress prints width/height on every <img> (no layout shift); the mockup's images had none, so where the mockup
   CSS sets only a width the height must stay automatic, as in the mockup. Rules that set a height still win. */
img{height:auto}
/* Images that were CSS backgrounds in the mockup (now <img>, same crop) */
.hero .bg img,.page-hero .bg img,.bgimg img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.hero .bg img{object-position:center right}
.hero .bg,.reviews .banner{background:none}
.reviews .banner img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.photo{position:relative}
.photo > img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}

/* ---------- Menu: sub-levels below the mockup dropdown (any depth) ---------- */
.dd .menu .dd-sub{position:relative}
.dd .menu .dd-sub > summary{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:500}
.dd .menu .dd-sub > summary::after{transform:translateY(0) rotate(-45deg)}
.dd .menu .dd-sub > .menu{top:-9px;left:calc(100% + 8px)}
.dd.flip > .menu{left:auto;right:-8px}
.dd .menu .dd-sub.flip > .menu{left:auto;right:calc(100% + 8px)}
@media (max-width:1200px){
  nav.main.open .dd .menu .dd-sub > .menu{position:static;box-shadow:none;border:0;padding:0 0 0 14px}
  nav.main.open .dd .menu .dd-sub > summary::after{transform:translateY(-3px) rotate(45deg)}
}

/* ---------- Footer headings (h2 instead of the mockup h4 so heading levels never skip; same look) ---------- */
footer.site .ft-h{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;color:var(--yellow);margin-bottom:18px}

/* ---------- Blog cards: title is an h2 (mockup h3) so heading levels never skip; same look ---------- */
.pcard h2{font-family:var(--display);font-stretch:108%;font-weight:800;font-size:1.18rem;line-height:1.2;color:var(--navy);text-wrap:balance}

/* ---------- Google badge: part-filled star in tenths (mockup 4.7 = .p7 = 70%) ---------- */
.grev-stars .part.p0::after{width:0}
.grev-stars .part.p1::after{width:10%}
.grev-stars .part.p2::after{width:20%}
.grev-stars .part.p3::after{width:30%}
.grev-stars .part.p4::after{width:40%}
.grev-stars .part.p5::after{width:50%}
.grev-stars .part.p6::after{width:60%}
.grev-stars .part.p7::after{width:70%}
.grev-stars .part.p8::after{width:80%}
.grev-stars .part.p9::after{width:90%}

/* ---------- Floating dock (agency pattern): back to top + call + email ----------
   Desktop/tablet: bottom right, call and email open out on hover. ≤600px: the mockup call bar covers
   call/email, so only back-to-top shows, above the call bar (the Google badge sits on the left). */
.dock{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:58;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.dock a{display:flex;align-items:center;height:56px;width:56px;border-radius:999px;overflow:hidden;white-space:nowrap;text-decoration:none;font-weight:700;
  box-shadow:0 12px 34px -10px rgba(20,12,45,.45);transition:width .32s cubic-bezier(.2,.7,.2,1),transform .2s}
.dock a .ic{width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center}
.dock a .lbl{padding-right:22px;opacity:0;transition:opacity .25s}
.dock a svg{width:20px;height:20px}
.dock a.call{background:var(--yellow);color:var(--navy)}
.dock a.email{background:var(--navy);color:var(--white)}
.dock a:hover,.dock a:focus-visible{width:228px;transform:translateY(-2px)}
.dock a.email:hover,.dock a.email:focus-visible{width:172px}
.dock a:hover .lbl,.dock a:focus-visible .lbl{opacity:1}
.dock .totop{width:48px;height:48px;margin-right:4px;padding:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:var(--white);color:var(--navy);border:2px solid var(--yellow);box-shadow:0 12px 34px -10px rgba(20,12,45,.45);
  opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s,background .2s}
.dock .totop.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.dock .totop svg{width:20px;height:20px}
.dock .totop:hover{background:var(--yellow)}
.dock .totop:focus-visible,.dock a:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
@media (max-width:1080px){.dock a:hover,.dock a.email:hover{width:56px}.dock a:hover .lbl{opacity:0}}
@media (max-width:600px){
  .dock{right:12px;bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  .dock a{display:none}
  .dock .totop{width:44px;height:44px;margin-right:0}
}
@media (prefers-reduced-motion:reduce){.dock a,.dock .totop{transition:none;transform:none}}
@media print{.dock{display:none}}

/* ---------- Enquiry form (Gravity Forms; its own CSS is off, the mockup .form-slot rules style fields + button) ---------- */
.form-slot .gform_wrapper{min-width:0}
/* Columns come from the form itself (Forms ▸ Enquiry: drag fields side by side → gfield--width-* classes),
   on a 12-column grid like Gravity Forms' own CSS; one column up to 600px like the mockup form.enq.
   6px under each field like the mockup labels. */
.form-slot .gform_fields{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.form-slot .gfield{grid-column:1/-1;min-width:0;margin:0 0 6px;padding:0;border:0}
.form-slot .gfield--width-quarter{grid-column:span 3}
.form-slot .gfield--width-third{grid-column:span 4}
.form-slot .gfield--width-five-twelfths{grid-column:span 5}
.form-slot .gfield--width-half{grid-column:span 6}
.form-slot .gfield--width-seven-twelfths{grid-column:span 7}
.form-slot .gfield--width-two-thirds{grid-column:span 8}
.form-slot .gfield--width-three-quarter{grid-column:span 9}
.form-slot .gfield--width-five-sixths{grid-column:span 10}
.form-slot .gfield--width-eleven-twelfths{grid-column:span 11}
@media (max-width:600px){.form-slot .gform_fields>.gfield{grid-column:1/-1}}
.form-slot .gfield_label{margin-bottom:6px}
.form-slot .gfield input,.form-slot .gfield textarea{display:block}
.form-slot .gfield textarea{height:130px}
.form-slot iframe[name^="gform_ajax_frame"]{display:none}
.form-slot .gform_validation_container,.form-slot .gfield--type-hidden,.form-slot .gform_hidden{display:none!important}
/* Required mark from the form setting (Forms ▸ Enquiry ▸ Settings ▸ Required Field Indicator) */
.form-slot .gfield_label>.gfield_required{margin-left:3px;color:#b3261e}
/* The "* indicates required fields" line is switched off (inc/gravity-forms.php): drop its empty paragraph */
.form-slot .gform_required_legend:empty{display:none}
.form-slot .gform_footer{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0;padding:0}
.form-slot .gfield_error input,.form-slot .gfield_error textarea{border-color:#b3261e}
.form-slot .gfield_validation_message{margin-top:6px}
.form-slot .gform_validation_errors{padding:12px 16px;border-radius:10px;background:#fbe9e7;color:#b3261e}
.form-slot .gform_validation_errors h2{font:inherit;font-size:.92rem;font-weight:600;margin:0;color:inherit;text-transform:none;letter-spacing:0}
.form-slot .gform_validation_errors .gform-icon{display:none}
.form-slot .gform_validation_errors ol{margin:6px 0 0;padding-left:1.2em;font-size:.88rem}
.form-slot .gform_validation_errors a{color:inherit;text-decoration:underline}
.form-slot .gform_confirmation_message a{color:var(--navy);font-weight:700;text-decoration:underline}
.form-slot .gform-loader{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--navy);border-radius:50%;animation:gf-spin .8s linear infinite}
@keyframes gf-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.form-slot .gform-loader{animation-duration:2.4s}}
/* reCAPTCHA (keys set in Forms ▸ Settings): the v2 box never wider than the form on small phones */
.form-slot .ginput_recaptcha{max-width:100%;overflow:hidden}
@media (max-width:374px){.form-slot .ginput_recaptcha>div{transform:scale(.86);transform-origin:0 0}}
.enq-off{font-weight:600;color:var(--navy)}
.enq-off a{color:var(--navy);text-decoration:underline}

/* ---------- WordPress ---------- */
.gtm-ns{display:none;visibility:hidden}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
/* Admin bar: the mockup .photo rule (min-height 280px) also matches the avatar img.avatar.photo. */
#wpadminbar .photo{min-height:0;height:auto;max-width:none;border-radius:0;overflow:visible;align-self:auto}
/* Sticky header below the admin bar (fixed above 600px, scrolls away below). */
.admin-bar header.site{top:32px}
@media screen and (max-width:782px){.admin-bar header.site{top:46px}}
@media screen and (max-width:600px){.admin-bar header.site{top:0}}