/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.0
Description: Beaver Builder child theme custom styles.
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/


/* =====================================================
   HEADER LOGO
===================================================== */
.header-logo img {
    max-width:166px;
    max-height:70px;
    width:auto;
    height:auto;
    object-fit:contain;
}


/* =====================================================
   FOOTER — ALIGNMENT (768–800px)
===================================================== */
@media (min-width:768px) and (max-width:800px){

    /* Keep the 3 footer columns */
    .footer-test .fl-node-u1slz93ahiny{
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:flex-start !important;
    }

    .footer-test .fl-node-u1slz93ahiny > .fl-col{
        float:none !important;
        clear:none !important;
    }

    /* Information */
    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(1){
        width:35% !important;
        max-width:35% !important;
        flex:0 0 35% !important;
    }

    /* Logo */
    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(2){
        width:30% !important;
        max-width:30% !important;
        flex:0 0 30% !important;
    }

    /* Quick Links */
    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(3){
        width:35% !important;
        max-width:35% !important;
        flex:0 0 35% !important;
    }

    /* Reset vertical offsets */
    .footer-test .fl-node-u1slz93ahiny .fl-col-content,
    .footer-test .fl-node-u1slz93ahiny .fl-module-content{
        margin-top:0 !important;
        padding-top:0 !important;
    }

    /* Text alignment */
    .footer-test .fl-node-u1slz93ahiny .fl-heading,
    .footer-test .fl-node-u1slz93ahiny .fl-heading-text,
    .footer-test .fl-node-u1slz93ahiny .fl-rich-text{
        text-align:left !important;
    }

    /* Logo */
    .footer-test .fl-node-u1slz93ahiny img{
        max-width:135px !important;
        height:auto !important;
        display:block !important;
        margin:0 auto !important;
    }

    /* Copyright block full width */
    .footer-test .fl-node-h4uxcdrvsakp{
        width:100% !important;
        max-width:100% !important;
        display:block !important;
        clear:both !important;
    }

    .footer-test .fl-node-h4uxcdrvsakp,
    .footer-test .fl-node-h4uxcdrvsakp *{
        text-align:center !important;
        white-space:normal !important;
    }
}


/* =====================================================
   FOOTER — TABLET LAYOUT (768–800px)
===================================================== */
@media (min-width:768px) and (max-width:800px){

    .footer-test .fl-node-u1slz93ahiny{
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:flex-start !important;
    }

    .footer-test .fl-node-u1slz93ahiny > .fl-col{
        float:none !important;
        clear:none !important;
        flex:0 0 33.333% !important;
        max-width:33.333% !important;
        width:33.333% !important;
    }

    /* Information */
    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(1),
    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(1) *{
        text-align:left !important;
    }

    /* Logo */
    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(2) img{
        max-width:140px !important;
        display:block !important;
        margin:0 auto !important;
    }

    /* Quick Links */
    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(3),
    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(3) *{
        text-align:left !important;
    }

    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(3){
        padding-left:35px !important;
    }

    /* Copyright block */
    .footer-test .fl-node-h4uxcdrvsakp,
    .footer-test .fl-node-h4uxcdrvsakp *{
        text-align:center !important;
        white-space:normal !important;
    }
}


/* =====================================================
   FOOTER — QUICK LINKS RIGHT ALIGN (768–800px)
===================================================== */
@media (min-width:768px) and (max-width:800px){

    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(3){
        text-align:right !important;
    }

    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(3) .fl-heading,
    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(3) .fl-heading-text,
    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(3) .fl-rich-text,
    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(3) p,
    .footer-test .fl-node-u1slz93ahiny > .fl-col:nth-child(3) a{
        text-align:right !important;
    }
}


/* =====================================================
   TABLET + MOBILE MENU
===================================================== */
@media (max-width:992px){

    .tablet-mobile-menu {
        width:100% !important;
    }

    .tablet-mobile-menu .fl-menu-mobile-clone {
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
        background:#F5F2EB !important;
        box-sizing:border-box !important;
    }

    .tablet-mobile-menu .fl-menu-mobile-clone nav,
    .tablet-mobile-menu .fl-menu-mobile-clone ul.menu,
    .tablet-mobile-menu .fl-menu-mobile-clone li,
    .tablet-mobile-menu .fl-menu-mobile-clone a {
        width:100% !important;
        display:block !important;
        text-align:left !important;
    }
}


/* =====================================================
   MOBILE / TABLET MENU — HAMBURGER ALIGNMENT
===================================================== */
@media (max-width:992px){

    /* Menu module */
    .tablet-mobile-menu {
        width:100%;
    }

    /* Align hamburger to the right */
    .tablet-mobile-menu .fl-menu-mobile-toggle {
        float:right !important;
        margin-right:0 !important;
    }

    /* Clear Beaver float */
    .tablet-mobile-menu .fl-clear {
        display:none !important;
    }
}


/* =====================================================
   ROW / LIST UTILITIES
===================================================== */

/* Hide row gap */
.no-row-line {
    margin-top:-1px !important;
}

/* Top align list icons */
.fl-list-item-content-icon {
    vertical-align:top !important;
    padding-top:0 !important;
    position:relative;
    top:-2px;
}

/* Green box spacing */
@media (min-width:993px) and (max-width:1047px) {
    .fl-builder-content-10 .fl-node-u7trpe0wm89d.fl-builder-content {
        column-gap:30px !important;
    }
}


/* =====================================================
   SERVICE CARDS — BASE
===================================================== */
.service-card{
    width:100%;
    border:2px solid #7B8166;
    border-radius:15px;
    background:#FAFAFA;
    padding:24px;
    box-sizing:border-box;
    overflow:hidden;
    transition:all .3s ease;
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* =====================================================
   SERVICE CARDS — HOVER
===================================================== */
.service-card:hover{
    background:#7B8166;
    border-color:#7B8166;
}

/* =====================================================
   SERVICE CARDS — ICON SWAP
===================================================== */
.service-card .icon-hover{
    display:none;
}
.service-card:hover .icon-normal{
    display:none;
}
.service-card:hover .icon-hover{
    display:block;
}

/* =====================================================
   SERVICE CARDS — ICON SIZE (BASE)
   Se fuerza width + height iguales (caja cuadrada) y
   object-fit:contain para que todos los SVG (aunque
   tengan proporciones distintas, ej. 64x69 vs 69x12)
   se vean del mismo tamaño visual. !important necesario
   para ganarle a la regla del theme padre (bb-theme)
   que aplica a .fl-photo-img-svg img.
===================================================== */
.service-card .icon-normal,
.service-card .icon-hover{
    width:64px !important;
    flex:0 0 64px !important;
}
.service-card .icon-normal img,
.service-card .icon-hover img{
    width:64px !important;
    height:64px !important;
    max-width:none !important;
    object-fit:contain !important;
    display:block !important;
}

/* =====================================================
   SERVICE CARDS — TEXT COLORS
===================================================== */
.service-card .fl-heading-text,
.service-card .fl-rich-text,
.service-card .fl-rich-text p{
    color:#2E2E2E;
    transition:color .3s ease;
}
.service-card:hover .fl-heading-text,
.service-card:hover .fl-rich-text,
.service-card:hover .fl-rich-text p,
.service-card:hover a{
    color:#FFF;
}

/* =====================================================
   SERVICE CARDS — DESKTOP
===================================================== */
@media (min-width:993px){
    .service-card{
        max-width:310px;
        margin:0 auto 24px;
    }
}

/* =====================================================
   SERVICE CARDS — SMALL DESKTOP (993–1300px)
===================================================== */
@media (min-width:993px) and (max-width:1300px){
    .service-card{
        max-width:230px !important;
        padding:20px !important;
        gap:20px !important;
    }
    .service-card .icon-normal,
    .service-card .icon-hover{
        width:48px !important;
        flex:0 0 48px !important;
    }
    .service-card .icon-normal img,
    .service-card .icon-hover img{
        width:48px !important;
        height:48px !important;
        object-fit:contain !important;
    }
}

/* =====================================================
   SERVICE CARDS — TABLET (768–992px)
===================================================== */
@media (min-width:768px) and (max-width:992px){

    /* Two columns */
    .areas-focus-row .fl-col{
        width:50% !important;
        max-width:50% !important;
        flex:0 0 50% !important;
    }

    /* Card */
    .service-card{
        width:100%;
        max-width:260px;
        max-height:120px !important;
        padding:14px !important;
        margin:0 auto 16px !important;
        gap:20px !important;
    }

    /* Icons */
    .service-card .icon-normal,
    .service-card .icon-hover{
        width:40px !important;
        flex:0 0 40px !important;
    }
    .service-card .icon-normal img,
    .service-card .icon-hover img{
        width:40px !important;
        height:40px !important;
        object-fit:contain !important;
    }
}

/* =====================================================
   SERVICE CARDS — MOBILE (≤767px)
===================================================== */
@media (max-width:767px){

    .areas-focus-row .fl-col{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
    }

    .service-card{
        width:100%;
        max-width:100%;
        height:auto !important;
        min-height:0 !important;
        padding:18px;
        margin:0 0 16px;
        gap:16px !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
    }

    .service-card .icon-normal,
    .service-card .icon-hover{
        float:none !important;
        margin:0 !important;
        width:36px !important;
        flex:0 0 36px !important;
    }

    .service-card .icon-normal img,
    .service-card .icon-hover img{
        width:36px !important;
        height:36px !important;
        object-fit:contain !important;
    }

    .service-card .fl-heading{
        float:none !important;
        margin:0 !important;
    }

}


/* =====================================================
   SM CARDS — BASE
===================================================== */
.sm-card {
    width:100%;
    border-radius:15px;
    overflow:hidden;
    box-sizing:border-box;
    cursor:pointer;
    transition:all .3s ease;
}

/* =====================================================
   SM CARDS — WIDTH BY BREAKPOINT
===================================================== */
@media (min-width:769px) {
    .sm-card {
        max-width:310px;
        margin:0 auto;
    }
}

@media (max-width:768px) {
    .sm-card {
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
    }

    .sm-card.active,
    .sm-card:not(.active) {
        width:100% !important;
        max-width:100% !important;
    }
}

/* =====================================================
   SM CARDS — CLOSED STATE
===================================================== */
.sm-card:not(.active) {
    height:90px;
    background:#7B8166;
    border:2px solid #FFFFFF;
    border-radius:15px;
    padding:35px;
}

/* Hide open content */
.sm-card:not(.active) .sm-card-open {
    display:none;
}

/* Closed responsive */
@media (max-width:1300px) {
    .sm-card:not(.active) {
        height:120px;
        padding:20px 30px;
    }

    .sm-card-closed {
        align-items:flex-start;
        gap:12px;
    }
}

/* Closed layout */
.sm-card-closed {
    width:100%;
    height:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* Closed title */
.sm-card-closed-title {
    color:#FFFFFF;
    font-family:"Cormorant Garamond", serif;
    font-weight:700;
    font-size:24px;
    line-height:26.4px;
    letter-spacing:0;
}

/* Closed arrow */
.sm-card:not(.active) .sm-arrow {
    color:#FFFFFF;
}

/* =====================================================
   SM CARDS — OPEN STATE
===================================================== */
.sm-card.active {
    height:292px;
    background:#F5F2EB;
    border-radius:15px;
    padding:35px;
    position:relative;
}

/* Hide closed content */
.sm-card.active .sm-card-closed {
    display:none;
}

/* Open header */
.sm-card-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    position:relative;
    z-index:2;
}

/* Number badge */
.sm-card-number {
    width:35px;
    height:35px;
    border-radius:50%;
    background:#2D2926;
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:700;
    line-height:1;
}

/* Arrow */
.sm-arrow {
    color:#2D2926;
    font-size:18px;
    line-height:1;
    font-weight:700;
}

/* Open content */
.sm-card-content {
    width:100%;
    margin-top:50px;
    height:150px;
    display:flex;
    flex-direction:column;
    position:relative;
    z-index:2;
}

/* Open title */
.sm-card .sm-card-content h3.sm-card-title {
    max-width:none !important;
    margin:0 !important;
    font-family:"Cormorant Garamond", serif !important;
    font-weight:700 !important;
    color:#2D2926 !important;
    font-size:28px !important;
    line-height:33.6px !important;
    letter-spacing:0 !important;
}

/* More link */
.sm-more {
    display:inline-block;
    width:max-content;
    margin-top:auto;
    color:#2D2926;
    text-decoration:none;
    border-bottom:1px solid #2D2926;
    padding-bottom:6px;
    font-size:16px;
    line-height:1.2;
}
a.sm-more {
    display:inline-block;
    width:max-content;
    margin-top:auto;
    color:#2D2926;
    text-decoration:none;
    border-bottom:1px solid #2D2926;
    padding-bottom:6px;
    font-size:16px;
    line-height:1.2;
    transition:color .25s ease, border-color .25s ease;
}

a.sm-more:hover {
    color:#7B8166 !important;
    border-color:#7B8166;
    text-decoration:none !important;
}

/* Decorative image */
.sm-card-image {
    position:absolute;
    width:110px;
    height:110px;
    right:0;
    bottom:0;
    z-index:1;
}

.sm-card-image img {
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

/* Keep content above image */
.sm-card-header,
.sm-card-content {
    position:relative;
    z-index:2;
}

/* =====================================================
   SM CARDS — SMALL DESKTOP (993–1300px)
===================================================== */
@media (min-width:993px) and (max-width:1300px) {
    .sm-card {
        max-width:230px !important;
        width:100% !important;
        margin:0 auto 14px !important;
    }

    .sm-card.active {
        height:250px !important;
        padding:24px !important;
    }

    .sm-card:not(.active) {
        height:90px !important;
        padding:20px !important;
    }

    .sm-card-closed-title {
        font-size:18px !important;
        line-height:20px !important;
    }

    .sm-card .sm-card-content h3.sm-card-title {
        font-size:22px !important;
        line-height:26px !important;
    }

    .sm-card-content {
        margin-top:36px !important;
        height:130px !important;
    }

    .sm-card-image {
        width:90px !important;
        height:90px !important;
    }

    .sm-card-number {
        width:28px !important;
        height:28px !important;
        font-size:13px !important;
    }
}

/* =====================================================
   SM CARDS — MOBILE IMAGE OPACITY (≤768px)
===================================================== */
@media (max-width:768px) {
    .sm-card.active .sm-card-image {
        opacity:.4 !important;
    }

    .sm-card.active .sm-card-image img {
        opacity:1 !important;
    }
}

/* =====================================================
   SM CARDS — TABLET COLUMNS (481–768px)
===================================================== */
@media (max-width:768px) and (min-width:481px){

    .sm-cards-row .fl-col{
        width:50% !important;
        max-width:50% !important;
        flex:0 0 50% !important;
        float:left !important;
        clear:none !important;
    }

    .sm-cards-row .fl-col:nth-child(2n+1){
        clear:left !important;
    }

    .sm-cards-row .sm-card{
        width:100% !important;
        max-width:100% !important;
        margin:0 0 16px !important;
    }
}

/* =====================================================
   SM CARDS — SMALL MOBILE (≤480px)
===================================================== */
@media (max-width:480px){

    .sm-cards-row .fl-col{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
        float:none !important;
        clear:both !important;
    }

    .sm-cards-row .sm-card{
        width:100% !important;
        max-width:100% !important;
        margin:0 0 16px !important;
    }
}


/* =====================================================
   EXPANDABLE CARDS — ROW
===================================================== */
.expandable-cards-row{
    display:flex;
    gap:16px;
    align-items:flex-start;
}

/* =====================================================
   EXPANDABLE CARDS — BASE
===================================================== */
.expandable-card{
    width:97px;
    height:321px;
    overflow:hidden;
    border-radius:15px;
    cursor:pointer;
    transition:all .4s ease;
    flex-shrink:0;
}

/* =====================================================
   EXPANDABLE CARDS — CLOSED STATE
===================================================== */
.expandable-card-closed{
    width:97px;
    height:321px;
    background:#7B8166;
    border:2px solid #FFFFFF;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
}

/* Closed text */
.expandable-card-closed span{
    color:#FFFFFF;
    font-family:"Cormorant Garamond", serif;
    font-weight:700;
    font-size:24px;
    line-height:26.4px;
    letter-spacing:0;
    white-space:nowrap;
    transform:rotate(-90deg);
    transform-origin:center center;
}

/* =====================================================
   EXPANDABLE CARDS — OPEN STATE
===================================================== */
.expandable-card-open{
    display:none;
    width:310px;
    height:321px;
    position:relative;
    overflow:hidden;
    border-radius:15px;
}

/* Open image */
.expandable-card-open img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Open overlay */
.expandable-card-open::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(245,242,235,.55);
    z-index:1;
}

/* Open title */
.expandable-card-open h3{
    position:absolute;
    top:35px;
    left:35px;
    z-index:2;
    margin:0;
    font-family:"Cormorant Garamond", serif;
    font-size:36px;
    font-weight:700;
    line-height:1;
    color:#2B2A28;
}

/* =====================================================
   EXPANDABLE CARDS — ACTIVE STATE
===================================================== */
.expandable-card.active{
    width:310px;
}

.expandable-card.active .expandable-card-closed{
    display:none;
}

.expandable-card.active .expandable-card-open{
    display:block;
}

/* =====================================================
   EXPANDABLE CARDS — SMALL LAPTOP (1025–1300px)
===================================================== */
@media (min-width:1025px) and (max-width:1300px){

    .expandable-cards-row{
        width:100%;
        max-width:100%;
        gap:12px;
        justify-content:center;
        overflow:hidden;
    }

    .expandable-card{
        width:75px;
        height:300px;
    }

    .expandable-card-closed{
        width:75px;
        height:300px;
    }

    .expandable-card-closed span{
        font-size:20px;
        line-height:22px;
    }

    .expandable-card.active{
        width:240px;
        height:300px;
    }

    .expandable-card-open{
        width:240px;
        height:300px;
    }

    .expandable-card-open h3{
        top:28px;
        left:28px;
        font-size:30px;
    }
}

/* =====================================================
   EXPANDABLE CARDS — TABLET & MOBILE (≤1024px)
===================================================== */
@media (max-width:1024px){

    .expandable-cards-row{
        display:flex;
        flex-direction:column;
        gap:12px;
        width:100%;
    }

    .expandable-card,
    .expandable-card.active{
        width:100% !important;
        height:auto !important;
    }

    /* Closed state */
    .expandable-card-closed{
        display:flex;
        width:100%;
        height:72px;
        padding:0 24px;
        justify-content:flex-start;
        align-items:center;
        box-sizing:border-box;
    }

    /* Hide closed card completely when active */
    .expandable-card.active .expandable-card-closed{
        display:none !important;
        visibility:hidden !important;
        height:0 !important;
        min-height:0 !important;
        padding:0 !important;
        margin:0 !important;
        overflow:hidden !important;
        border:none !important;
    }

    .expandable-card-closed span{
        transform:none;
        white-space:normal;
        font-size:22px;
        line-height:1.2;
    }

    /* Open state */
    .expandable-card-open{
        display:none !important;
        width:100%;
        height:220px;
    }

    .expandable-card:not(.active) .expandable-card-open{
        display:none !important;
    }

    .expandable-card.active .expandable-card-open{
        display:block !important;
    }

    .expandable-card-open h3{
        top:24px;
        left:24px;
        font-size:30px;
    }
}

/* =====================================================
   EXPANDABLE CARDS — MOBILE (≤767px)
===================================================== */
@media (max-width:767px){

    .expandable-cards-row{
        gap:10px;
    }

    .expandable-card-closed{
        height:64px;
        padding:0 20px;
    }

    .expandable-card-closed span{
        font-size:20px;
        line-height:1.2;
    }

    .expandable-card-open{
        height:180px;
    }

    .expandable-card-open h3{
        top:18px;
        left:18px;
        font-size:24px;
    }
}


/* =====================================================
   IMAGE HOVER OVERLAY
===================================================== */

/* Image wrapper */
.image-hover-overlay .fl-photo-content {
    position:relative !important;
    overflow:hidden !important;
    display:block !important;
    border-radius:24px !important;
}

/* Image size */
.image-hover-overlay .fl-photo-content img {
    width:100% !important;
    height:244px !important;
    object-fit:cover !important;
    display:block !important;
    border-radius:24px !important;
}

/* Overlay layer */
.image-hover-overlay .fl-photo-content::before {
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:#C9CCAF80 !important;
    opacity:0 !important;
    transition:opacity .3s ease !important;
    z-index:5 !important;
    border-radius:24px !important;
    pointer-events:none !important;
}

/* Overlay hover */
.image-hover-overlay .fl-photo-content:hover::before {
    opacity:1 !important;
}


/* =====================================================
   RESOURCE CARDS
===================================================== */

/* Align button bottom */
@media (min-width:992px) {
    .resource-card .fl-col-content {
        display:flex;
        flex-direction:column;
        height:100%;
    }

    .resource-card .fl-button-wrap {
        margin-top:auto;
    }
}