/* ===========================================================================
   PK Crew — brand palette
   Sampled from the logo. Change a value here and it updates everywhere.
   =========================================================================== */
:root {
    --pk-olive:  #3C543C;  /* logo background — primary brand */
    --pk-sage:   #8FA286;  /* logo mark — secondary, borders, muted text */
    --pk-deep:   #122813;  /* CREW wordmark — headings and body text */
    --pk-rust:   #C1440E;  /* CTA accent — 5.12:1 on white, passes WCAG AA */
    --pk-rust-d: #A03A0C;  /* CTA hover */
    --pk-bone:   #F2EFE7;  /* light surface */
}

/* ===========================================================================
   PK Crew — custom styles
   Loaded by functions.php. Edit this file, not style.css.
   =========================================================================== */

/* =========================================================================
   BRIZY — FORM UPLOAD BUTTON
   ========================================================================= */
.brz .brz-input__upload .brz-button {
    background-color: var(--pk-rust) !important;
    border: 2px solid var(--pk-rust) !important;
    color: white !important;
    letter-spacing: 1.5px;
    font-size: 12px;
    text-transform: uppercase !important;
    font-family: 'Oswald' !important;
    font-weight: inherit;
    line-height: 1;
    padding: 1em;
}


/* =========================================================================
   BRIZY — TYPOGRAPHY
   ========================================================================= */
.brz .brz-rich-text > p,
.brz .brz-rich-text span {
    text-transform: inherit;
}

.brz-tp-heading3 {
    text-transform: uppercase !important;
}

.brz span.brz-text__editor {
    text-transform: uppercase;
}

.brz .brz-rich-text > div > h2 {
    color: gray;
}


/* =========================================================================
   BRIZY — SUBMIT BUTTONS
   ========================================================================= */
.brz .brz-btn.brz-btn-submit {
    background-color: transparent !important;
    border: 2px solid var(--pk-olive) !important;
    color: var(--pk-olive) !important;
    letter-spacing: 1.5px;
    font-family: 'Oswald';
}

.brz .brz-btn.brz-btn-submit:hover {
    border: 2px solid var(--pk-olive);
    color: #fff !important;
    background-color: var(--pk-olive) !important;
}


/* =========================================================================
   BRIZY — BACKGROUNDS
   ========================================================================= */
.brz-bg-image.brz-bg-image-parallax {
    filter: brightness(50%);
}

.black-back {
    background-color: var(--pk-olive);
    font-family: 'Lato' !important;  
    color: white !important;
}


/* =========================================================================
   FANCYBOX LIGHTBOX
   ========================================================================= */
.fbx-close-caption {
    visibility: hidden;
}

.fbx-light .fbx-inner {
    border: none;
}

.fbx-light .fbx-close {
    background: none;
    border: none;
}

.fbx-rounded .fbx-close {
    top: 5px;
    right: 5px;
}

/* was: @media only screen and (min-device-width:320px) and (max-device-width:1024px)
   min-device-width / max-device-width are deprecated and no longer supported
   in current Chrome or Firefox, so that block had stopped applying. */
@media only screen and (max-width: 1024px) {
    .fbx-rounded .fbx-close {
        color: white !important;
    }
    .fbx-icon {
        width: 25px;
        height: 25px;
    }
}


/* =========================================================================
   TWENTYTWENTY — BEFORE/AFTER SLIDER
   ========================================================================= */
.twentytwenty-before-label::before,
.twentytwenty-after-label::before {
    font-family: 'Montserrat';
    bottom: 50%;
    padding: 0 20px;
    border-radius: 2px;
}

.twentytwenty-horizontal .twentytwenty-after-label::after {
    right: 10px;
}

.twentytwenty-horizontal .twentytwenty-before-label::before {
    left: 10px;
}

/* =========================================================================
   CTA BUTTON ROWS
   Paste the matching markup into a Brizy HTML element.
   Primary = rust (contrast against the green page). Secondary = olive.
   ========================================================================= */
.pk-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0;
}

.pk-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 28px;
    border-radius: 4px;
    border: 2px solid transparent;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}

/* Primary: solid rust. 5.12:1 with white text — passes WCAG AA. */
.pk-cta__primary,
.pk-cta__primary:visited {
    background-color: var(--pk-rust);
    border-color: var(--pk-rust);
    color: #fff;
}

.pk-cta__primary:hover,
.pk-cta__primary:focus {
    background-color: var(--pk-rust-d);
    border-color: var(--pk-rust-d);
    color: #fff;
}

/* Secondary: olive outline. 8.32:1 — passes WCAG AAA. */
.pk-cta__secondary,
.pk-cta__secondary:visited {
    background-color: transparent;
    border-color: var(--pk-olive);
    color: var(--pk-olive);
}

.pk-cta__secondary:hover,
.pk-cta__secondary:focus {
    background-color: var(--pk-olive);
    border-color: var(--pk-olive);
    color: #fff;
}

/* On olive or dark photo backgrounds, swap secondary to this */
.pk-cta__on-dark,
.pk-cta__on-dark:visited {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
}

.pk-cta__on-dark:hover,
.pk-cta__on-dark:focus {
    background-color: #fff;
    color: var(--pk-olive);
}

.pk-cta a:focus-visible {
    outline: 2px solid var(--pk-deep);
    outline-offset: 2px;
}

/* Full-width stacked buttons on phones — easier to hit, no cramped row */
@media (max-width: 600px) {
    .pk-cta {
        flex-direction: column;
        gap: 10px;
    }
    .pk-cta a {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pk-cta a {
        transition: none;
    }
}