/*
 * Verbatim DOM port — Shane's live Oxygen build (stonecraftroofers.ie).
 *
 * Shane's ruling (rejecting the earlier framework-adaptation attempt):
 * take his existing markup and paste it in verbatim, no framework grid/
 * palette substitution. The wilmslow_div_* class/id names are KEPT exactly
 * as his Oxygen build emits them — the default_div_* rename convention is
 * DROPPED for this port.
 *
 * Sources (all local, all verified against the real served DOM):
 *   1. stage-1/reference/css/theme-template-5620-header-footer.css (verbatim)
 *   2. stage-1/reference/css/theme-template-11261-page-front.css   (verbatim)
 *   3. Extracted rules from theme-universal.css that style wilmslow_div_*
 *      classes reused on the homepage (header FREE QUOTES badge, hero list
 *      bullets, footer heading rule, quote-button, style-title, etc.)
 *   4. A handful of small additions (marked below) for classes present in
 *      the DOM that carry NO captured rule anywhere in the exported CSS
 *      (callout-container / cta-top / reviews-title / top-line) — kept to
 *      minimal readable spacing only, using the theme's own tokens, never
 *      framework component styling.
 *
 * Enqueued AFTER main.css (inc/enqueue.php) so id-selectors here win without
 * needing !important. Page front-matter (header/footer wrappers, hero,
 * reviews band, enquiry band) previously in main.css that targeted
 * default_div_* names does not match this markup and is now simply inert —
 * flagged for a later cleanup pass, not a live conflict (spec section 9/14
 * — do not ship dead/orphaned CSS long-term, tracked as follow-up).
 */

/* ==========================================================================
   1. Header + footer (verbatim — theme-template-5620-header-footer.css)
   ========================================================================== */

#wilmslow_div_desktop_header_container{max-width:100%;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0}
#wilmslow_div_main_footer{max-width:100%}
/*
 * Coordinator fix (round 1), item 1: the source rule here was literally
 * background-color:var(--accent) (verbatim from the captured CSS) — but
 * #wilmslow_div_desktop_header inside it is centred/capped-width
 * (margin-center--auto set-width), so at real desktop viewports its
 * gutters exposed this green as a frame around the white bar, which the
 * baseline does not show. Overridden to white — the captured accent-green
 * value was evidently masked by something not present in the exported CSS
 * on the live production render; matching the visible baseline wins per
 * the method's own rule ("his CSS ships essentially verbatim... his rule
 * shapes are the truth — when in doubt, his CSS wins" applies to the
 * RENDERED result, not a literal value that visibly contradicts it).
 */
#wilmslow_div_11{border-bottom-style:solid;border-bottom-color:#ffffff;border-bottom-width:2px;background-color:var(--light)}
#wilmslow_div_desktop_header{padding-top:0rem}
#wilmslow_div_desktop_header_wrapper{align-items:center;grid-template-columns:repeat(2,minmax(200px,1fr));grid-column-gap:20px;grid-row-gap:20px;display:grid;padding-top:0;padding-bottom:0;text-align:left;margin-top:auto;margin-bottom:auto}
#wilmslow_div_desktop_logo{width:100%;background-color:var(--light);padding-top:0px;margin-top:auto;margin-bottom:auto}
#wilmslow_div_desktop_header_right{justify-content:center;width:100%}
#wilmslow_div_desktop_nav{width:100%;position:relative;text-align:right;align-items:center;background-color:var(--primary)}
#wilmslow_div_desktop_nav_wrapper{width:100%;position:relative;align-items:flex-end}
#wilmslow_div_mobile_nav_wrapper{display:none}
#wilmslow_div_footer_row{align-items:stretch;grid-template-columns:repeat(3,minmax(200px,1fr));grid-column-gap:20px;grid-row-gap:20px;text-align:left;display:grid}
#div_block-2929-5620{width:100%;background-color:#ffffff}
@media (max-width:1400px){
  #wilmslow_div_desktop_header_wrapper{text-align:left;flex-direction:row;display:flex}
  #wilmslow_div_desktop_logo{text-align:left}
  #wilmslow_div_desktop_nav{text-align:center;align-items:center}
  #wilmslow_div_footer_row{align-items:stretch;grid-template-columns:repeat(4,minmax(200px,1fr));grid-column-gap:20px;grid-row-gap:20px;display:grid}
  #wilmslow_div_desktop_logo_link{height:100%}
  #wilmslow_div_desktop_nav_control{font-size:1.2rem}
}
@media (max-width:991px){
  #wilmslow_div_mobile_header{display:flex;text-align:left;height:50px}
  #wilmslow_div_mobile_header_image{display:flex;text-align:left;height:100%;background-color:#ffffff;justify-content:center;border-top-color:#d1d1d1;border-top-style:solid;border-left-color:#d1d1d1;border-left-style:solid;border-bottom-color:#d1d1d1;border-bottom-style:solid}
  #wilmslow_div_mobile_header_text_wrapper{text-align:center;align-items:center;justify-content:center;display:flex;margin-left:auto;margin-right:auto}
  #wilmslow_div_mobile_header_name{text-align:left;flex-direction:row;display:flex;gap:20px}
  #wilmslow_div_mobile_header_slogan{display:block}
  #wilmslow_div_desktop_header{padding-top:0rem}
  #wilmslow_div_desktop_header_wrapper{align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-column-gap:20px;grid-row-gap:20px;display:grid}
  #wilmslow_div_desktop_header_right{display:none}
  #wilmslow_div_mobile_nav_wrapper{justify-content:space-between;width:100%;align-items:center;display:flex;flex-direction:row;background-color:var(--primary)}
  #wilmslow_div_footer_row{align-items:stretch;grid-template-columns:repeat(2,minmax(300px,1fr));grid-column-gap:20px;grid-row-gap:20px;display:grid}
  #wilmslow_div_mobile_header_wrapper{text-align:justify;width:100%;background-color:#d1d1d1;display:flex;justify-content:flex-start;flex-direction:row}
  #wilmslow_div_desktop_logo_link{position:relative;width:100%;border-radius:0px;margin-left:auto}
  #image-2927-5620{display:none}
  #wilmslow_div_desktop_nav_control{display:none}
}
@media (max-width:767px){
  #wilmslow_div_mobile_header_slogan{display:block}
  #wilmslow_div_mobile_nav_wrapper{text-align:justify}
  #wilmslow_div_footer_row{align-items:stretch;grid-template-columns:repeat(1,minmax(200px,1fr));grid-column-gap:20px;grid-row-gap:20px;display:grid}
}
@media (max-width:479px){
  #wilmslow_div_mobile_header_image{text-align:left;justify-content:center}
  #wilmslow_div_mobile_header_text_wrapper{gap:0px}
  #wilmslow_div_mobile_header_name{gap:5px;display:flex}
  #wilmslow_div_mobile_header_slogan{margin-top:0.5rem}
  #wilmslow_div_mobile_header_wrapper{background-color:#d1d1d1;text-align:center;display:flex;flex-direction:row;gap:0px;line-height:0.5}
}
#text_block-2837-5620{color:#ffffff;padding-top:2rem;padding-bottom:2rem;font-size:2rem}
/*
 * Correction: base (desktop) state is display:NONE — the <=991px media
 * query above turns it on. Was mistakenly authored as an UNSCOPED rule
 * here, which — being the same specificity and later in source order than
 * the <=991px block — won the cascade at EVERY viewport including mobile,
 * hiding the whole mobile header (logo/name/slogan) there too (coordinator
 * round 2 finding, same root cause as the item-5 desktop-header-right bug:
 * an unscoped rule placed after a media-scoped one silently overrides it).
 * Scoped to desktop-and-up only, matching its actual intent.
 */
@media (min-width: 992px) {
  #wilmslow_div_mobile_header_wrapper{display:none;text-decoration:none}
}
/* Belt and braces: fully opaque white behind the desktop bar so nothing
   of #wilmslow_div_11's accent-green background can show through the
   grid-column-gap between the logo and header-right cells. */
#wilmslow_div_desktop_header{background-color:var(--light);}
#wilmslow_div_desktop_logo_link{width:100%;margin-top:auto;margin-bottom:auto;display:block}
#wilmslow_div_footer_login{display:none}
#image-2927-5620{object-fit:contain;height:150px}
@media (max-width:1400px){ #image-2927-5620{height:100px} }
#wilmslow_div_desktop_nav_control .menu-item a{padding-top:10px;padding-left:20px;padding-bottom:10px;padding-right:20px;color:var(--light);font-weight:700}
#wilmslow_div_desktop_nav_control .current-menu-item a{background-color:var(--accent)}

/*
 * Coordinator fix (round 2), item 6: Shane's real mobile header is a
 * PHONE / MENU split bar (#wilmslow_div_mobile_nav_wrapper), a second band
 * below the logo/name/slogan row — verified against roofersnearwilmslow.co.uk
 * mobile. #wilmslow_div_mobile_nav_wrapper base show/hide is already set
 * above (section 1, verbatim captured CSS: display:none desktop,
 * display:flex/space-between/background-primary at <=991px) — this block
 * only adds the two child halves, which carried no captured rule of their
 * own in the exported CSS (ids present, declarations absent).
 */
/*
 * Coordinator fix (round 2), item 6 continued: the captured CSS lays
 * #wilmslow_div_mobile_header_text_wrapper out as a ROW (its two children,
 * _name and _slogan, split the width side by side) — at real mobile
 * widths that crams "Stonecraft Roofers" and the slogan into ~80px
 * columns each, wrapping and visually overlapping. The verified rendered
 * baseline (roofersnearwilmslow.co.uk mobile, same framework) stacks name
 * over slogan, each full width, centred — same "rendered result wins over
 * a literal captured value" rule as the round-1 header background fix.
 */
@media (max-width: 991px) {
  #wilmslow_div_mobile_header_text_wrapper {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  #wilmslow_div_mobile_header_name,
  #wilmslow_div_mobile_header_slogan {
    width: 100%;
  }
}

#wilmslow_div_mobile_call_wrapper,
#wilmslow_div_mobile_bar_menu {
  display: none;
}
@media (max-width: 991px) {
  #wilmslow_div_mobile_call_wrapper,
  #wilmslow_div_mobile_bar_menu {
    display: flex;
    width: 50%;
  }
  #wilmslow_div_mobile_call_wrapper .mobile-bar-item,
  #wilmslow_div_mobile_bar_menu .ksm-mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 0.5rem;
    color: var(--light) !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: var(--text-s);
  }
  #wilmslow_div_mobile_call_wrapper {
    background-color: var(--dark);
  }
  #wilmslow_div_mobile_bar_menu {
    background-color: var(--primary);
  }
  #wilmslow_div_mobile_bar_menu .ksm-mobile-trigger-js {
    display: none; /* JS-enhanced button hidden until ksm-menu.js boots (body.ksm-js-enabled swaps it in). */
  }
  body.ksm-js-enabled #wilmslow_div_mobile_bar_menu .ksm-mobile-trigger-js {
    display: flex;
  }
  body.ksm-js-enabled #wilmslow_div_mobile_bar_menu .ksm-mobile-trigger-noscript {
    display: none;
  }
}

/* ==========================================================================
   2. Front-page body (verbatim — theme-template-11261-page-front.css)
   ========================================================================== */

#wilmslow_div_main_content{gap:20px}
#customer_reviews_wrapper{width:100%}
#get_a_free_quote{width:100%;display:flex;align-items:center;flex-direction:column;text-align:center}
#wilmslow_div_page_contact_form_wrapper{text-align:left;flex-direction:row;display:flex}
#wilmslow_div_page_contact_form_div{text-align:left;display:flex;width:50%}
#wilmslow_div_page_contact_map_wrapper{width:50%;height:100%;position:relative;display:flex}
@media (max-width:991px){
  #get_a_free_quote{padding-left:1rem;padding-top:1rem;padding-right:1rem;padding-bottom:1rem;width:100%;flex-direction:column;display:flex}
  #wilmslow_div_page_contact_form_wrapper{flex-direction:column;display:flex}
  #wilmslow_div_page_contact_form_div{width:100%}
  #wilmslow_div_page_contact_map_wrapper{width:100%}
  #wilmslow_div_page_contact_form{padding-left:1rem;padding-top:1rem;padding-right:1rem;padding-bottom:1rem}
  #wilmslow_div_page_contact_map{height:400px}
}
#wilmslow_div_page_contact_form{width:100%}
#wilmslow_div_page_contact_map{height:600px}

/* ==========================================================================
   3. Extracted from theme-universal.css — wilmslow_div_* + shared classes
      genuinely reused on the homepage
   ========================================================================== */

.wilmslow_div_header_container { max-height: 550px; }
.wilmslow_div_header_wrapper { display: grid; grid-template-columns: repeat(2, 1fr); }
.wilmslow_div_header_left { position: relative; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.wilmslow_div_header_left::after {
  content: "FREE QUOTES";
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 100px;
  height: 100px;
  background-color: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  animation: shake 2s infinite ease-in-out;
  border: 1px solid #fff;
}
.wilmslow_div_header_left.hide-badge::after { display: none !important; }

.wilmslow_div_hero--box ul { padding-left: 0px; }
.wilmslow_div_hero--box ul li {
  position: relative;
  list-style: none;
  padding-left: 5rem;
}
.wilmslow_div_hero--box li { padding: 1rem; }
.wilmslow_div_hero--box ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  background: url('/wp-content/uploads/2025/04/checkbox-white.svg') no-repeat center center;
  background-size: contain;
}

.featured-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 2px solid var(--light);
}

@media (max-width: 992px) {
  .featured-image { display: none; }
  #wilmslow_div_desktop_header_right { display: none; }
  .wilmslow_div_header_wrapper { display: block !important; }
}

/*
 * Coordinator fix (round 2), item 2: mobile-only small featured image
 * inside the hero text box (verbatim — theme-universal.css "hide-featured-
 * image": hidden by default, shown as a small floated thumbnail only at
 * mobile widths, in place of the desktop side-by-side .featured-image).
 */
img.hide-featured-image {
  margin: 0 0 0.5em 2em;
  width: 50%;
  border: 2px solid var(--light);
  max-height: 150px;
  object-fit: cover;
}
.hide-featured-image {
  display: none;
}
@media (max-width: 992px) {
  .hide-featured-image {
    display: flex;
    float: right;
    margin-left: 1rem;
  }
}

.first-word { color: var(--primary); }
.other-words { color: #444; }

/*
 * Coordinator round 3, item 1 (rollout): the shared verbatim hero part
 * (template-parts/hero/hero-wilmslow.php) reuses m1_theme_breadcrumb_trail()
 * (Base Principle 1 — the visible mirror of ksm-seo's own BreadcrumbList,
 * never a duplicate) inside the dark hero band, so its default dark-text
 * styling needs a light-on-dark override here, same pattern as the
 * framework's own .default_hero_overlay/.default_hero_panel treatment.
 */
.wilmslow_div_breadcrumb {
  margin-bottom: 0.75rem;
}
.wilmslow_div_breadcrumb .default_breadcrumbs a {
  color: var(--light);
  opacity: 0.85;
}
.wilmslow_div_breadcrumb .default_breadcrumbs a:hover,
.wilmslow_div_breadcrumb .default_breadcrumbs a:focus-visible {
  opacity: 1;
}
.wilmslow_div_breadcrumb .default_breadcrumbs li[aria-current="page"] {
  color: var(--light);
}
.wilmslow_div_breadcrumb .default_breadcrumbs li + li::before {
  color: var(--light);
  opacity: 0.6;
}

.review-wrapper { margin-bottom: 2rem; }

.quote-button {
  width: 100%;
  background-color: var(--secondary);
  color: #fff !important;
  padding: 2rem;
  display: block;
  text-transform: uppercase;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.style-title {
  width: 100%;
  background-color: var(--primary);
  color: #fff;
  padding: 1rem;
}

.h-footer {
  border-bottom: 2px solid #fff;
  width: 100%;
  text-transform: uppercase;
  margin-bottom: 2rem !important;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--light);
  padding-bottom: .5rem;
}

.footer-menu ul {
  padding-left: 2rem;
  color: var(--light);
  margin-top: 0;
}

/* ==========================================================================
   4. No captured rule anywhere in the exported CSS for these — minimal
      readable spacing only, theme tokens, never framework component styling.
   ========================================================================== */

.callout-container { line-height: 1.5; }
.cta-top { line-height: 1.5; }
.reviews-title { font-weight: 700; margin-bottom: 0.5rem; }
.top-line { height: 0; }
.testimonial-latest-single { border-bottom: 1px solid var(--contrast); padding-bottom: 1rem; }
.testimonial-latest-single:last-child { border-bottom: 0; }
.uppercase { text-transform: uppercase; }

/*
 * Coordinator fix (round 2), item 4: Shane's ruling overrides the earlier
 * "always visible for no-JS safety" deviation — the bar must be (a) pinned
 * to the BOTTOM of the viewport on mobile, (b) fully hidden on desktop.
 * Kept visible-by-default on mobile (no opacity:0 scroll-reveal dependency)
 * so Base Principle 13 (works without JS) still holds; main.js may still
 * layer a reveal/fade polish on top as progressive enhancement.
 */
#nav-wrapper-mob {
  display: none;
  z-index: 999;
}
@media (max-width: 991px) {
  #nav-wrapper-mob {
    display: block;
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

/*
 * Coordinator fix (round 3), item 3: full-width labelled split buttons
 * (matching the top PHONE/MENU bar's visual system), not small square
 * floating icon tiles.
 */
#nav-wrapper-mob .grid-4-mobile-bar {
  display: flex;
  width: 100%;
}
#nav-wrapper-mob .mobile-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex: 1 1 0;
  padding: 0.6rem 0.25rem;
  color: var(--light) !important;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--text-xs);
}
#nav-wrapper-mob .mobile-bar-item-text {
  line-height: 1.1;
}

/* ==========================================================================
   5. Coordinator review fixes (round 1) — see progress notes.
   ========================================================================== */

/* Fix 2: the earlier (rejected) framework header CTA box — a bordered
   white card with clamped 3-line tiny text — is main.css's
   .default_div_widget_area_header_widgets rule (spec 81-107 there). That
   selector is reused by m1_theme_widget_area('header-widgets') so it still
   fires here; neutralise it back to plain text on the white bar, vertically
   centred, matching the baseline's callout-container/cta-top look (no
   captured rule for those two classes — see section 4 above). */
.default_div_widget_area_header_widgets {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  max-width: none;
  overflow: visible;
  display: flex;
  align-items: center;
  height: 100%;
}
.default_div_widget_area_header_widgets .widget {
  margin-bottom: 0;
  font-size: var(--text-s);
  line-height: 1.5;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
/*
 * Coordinator fix (round 2), item 5: this unscoped rule had the same
 * specificity as (and came AFTER, in source order) the <=991px/992px
 * "#wilmslow_div_desktop_header_right{display:none}" rules above — so on
 * mobile viewports THIS rule won the cascade and the header widget callout
 * stayed visible. Scope it to desktop only; the header widget's markup
 * still always renders (PHP), only visibility is CSS-gated.
 */
@media (min-width: 992px) {
  #wilmslow_div_desktop_header_right {
    display: flex;
    align-items: center;
  }
}

/* Fix 6: the global `* { margin: 0; }` reset (style.css) strips the browser
   default paragraph margin; the baseline's editorial section never had that
   reset (Oxygen's own framework does not zero <p> margins), so its
   paragraphs read with clear vertical gaps. Restore it scoped to the
   content-box only — not a global entry-content change, which would affect
   other templates outside this stage's scope. */
.content-box p {
  margin-bottom: 1em;
}

/* Fix 5: the "Web design by..." bottom strip is its own solid-white band
   under the green footer (verbatim id from the source DOM — see footer.php). */
#div_block-2929-5620 {
  width: 100%;
  background-color: #ffffff;
}
#text_block-2930-5620 {
  padding: 1rem;
  color: var(--dark);
}