/*
 * JP Whyte Decorators — mobile presentation repair, 7 August 2026
 * Loaded after the established theme and SEO styles. These rules only repair
 * layout, legibility and media sizing; they do not alter page content or URLs.
 * Version 6 keeps every supplied before-and-after hero at its natural ratio so
 * the labels and outer edges remain visible on narrow mobile screens.
 */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

/* White project cards also appear inside dark proof bands. Give their copy an
   explicit colour rather than allowing the white band colour to inherit. */
.project-proof-card,
.project-proof-card .copy {
  color: #07152b;
}

.project-proof-card h2,
.project-proof-card h3,
.project-proof-card .copy h2,
.project-proof-card .copy h3 {
  color: #07152b !important;
  opacity: 1 !important;
}

.project-proof-card p,
.project-proof-card .copy p {
  color: #526072 !important;
  opacity: 1 !important;
}

.project-proof-card .link-more {
  color: #087cc4 !important;
}

/* Portrait photographs previously used their intrinsic height and could fill
   almost an entire phone screen. Standard cards now use a consistent crop. */
.project-proof-card > img {
  display: block !important;
  width: 100% !important;
  height: 250px !important;
  min-height: 0 !important;
  max-height: 250px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #edf5fa !important;
}

/* Supplied before-and-after composites are already carefully framed. Show the
   complete comparison instead of cropping either half. */
.project-proof-card > img[src*="before-after"],
.project-gallery-wide img[src*="before-after"] {
  height: 220px !important;
  min-height: 0 !important;
  max-height: 220px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: #edf5fa !important;
}

.project-gallery-wide img {
  display: block !important;
  width: 100% !important;
  height: 280px !important;
  min-height: 0 !important;
  max-height: 280px !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #edf5fa !important;
}

/* The base theme adds a data-step disc to every process card. SEO process
   cards already contain their own numbered disc, which caused a blank extra
   bubble. Keep the original homepage timeline untouched. */
.process-grid .process-step::before {
  content: none !important;
  display: none !important;
}

.process-grid .process-number {
  display: inline-grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 0 .9rem !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #061326, #1498ee) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(11, 105, 176, .22) !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

/* Kicker labels inside pale cards must remain readable. */
.local-context-copy > .kicker,
.nearby-links > .kicker,
.local-context-copy .kicker,
.nearby-links .kicker {
  color: #075c9c !important;
  background: #e9f6ff !important;
  border-color: #b9ddf5 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

@media (max-width: 900px) {
  /* The six-dot navigation rail obscured cards and captions on iPhone. */
  .flow-rail {
    display: none !important;
  }

  /* Safari can leave an observed reveal element transparent while still
     reserving all of its height. Mobile content should never depend on JS. */
  body main .reveal,
  body main .reveal:not(.is-visible),
  body main section.reveal,
  body main article.reveal,
  body main figure.reveal,
  body main div.reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    pointer-events: auto !important;
  }

  body,
  main,
  .site-main {
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  main > section,
  main > section.reveal,
  .page-route,
  .gallery-section,
  .project-showcase,
  .quote-section {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    content-visibility: visible !important;
    contain: none !important;
  }

  main > section:not(.hero):not(.cinematic-hero):not(.page-hero),
  .page-route,
  .gallery-section,
  .project-showcase,
  .quote-section {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  .section-head {
    margin-bottom: 1.15rem !important;
  }

  /* Long advice and location headings must wrap within the viewport. */
  .page-hero h1,
  .section-head h1,
  .section-head h2 {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
    text-wrap: balance;
  }

  .page-hero h1 {
    font-size: clamp(2.05rem, 9vw, 2.65rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.05em !important;
  }

  .page-hero-image,
  .page-hero-image img {
    min-height: 0 !important;
    max-height: 250px !important;
  }

  .page-hero-image img {
    height: 250px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Keep the useful call/quote actions without floating over page content. */
  .mobile-sticky-cta,
  .sticky-cta {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: min(calc(100% - 1.5rem), 680px) !important;
    margin: 1.2rem auto 0 !important;
    padding: .42rem !important;
    gap: .45rem !important;
    z-index: 2 !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 12px 34px rgba(4, 16, 35, .14) !important;
  }

  .mobile-sticky-cta a,
  .sticky-cta a {
    min-height: 48px !important;
    padding: .7rem !important;
    border-radius: 16px !important;
    font-size: 1rem !important;
  }

  footer,
  .site-footer {
    margin-top: 0 !important;
    padding-bottom: 3rem !important;
  }

  .project-proof-grid,
  .project-gallery-wide,
  .process-grid {
    gap: 1rem !important;
  }

  .project-proof-card > img {
    height: 220px !important;
    max-height: 220px !important;
  }

  .project-proof-card > img[src*="before-after"] {
    height: 170px !important;
    max-height: 170px !important;
  }

  .project-gallery-wide img {
    height: 220px !important;
    max-height: 220px !important;
  }

  .project-gallery-wide img[src*="before-after"] {
    height: 190px !important;
    max-height: 190px !important;
  }

  /* Compact the interactive homepage comparisons while keeping both images
     clear enough to drag and inspect. */
  .ba-slider-ready .ba-images,
  .before-after-grid .ba-images {
    height: 245px !important;
    min-height: 245px !important;
    max-height: 245px !important;
  }

  .ba-slider-ready .ba-images img {
    height: 100% !important;
    max-height: none !important;
  }
}

@media (max-width: 480px) {
  .container {
    width: min(calc(100% - 1.5rem), 1180px) !important;
  }

  .page-hero {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .page-hero h1 {
    font-size: clamp(2rem, 8.8vw, 2.35rem) !important;
  }

  .project-proof-card .copy,
  .project-gallery-wide figcaption {
    padding: 1rem !important;
  }

  .project-proof-card > img {
    height: 205px !important;
    max-height: 205px !important;
  }

  .project-proof-card > img[src*="before-after"] {
    height: 165px !important;
    max-height: 165px !important;
  }

  .project-gallery-wide img {
    height: 205px !important;
    max-height: 205px !important;
  }

  .project-gallery-wide img[src*="before-after"] {
    height: 185px !important;
    max-height: 185px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal:not(.is-visible) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }
}

/* -------------------------------------------------------------------------
   Visual alignment and contrast follow-up, 7 August 2026
   ------------------------------------------------------------------------- */

/* An older, highly-specific alternating-section rule could replace the dark
   proof-band background while its white text remained. Keep the intended
   dark treatment and make every heading and supporting line unambiguous. */
body main > section.proof-band,
body main > section.proof-band:nth-of-type(even),
body main > section.proof-band:nth-of-type(odd) {
  background:
    radial-gradient(circle at 82% 18%, rgba(24, 138, 213, .30), transparent 32%),
    linear-gradient(135deg, #020816 0%, #07152b 54%, #0a3b70 100%) !important;
  color: #fff !important;
}

body main > section.proof-band .section-head h1,
body main > section.proof-band .section-head h2,
body main > section.proof-band .section-head h3 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  text-shadow: 0 12px 34px rgba(0, 0, 0, .22) !important;
}

body main > section.proof-band .section-head p,
body main > section.proof-band .seo-intro {
  color: rgba(255, 255, 255, .90) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .90) !important;
  opacity: 1 !important;
}

body main > section.proof-band .section-head .kicker,
body main > section.proof-band > .container > .kicker {
  color: #bfeaff !important;
  -webkit-text-fill-color: #bfeaff !important;
  background: rgba(4, 23, 48, .58) !important;
  border-color: rgba(191, 234, 255, .34) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Light content sections should never inherit the white hero treatment. */
body main > section:not(.page-hero):not(.hero):not(.cinematic-hero):not(.proof-band):not(.dark-section):not(.designer-flow) > .container > .section-head h1,
body main > section:not(.page-hero):not(.hero):not(.cinematic-hero):not(.proof-band):not(.dark-section):not(.designer-flow) > .container > .section-head h2,
body main > section:not(.page-hero):not(.hero):not(.cinematic-hero):not(.proof-band):not(.dark-section):not(.designer-flow) > .container > .section-head h3 {
  color: #07152b !important;
  -webkit-text-fill-color: #07152b !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body main > section:not(.page-hero):not(.hero):not(.cinematic-hero):not(.proof-band):not(.dark-section):not(.designer-flow) > .container > .section-head p,
body main > section:not(.page-hero):not(.hero):not(.cinematic-hero):not(.proof-band):not(.dark-section):not(.designer-flow) > .container > .section-head .seo-intro {
  color: #526072 !important;
  -webkit-text-fill-color: #526072 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body main > section:not(.page-hero):not(.hero):not(.cinematic-hero):not(.proof-band):not(.dark-section):not(.designer-flow) > .container > .section-head .kicker {
  color: #075c9c !important;
  -webkit-text-fill-color: #075c9c !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Keep the accessibility shortcut available to keyboard users without letting
   mobile Safari retain it as a permanently focused, overlapping control. */
.skip-link,
.skip-link:focus:not(:focus-visible) {
  transform: translateY(-240%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.skip-link:focus-visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (hover: none) and (pointer: coarse) {
  .skip-link,
  .skip-link:focus,
  .skip-link:active,
  .skip-link:focus-visible {
    display: none !important;
  }
}

@media (max-width: 900px) {
  /* Standard hero photography uses one consistent, centred frame. */
  .page-hero-image {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 10 !important;
    display: block !important;
    padding: 0 !important;
    background: #07152b !important;
  }

  .page-hero-image > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  /* Supplied comparison artwork is much wider than a normal photograph. Use
     its natural shape so BEFORE/AFTER labels and the centre line stay intact. */
  .page-hero-image:has(> img[src*="before-after"]) {
    aspect-ratio: 40 / 17 !important;
  }

  .page-hero-image > img[src*="before-after"] {
    object-fit: contain !important;
    object-position: center !important;
    background: #07152b !important;
  }

  /* The commercial Darnhall comparison predates the named project files and
     therefore has a generated filename. Treat it as comparison artwork too:
     use its true 16:9 shape and remove the normal-photo crop. */
  .page-hero-image:has(> img[src*="7dfcc798-4c86-499c-8add-ed6c2dd02f2a"]) {
    aspect-ratio: 375 / 211 !important;
  }

  .page-hero-image > img[src*="7dfcc798-4c86-499c-8add-ed6c2dd02f2a"] {
    object-fit: contain !important;
    object-position: center !important;
    background: #07152b !important;
  }

  /* Bring the generated labels safely inside interactive comparisons. */
  .ba-slider-ready .ba-images figure:nth-child(1) span {
    left: .72rem !important;
    right: auto !important;
  }

  .ba-slider-ready .ba-images figure:nth-child(2) span {
    left: auto !important;
    right: .72rem !important;
  }

  /* This source is taller than the other gallery composites. Crop its preview
     from the top so the grid stays aligned and both labels remain visible. */
  .project-gallery-wide img[src*="darnhall-classroom-door-before-after"] {
    object-fit: cover !important;
    object-position: center top !important;
  }
}