/*
 * Roofing Pro — Theme CSS
 * Supplemental styles for components not in style.css
 */

/* ================================================================
   ELEMENTOR FULL-WIDTH OVERRIDES
   Force all Roofing Pro sections / widgets to span the full viewport.
   Elementor's default .elementor-section-boxed adds a max-width
   inner container — these rules neutralise that constraint so every
   custom widget renders edge-to-edge.
   ================================================================ */

/* Section shell — always full viewport width */
.elementor-section.elementor-section-stretched,
.elementor-section.elementor-section-full_width {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
}

/* Remove inner boxed container constraint */
.elementor-section .elementor-container,
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
}

/* Column inside section — no side padding */
.elementor-section .elementor-column-wrap,
.elementor-section .elementor-widget-wrap {
    padding: 0 !important;
}

/* Widget container — flush to column edge */
.elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Roofing Pro specific widgets — guarantee edge-to-edge */
.elementor-widget-rp_hero_section,
.elementor-widget-rp_video_content,
.elementor-widget-rp_cta,
.elementor-widget-rp_roofing_services,
.elementor-widget-rp_image_content,
.elementor-widget-rp_gallery_section,
.elementor-widget-rp_testimonials,
.elementor-widget-rp_blog_posts,
.elementor-widget-rp_google_map {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.elementor-widget-rp_hero_section .elementor-widget-container,
.elementor-widget-rp_video_content .elementor-widget-container,
.elementor-widget-rp_cta .elementor-widget-container,
.elementor-widget-rp_roofing_services .elementor-widget-container,
.elementor-widget-rp_image_content .elementor-widget-container,
.elementor-widget-rp_gallery_section .elementor-widget-container,
.elementor-widget-rp_testimonials .elementor-widget-container,
.elementor-widget-rp_blog_posts .elementor-widget-container,
.elementor-widget-rp_google_map .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ================================================================
   PRELOADER
   ================================================================ */
body.rp-preloader-active { overflow: hidden; }
.rp-preloader.hidden { opacity: 0; pointer-events: none; }

/* ================================================================
   HEADER ANIMATIONS
   ================================================================ */
.rp-header-sticky {
    position: sticky;
    top: 0;
    z-index: 9999;
}

.rp-header.rp-scrolled {
    box-shadow: 0 3px 15px rgba(0,0,0,0.12);
}


/* ================================================================
   ADMIN OPTIONS PAGE
   ================================================================ */
.rp-notice {
    padding: 12px 18px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}
.rp-notice-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.rp-notice-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ================================================================
   PAGE CONTENT (from Elementor)
   ================================================================ */
.rp-page-content {
    min-height: 30vh;
}

/* ================================================================
   TYPOGRAPHY RESETS (for Elementor compatibility)
   ================================================================ */
.elementor-section .container {
    max-width: 1300px;
}

/* ================================================================
   FORM OVERLAYS
   ================================================================ */
.rp-form-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 9999999;
    overflow-y: auto;
    padding: 60px 15px 80px;
    justify-content: center;
    align-items: flex-start;
}
.rp-form-overlay.active { display: flex; }

.rp-form-overlay-inner {
    max-width: 520px;
    width: 100%;
    position: relative;
}

.rp-form-close {
    position: absolute;
    top: -45px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
}

/* ================================================================
   PAGINATION
   ================================================================ */
.rp-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
.rp-pagination .nav-links { display: flex; gap: 8px; }
.rp-pagination .page-numbers {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s;
}
.rp-pagination .page-numbers:hover,
.rp-pagination .page-numbers.current {
    background: var(--rp-primary);
    border-color: var(--rp-primary);
    color: #fff;
}

/* ================================================================
   WIDGET STYLES (sidebar)
   ================================================================ */
.widget { margin-bottom: 30px; }
.widget-title {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 2px solid var(--rp-primary);
    padding-bottom: 8px;
    margin-bottom: 15px;
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 6px 0; border-bottom: 1px solid #eee; font-size: 0.9rem; }
.widget ul li a { color: #333; }
.widget ul li a:hover { color: var(--rp-primary); }

/* ================================================================
   COMMENTS
   ================================================================ */
.comments-area { margin-top: 50px; }
.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95rem;
    margin-bottom: 15px;
}
.comment-form .submit {
    background: var(--rp-primary);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
}
.comment-form .submit:hover { background: var(--rp-primary-dark); }

/* ================================================================
   SEO "CITY LINKS" (page builder footer DL)
   ================================================================ */
.rp-city-links {
    max-width: 1170px;
    margin: 20px auto;
    padding: 0 15px;
}
.rp-city-links dt {
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: bold;
}
.rp-city-links dd { margin: 0 0 8px 0; }
.rp-city-links dd a {
    display: inline-block;
    padding-right: 6px;
    margin-right: 4px;
    color: #555;
    font-size: 12px;
    border-right: 1px solid #aaa;
    text-decoration: none;
}
.rp-city-links dd a:hover { text-decoration: underline; }
.rp-city-links dd a:last-child { border: 0; }

/* ================================================================
   ACCESSIBILITY
   ================================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--rp-primary);
    outline-offset: 2px;
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
    .rp-header,
    .rp-footer,
    .rp-mobile-bar,
    .rp-review-badge,
    .rp-review-sidebar,
    .rp-back-to-top {
        display: none !important;
    }
}

/* ================================================================
   FONTS — Exact families from original design
   ================================================================ */
body,
body * {
    font-family: "Open Sans", sans-serif;
}
h1, h2, h3, h4, h5, h6,
.rp-hero-title,
.rp-service-title,
.rp-section-title,
.rp-cta-title,
nav.rp-nav ul li a,
.rp-nav-list li a,
.rp-footer-widget-title {
    font-family: "Roboto Condensed", serif;
}

/* ================================================================
   PHONE BUTTON — ring animation (from original wait-animate.min.css)
   Applied to .callIcon i.fa-phone on hover / always
   ================================================================ */
@keyframes rp-ring {
    0%   { transform: rotate(-15deg); }
    5%   { transform: rotate(15deg); }
    10%  { transform: rotate(-18deg); }
    15%  { transform: rotate(18deg); }
    20%  { transform: rotate(-22deg); }
    25%  { transform: rotate(22deg); }
    30%  { transform: rotate(-18deg); }
    35%  { transform: rotate(18deg); }
    40%  { transform: rotate(-12deg); }
    45%  { transform: rotate(12deg); }
    50%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.callIcon .fa,
.callIcon .fas,
.rp-call-icon .fa,
.rp-call-icon .fas {
    display: inline-block;
    transform-origin: 50% 0%;
    animation: rp-ring 3s ease infinite;
}

/* Pulse glow on call button */
@keyframes rp-call-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242,4,4,0.5); }
    50%       { box-shadow: 0 0 0 8px rgba(242,4,4,0); }
}
.callIcon,
.rp-call-icon {
    animation: rp-call-pulse 2s ease infinite;
}

/* Header CTA matching original import.css structure */
.btn_call_to_action  { position: relative; width: 200px; margin-left: 30px; }
a.calltoaction       {
    border: 2px solid #f20404;
    font-size: 1.2rem;
    font-weight: 900;
    padding: 7px 10px 7px 50px;
    border-radius: 20px;
    color: #000;
    line-height: 1;
    display: flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
}
a.calltoaction:hover { color: #f20404; }
span.callIcon        {
    position: absolute;
    top: 10%;
    left: 0;
    transform: translateY(-50%);
    border: 1px solid #f20404;
    border-radius: 50%;
    font-size: 1.4rem;
    padding: 6px;
    background: #f20404;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
p.callusnow          {
    position: absolute;
    top: -22px;
    right: 10px;
    background: #f20404;
    color: #fff;
    font-family: "Roboto Condensed", serif;
    border-radius: 10px;
    padding: 2px 8px;
    line-height: 1;
    margin: 0;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ================================================================
   FULL RESPONSIVE — ported from original import.css + custom.css
   ================================================================ */

/* ── ≥ 1350px ─────────────────────────────────────────────────── */
@media (min-width: 1350px) {
    .rp-container,
    .container {
        max-width: 1300px;
    }
}

/* ── ≤ 1190px ─────────────────────────────────────────────────── */
@media (max-width: 1190px) {
    .rp-nav-list li a { font-size: 1rem; }
    .rp-logo img      { max-width: 180px !important; }

    /* Services: 2 columns */
    .rp-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── ≤ 1100px ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    /* Hero icons row wraps */
    .rp-hero-icons { gap: 10px; }
    .rp-hero-icon-item { min-width: 130px; }

    /* Video + Content stacks */
    .rp-video-content-wrap {
        flex-direction: column !important;
    }
    .rp-video-content-wrap .rp-vc-video,
    .rp-video-content-wrap .rp-vc-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Image + Content stacks */
    .rp-ic-wrap {
        flex-direction: column !important;
    }
    .rp-ic-wrap .rp-ic-image,
    .rp-ic-wrap .rp-ic-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    .rp-ic-image img { height: 350px; object-fit: cover; }
}

/* ── ≤ 991px ──────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* ── HEADER ─────────────────────────────────────── */
    /* Container becomes a positioning parent for the hamburger */
    .rp-header .container {
        position: relative;
        flex-wrap: nowrap;
        align-items: center;
    }

    /* Hamburger: absolute top-right like original g-pos-abs g-top-3 g-right-0 */
    .rp-menu-toggle {
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 10001;
    }

    /* Push CTA to left of hamburger so it doesn't overlap */
    .rp-header-cta { margin-left: auto; margin-right: 55px; }
    .btn_call_to_action { width: auto; }

    /* Nav: collapsed by default, full-width absolute dropdown below header */
    .rp-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        border-top: 2px solid var(--rp-primary, #f20404);
        z-index: 9998;
    }
    /* Opened state — JS adds .open */
    .rp-nav.open {
        display: block;
    }

    /* Nav list stacks vertically */
    .rp-nav ul {
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0;
    }
    .rp-nav ul li {
        border-bottom: 1px solid #f0f0f0;
    }
    .rp-nav ul li a {
        display: block;
        padding: 12px 20px;
        font-size: 1rem;
        border-bottom: none;
    }
    .rp-nav ul li a:hover { background: #f8f8f8; }

    /* ── DESKTOP DROPDOWN → MOBILE ACCORDION ─────────── */
    /* Sub-menu: static, full-width, indented */
    .rp-nav ul li.menu-item-has-children { position: relative; overflow: visible; }
    .rp-nav ul li .sub-menu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: none;           /* toggled by JS */
        width: 100% !important;
        min-width: 0 !important;
        box-shadow: none;
        border-top: 1px solid #f0f0f0;
        background: #f9f9f9;
        padding: 0;
    }
    .rp-nav ul li .sub-menu.open { display: block; }
    .rp-nav ul li .sub-menu li a {
        padding: 10px 35px;
        font-size: 0.9rem;
        border-bottom: none;
    }

    /* Dropdown toggle arrow — appended by JS */
    .rp-dropdown-toggle {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.2rem;
        color: #555;
        border-left: 1px solid #f0f0f0;
        transition: transform 0.25s ease;
    }
    .rp-dropdown-toggle.open { transform: rotate(180deg); }

    /* HERO */
    .rp-hero-section { min-height: 100vh; }
    .rp-hero-inner {
        flex-direction: column !important;
        padding: 40px 20px !important;
    }
    .rp-hero-left  { width: 100% !important; }
    .rp-hero-right { width: 100% !important; margin-top: 30px; }
    .rp-hero-title { font-size: 2.2rem !important; }

    /* SERVICES: 2 columns */
    .rp-services-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* GALLERY: 2 columns */
    .rp-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* BLOG: 1 column */
    .rp-blog-grid { grid-template-columns: 1fr !important; }

    /* REVIEWS: 1 column */
    .rp-reviews-grid { grid-template-columns: 1fr !important; }

    /* TEXT ALIGN */
    .movil-text-center { text-align: center !important; }

    /* CTA */
    .rp-cta-section { padding: 60px 20px; }
    .rp-cta-title   { font-size: 2rem !important; }

    /* VIDEO + CONTENT */
    .rp-video-content-wrap {
        flex-direction: column !important;
        padding: 40px 20px;
    }
    .rp-vc-video,
    .rp-vc-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    .rp-vc-video iframe,
    .rp-vc-video video {
        min-height: 280px;
    }

    /* IMAGE + CONTENT */
    .rp-ic-wrap {
        flex-direction: column !important;
        padding: 40px 20px;
    }
    .rp-ic-image,
    .rp-ic-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    .rp-ic-image img { height: 280px; }
}

/* ── ≤ 767px ──────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* HEADER */
    .rp-logo img { max-width: 140px !important; }
    .rp-header-cta { display: none; }           /* hide on small phones; visible in mobile bar */
    .rp-top-bar p  { font-size: 0.78rem; text-align: center; }

    /* HERO */
    .rp-hero-title      { font-size: 1.8rem !important; }
    .rp-hero-desc       { font-size: 1rem; }
    .rp-hero-icons      { flex-direction: column; gap: 8px; }
    .rp-hero-icon-item  {
        width: 100% !important;
        flex-direction: row !important;
        height: auto !important;
        padding: 10px 14px;
        border-radius: 10px;
    }
    .rp-hero-form-wrap  { padding: 20px 15px; }
    .rp-hero-section    { height: auto !important; min-height: 100vh; }

    /* SERVICES: 1 column */
    .rp-services-grid     { grid-template-columns: 1fr !important; gap: 20px; }
    .rp-service-card      { max-width: 440px; margin: 0 auto; }
    /* service icon boxes */
    .box-icon-service-item .item-icon { font-size: 3rem; }
    .box-icon-service-item            { background: rgb(242 4 4); }
    .box-icon-service                 { bottom: -190px; gap: 0 10px; padding: 0 10px; }

    /* GALLERY: 1 column */
    .rp-gallery-grid  { grid-template-columns: 1fr !important; gap: 8px; }
    .rp-gallery-item  { height: 240px !important; }

    /* BLOG */
    .blog-post, .rp-blog-card { flex-direction: column; }
    .post-media, .post-info   { width: 100% !important; }
    .post-info                { justify-content: flex-start; height: auto; }

    /* REVIEWS: 1 column */
    .rp-reviews-grid  { grid-template-columns: 1fr !important; }

    /* SECTION TITLES */
    .rp-section-title        { font-size: 2rem !important; }
    .rp-section-title-wrap   { padding: 0 15px; }

    /* VIDEO + CONTENT */
    .rp-vc-title  { font-size: 1.6rem !important; }
    .rp-vc-video iframe,
    .rp-vc-video video { min-height: 220px; }

    /* CTA */
    .rp-cta-title    { font-size: 1.6rem !important; }
    .rp-cta-btn      { font-size: 1.4rem !important; }

    /* FOOTER */
    .rp-footer-grid  { grid-template-columns: 1fr !important; gap: 30px; }
    .rp-footer-logo img { max-width: 160px; }

    /* MAP */
    .rp-map-wrapper iframe { height: 280px !important; }
}

/* ── ≤ 480px ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .rp-hero-title  { font-size: 1.5rem !important; }
    .rp-cta-title   { font-size: 1.3rem !important; }
    .rp-cta-btn     { font-size: 1rem !important; padding: 10px 20px !important; }
    .rp-section-title { font-size: 1.6rem !important; }
    .rp-gallery-item  { height: 200px !important; }
    .rp-review-card   { padding: 20px 15px; }
    .rp-services-grid { grid-template-columns: 1fr !important; }
}