/*
Theme Name:        Metro Detroit Home Inspections
Theme URI:         https://rightnowmarketinggroup.com
Author:            Right Now Marketing Group LLC
Description:       Complete standalone WordPress theme for Metro Detroit home inspection companies. Activates and instantly builds a fully-editable Gutenberg website — no plugins required. Includes Home, About, Services landing + 8 individual service pages, Gallery, and Contact. Features dynamic {{tag}} system, LocalBusiness + HomeInspector JSON-LD schema, and WP-CLI support. Color palette: Red / Black / White.
Version:           1.0.0
Requires at least: 6.4
Tested up to:      7.0
Requires PHP:      8.0
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       mdhi
Tags:              block-editor, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ── Design Tokens ── */
/*
  PRIMARY PALETTE:
  --mdhi-red:        #f61927  — bold action red (was: gold/navy)
  --mdhi-black:      #000000  — deep black (was: navy dark)
  --mdhi-charcoal:   #1a1a1a  — near-black surface (supporting)
  --mdhi-smoke:      #f4f4f4  — near-white background (supporting)
*/
:root {
    /* ── Primary Brand Colors ── */
    --mdhi-red:           #f61927;
    --mdhi-red-dark:      #c8111e;
    --mdhi-red-hover:     #d9152a;
    --mdhi-red-light:     #ff4d58;
    --mdhi-red-muted:     rgba(246,25,39,.12);

    /* ── Black Scale ── */
    --mdhi-black:         #000000;
    --mdhi-charcoal:      #1a1a1a;
    --mdhi-charcoal-mid:  #2d2d2d;
    --mdhi-charcoal-soft: #3d3d3d;

    /* ── Neutral / Supporting ── */
    --mdhi-white:         #ffffff;
    --mdhi-smoke:         #f4f4f4;
    --mdhi-grey-light:    #f0f0f0;
    --mdhi-grey-mid:      #e0e0e0;
    --mdhi-grey-text:     #5a5a5a;
    --mdhi-grey-dark:     #3a3a3a;
    --mdhi-text:          #111111;
    --mdhi-border:        #dedede;
    --mdhi-surface:       #f7f7f7;

    /* ── Aliases — keep old var names intact so patterns/blocks don't break ── */
    --mdhi-navy:          var(--mdhi-black);
    --mdhi-navy-soft:     var(--mdhi-charcoal);
    --mdhi-navy-mid:      var(--mdhi-charcoal-mid);
    --mdhi-navy-light:    var(--mdhi-charcoal-soft);
    --mdhi-gold:          var(--mdhi-red);
    --mdhi-gold-dark:     var(--mdhi-red-dark);
    --mdhi-gold-hover:    var(--mdhi-red-hover);
    --mdhi-gold-light:    var(--mdhi-red-light);
    --mdhi-off-white:     var(--mdhi-smoke);

    /* ── Shape & Shadow ── */
    --mdhi-radius:        6px;
    --mdhi-radius-lg:     12px;
    --mdhi-shadow:        0 2px 8px rgba(0,0,0,.12);
    --mdhi-shadow-md:     0 4px 16px rgba(0,0,0,.18);
    --mdhi-shadow-lg:     0 8px 32px rgba(0,0,0,.24);
    --mdhi-max-w:         1200px;
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--mdhi-text);
    background: var(--mdhi-white);
    -webkit-font-smoothing: antialiased;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--mdhi-black);
    margin-bottom: .75em;
}
h1 { font-size: clamp(1.875rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.375rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); }
h4 { font-size: clamp(1rem, 1.5vw, 1.25rem); }
p  { margin-bottom: 1.125em; }
p:last-child { margin-bottom: 0; }
a  { color: var(--mdhi-black); text-decoration: underline; }
a:hover { color: var(--mdhi-red-dark); }

/* ── CRITICAL: Full-width alignfull block breakout ── */
.site-content { overflow-x: hidden; }
.wp-block-group.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
}
.wp-block-group.alignfull > * {
    max-width: var(--mdhi-max-w);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ── Buttons ── */
.mdhi-btn {
    display: inline-block;
    padding: .75rem 1.875rem;
    font-weight: 700;
    font-size: .9375rem;
    border-radius: var(--mdhi-radius);
    text-decoration: none;
    transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
    cursor: pointer;
    border: 2px solid transparent;
    letter-spacing: .01em;
}

/* Primary: Red fill — calls to action */
.mdhi-btn--gold {
    background: var(--mdhi-red);
    color: var(--mdhi-white);
    border-color: var(--mdhi-red);
}
.mdhi-btn--gold:hover {
    background: var(--mdhi-red-dark);
    border-color: var(--mdhi-red-dark);
    color: var(--mdhi-white);
    box-shadow: var(--mdhi-shadow-md);
}

/* Secondary: Black fill */
.mdhi-btn--navy {
    background: var(--mdhi-black);
    color: var(--mdhi-white);
    border-color: var(--mdhi-black);
}
.mdhi-btn--navy:hover {
    background: var(--mdhi-charcoal);
    border-color: var(--mdhi-charcoal);
    color: var(--mdhi-white);
}

/* Ghost on dark backgrounds */
.mdhi-btn--outline {
    background: transparent;
    color: var(--mdhi-white);
    border-color: rgba(255,255,255,.65);
}
.mdhi-btn--outline:hover {
    background: rgba(255,255,255,.12);
    border-color: var(--mdhi-white);
    color: var(--mdhi-white);
}

/* Ghost on light backgrounds */
.mdhi-btn--outline-navy {
    background: transparent;
    color: var(--mdhi-black);
    border-color: var(--mdhi-black);
}
.mdhi-btn--outline-navy:hover {
    background: var(--mdhi-black);
    color: var(--mdhi-white);
}

/* Ghost red variant */
.mdhi-btn--outline-red {
    background: transparent;
    color: var(--mdhi-red);
    border-color: var(--mdhi-red);
}
.mdhi-btn--outline-red:hover {
    background: var(--mdhi-red);
    color: var(--mdhi-white);
}

/* ── Cards ── */
/* Feature card — red top accent */
.mdhi-card {
    background: var(--mdhi-white);
    border: 1px solid var(--mdhi-border);
    border-top: 4px solid var(--mdhi-red);
    border-radius: var(--mdhi-radius-lg);
    padding: 1.75rem;
    box-shadow: var(--mdhi-shadow);
    transition: box-shadow .15s, transform .15s;
}
.mdhi-card:hover { box-shadow: var(--mdhi-shadow-md); transform: translateY(-2px); }

/* Benefit card — red left accent */
.mdhi-card--benefit {
    border-top: 1px solid var(--mdhi-border);
    border-left: 4px solid var(--mdhi-red);
    border-radius: 0 var(--mdhi-radius) var(--mdhi-radius) 0;
}

/* Step card — centered, numbered */
.mdhi-card--step { border-top: 4px solid var(--mdhi-red); text-align: center; }

/* ── Trust / Badge bar ── */
.mdhi-trust-bar {
    background: var(--mdhi-red);
    color: var(--mdhi-white);
    font-weight: 700;
    font-size: .875rem;
    text-align: center;
    padding: .625rem 1.5rem;
    letter-spacing: .02em;
}

/* ── FAQ Accordion (wp:details) ── */
.wp-block-details {
    border: 1px solid var(--mdhi-border);
    border-radius: var(--mdhi-radius);
    margin-bottom: .875rem;
    overflow: hidden;
}
.wp-block-details summary {
    padding: 1.125rem 1.375rem;
    background: var(--mdhi-surface);
    cursor: pointer;
    font-weight: 600;
    color: var(--mdhi-black);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    flex-shrink: 0;
    color: var(--mdhi-red-dark);
}
.wp-block-details[open] summary { background: var(--mdhi-grey-light); }
.wp-block-details[open] summary::after { content: '−'; }
.wp-block-details > *:not(summary) { padding: 1.125rem 1.375rem; }

/* ── Gutenberg WP Buttons ── */
.wp-block-button__link {
    border-radius: var(--mdhi-radius) !important;
    font-weight: 700 !important;
    transition: background .14s, color .14s !important;
}

/* ── Accessibility ── */
.skip-link {
    background: var(--mdhi-black);
    color: var(--mdhi-white);
    font-weight: 700;
    left: 1rem;
    padding: .625rem 1.25rem;
    position: absolute;
    top: -999px;
    z-index: 999999;
    border-radius: 0 0 var(--mdhi-radius) var(--mdhi-radius);
    text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ── Images ── */
img { max-width: 100%; height: auto; display: block; }

/* ── Utility ── */
.text-center   { text-align: center; }
.text-gold     { color: var(--mdhi-red); }      /* legacy class — maps to red */
.text-red      { color: var(--mdhi-red); }
.text-navy     { color: var(--mdhi-black); }    /* legacy class — maps to black */
.text-black    { color: var(--mdhi-black); }
.text-white    { color: var(--mdhi-white); }
.text-charcoal { color: var(--mdhi-charcoal); }

/* ── Background Utilities ── */
.bg-red      { background-color: var(--mdhi-red); }
.bg-black    { background-color: var(--mdhi-black); }
.bg-charcoal { background-color: var(--mdhi-charcoal); }
.bg-smoke    { background-color: var(--mdhi-smoke); }

/* ── Stat / Counter blocks (navy sections) ── */
/* Sections with black/charcoal backgrounds use red for large numbers */
.has-mdhi-navy-background-color .mdhi-stat-number,
.has-mdhi-black-background-color .mdhi-stat-number {
    color: var(--mdhi-red);
}

/* ── Divider accent line ── */
.mdhi-divider-red {
    border: none;
    border-top: 3px solid var(--mdhi-red);
    margin: 2rem 0;
}

/* ── Section label / eyebrow ── */
.mdhi-eyebrow {
    display: inline-block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mdhi-red);
    margin-bottom: .5rem;
}