/*
   sections.css — shared FAQ + CTA section templates.

   Used by: single-blog.blade.php, city.blade.php, areas-we-serve.blade.php
   (and any future page) via the reusable partials in
   resources/views/themes/default/partials/sections/*.blade.php

   Brand tokens (--web-teal, --web-maroon, --web-ink, --web-white,
   --web-gray-muted, --web-blue-light, etc.) come from
   assets/css/color.css, loaded globally in the layout.
*/

/* ── Typography — brand font pairing ──────────────────── */
.faq-label, .faq-heading,
.toc-cta-eyebrow, .toc-cta-btn,
.inline-cta-title, .inline-cta-btn,
.cta-eyebrow, .cta-heading, .cta-phone {
    font-family: var(--web-font-display);
    font-weight: 400; /* Fjalla One only ships a regular weight — bolding it synthesizes and looks off */
}

/* ── Full-width breakout helper ───────────────────────── */
/* Wrap any .bp-fw section in a .bp-fw-scope ancestor to prevent the
   100vw technique from causing horizontal page scroll. */
.bp-fw-scope { overflow-x: clip; }
.bp-fw { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* ═══════════════════════════════════════════════════════
   CTA — simple solid callout (title + body + button)
   Partial: partials/sections/cta-simple.blade.php
═══════════════════════════════════════════════════════ */
.inline-cta-callout {
    background: var(--web-teal);
    border-radius: 10px; padding: 1.1rem 1.25rem; margin-bottom: 2rem;
}
.inline-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.inline-cta-title { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--web-white); margin-bottom: .4rem; }
.inline-cta-text p { margin: 0; font-size: .88rem; color: var(--web-white); line-height: 1.6; }
/* color uses !important: both this and .toc-cta-btn below get embedded
   inside arbitrary prose content (.cs-prose a, .bp-content a, and future
   templates), and those ambient "a" link-color rules are element+class
   selectors — higher specificity than a single class — so without this
   they silently win and turn the button text the wrong color. */
.inline-cta-btn {
    background: var(--web-maroon); color: var(--web-white) !important;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
    padding: .65rem 1.3rem; border-radius: 7px; text-decoration: none;
    white-space: nowrap; flex-shrink: 0; transition: opacity .2s;
}
.inline-cta-btn:hover { opacity: .85; color: var(--web-white) !important; }

/* ═══════════════════════════════════════════════════════
   CTA — bordered white card (eyebrow + body + button)
   Partial: partials/sections/cta-bordered.blade.php
═══════════════════════════════════════════════════════ */
.toc-cta-box {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    background: var(--web-white); border: 1px solid var(--web-gray-border);
    border-left: 4px solid var(--web-teal);
    border-radius: 0 10px 10px 0;
    padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
.toc-cta-text { flex: 1; min-width: 220px; }
.toc-cta-eyebrow { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--web-maroon); margin-bottom: .4rem; }
.toc-cta-body { font-size: .88rem; color: var(--web-gray-body); line-height: 1.6; margin-bottom: 0; }
.toc-cta-body strong { color: var(--web-ink); font-weight: 700; }
.toc-cta-btn {
    display: inline-block; text-align: center; white-space: nowrap; flex-shrink: 0;
    background: var(--web-teal); color: var(--web-white) !important;
    font-size: .75rem; letter-spacing: .05em; text-transform: uppercase;
    padding: .8rem 1.4rem; border-radius: 7px; text-decoration: none;
    transition: background .18s;
}
.toc-cta-btn:hover { background: var(--web-maroon); color: var(--web-white) !important; }

/* ═══════════════════════════════════════════════════════
   CTA — full section, copy + embedded contact form
   Partial: partials/sections/cta-form.blade.php
═══════════════════════════════════════════════════════ */
.cta-wrap  { background: var(--web-blue); }
.cta-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.cta-left  { padding: 3rem 2.5rem 3rem 0; display: flex; flex-direction: column; justify-content: center; }
.cta-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--web-blue-light); margin-bottom: .75rem; }
.cta-heading { font-size: 1.55rem; color: var(--web-white); line-height: 1.3; margin-bottom: 1rem; }
.cta-body    { font-size: .92rem; color: rgba(var(--web-white-rgb), .88); line-height: 1.7; margin-bottom: 1.5rem; }
.cta-divider { border-color: rgba(var(--web-white-rgb), .12); margin-bottom: 1.25rem; }
.cta-call-label { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--web-white-rgb), .8); margin-bottom: .6rem; }
.cta-phone {
    display: flex; align-items: center; gap: .65rem; box-sizing: border-box;
    width: 100%;
    background: var(--web-white); color: var(--web-teal);
    font-size: 1.15rem; font-weight: 800;
    padding: .85rem 1.75rem; border-radius: 8px;
    text-decoration: none; box-shadow: 0 4px 14px rgba(var(--web-shadow-rgb), .18);
    transition: background .18s, color .18s, transform .15s, box-shadow .18s;
}
.cta-phone i { font-size: 1rem; }
.cta-hours { font-size: .8rem; color: rgba(var(--web-white-rgb), .7); margin-top: .6rem; }
.cta-phone:hover {
    background: var(--web-maroon); color: var(--web-white);
    transform: translateY(-2px); box-shadow: 0 8px 22px rgba(var(--web-shadow-rgb), .28);
}
.cta-address-label {
    font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(var(--web-white-rgb), .8); margin-top: 1.75rem; margin-bottom: .4rem;
}
.cta-address { font-style: normal; font-size: .98rem; color: var(--web-white); line-height: 1.6; }
.cta-address-btn {
    display: flex; align-items: flex-start; gap: .65rem; box-sizing: border-box;
    width: 100%;
    background: transparent; color: var(--web-white);
    font-size: .98rem; line-height: 1.5;
    padding: .75rem 1.5rem; border-radius: 8px; border: 1.5px solid rgba(var(--web-white-rgb), .45);
    text-decoration: none; transition: background .18s, border-color .18s, color .18s;
}
.cta-address-btn i { font-size: 1rem; margin-top: .2rem; flex-shrink: 0; }
.cta-address-btn:hover { background: var(--web-white); color: var(--web-teal); border-color: var(--web-white); }

/* .bigbox is shared with the footer (--web-teal) — override it here,
   scoped to this template, so the form card doesn't default to the
   same color as the footer it usually sits right above. */
.cta-right .bigbox { background-color: var(--web-blue); }

/* ── Section background overrides ──────────────────────────────────
   Pages (single-blog, city, areas-we-serve) compute which of these to
   apply to a shared section — FAQ in particular — based on whichever
   optional section actually rendered immediately before it, so two
   full-bleed sections never sit back-to-back in the same tone. Kept
   !important since they're a deliberate one-off override of a
   section's own default background, not a normal cascade rule. */
.section-bg-white { background: var(--web-white) !important; }
.section-bg-light { background: var(--web-gray-light) !important; }

/* ═══════════════════════════════════════════════════════
   FAQ — accordion
   Partial: partials/sections/faq.blade.php
═══════════════════════════════════════════════════════ */
.faq-wrap    { padding: 4rem 0; background: var(--web-gray-light); }
.faq-label   { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--web-maroon); text-align: center; margin-bottom: .4rem; }
.faq-heading { font-size: 1.5rem; color: var(--web-ink); text-align: center; margin-bottom: 1.5rem; max-width: 700px; margin-left: auto; margin-right: auto; }
.faq-subnote { font-size: .85rem; color: var(--web-gray-body); text-align: center; margin: -.75rem 0 1.75rem; }
.faq-subnote a { color: var(--web-teal); font-weight: 600; }
.faq-list    { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: .85rem; }
.faq-item {
    background: var(--web-gray-light); border: 1px solid var(--web-gray-border); border-radius: 12px; overflow: hidden;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.faq-item.open {
    background: var(--web-white); border-color: rgba(var(--web-teal-rgb), .25);
    box-shadow: 0 10px 28px rgba(var(--web-teal-rgb), .1);
}
.faq-btn {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; padding: 1.1rem 1.4rem; cursor: pointer; background: none; border: none; text-align: left;
}
.faq-btn-q { font-size: .97rem; font-weight: 600; color: var(--web-ink); line-height: 1.4; transition: color .2s; }
.faq-item.open .faq-btn-q { color: var(--web-teal); }
.faq-icon {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid rgba(var(--web-teal-rgb), .35); color: var(--web-teal);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; transition: transform .25s, background .2s, border-color .2s;
}
.faq-item.open .faq-icon { background: var(--web-teal); border-color: var(--web-teal); color: var(--web-white); transform: rotate(45deg); }
.faq-ans {
    overflow: hidden; max-height: 0; padding: 0 1.4rem;
    transition: max-height .35s cubic-bezier(.4, 0, .2, 1);
    font-size: .92rem; color: var(--web-gray-body); line-height: 1.75;
    overflow-wrap: anywhere;
}
.faq-item.open .faq-ans { padding: 0 1.4rem 1.25rem; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 991px) {
    .cta-inner  { grid-template-columns: 1fr; }
    .cta-right  { border-left: none; border-top: 1px solid rgba(var(--web-white-rgb), .1); padding: 0 0 2.5rem; }
    .cta-left   { padding: 2.5rem 0 2rem; }
    .toc-cta-box { align-items: flex-start; }
    .toc-cta-btn { width: 100%; text-align: center; }
}
@media (max-width: 767px) {
    .faq-wrap  { padding: 2.75rem 0; }
    .faq-heading { font-size: 1.2rem; margin-bottom: 1.75rem; }
    .faq-btn   { padding: .95rem 1.1rem; }
    .faq-ans   { padding: 0 1.1rem; }
    .faq-item.open .faq-ans { padding: 0 1.1rem 1.1rem; }
    .inline-cta-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575px) {
    .cta-heading { font-size: 1.25rem; }
}