/*
Theme Name: Leon Carpet Cleaning
Theme URI: https://leoncarpetcleaningdavis.com/
Author: Berry for Leon Carpet Cleaning
Author URI: https://leoncarpetcleaningdavis.com/
Description: Custom one-page local-SEO theme for Leon Carpet Cleaning (Davis, Woodland & Sacramento, CA). Edit the phone number, hero headline and hours under Appearance > Customize > Leon Carpet Cleaning.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: leon-carpet-cleaning
*/

      :root {
        --blue: #0e86c8;
        --blue-deep: #0a5f92;
        --bubble: #35b6ee;
        --green: #58b947;
        --green-deep: #3d8f31;
        --gold: #e9a13b;
        --ink: #17384a;
        --ink-soft: #476675;
        --bg: #ffffff;
        --surface: #ffffff;
        --surface-alt: #eef1f3;
        --line: #d9e4e9;
        --header-bg: #ffffff;
        --header-ink: #17384a;
        --panel-bg: #2b6a8d;
        --field-bg: #f3f7f9;
        --chip-bg: #e2f3e4;
        --chip-ink: #256b1e;
        --note-bg: #fdf3e0;
        --note-ink: #7a5510;
        --shadow: 0 10px 30px rgba(10, 60, 90, .10);
        --radius: 16px;
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
        background: var(--bg);
        color: var(--ink);
        line-height: 1.6;
        font-size: 17px;
        padding-bottom: 76px;
      }
      @media (min-width: 760px) { body { padding-bottom: 0; } }
      h1, h2, h3, h4 {
        font-family: "Baloo 2", "Nunito", system-ui, sans-serif;
        line-height: 1.15;
        margin: 0 0 .5em;
        letter-spacing: .01em;
      }
      h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); font-weight: 800; }
      h3 { font-size: 1.25rem; font-weight: 700; }
      p { margin: 0 0 1em; }
      a { color: var(--blue-deep); }
      img { max-width: 100%; }
      .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
      section { padding: 56px 0; }
      .section-head { max-width: 720px; margin-bottom: 32px; }
      .section-head p { color: var(--ink-soft); font-size: 1.05rem; }
      .kicker {
        display: inline-block; font-weight: 800; font-size: .78rem;
        letter-spacing: .12em; text-transform: uppercase;
        color: var(--green-deep); margin-bottom: 10px;
      }

      /* ---------- Header ---------- */
      header.site {
        background: var(--header-bg); color: var(--header-ink);
        position: sticky; top: 0; z-index: 50;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 2px 14px rgba(10,60,90,.10);
      }
      .header-in {
        display: flex; align-items: center; gap: 14px;
        padding: 10px 20px; max-width: 1120px; margin: 0 auto;
      }
      .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--header-ink); min-width: 0; }
      .brand img {
        width: 72px; height: 72px; border-radius: 16px; flex: none;
        border: 2px solid var(--line); background: #fff;
        box-shadow: 0 3px 10px rgba(4, 40, 60, .12);
      }
      .brand .bname { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.18rem; line-height: 1.05; white-space: nowrap; }
      .brand .btag { font-size: .72rem; color: var(--blue-deep); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
      nav.main { margin-left: auto; display: none; gap: 4px; }
      nav.main a {
        color: var(--header-ink); text-decoration: none; font-weight: 700;
        font-size: .95rem; padding: 8px 10px; border-radius: 8px;
      }
      nav.main a:hover { background: var(--surface-alt); color: var(--blue-deep); }
      .header-call {
        margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px;
        background: var(--green); color: #0b2410; font-weight: 800; text-decoration: none;
        padding: 10px 16px; border-radius: 999px; font-size: .95rem;
      }
      .header-call:hover { background: var(--green-deep); color: #fff; }
      @media (min-width: 900px) {
        nav.main { display: flex; }
        .header-call { margin-left: 8px; }
      }
      @media (max-width: 560px) {
        .header-in { gap: 10px; padding: 8px 14px; }
        .brand { gap: 9px; flex: 1 1 auto; }
        .brand > span { min-width: 0; }
        .brand img { width: 50px; height: 50px; border-radius: 12px; }
        .brand .bname { font-size: .95rem; white-space: normal; line-height: 1.12; }
        .brand .btag { display: none; }
        .header-call { padding: 8px 11px; font-size: .82rem; gap: 6px; }
      }

      /* ---------- Buttons ---------- */
      .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        font-weight: 800; text-decoration: none; border-radius: 999px;
        padding: 14px 26px; font-size: 1rem; border: 0; cursor: pointer;
        font-family: inherit; transition: transform .12s ease, background .12s ease;
      }
      .btn:active { transform: scale(.98); }
      .btn-call { background: var(--green); color: #0b2410; box-shadow: 0 6px 18px rgba(61,143,49,.35); }
      .btn-call:hover { background: var(--green-deep); color: #fff; }
      .btn-ghost {
        background: transparent; color: var(--ink);
        border: 2px solid var(--line);
      }
      .btn-ghost:hover { border-color: var(--blue); color: var(--blue-deep); }
      .btn-blue { background: var(--blue); color: #fff; }
      .btn-blue:hover { background: var(--blue-deep); }

      /* ---------- Hero ---------- */
      .hero {
        background:
          radial-gradient(600px 300px at 85% -60px, rgba(53,182,238,.25), transparent 60%),
          radial-gradient(500px 260px at 8% 110%, rgba(88,185,71,.20), transparent 60%),
          var(--surface-alt);
        padding: 48px 0 56px; overflow: hidden; position: relative;
      }
      .hero-grid { display: grid; gap: 36px; align-items: start; position: relative; z-index: 1; }
      @media (max-width: 700px) {
        /* On small screens the hero is one text column — keep bubbles in the clear strip above the headline */
        .hero > .bubble:nth-of-type(1) { width: 40px !important; height: 40px !important; top: 12px !important; right: 5% !important; }
        .hero > .bubble:nth-of-type(2) { width: 20px !important; height: 20px !important; top: 18px !important; right: 24% !important; }
        .hero > .bubble:nth-of-type(3) { width: 15px !important; height: 15px !important; top: 8px !important; right: 40% !important; }
        .hero > .bubble:nth-of-type(6) { width: 17px !important; height: 17px !important; top: 30px !important; left: 6% !important; right: auto !important; }
        .hero > .bubble:nth-of-type(5),
        .hero > .bubble:nth-of-type(7),
        .hero > .bubble:nth-of-type(8) { display: none !important; }
      }
      @media (min-width: 920px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }
      .hero h1 { font-size: clamp(2.1rem, 6vw, 3.3rem); font-weight: 800; margin-bottom: 14px; }
      .hero h1 .hl { color: var(--blue); }
      .hero .sub { font-size: 1.13rem; color: var(--ink-soft); max-width: 34em; }
      .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 14px; }
      .hero-note { font-size: .9rem; color: var(--ink-soft); font-weight: 600; }
      .hero-logo-card {
        display: flex; gap: 16px; align-items: center; margin-top: 26px;
        background: var(--surface); color: var(--ink);
        border: 1.5px solid var(--line);
        border-radius: var(--radius); padding: 14px 18px; max-width: 520px;
        box-shadow: var(--shadow);
      }
      .hero-logo-card img { width: 104px; height: 104px; border-radius: 12px; background: #fff; flex: none; }
      .hero-logo-card p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
      .hero-logo-card strong { color: var(--ink); font-family: "Baloo 2", sans-serif; font-size: 1.02rem; display: block; }
      .bubble {
        position: absolute; border-radius: 50%; pointer-events: none;
        border: 2px solid rgba(53,182,238,.38);
        background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0 18%, rgba(140,215,250,.28) 45%, rgba(53,182,238,.10) 75%);
        box-shadow: inset -3px -4px 8px rgba(53,182,238,.18);
      }
      .bubble-plain {
        position: absolute; border-radius: 50%; pointer-events: none;
        border: 2px solid rgba(53,182,238,.30);
        background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.9) 0 18%, rgba(140,215,250,.22) 50%, rgba(53,182,238,.08) 78%);
      }
      @media (prefers-reduced-motion: no-preference) {
        .bubble, .bubble-plain { animation: floaty 7s ease-in-out infinite; }
        .bubble.b2, .bubble-plain.b2 { animation-delay: -2.5s; }
        .bubble.b3, .bubble-plain.b3 { animation-delay: -4.5s; }
        .bubble.b4, .bubble-plain.b4 { animation-delay: -1.4s; animation-duration: 8.5s; }
        .bubble.b5, .bubble-plain.b5 { animation-delay: -5.6s; animation-duration: 6.2s; }
        .bubble.b6, .bubble-plain.b6 { animation-delay: -3.4s; animation-duration: 9s; }
        @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
      }

      /* ---------- Quote card ---------- */
      .quote-card {
        background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
        box-shadow: var(--shadow); padding: 26px;
      }
      .quote-card h2 { font-size: 1.45rem; margin-bottom: 4px; }
      .quote-card .qc-sub { color: var(--ink-soft); font-size: .95rem; margin-bottom: 18px; }
      .field { margin-bottom: 14px; }
      .field label { display: block; font-weight: 800; font-size: .85rem; margin-bottom: 5px; }
      .field input, .field select, .field textarea {
        width: 100%; padding: 11px 13px; border-radius: 10px; font: inherit; font-size: 1rem;
        border: 1.5px solid var(--line); background: var(--field-bg); color: var(--ink);
      }
      .field input:focus, .field select:focus, .field textarea:focus {
        outline: 2px solid var(--bubble); outline-offset: 1px; border-color: var(--blue);
      }
      .field-row { display: grid; gap: 14px; }
      @media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }
      .form-ok {
        display: none; background: var(--chip-bg); color: var(--chip-ink);
        border-radius: 10px; padding: 12px 14px; font-weight: 700; font-size: .93rem; margin-top: 14px;
      }

      /* ---------- Trust strip ---------- */
      .trust { background: var(--surface); border-block: 1px solid var(--line); padding: 26px 0; }
      .trust-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
      @media (min-width: 900px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
      .trust-item { display: flex; gap: 12px; align-items: flex-start; }
      .trust-item .ic {
        flex: none; width: 42px; height: 42px; border-radius: 12px;
        background: var(--surface-alt); display: grid; place-items: center; color: var(--blue);
      }
      .trust-item strong { display: block; font-size: .98rem; line-height: 1.25; }
      .trust-item span { font-size: .85rem; color: var(--ink-soft); }

      /* ---------- Services ---------- */
      .svc-grid { display: grid; gap: 22px; }
      @media (min-width: 820px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
      .svc {
        background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
        padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column;
      }
      .svc .svc-ic {
        width: 54px; height: 54px; border-radius: 16px; margin-bottom: 16px;
        display: grid; place-items: center; color: #fff;
      }
      .svc-ic.c1 { background: var(--blue); } .svc-ic.c2 { background: var(--green-deep); }
      .svc-ic.c3 { background: #0e7d8c; } .svc-ic.c4 { background: var(--gold); color: #3a2703; }
      .svc p { color: var(--ink-soft); }
      .svc ul { margin: 0 0 16px; padding: 0; list-style: none; }
      .svc ul li { padding: 5px 0 5px 26px; position: relative; font-size: .97rem; }
      .svc ul li::before {
        content: ""; position: absolute; left: 2px; top: 12px; width: 9px; height: 9px;
        border-radius: 50%; background: var(--green);
      }
      .svc .svc-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 800; font-size: .92rem; }
      .tag-new {
        display: inline-block; background: var(--gold); color: #3a2703; font-size: .7rem;
        font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
        border-radius: 999px; padding: 3px 10px; vertical-align: middle; margin-left: 8px;
      }
      .svc-wide { margin-top: 22px; border: 2px solid var(--bubble); }
      .bubbles-host { position: relative; overflow: hidden; }
      .bubbles-host > .bubble, .bubbles-host > .bubble-plain { z-index: 0; }
      .bubbles-host > .wrap { position: relative; z-index: 1; }

      /* ---------- Steps ---------- */
      .steps-sec { background: var(--surface-alt); }
      .steps { display: grid; gap: 18px; counter-reset: step; }
      @media (min-width: 820px) { .steps { grid-template-columns: repeat(4, 1fr); } }
      .step {
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 22px; position: relative;
      }
      .step .num {
        font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.9rem;
        color: var(--bubble); line-height: 1; margin-bottom: 8px;
      }
      .step p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

      /* ---------- Areas ---------- */
      .area-grid { display: grid; gap: 22px; }
      @media (min-width: 920px) { .area-grid { grid-template-columns: 1fr 1fr 1fr; } }
      .area {
        background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
        padding: 26px; box-shadow: var(--shadow);
      }
      .area.primary { border: 2px solid var(--blue); }
      .area h3 { font-size: 1.4rem; }
      .area .pop { font-size: .82rem; font-weight: 800; color: var(--green-deep); text-transform: uppercase; letter-spacing: .08em; }
      .area p { color: var(--ink-soft); font-size: .97rem; }
      .area ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: .95rem; }
      .map-block { margin-top: 30px; display: grid; gap: 20px; }
      @media (min-width: 920px) { .map-block { grid-template-columns: 1.5fr 1fr; align-items: stretch; } }
      #area-map { height: 380px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-alt); }
      .city-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
      .city-list li {
        background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
        padding: 16px 18px; cursor: pointer; display: flex; gap: 14px; align-items: center;
      }
      .city-list li:hover { border-color: var(--blue); }
      .city-list li.map-selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(53,182,238,.35); }
      .pin {
        flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--blue);
        color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .95rem;
      }
      .pin--on { background: var(--green-deep); }
      .city-list strong { display: block; font-family: "Baloo 2", sans-serif; font-size: 1.08rem; }
      .city-list span { font-size: .88rem; color: var(--ink-soft); }
      .also-serving { margin-top: 18px; color: var(--ink-soft); font-size: .95rem; }

      /* ---------- Owner notes (placeholders to replace) ---------- */
      .owner-note {
        margin-top: 16px; background: var(--note-bg); color: var(--note-ink);
        border-radius: 12px; padding: 12px 16px; font-size: .9rem; font-weight: 700;
      }

      /* ---------- Gallery ---------- */
      .ba-grid { display: grid; gap: 20px; }
      @media (min-width: 820px) { .ba-grid { grid-template-columns: repeat(3, 1fr); } }
      .ba { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
      .ba-pair { display: grid; grid-template-columns: 1fr 1fr; }
      .ba-slot {
        aspect-ratio: 1 / 1.05; display: flex; flex-direction: column; gap: 6px;
        align-items: center; justify-content: center; text-align: center; padding: 14px;
        border: 2px dashed var(--line); margin: 10px; border-radius: 12px;
        color: var(--ink-soft); font-size: .85rem; font-weight: 700;
      }
      .ba-slot .ba-tag {
        font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1rem;
        letter-spacing: .1em; text-transform: uppercase;
      }
      .ba-slot.before .ba-tag { color: #a06a1c; }
      .ba-slot.after { border-color: var(--green); background: var(--chip-bg); }
      .ba-slot.after .ba-tag { color: var(--green-deep); }
      .ba-cap { padding: 4px 18px 16px; font-weight: 800; font-size: .95rem; }

      /* ---------- Reviews ---------- */
      .reviews-sec { background: var(--surface-alt); }
      .rev-grid { display: grid; gap: 20px; }
      @media (min-width: 820px) { .rev-grid { grid-template-columns: repeat(3, 1fr); } }
      .rev {
        background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
        padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column;
      }
      .stars { color: var(--gold); letter-spacing: 3px; font-size: 1.05rem; margin-bottom: 10px; }
      .rev blockquote { margin: 0 0 16px; font-size: 1rem; }
      .rev .who { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
      .rev .who strong { font-size: .95rem; }
      .city-tag {
        background: var(--surface-alt); color: var(--blue-deep); font-weight: 800;
        font-size: .78rem; border-radius: 999px; padding: 4px 11px; white-space: nowrap;
      }
      .sample-tag {
        align-self: flex-start; background: var(--note-bg); color: var(--note-ink);
        font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
        border-radius: 999px; padding: 3px 10px; margin-bottom: 12px;
      }
      .rev-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
      .rev-cta p { margin: 0; color: var(--ink-soft); font-weight: 600; }

      /* ---------- FAQ ---------- */
      .faq-list { max-width: 820px; }
      details.faq {
        background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
        margin-bottom: 12px; overflow: hidden;
      }
      details.faq summary {
        cursor: pointer; font-weight: 800; font-family: "Baloo 2", sans-serif; font-size: 1.08rem;
        padding: 18px 22px; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center;
      }
      details.faq summary::-webkit-details-marker { display: none; }
      details.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--blue); font-weight: 800; flex: none; }
      details.faq[open ] summary::after { content: "–"; }
      details.faq .a { padding: 0 22px 20px; color: var(--ink-soft); }
      details.faq .a p { margin: 0; }

      /* ---------- About ---------- */
      .about-sec { background: var(--surface-alt); }
      .about-grid { display: grid; gap: 30px; align-items: center; }
      @media (min-width: 920px) { .about-grid { grid-template-columns: .9fr 1.1fr; } }
      .about-logo {
        background: var(--surface); border: 1.5px solid var(--line); border-radius: 24px; padding: 28px;
        display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
        color: var(--ink); box-shadow: var(--shadow);
      }
      .about-logo img { width: min(320px, 85%); border-radius: 18px; background: #fff; }
      .about-logo p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
      .about-copy p { color: var(--ink-soft); }
      .about-copy p strong { color: var(--ink); }

      /* ---------- Contact ---------- */
      .contact-grid { display: grid; gap: 26px; }
      @media (min-width: 920px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
      .nap-card {
        background: var(--panel-bg); color: #f2fbff; border-radius: 20px;
        padding: 28px; box-shadow: var(--shadow);
      }
      .nap-card h3 { color: #ffffff; font-size: 1.35rem; }
      .nap-card a { color: #8fd6f7; font-weight: 800; }
      .nap-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 1rem; }
      .nap-row:last-of-type { border-bottom: 0; }
      .nap-row .k { flex: none; width: 86px; font-weight: 800; color: #9fd8f5; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; padding-top: 3px; }
      .nap-card .areas-line { font-size: .93rem; color: #cfeaf7; margin-top: 14px; }

      /* ---------- Footer ---------- */
      footer.site { background: var(--panel-bg); color: #dceef7; padding: 48px 0 110px; }
      @media (min-width: 760px) { footer.site { padding-bottom: 48px; } }
      .foot-grid { display: grid; gap: 30px; }
      @media (min-width: 820px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
      footer.site h4 { color: #fff; font-size: 1.05rem; margin-bottom: 12px; }
      footer.site ul { list-style: none; margin: 0; padding: 0; }
      footer.site li { padding: 3px 0; font-size: .95rem; }
      footer.site a { color: #8fd6f7; text-decoration: none; font-weight: 700; }
      footer.site a:hover { text-decoration: underline; }
      .foot-brand { display: flex; gap: 14px; align-items: flex-start; }
      .foot-brand img { width: 84px; height: 84px; border-radius: 14px; background: #fff; flex: none; }
      .foot-brand p { font-size: .93rem; margin: 4px 0 0; }
      .foot-bottom {
        border-top: 1px solid rgba(255,255,255,.14); margin-top: 34px; padding-top: 20px;
        font-size: .88rem; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
      }

      /* ---------- Sticky mobile bar ---------- */
      .sticky-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--header-bg); border-top: 1px solid var(--line);
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        display: flex; gap: 10px; box-shadow: 0 -4px 18px rgba(10,60,90,.14);
      }
      .sticky-bar a {
        flex: 1; text-align: center; font-weight: 800; text-decoration: none;
        border-radius: 12px; padding: 13px 6px; font-size: .98rem;
      }
      .sticky-bar .sb-call { background: var(--green); color: #0b2410; }
      .sticky-bar .sb-quote { background: var(--blue); color: #fff; }
      @media (min-width: 760px) { .sticky-bar { display: none; } }