/* ==========================================
   RESPONSIVE LAYOUT LAYER
   Loaded after every other theme stylesheet.

   One content width and one side gutter shared by
   the header, page sections and footer, so the logo,
   headings and footer all line up on every screen:
   - phones:   16px gutter (20px from 481px)
   - tablets:  24px gutter
   - desktop:  32px gutter, 1180px content
   - 1440px+:  1320px content (large monitors)
   - 1920px+:  1440px content (1440p, 4K and ultrawide screens)
========================================== */

:root {
  --dg-content: 1180px;
  --dg-gutter: 16px;
}

@media (min-width: 481px) {
  :root {
    --dg-gutter: 20px;
  }
}

@media (min-width: 769px) {
  :root {
    --dg-gutter: 24px;
  }
}

@media (min-width: 1101px) {
  :root {
    --dg-gutter: 32px;
  }
}

@media (min-width: 1440px) {
  :root {
    --dg-content: 1320px;
  }
}

@media (min-width: 1920px) {
  :root {
    --dg-content: 1440px;
  }
}

.container,
.mechanic-home .container {
  width: min(100% - (var(--dg-gutter) * 2), var(--dg-content));
}

.footer-gallery,
.custom-footer__inner,
.custom-footer__bottom {
  width: min(100%, var(--dg-content));
}

.custom-site-footer {
  padding-left: var(--dg-gutter);
  padding-right: var(--dg-gutter);
}

/* Header: logo and menu sit on the same edges as the page content
   instead of the far corners of the screen. */
@media (min-width: 769px) {
  #masthead .site-container {
    width: min(100% - (var(--dg-gutter) * 2), var(--dg-content));
    max-width: none !important;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .site-header-row-container-inner {
    padding-left: var(--dg-gutter) !important;
    padding-right: var(--dg-gutter) !important;
  }
}

/* ==========================================
   LARGE SCREENS
========================================== */

/* Sharper hero photo on screens wider than the 1920px image. */
@media (min-width: 1921px) {
  .hero {
    background:
      linear-gradient(
        90deg,
        rgba(31, 36, 38, 0.78) 0%,
        rgba(31, 36, 38, 0.6) 48%,
        rgba(31, 36, 38, 0.35) 100%
      ),
      url("../images/hero-2560.jpg") center/cover no-repeat;
  }
}

/* Wide content columns: keep paragraphs to a readable line length. */
@media (min-width: 1025px) {
  .service-detail-card p,
  .service-detail-card li,
  .internal-copy p {
    max-width: 72ch;
  }
}

@media (min-width: 1440px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.7fr);
  }
}

/* ==========================================
   TABLETS (769px - 1024px)
========================================== */

/* Before / after: two cards per row instead of one tall stack. */
@media (min-width: 641px) and (max-width: 900px) {
  .before-after-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .before-after-card__images,
  .before-after-image {
    height: 220px;
  }
}

/* Why us: reason cards in two columns under the photo. */
@media (min-width: 641px) and (max-width: 1024px) {
  .why-reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .why-reasons .why-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .why-actions {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .why-image {
    max-width: none;
  }

  .why-image__frame,
  .why-image__frame img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/* Comfortable line length for single-column service, area and article
   content (~70 characters a line). */
@media (max-width: 1024px) {
  .service-detail-layout {
    max-width: 720px;
  }
}

/* ==========================================
   PHONES (up to 720px)
========================================== */

@media (max-width: 720px) {
  /* Section rhythm: less dead space between sections. */
  .section,
  .internal-section,
  .service-related,
  .single-service-page .service-detail-section,
  .how-it-works,
  .gallery-section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .section-header {
    margin-bottom: 26px;
  }

  .section-header h2,
  .quote-section h2 {
    font-size: clamp(1.75rem, 7.6vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
  }

  /* Homepage hero: headline sized for a phone, so the buttons
     appear in the first screen. */
  .hero {
    padding-top: 100px !important;
    padding-bottom: 44px;
  }

  .hero__inner {
    gap: 28px;
  }

  .hero__eyebrow {
    margin-bottom: 16px;
  }

  .hero__heading {
    margin-bottom: 16px;
    font-size: clamp(2.1rem, 9.6vw, 2.75rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
  }

  .hero__sub {
    margin-bottom: 24px;
    font-size: 1rem;
    line-height: 1.6;
  }

  /* Full-width stacked buttons (the grid was shrinking to the text width). */
  .hero__ctas {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__ctas .btn {
    width: 100%;
    max-width: none;
  }

  .hero__panel-card {
    padding: 20px;
  }

  .hero-hours__list {
    gap: 4px;
    margin: 12px 0;
  }

  /* Inner page heroes */
  .internal-hero {
    padding-top: 100px !important;
    padding-bottom: 48px;
  }

  .internal-hero h1 {
    margin-bottom: 14px;
    font-size: clamp(2rem, 9vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
  }

  .internal-hero p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .internal-hero__actions {
    margin-top: 20px;
  }

  /* Service cards: icon beside the text (app-style list) instead of
     a tall centred stack. */
  .services-grid {
    gap: 14px;
  }

  .service-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 20px;
    text-align: left;
  }

  .service-card__icon {
    grid-row: 1 / span 3;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 14px;
  }

  .service-card__icon svg {
    width: 24px;
    height: 24px;
  }

  .service-card__title {
    margin-bottom: 6px;
    font-size: 1.1rem;
  }

  .service-card__desc {
    margin: 0 0 10px;
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .service-card__link {
    justify-content: flex-start;
    min-height: 32px;
  }

  /* Why us: shorter photo, icon beside each reason. */
  .why-image__frame,
  .why-image__frame img,
  .why-image .img-placeholder {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .why-reasons {
    gap: 12px;
  }

  .why-reasons .why-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    text-align: left;
  }

  .why-card h3 {
    margin-bottom: 4px;
    font-size: 1.1rem;
  }

  .why-card p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  /* Stats: three across, like a scoreboard. */
  .stats-section {
    padding: 36px 0;
  }

  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .stat-divider {
    display: none;
  }

  .stat-number,
  .stat-suffix {
    font-size: clamp(1.75rem, 8vw, 2.3rem);
  }

  .stat-label {
    font-size: 0.82rem;
    line-height: 1.3;
  }

  /* Service areas: two chips per row. */
  .areas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .area-chip {
    width: 100%;
    min-height: 48px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.95rem;
    white-space: nowrap;
  }

  /* Swipe rows: reviews and tip cards share the page gutter. */
  .testimonials-section .testimonials-track,
  .blog-section .tips-grid,
  .tips-related .tips-grid {
    margin-inline: calc(var(--dg-gutter) * -1);
    padding-inline: var(--dg-gutter);
    scroll-padding-inline: var(--dg-gutter);
  }

  .blog-section .tips-grid,
  .tips-related .tips-grid {
    display: flex;
    gap: 14px;
    padding-top: 4px;
    padding-bottom: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  /* position: relative keeps the cards' hidden screen-reader text inside
     the row; otherwise it widens the page and lets it scroll sideways. */
  .blog-section .tips-grid > *,
  .tips-related .tips-grid > * {
    position: relative;
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  /* How it works: number beside each step. */
  .how-it-works__steps {
    gap: 12px;
    margin-top: 26px;
  }

  .how-it-works__step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    padding: 20px;
    text-align: left;
  }

  .how-it-works__number {
    grid-row: 1 / span 2;
    margin: 0;
  }

  /* Detail cards: a little more room for text. */
  .service-detail-card,
  .service-sidebar-card {
    padding: 22px;
  }

  /* Footer: compact, left-to-right reading instead of one long column. */
  .custom-site-footer {
    padding-top: 36px;
    padding-bottom: 28px;
  }

  .footer-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 32px;
  }

  .footer-gallery img {
    width: 56px;
    max-width: 56px;
    height: 40px;
    max-height: 40px;
  }

  .custom-footer__inner {
    gap: 28px;
  }

  .custom-footer__col h3,
  .custom-footer__col h4 {
    margin-bottom: 10px;
  }

  .custom-footer__services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .custom-footer__services h4 {
    grid-column: 1 / -1;
  }

  .custom-footer__col .custom-footer__services a,
  .custom-footer__services > a {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
  }

  .custom-footer__bottom {
    margin-top: 28px;
  }

  .custom-footer__bottom nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 20px;
  }
}

/* Footer and review links: tap targets of at least 24px (WCAG 2.2),
   closer to the 44px Apple recommends where space allows. */
.custom-footer__col > a,
.custom-footer__col > p {
  margin-bottom: 4px;
  padding: 4px 0;
}

.custom-footer__bottom nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.testimonial-card__google {
  padding: 6px;
  margin: -6px;
}

.hero .rating-badge,
.service-sidebar-card .rating-badge {
  min-height: 40px;
}

@media (max-width: 720px) {
  .custom-footer__services > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 4px 0;
  }
}

/* Small phones (iPhone SE / mini) */
@media (max-width: 380px) {
  .hero__heading {
    font-size: 2rem;
  }

  .hero__eyebrow {
    font-size: 0.66rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }
}

/* Before / after on phones: before and after side by side, so the
   comparison reads at a glance and each card is half the height. */
@media (max-width: 560px) {
  .before-after-card__images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 190px;
  }

  .before-after-image {
    height: 190px;
  }

  .before-after-image + .before-after-image {
    border-top: 0;
    border-left: 1px solid #ffffff;
  }

  .before-after-image span {
    top: 10px;
    left: 10px;
  }

  .before-after-card__body {
    padding: 16px 18px 18px;
  }
}

/* Footer address: two short lines (street + unit, city + postcode) with the
   pin beside the first line, so the icon stays attached to the text when
   the column is centred on phones. */
.footer-location {
  align-items: flex-start !important;
}

.footer-location svg {
  margin-top: 0.2em;
}

.footer-location__address {
  text-align: left;
}

.footer-location__address > span {
  display: block;
}

/* ==========================================
   MOBILE MENU DRAWER (phones and tablets)
   Follows the pattern used by most service and retail
   sites: logo + round close button at the top, large
   full-width rows, sub-menus as accordions, and the
   main actions (quote, call, open status) pinned to
   the bottom where thumbs reach them.
========================================== */

#mobile-drawer .drawer-overlay {
  background-color: rgba(10, 13, 15, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

#mobile-drawer .drawer-inner {
  width: 100%;
  max-width: 420px;
  background: #1f2426;
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
  #mobile-drawer .drawer-inner {
    max-width: 100%;
  }
}

/* Close button: a clear 44px round target in the top-right corner. */
#mobile-drawer .drawer-header {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  min-height: 0;
  padding: 14px var(--dg-gutter) 0 0;
}

#mobile-drawer .drawer-header .drawer-toggle,
#mobile-drawer .drawer-header .drawer-toggle:focus {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-size: 22px;
  box-sizing: border-box;
}

#mobile-drawer .drawer-header .drawer-toggle:hover,
#mobile-drawer .drawer-header .drawer-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

#mobile-drawer .drawer-header .drawer-toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

#mobile-drawer .drawer-content {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding: 0 var(--dg-gutter);
  background: transparent;
}

/* Logo row (same height as the page header). */
.drawer-brand {
  display: flex;
  align-items: center;
  min-height: 72px;
  margin: 0 calc(var(--dg-gutter) * -1) 6px;
  padding: 0 72px 0 var(--dg-gutter);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-brand__logo {
  display: inline-flex;
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
}

.drawer-brand__logo img {
  display: block;
  width: 64px;
  height: auto;
}

/* Menu rows */
#mobile-drawer .mobile-navigation ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1.15rem;
}

#mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
#mobile-drawer .mobile-navigation ul li:not(.menu-item-has-children) a {
  border-bottom: 0;
}

#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap > a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 12px;
  border-radius: 12px;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Current page: white bar on the left instead of a colour change. */
#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
#mobile-drawer .mobile-navigation ul li.current-menu-item > .drawer-nav-drop-wrap > a,
#mobile-drawer .mobile-navigation ul li.current-menu-ancestor > .drawer-nav-drop-wrap > a {
  color: #ffffff;
  box-shadow: inset 3px 0 0 #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
}

/* Sub-menu toggle: a 48px chevron button with no divider line. */
#mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap button.drawer-sub-toggle {
  flex: 0 0 48px;
  width: 48px;
  height: auto;
  min-height: 56px;
  border: 0;
  border-radius: 12px;
}

#mobile-drawer .drawer-sub-toggle:hover,
#mobile-drawer .drawer-sub-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

#mobile-drawer .drawer-sub-toggle svg {
  transition: transform 0.2s ease;
}

/* Sub-menus: smaller, lighter, indented under their parent. */
#mobile-drawer .mobile-navigation ul ul.sub-menu {
  margin: 0 0 10px;
  padding: 0 0 0 12px;
}

#mobile-drawer .mobile-navigation ul ul li {
  border-bottom: 0;
  font-size: 1rem;
}

#mobile-drawer .mobile-navigation ul ul li > a {
  min-height: 44px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

#mobile-drawer .mobile-navigation ul ul li > a:hover,
#mobile-drawer .mobile-navigation ul ul li > a:focus-visible,
#mobile-drawer .mobile-navigation ul ul li.current-menu-item > a {
  color: #ffffff;
}

/* Quick actions pinned to the bottom of the drawer. */
.drawer-quick {
  position: sticky;
  bottom: 0;
  margin: auto calc(var(--dg-gutter) * -1) 0;
  padding: 18px var(--dg-gutter) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #1f2426;
}

.drawer-quick__status {
  margin: 0 0 12px;
}

.drawer-quick__status .open-status.is-closed {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}

.drawer-quick__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.drawer-quick__actions .btn {
  width: 100%;
  padding-left: 12px;
  padding-right: 12px;
}

/* Short phones (iPhone SE): leave more room for the menu itself. */
@media (max-height: 700px) {
  .drawer-quick {
    padding-top: 12px;
  }

  .drawer-quick__status {
    margin-bottom: 8px;
  }

  .drawer-quick__links {
    margin-top: 4px;
  }
}

.drawer-quick__actions .btn--outline:focus {
  color: #ffffff;
}

.drawer-quick__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 12px;
}

.drawer-quick__links a,
.drawer-quick__links a:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 4px;
}

.drawer-quick__links a:hover,
.drawer-quick__links a:focus-visible {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

/* Hamburger button: a matching 44px round target on the page header. */
@media (max-width: 1024px) {
  #masthead .menu-toggle-open {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 999px;
  }

  #masthead .menu-toggle-open:hover,
  #masthead .menu-toggle-open:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff !important;
  }

  #masthead .menu-toggle-open svg {
    width: 22px !important;
    height: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mobile-drawer .drawer-overlay {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Contact page on phones: the dark frame and the white form card each had
   their own padding, squeezing the fields to ~265px on a 390px phone. */
@media (max-width: 640px) {
  .internal-contact-layout {
    padding: 10px;
    border-radius: 22px;
  }

  .internal-contact-layout .contact-card {
    padding: 22px 16px;
    border-radius: 16px;
  }
}

/* ==========================================
   TYPE SCALE
   Body copy was 17px on desktop but dropped to 15-16px in several
   places on phones, and labels, tags, dates and form hints sat at
   11.5-13.6px. Common practice (Apple, GOV.UK, Material) is 16-18px
   for reading text and about 13px as the floor for small uppercase
   labels, so:
   - reading text: 17px on phones, 18px on desktop
   - card text: at least 16px
   - hints, dates, captions: at least 14.4px
   - uppercase labels and tags: at least 12.8-13px
   Secondary grey is a shade darker (5.0:1 -> 5.8:1 contrast) so
   lighter text stays easy to read.
========================================== */

:root {
  --mechanic-muted: #5f6a6d;
}

/* Reading text on desktop */
@media (min-width: 1025px) {
  .section-sub,
  .service-detail-card p,
  .service-list li,
  .internal-copy p,
  .blog-post-content p,
  .blog-post-content li,
  .service-sidebar-card p {
    font-size: 1.125rem;
  }
}

/* Reading text on phones: back up to the 17px body size. */
@media (max-width: 720px) {
  .hero__sub,
  .internal-hero p,
  .section-sub,
  .service-detail-card p,
  .internal-copy p {
    font-size: 1.0625rem;
  }

  .service-card__desc,
  .why-card p,
  .custom-footer__services > a,
  .custom-footer__col .custom-footer__services a {
    font-size: 1rem;
  }

  .stat-label {
    font-size: 0.875rem;
  }
}

@media (max-width: 380px) {
  .stat-label {
    font-size: 0.8125rem;
  }
}

/* Uppercase labels, kickers and tags */
.section-label,
.internal-kicker,
.gallery-page .internal-kicker,
.gallery-cta .gallery-kicker {
  font-size: 0.8125rem;
}

@media (max-width: 720px) {
  .section-label {
    font-size: 0.8125rem;
  }
}

.tip-card__tag,
.gallery-card__body .gallery-card__tag,
.before-after-card__body > span {
  font-size: 0.8rem;
}

/* Dates, hints and helper text */
.tip-card__meta,
.form-hint,
.quote-section .form-hint,
.contact-card .form-hint,
.form-privacy-note,
.quote-section .form-privacy-note,
.contact-card .form-privacy-note,
.hero__panel-card .hero-map-choice__hint,
.gallery-card__body .gallery-card__view {
  font-size: 0.9rem;
}

.form-group input[type="file"] {
  font-size: 0.95rem;
}

/* Same darker grey where it was hard-coded. */
.service-detail-card p,
.service-sidebar-card p,
.service-related-card span,
.before-after-card__body > span {
  color: var(--mechanic-muted);
}

/* Remaining small labels */
.hero__eyebrow,
.hero__panel-card > span:first-child,
.before-after-image span {
  font-size: 0.8125rem;
}

@media (max-width: 430px) {
  .hero__eyebrow {
    font-size: 0.75rem;
  }
}

.breadcrumbs ol,
.testimonial-summary__source,
.rating-badge {
  font-size: 0.9rem;
}

/* ==========================================
   NAVIGATION TYPE
   Desktop menu was 17px at a thin 400 weight with wide 29px gaps;
   dropdown items were only 12px. Drawer sub-items were the same
   size as their parents, so the hierarchy was flat.
========================================== */

/* Desktop top level: semi-bold, gaps that shrink on smaller laptops so
   all eight items fit beside the logo. */
#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a {
  padding-left: clamp(9px, 0.95vw, 16px);
  padding-right: clamp(9px, 0.95vw, 16px);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

/* "Book Now" as the menu's call-to-action button. */
#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a[href*="book-a-service"] {
  /* Kadence's width: 100% plus the margin pushed the text off centre; the side padding has to beat front-page.css's !important. */
  width: auto;
  margin-left: 8px;
  padding: 10px 14px !important;
  border-radius: 12px;
  text-align: center;
  background: #ffffff;
  color: #1f2426;
  font-weight: 800;
  text-decoration: none;
}

#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a[href*="book-a-service"]:hover,
#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a[href*="book-a-service"]:focus-visible {
  background: #e2e7e8;
  color: #1f2426;
}

#masthead .main-navigation .primary-menu-container > ul > li.menu-item > a[href*="book-a-service"]:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Desktop dropdowns: readable 15px items, wide enough for long names. */
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a {
  width: 250px;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  font-size: 0.9375rem;
  line-height: 1.35;
}

/* Mobile drawer: 18px parents, 16px children. */
#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap > a {
  font-size: 1.125rem;
}

#mobile-drawer .mobile-navigation ul ul li > a {
  font-size: 1rem;
}

/* Small laptops / landscape tablets (1025-1099px): tighter so the menu
   stays on one line. */
@media (min-width: 1025px) and (max-width: 1099px) {
  #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 1rem;
  }

  #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a[href*="book-a-service"] {
    margin-left: 4px;
    padding: 9px 14px;
  }

  #masthead .site-branding img {
    max-width: 160px;
  }
}

/* ==========================================
   MOTION
   Small, fast transitions that explain what changed, using only
   opacity and transform (handled by the GPU, no layout work).
   Only the scroll fade uses JavaScript (motion.js, under 1 KB);
   browsers without support simply skip the rest, and everything is
   switched off for "reduce motion".
========================================== */

@media (prefers-reduced-motion: no-preference) {
  /* 1. Page-to-page: a quick cross-fade instead of a white flash
        (Chrome, Edge, Safari 18.2+). */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.18s;
    animation-timing-function: ease-out;
  }

  /* 2. Desktop dropdowns fade and drop in. */
  #masthead .header-navigation ul li:hover > ul.sub-menu,
  #masthead .header-navigation ul li:focus-within > ul.sub-menu,
  #masthead .header-navigation ul li.menu-item--toggled-on > ul.sub-menu {
    animation: dg-drop-in 0.16s ease-out;
  }

  /* 3. Mobile menu sub-lists ease open. */
  #mobile-drawer .mobile-navigation ul.sub-menu.show-drawer {
    animation: dg-drop-in 0.2s ease-out;
  }

  /* 4. FAQ answers expand smoothly instead of jumping open
        (Chrome/Edge 131+; others open instantly as before). */
  :root {
    interpolate-size: allow-keywords;
  }

  .service-faq::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.25s ease, content-visibility 0.25s allow-discrete;
  }

  .service-faq[open]::details-content {
    height: auto;
  }

  .service-faq summary::after {
    transition: transform 0.2s ease;
  }

  /* 5. Cards and section headings below the fold fade up as they
        scroll into view. motion.js adds .dg-reveal only to content that
        starts off-screen, so nothing visible is ever hidden, and removes
        it once shown so the cards' own hover transitions keep working. */
  .dg-reveal {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 0.5s ease, translate 0.5s ease;
  }

  .dg-reveal.is-visible {
    opacity: 1;
    translate: none;
  }

  .dg-reveal.is-visible:nth-child(3n + 2) {
    transition-delay: 0.06s;
  }

  .dg-reveal.is-visible:nth-child(3n + 3) {
    transition-delay: 0.12s;
  }

  /* 6. Buttons press in slightly when tapped or clicked. */
  .btn:active,
  .mobile-action-bar a:active,
  .drawer-quick__actions .btn:active {
    transform: scale(0.98);
    transition-duration: 0.05s;
  }
}

@keyframes dg-drop-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}



/* ==========================================
   BACK TO TOP
   Bottom-right round button on long pages (shown by back-to-top.js).
   On phones it sits above the Call / Get a Quote bar.
========================================== */

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 8000;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: #1f2426;
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(31, 36, 38, 0.3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s, background-color 0.15s ease;
}

.back-to-top[hidden] {
  display: none;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s, background-color 0.15s ease;
}

/* Kadence recolours buttons on hover/focus; keep the button's own colours. */
.back-to-top:hover,
.back-to-top:focus,
.back-to-top:focus-visible,
.back-to-top:active {
  background: #3a4245;
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(31, 36, 38, 0.3);
}

.back-to-top:focus-visible {
  outline: 2px solid #1f2426;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .back-to-top {
    right: 14px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top,
  .back-to-top.is-visible {
    transform: none;
  }
}

/* Long-form text reads left-aligned: centred paragraphs make the eye hunt
   for the start of each line. Articles and service/area detail cards were
   centred on phones; short cards and headings elsewhere stay centred. */
@media (max-width: 1024px) {
  .blog-post-content,
  .service-detail-card {
    text-align: left;
  }

  .service-detail-card .section-label {
    justify-content: flex-start;
  }
}

/* 404 page: phone link in the intro (the default section text colour is
   white on this page's white background). */
.not-found-page .section-sub a.not-found-phone,
.not-found-page .section-sub a.not-found-phone:visited {
  color: #1f2426;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.not-found-page .section-sub a.not-found-phone:hover,
.not-found-page .section-sub a.not-found-phone:focus-visible {
  color: #3a4245;
  text-decoration-thickness: 2px;
}

@media (max-width: 700px) {
  .not-found-page .service-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .not-found-page .service-related-card {
    padding: 16px 14px;
  }
}

/* "Text a photo" links: only on phones and tablets, where sms: links open
   the messaging app. Hidden on mouse-driven computers. */
@media (hover: hover) and (pointer: fine) {
  .sms-only {
    display: none !important;
  }
}

.form-hint .sms-only a {
  color: #1f2426;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================
   HEADER THAT RETURNS ON SCROLL UP
   sticky-header.js pins the header off-screen once it has scrolled
   away (.dg-header--fixed) and slides a compact dark version back in
   when the visitor scrolls up (.dg-header--shown).
========================================== */

#masthead.dg-header--fixed {
  position: fixed !important;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  z-index: 9500;
  margin-top: 0;
  background: #1f2426;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transform: translateY(calc(-100% - 12px));
}

#masthead.dg-header--fixed.dg-header--shown {
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  #masthead.dg-header--fixed {
    transition: transform 0.25s ease;
  }
}

/* Compact layout while pinned: no negative offsets, smaller logo. */
#masthead.dg-header--fixed .site-branding,
#masthead.dg-header--fixed .header-navigation,
#masthead.dg-header--fixed .main-navigation,
#masthead.dg-header--fixed .site-header-section-right {
  margin-top: 0 !important;
  transform: none !important;
}

#masthead.dg-header--fixed #main-header .site-main-header-inner-wrap {
  min-height: 72px;
}

#masthead.dg-header--fixed #main-header .site-branding img {
  max-width: 96px;
  max-height: 56px;
  width: auto;
}

@media (max-width: 1024px) {
  #masthead.dg-header--fixed .site-main-header-wrap,
  #masthead.dg-header--fixed .site-main-header-inner-wrap,
  #masthead.dg-header--fixed .site-header-row-container-inner {
    min-height: 60px !important;
  }

  #masthead.dg-header--fixed .site-branding,
  #masthead.dg-header--fixed .site-branding a,
  #masthead.dg-header--fixed .site-branding img,
  #masthead.dg-header--fixed .custom-logo {
    width: 52px !important;
    max-width: 52px !important;
  }
}