/* ============================================================
   Service Areas Cities — style.css v1.0.1
   Suffix: 7f3a9b12

   Notes:
   - All buttons are <a> tags, never <button>, so WPCode global
     button rules (gold gradient, transform lift) never apply.
   - Elementor Group_Control_Background, Group_Control_Border,
     and Group_Control_Box_Shadow write their own inline CSS via
     the selector system, so this file only sets structural
     defaults. Colors, gradients, borders, and shadows are fully
     controlled from the Elementor panel.
   ============================================================ */

/* ── Scope reset ── */
.sac-wrap-7f3a9b12 * {
    box-sizing: border-box;
}

/* ── Section wrapper ── */
.sac-wrap-7f3a9b12 {
    background-color: #F5F8FA;
    padding: 40px 20px;
    width: 100%;
}

/* ── Inner container ── */
.sac-inner-7f3a9b12 {
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
}

/* ── Header block ── */
.sac-header-7f3a9b12 {
    text-align: center;
    margin-bottom: 32px;
}

.sac-eyebrow-7f3a9b12 {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #EFB215;
    margin-bottom: 8px;
}

.sac-heading-7f3a9b12 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: #4D4949;
    margin: 0 0 12px;
    padding: 0;
}

.sac-subtext-7f3a9b12 {
    font-size: 15px;
    line-height: 1.7;
    color: #7a7575;
    max-width: 620px;
    margin: 0 auto;
    padding: 0;
}

/* ── Button grid ── */
.sac-grid-7f3a9b12 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    width: 100%;
}

/* ── Button base — structural only ──
   Colours, border, shadow come from Elementor Group Controls.
   Transition and flex centering are structural and stay here.
   WPCode immunity: <a> tags are not targeted by the global
   button selector.
── */
.sac-btn-7f3a9b12 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    line-height: 1.3;
    /* Structural defaults — overridden by Elementor panel */
    background: #ffffff;
    color: #000000;
    border: 1px solid #ede8e8;
    border-radius: 10px;
    padding: 12px 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 8px rgba(77, 73, 73, 0.08);
    transition: background 0.22s ease, border-color 0.22s ease,
                color 0.22s ease, box-shadow 0.22s ease,
                transform 0.22s ease;
}

.sac-btn-7f3a9b12:focus,
.sac-btn-7f3a9b12:visited,
.sac-btn-7f3a9b12:active {
    text-decoration: none;
}

.sac-btn-7f3a9b12:focus-visible {
    outline: 2px solid rgba(239, 178, 21, 0.6);
    outline-offset: 2px;
}

/* ================================================================
   TABLET: 681px – 1024px
================================================================ */
@media (min-width: 681px) and (max-width: 1024px) {
    .sac-wrap-7f3a9b12    { padding: 32px 16px; }
    .sac-heading-7f3a9b12 { font-size: 26px; }
    .sac-subtext-7f3a9b12 { font-size: 14px; }
    .sac-grid-7f3a9b12    { grid-template-columns: repeat(5, 1fr); }
}

/* ================================================================
   MOBILE: ≤680px
================================================================ */
@media (max-width: 680px) {
    .sac-wrap-7f3a9b12    { padding: 24px 12px; }
    .sac-heading-7f3a9b12 { font-size: 22px; }
    .sac-subtext-7f3a9b12 { font-size: 13px; }
    .sac-grid-7f3a9b12    { grid-template-columns: repeat(3, 1fr); }
    .sac-btn-7f3a9b12     { font-size: 12px; padding: 10px 6px; }
}