/*
Theme Name: Columbia PA Plumber Child
Theme URI: https://columbiapaplumber.com
Description: Astra Child Theme for Columbia PA Plumber - Rank & Rent Plumbing Website
Author: Columbia PA Plumber
Author URI: https://columbiapaplumber.com
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: columbia-pa-plumber-child
*/

/* ============================================================
   GLOBAL COLORS & VARIABLES
   ============================================================ */
:root {
    --navy: #1a2e4a;
    --orange: #f97316;
    --orange-dark: #e05d00;
    --white: #ffffff;
    --text-dark: #2c2c2c;
    --light-gray: #f5f5f5;
}

/* ============================================================
   HEADER - NAVY BLUE BACKGROUND
   ============================================================ */
.site-header,
#masthead,
.ast-masthead-custom-menu-items,
.main-header-bar {
    background-color: #1a2e4a !important;
}

.site-header .site-title a,
.site-header .site-title,
.ast-site-identity .site-title a {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 24px !important;
}

.site-header .site-description,
.ast-site-identity .site-description {
    color: #ffffff !important;
    font-size: 13px !important;
}

/* ============================================================
   NAVIGATION - WHITE LINKS WITH ORANGE HOVER
   ============================================================ */
.main-header-menu .menu-item > a,
.main-navigation .menu-item > a,
#site-navigation .menu-item > a {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.main-header-menu .menu-item > a:hover,
.main-navigation .menu-item > a:hover,
#site-navigation .menu-item > a:hover,
.main-header-menu .current-menu-item > a {
    color: #f97316 !important;
}

/* ============================================================
   PHONE NUMBER BUTTON IN HEADER
   ============================================================ */
.ast-custom-button-link,
.ast-masthead-custom-menu-items .ast-custom-button-link a {
    background-color: #f97316 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease !important;
}

.ast-custom-button-link:hover,
.ast-masthead-custom-menu-items .ast-custom-button-link a:hover {
    background-color: #e05d00 !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
    background-color: #1a2e4a;
    color: #ffffff;
    padding: 80px 20px;
    text-align: center;
}

.hero-section h1 {
    color: #ffffff;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.hero-section p {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   BUTTONS - ORANGE WITH DARK HOVER
   ============================================================ */
.ast-btn,
.wp-block-button__link,
a.button,
button,
input[type="submit"],
.cta-button {
    background-color: #f97316 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 14px 30px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.ast-btn:hover,
.wp-block-button__link:hover,
a.button:hover,
button:hover,
input[type="submit"]:hover,
.cta-button:hover {
    background-color: #e05d00 !important;
    color: #ffffff !important;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
body {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px !important;
    color: #2c2c2c !important;
    line-height: 1.7 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif !important;
    color: #1a2e4a !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

h1 { font-size: 42px !important; }
h2 { font-size: 34px !important; }
h3 { font-size: 26px !important; }
h4 { font-size: 22px !important; }
h5 { font-size: 18px !important; }
h6 { font-size: 16px !important; }

@media (max-width: 768px) {
    h1 { font-size: 28px !important; }
    h2 { font-size: 24px !important; }
    h3 { font-size: 20px !important; }
    h4 { font-size: 18px !important; }
    h5 { font-size: 16px !important; }
    h6 { font-size: 14px !important; }
}

/* ============================================================
   LINKS
   ============================================================ */
a {
    color: #f97316 !important;
    text-decoration: none !important;
}

a:hover {
    color: #e05d00 !important;
    text-decoration: underline !important;
}

/* ============================================================
   SERVICE BOXES
   ============================================================ */
.service-box {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px 25px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 25px;
}

.service-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: #f97316;
}

.service-box h3 {
    color: #1a2e4a !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
}

.service-box p {
    color: #2c2c2c !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* ============================================================
   CTA SECTIONS
   ============================================================ */
.cta-section {
    background-color: #1a2e4a;
    color: #ffffff;
    padding: 60px 20px;
    text-align: center;
}

.cta-section h2 {
    color: #ffffff !important;
    font-size: 36px !important;
    margin-bottom: 15px !important;
}

.cta-section p {
    color: #ffffff !important;
    font-size: 18px !important;
    margin-bottom: 30px !important;
}

.cta-section .phone-number {
    font-size: 42px;
    font-weight: 700;
    color: #f97316 !important;
    display: block;
    margin-bottom: 20px;
}

/* ============================================================
   WHY CHOOSE US SECTION
   ============================================================ */
.why-choose-section {
    background-color: #f5f5f5;
    padding: 60px 20px;
}

.why-choose-section h2 {
    text-align: center;
    color: #1a2e4a !important;
    margin-bottom: 40px !important;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 15px;
    background: #ffffff;
    border-radius: 6px;
    border-left: 4px solid #f97316;
}

.feature-item .feature-icon {
    font-size: 28px;
    margin-right: 15px;
    min-width: 40px;
}

.feature-item h4 {
    color: #1a2e4a !important;
    font-size: 17px !important;
    margin-bottom: 5px !important;
}

.feature-item p {
    color: #2c2c2c !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* ============================================================
   SERVICE AREA SECTION
   ============================================================ */
.service-area-section {
    padding: 60px 20px;
    background: #ffffff;
}

.service-area-section h2 {
    text-align: center;
    color: #1a2e4a !important;
    margin-bottom: 30px !important;
}

.town-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    max-width: 900px;
    margin: 0 auto;
}

.town-item {
    background: #1a2e4a;
    color: #ffffff;
    padding: 12px 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon {
    background-color: #1a2e4a !important;
    color: #ffffff !important;
    padding: 40px 20px 20px !important;
}

.site-footer a,
#colophon a {
    color: #f97316 !important;
}

.site-footer a:hover,
#colophon a:hover {
    color: #ffffff !important;
}

.footer-phone {
    font-size: 22px;
    font-weight: 700;
    color: #f97316 !important;
}

/* ============================================================
   PHONE NUMBER CLICK-TO-CALL LINK
   ============================================================ */
.phone-cta {
    display: inline-block;
    background-color: #f97316;
    color: #ffffff !important;
    padding: 15px 35px;
    border-radius: 4px;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none !important;
    margin: 15px 0;
    transition: background-color 0.3s ease;
}

.phone-cta:hover {
    background-color: #e05d00 !important;
    color: #ffffff !important;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .hero-section {
        padding: 50px 15px;
    }

    .hero-section h1 {
        font-size: 30px;
    }

    .cta-section .phone-number {
        font-size: 30px;
    }

    .town-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   STICKY HEADER
   ============================================================ */
.ast-sticky-active .main-header-bar,
.ast-header-sticky .main-header-bar {
    background-color: #1a2e4a !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

/* ============================================================
   CONTACT FORM STYLING
   ============================================================ */
.wpforms-container input,
.wpforms-container textarea,
.wpforms-container select {
    border: 2px solid #ddd !important;
    border-radius: 4px !important;
    padding: 12px !important;
    font-size: 16px !important;
    font-family: 'Open Sans', sans-serif !important;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus {
    border-color: #f97316 !important;
    outline: none !important;
}

.wpforms-container .wpforms-submit {
    background-color: #f97316 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 40px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

/* ============================================================
   RANK MATH / YOAST BREADCRUMBS
   ============================================================ */
.rank-math-breadcrumb,
.ast-breadcrumbs-wrap {
    background-color: #f5f5f5 !important;
    padding: 8px 15px !important;
    font-size: 13px !important;
}