/* CSS Document Shared Across Pompano Beach Sites */

/*///////////////////////////////////////
//  Define Variables                   //
///////////////////////////////////////*/

:root {
        --white: #fff;
        --green: #00763e;
        --green-rgba: 0,118,62;
        --yellow: #ffb715;
        --blue: #2A768D;
        --city-blue: #009dc2;
        --light-green: #66a785;
        --box-shadow: 0px 0px 10px 0px;
        --pba-grey: #3d4548;
        --pba-pink: #E21270;
        --pba-blue: #009cc2;
        --pba-green: #bbd631;
        --pba-orange: #f37230;
        --pba-pink-rgba: 226,18,112;
        --pba-blue-rgba: 45,125,149;
        --pba-green-rgba: 188,214,49;
        --pba-orange-rgba: 243,114,48;
        --cra-blue: #46afcd;
        --cra-pink: #f14d96;
        --cra-green: #bbd631;
        --cra-orange: #f37230;
        --cra-orange-rgba: 245,141,90;
        --cra-pink-rgba: 241,77,150;
        --cra-blue-rgba: 70,175,250;
        --cra-green-rgba: 199,221,90;
        --parks-grey: #3d4548;
        --parks-blue: #009cc2;
        --parks-green: #01884E;
        --parks-green-border: #023e24;
        --parks-green-rgba: 1, 139, 79;
        --downtown-yellow: #ffb715;
        --downtown-blue: #229abf;
        --downtown-green:#00763e;
        --downtown-orange: #f37230;
        --downtown-pink: #ed207b;
        --downtown-teal: #66a785;
      }

* {transition: all 0.5s ease;}

/* Pompano Colors */
.green {color: #bbd631;}
.light-green {color: #66a785;}
.yellow {color: #ffb715;}
.pb-blue {color: var(--blue);}

.bg-green {background-color: #bbd631;}
.bg-light-green {background-color: #66a785;}
.bg-yellow {background-color: #ffb715;}
.bg-blue {background-color: #39a6c5;}

/* PBA Colors */
.pba-grey {color:#3d4548;}
.pba-pink {color:#ed207b;}
.pba-blue {color:#009cc2;}
.pba-green {color:#bbd631;}
.pba-orange {color:#f37230;}

.bg-pba-pink {background-color:#ed207b;}
.bg-pba-blue {background-color:#009cc2;}
.bg-pba-green {background-color:#bbd631;}
.bg-pba-orange {background-color:#f37230;}

/* CRA Colors */
.cra-orange {color:#f58d5a;}
.cra-pink {color:#f14d96;}
.cra-blue {color:#46afcd;}
.cra-green {color:#c7dd5a;}

.cra-bg-orange {background-color:#f58d5a;}
.cra-bg-pink {background-color:#f14d96;}
.cra-bg-blue {background-color:#46afcd;}
.cra-bg-green {background-color:#c7dd5a;}

.downtown-blue {color: var(--downtown-blue);}
.downtown-yellow {color: var(--downtown-yellow);}
.downtown-green {color: var(--downtown-green);}
.downtown-orange {color: var(--downtown-orange);}
.downtown-pink {color: var(--downtown-pink);}
.downtown-teal {color: var(--downtown-teal);}

.bg-downtown-blue {background-color: var(--downtown-blue);}
.bg-downtown-yellow {background-color: var(--downtown-yellow);}
.bg-downtown-green {background-color: var(--downtown-green);}
.bg-downtown-orange {background-color: var(--downtown-orange);}
.bg-downtown-pink {background-color: var(--downtown-pink);}
.bg-downtown-teal {background-color: var(--downtown-teal);}

/* Other colors */
.red, .text-red {color: #DB0000;}
.white {color: #fff;}
.blue {color: var(--blue);}
.black {color: #000;}

a {color: var(--blue); font-weight: 500;}
a:hover {color: var(--blue);}

/*///////////////////////////////////////
//  Misc Parts                         //
///////////////////////////////////////*/

.sectionBar-cityBlue {background-color: var(--city-blue); color: #fff; padding: 20px; margin: 0 0 20px 0;}
.sectionBar-cityLightGreen {background-color: var(--light-green); color: #fff; padding: 20px; margin: 0 0 20px 0;}
.sectionBar-cityDarkGreen {background-color: var(--parks-green); color: #fff; padding: 20px; margin: 0 0 20px 0;}

/*/// Buttons ///*/
.btn-primary:hover {background-color: var(--blue);}
.btn-secondary {background-color: var(--light-green); border: 1px solid; border-color: var(--green); color: #000 !important;}
.btn-secondary:hover {background-color: var(--blue); border: 1px solid; border-color: var(--green); color: #000 !important;}

.btn-city-light-green {background-color: var(--light-green); border: 1px solid; border-color: var(--green); color: #000;}
.btn-city-light-green:hover {background-color: var(--blue); border: 1px solid; border-color: var(--blue); color: #000;}

.btn-city-blue {background-color: var(--blue); border: 1px solid; border-color: var(--blue); color: #000;}
.btn-city-blue:hover {background-color: var(--light-green); border: 1px solid; border-color: var(--light-green); color: #000;}

.btn-city-yellow {background-color: var(--yellow); border: 1px solid; border-color: var(--yellow); color: #000;}
.btn-city-yellow:hover {background-color: var(--light-green); border: 1px solid; border-color: var(--light-green); color: #000;}

.btn-pba-pink {background-color: var(--pba-pink); color: #000;}
.btn-pba-pink:hover {box-shadow: 0px 0px 10px 0px rgba(var(--pba-pink-rgba),0.5), inset 0px 0px 0px 3px rgba(var(--pba-pink-rgba),1); color: #000;}

.btn-pba-blue {background-color: var(--blue); color: #fff;}
.btn-pba-blue:hover {box-shadow: 0px 0px 10px 0px rgba(var(--pba-blue-rgba),0.5), inset 0px 0px 0px 3px rgba(var(--pba-blue-rgba),1); color: #fff;}

.btn-pba-orange {background-color: var(--pba-orange); color: #000;}
.btn-pba-orange:hover {box-shadow: 0px 0px 10px 0px rgba(var(--pba-orange-rgba),0.5), inset 0px 0px 0px 3px rgba(var(--pba-orange-rgba),1); color: #000;}

.btn-pba-green {background-color: var(--pba-green); color: #000;}
.btn-pba-green:hover {box-shadow: 0px 0px 10px 0px rgba(var(--pba-pink-green),0.5), inset 0px 0px 0px 3px rgba(var(--pba-pink-green),1); color: #0900;}

.btn-cra-blue {background-color: var(--cra-blue); color: #000;}
.btn-cra-blue:hover {background-color: var(--cra-green); border:1px solid; border-color: var(--cra-blue); color: #000;}

.btn-parks-green {background-color: var(--parks-green); color: #fff;}
.btn-parks-green:hover {background-color: var(--parks-green); border:1px solid; border-color: var(--parks-green); color: #fff;}

.button-bg {padding: 15px 50px; text-align: center;}
.button-bg.green-bg {background-color: var(--green);}
.button-bg.blue-bg {background-color: var(--blue);}

/*///////////////////////////////////////
//  Matrix
//////////////////////////////////////*/

.contact-box {width: 100%;}
.contact-box img {width: 100%;}
.contact-info-container {text-align: center; padding-bottom: 10px; border: 1px solid var(--blue);}
.contact-info-container h4 {font-size: 16px; font-weight: bold; text-transform: uppercase; margin-top: 15px;}
.contact-info-container h5 {font-size: 14px; height: 50px; text-align: center;}
.contact-info-container a {height: 50px; display: block;}

/*///////////////////////////////////////
//  Utility Classes                    //
///////////////////////////////////////*/

.callout {padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #e9ecef; border-left-width: .25rem; border-radius: .25rem}
.callout-info {border-left-color: var(--city-blue);}
.callout-warning {border-left-color: var(--yellow)}
.callout-danger {border-left-color: #f00;}

.br-desktop {display: block;}
.br-mobile {display: none;}

@media (max-width: 768px)
{
    .br-desktop {display: none;}
    .br-mobile {display: block;}
}

/*///////////////////////////////////////
//  Cookie Consent Accessibility Fixes //
///////////////////////////////////////*/

.cc-link { opacity: 1 !important; color: #fff;}
.cc-btn.cc-dismiss { background-color: #1a5c6e !important; }

/*///////////////////////////////////////
//  Collage Gallery + Lightbox         //
///////////////////////////////////////*/

.pb-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    grid-auto-flow: row dense;
    gap: 8px;
}

.pb-gallery__item {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    display: block;
}

/* Collage pattern: wide items every 5th (1,6,11…) span 2 cols, all rows stay 1 high (max ~220px) */
.pb-gallery__item:nth-child(5n+1) { grid-column: span 2; }
.pb-gallery__item:nth-child(5n+3) { grid-column: span 2; }

.pb-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.pb-gallery__item:hover img,
.pb-gallery__item:focus img { transform: scale(1.05); }

.pb-gallery__item:focus-visible {
    outline: 3px solid #fdb81e;
    outline-offset: 2px;
}

/* ── Lightbox ── */

.pb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pb-lightbox[hidden] { display: none; }

.pb-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.pb-lightbox__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 64px 88px;
    box-sizing: border-box;
}

.pb-lightbox__img {
    max-width: 100%;
    max-height: calc(100vh - 128px);
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

.pb-lightbox__close,
.pb-lightbox__prev,
.pb-lightbox__next {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid transparent;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    line-height: 1;
}

.pb-lightbox__close:hover,
.pb-lightbox__prev:hover,
.pb-lightbox__next:hover { background: rgba(255, 255, 255, 0.3); }

.pb-lightbox__close:focus-visible,
.pb-lightbox__prev:focus-visible,
.pb-lightbox__next:focus-visible { outline: 2px solid #fdb81e; outline-offset: 2px; }

.pb-lightbox__close { top: 16px; right: 16px; }
.pb-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.pb-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }

.pb-lightbox__caption {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    text-align: center;
    margin: 0;
    max-width: 80%;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
    .pb-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }
    .pb-gallery__item:nth-child(5n+1) { grid-column: span 2; }
    .pb-gallery__item:nth-child(5n+3) { grid-column: span 2; }
    .pb-lightbox__content { padding: 60px 56px; }
    .pb-lightbox__prev { left: 8px; }
    .pb-lightbox__next { right: 8px; }
}