/*
Theme Name: Parties in the USA
Theme URI: https://bergenparties.com
Author: Simple Rabbit LLC
Author URI: https://simplerabbit.studio
Description: A custom directory theme for kids birthday party venues in Bergen County, NJ.
Version: 2.5.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bergen-parties
*/


/* ==========================================================================
   CUSTOM FONTS — Eighties Comeback (display headlines)
   ========================================================================== */

@font-face{font-family:'Eighties Comeback';src:url('assets/fonts/EightiesComeback-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Eighties Comeback';src:url('assets/fonts/EightiesComeback-ExtraBold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Eighties Comeback';src:url('assets/fonts/EightiesComeback-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Eighties Comeback';src:url('assets/fonts/EightiesComeback-BlackItalic.otf') format('opentype');font-weight:900;font-style:italic;font-display:swap}


/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

:root {
    --accent: #EC1E8C;
    --teal: #8C9EFF;
    --purple: #787094;
    --coral: #F06038;
    --yellow: #D6F74C;
    --blue: #8C9EFF;
    --apricot: #FCD9BE;
    --chartreuse: #D6F74C;
    --vista: #8C9EFF;
    --tomato: #F06038;
    --pink: #EC1E8C;
    --ink: #1C1B29;
    --cream: #FBF6EE;
    --text: #1C1B29;
    --color-text: #1C1B29;
    --color-text-secondary: #4a4a55;
    --color-accent: #EC1E8C;
    --color-bg: #fff;
    --color-surface: #FBF6EE;
    --color-border: #1C1B29;
    --color-border-medium: #1C1B29;
    --max-width: 1280px;
    --max-width-wide: 1600px;
    --radius: 14px;
    --radius-lg: 18px;

    /* Shadow scale — hard offset = interactive/hero, soft = static.
       --sh        resting state of buttons & clickable cards
       --sh-hover  their hover/active-emphasis state
       --sh-hero   one focal element per page (hero image, big CTA, pricing card)
       --sh-soft   quiet lift for static containers (stats, inputs, form sections) */
    --sh: 4px 4px 0 #000;
    --sh-hover: 6px 6px 0 #000;
    --sh-hero: 8px 8px 0 #000;
    --sh-soft: 0 2px 6px rgba(0,0,0,0.08);

    --cat-sports: #F06038;
    --cat-arts: #EC1E8C;
    --cat-fun: #D6F74C;
    --cat-outdoor: #8C9EFF;
    --cat-unique: #FCD9BE;
    --cat-mobile: #BFE3C9;
}

/* Category color themes */
.cat-sports   { --cat-color: var(--cat-sports); }
.cat-arts     { --cat-color: var(--cat-arts); }
.cat-fun      { --cat-color: var(--cat-fun); }
.cat-outdoor  { --cat-color: var(--cat-outdoor); }
.cat-unique   { --cat-color: var(--cat-unique); }
.cat-mobile   { --cat-color: var(--cat-mobile); }

body {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
    color: #1C1B29;
    background: #FBF6EE;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: #1C1B29;
    text-decoration: none;
}

a:hover {
    color: var(--accent);
}

p, li, span, div { color: #1C1B29; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Eighties Comeback', 'Fraunces', serif;
    font-weight: 700;
    letter-spacing: 0;
    color: #1C1B29;
    line-height: 1.12;
}

h1 { font-size: 56px; font-weight: 900; letter-spacing: 0; }
h2 { font-size: 36px; font-weight: 800; letter-spacing: 0; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

@media (max-width: 768px) {
    body { font-size: 17px; }
    h1 { font-size: 36px; letter-spacing: 0.5px; }
    h2 { font-size: 28px; letter-spacing: 0.5px; }
    h3 { font-size: 20px; }
}

ul, ol { list-style: none; }


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.bp-wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.bp-wrap-wide {
    max-width: var(--max-width-wide);
    margin: 0 auto;
    padding: 0 24px;
}


/* ==========================================================================
   BUTTONS — Mod / Brutalist
   ========================================================================== */

.bp-btn {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-size: 13px;
    padding: 14px 26px;
    background: #fff;
    color: #000 !important;
    border: 2px solid #000;
    border-radius: var(--radius);
    box-shadow: var(--sh);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.bp-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sh-hover);
    color: #000 !important;
    text-decoration: none;
}

.bp-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #000;
}

.bp-btn--primary,
.bp-btn--secondary,
.bp-btn--cta {
    background: #fff;
    color: #000 !important;
    border: 2px solid #000;
}

.bp-btn--small {
    padding: 10px 18px;
    font-size: 12px;
    box-shadow: var(--sh);
}

.bp-btn--large {
    padding: 18px 34px;
    font-size: 14px;
    box-shadow: var(--sh-hover);
}
.bp-btn--large:hover { box-shadow: var(--sh-hero); }


/* ==========================================================================
   HEADER / NAV
   ========================================================================== */

.site-header {
    background: var(--accent);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: none;
}

.site-header .bp-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo-img {
    height: 63px;
    width: auto;
    display: block;
}

.site-logo-img--footer {
    height: 50px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-nav a {
    color: #fff !important;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}

.site-nav a:hover {
    color: #fff !important;
    opacity: 0.85;
}

.site-nav a.nav-cta,
.site-nav .bp-btn--cta {
    background: #fff;
    color: #000 !important;
    padding: 10px 18px;
    border: 2px solid #000;
    border-radius: var(--radius);
    box-shadow: var(--sh);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    font-weight: 700;
}

.site-nav a.nav-cta:hover,
.site-nav .bp-btn--cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sh-hover);
    color: #000 !important;
    opacity: 1;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    padding: 4px 8px;
}

@media (max-width: 900px) {
    .nav-toggle { display: block; }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--accent);
        flex-direction: column;
        gap: 0;
        padding: 12px 24px 20px;
        border-top: 2px solid #000;
        box-shadow: 0 6px 0 #000;
        z-index: 100;
    }

    .site-nav.is-open { display: flex; }

    .site-nav a {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        text-align: left;
    }

    .site-nav a:last-child { border-bottom: none; }

    .site-nav a.nav-cta { margin-top: 10px; text-align: center; }
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    background: linear-gradient(135deg, #2C2C2A 0%, #3d2d3a 50%, #2C2C2A 100%);
    color: #fff;
    padding: 50px 0 30px;
    margin-top: 0;
}

.site-footer * { color: #fff !important; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 36px;
}

.footer-brand .site-logo {
    display: inline-block;
    margin-bottom: 14px;
}

.footer-tagline {
    font-size: 14px;
    opacity: 0.85;
    line-height: 1.6;
    max-width: 320px;
}

.footer-heading {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px;
    margin-bottom: 14px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links a {
    font-size: 14px;
    opacity: 0.85;
    text-decoration: none;
}

.footer-links a:hover { opacity: 1; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    opacity: 0.85;
}

.footer-credit a { text-decoration: underline; }

.footer-instagram,
.footer-facebook {
    display: inline-block;
    margin-top: 14px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #fff !important;
    text-decoration: none;
}

.footer-facebook { margin-left: 18px; }

.footer-instagram:hover,
.footer-facebook:hover { opacity: 0.85; }

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px 20px;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}
@media (max-width: 420px) {
    /* Stay 2 columns on small phones: brand spans the top, then
       Venues + Resources stack on the left, Suppliers on the right. */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}


/* ==========================================================================
   HOMEPAGE — HERO
   ========================================================================== */

.bp-hero {
    position: relative;
    min-height: 780px;
    display: flex;
    align-items: center;
    text-align: center;
    background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.45)),
                      url('assets/images/hero-image.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    padding: 130px 0;
}

.bp-hero .bp-wrap { width: 100%; }

.bp-hero-title {
    color: #fff;
    font-size: 64px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.1;
    margin-bottom: 18px;
    text-shadow: 5px 5px 0 #000;
}

.bp-hero-title .hero-accent { color: var(--teal); }

.bp-hero-subtitle {
    color: #fff;
    font-size: 20px;
    margin-bottom: 36px;
    font-weight: 400;
}

.bp-hero-actions {
    margin-bottom: 22px;
}

.bp-btn--hero {
    font-size: 19px;
    padding: 18px 40px;
}

.bp-hero-actions-note {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px;
    opacity: 0.92;
}

.bp-hero-search {
    max-width: 600px;
    margin: 0 auto 28px;
}

.bp-hero-search form {
    display: flex;
    gap: 8px;
}

.bp-hero-search .bp-input {
    flex: 1;
    padding: 16px 20px;
    font-size: 15px;
    border: 2px solid #000;
    border-radius: var(--radius);
    background: #fff;
    color: #000;
    font-family: 'DM Sans', sans-serif;
    box-shadow: var(--sh-soft);
}

.bp-hero-search .bp-input::placeholder { color: #777; }
.bp-hero-search .bp-input:focus { outline: none; box-shadow: var(--sh); }

.bp-hero-search .bp-btn { padding: 16px 26px; }

@media (max-width: 768px) {
    .bp-hero {
        min-height: 560px;
        padding: 80px 0;
        background-attachment: scroll;
    }
    .bp-hero-title { font-size: 38px; letter-spacing: 0.8px; text-shadow: 3px 3px 0 #000; }
    .bp-hero-subtitle { font-size: 17px; padding: 0 12px; }
    .bp-btn--hero { display: block; width: 100%; }
    .bp-hero-search form { flex-direction: column; }
    .bp-hero-search .bp-input { width: 100%; }
}


/* ==========================================================================
   STATS BAR
   ========================================================================== */

.bp-stats-bar {
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 32px 0;
}

.bp-stats-bar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.bp-stat-item { padding: 0 20px; }

.bp-stat-number {
    font-family: 'DM Sans', sans-serif;
    font-weight: 800;
    font-size: 48px;
    letter-spacing: 1px;
    color: var(--accent);
    display: block;
    line-height: 1;
    margin-bottom: 6px;
}

.bp-stat-text-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    .bp-stats-bar-grid { grid-template-columns: 1fr; gap: 18px; }
    .bp-stat-number { font-size: 38px; }
}


/* ==========================================================================
   BROWSE TABS + CATEGORY + AGE
   ========================================================================== */

.bp-section-home {
    padding: 90px 0;
}

.bp-section-header {
    text-align: center;
    margin-bottom: 36px;
}

.bp-section-header h2 { margin-bottom: 8px; }
.bp-section-header p { font-size: 18px; }

.bp-category-section {
    background: linear-gradient(135deg, rgba(185,48,122,0.06) 0%, rgba(100,214,195,0.08) 50%, rgba(241,193,101,0.06) 100%);
    padding: 90px 0;
}

.bp-category-section .bp-wrap,
.bp-category-section .bp-wrap-wide {
    max-width: var(--max-width-wide);
}

.bp-browse-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 40px;
    flex-wrap: wrap;
}

.bp-browse-tab {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 12px 26px;
    background: #fff;
    color: #000 !important;
    border: 2px solid #000;
    border-radius: var(--radius);
    box-shadow: var(--sh);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s;
}

.bp-browse-tab:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sh-hover);
}

.bp-browse-tab.is-active {
    background: #000;
    color: #fff !important;
}

.bp-browse-panel { display: none; }
.bp-browse-panel.is-active { display: block; }

.bp-category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

@media (max-width: 1024px) {
    .bp-category-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 500px) {
    .bp-category-grid { grid-template-columns: 1fr 1fr; }
}

.bp-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 24px 10px;
    background: #fff;
    border: 2px solid #000;
    border-top: 8px solid var(--cat-color, #000);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: #000 !important;
    box-shadow: var(--sh);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.bp-category-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sh-hover);
    text-decoration: none;
    color: #000 !important;
}

.bp-category-icon-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}

.bp-category-name {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* Age grid */
.bp-age-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

@media (max-width: 768px) {
    .bp-age-grid { grid-template-columns: 1fr 1fr; }
}

.bp-age-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 18px;
    background: #fff;
    border: 2px solid #000;
    border-top: 8px solid var(--cat-color, var(--accent));
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: #000 !important;
    box-shadow: var(--sh);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.bp-age-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sh-hover);
    text-decoration: none;
}

.bp-age-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 8px;
}

.bp-age-range {
    font-family: 'DM Sans', sans-serif;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.bp-age-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.85;
}


/* ==========================================================================
   ABOUT / SEO 2-COL SECTION
   ========================================================================== */

.bp-about-section {
    padding: 110px 0;
    background: #fff;
}

.bp-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.bp-about-image {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    border: 2px solid #000;
    box-shadow: var(--sh-hero);
    object-fit: cover;
    display: block;
}

.bp-about-text h2 {
    font-size: 32px;
    margin-bottom: 18px;
}

.bp-about-text p {
    font-size: 19px;
    line-height: 1.7;
    margin-bottom: 14px;
}

.bp-about-text p strong { font-weight: 700; }
.bp-about-text p em { font-style: italic; }

.bp-underline-emphasis {
    position: relative;
    display: inline;
    white-space: normal;
}

.bp-underline-emphasis::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: -14px;
    height: 18px;
    background: url("assets/images/blue-line.png") center/100% 100% no-repeat;
}

@media (max-width: 768px) {
    .bp-about-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Mobile: the full-phrase underline bar wraps badly across lines, so draw the
   teal line under only "birthday parties" instead. */
@media (max-width: 768px) {
    .bp-underline-emphasis::after { display: none; }
    .bp-underline-mobile {
        position: relative;
        display: inline;
    }
    .bp-underline-mobile::after {
        content: "";
        position: absolute;
        left: -4px;
        right: -4px;
        bottom: -10px;
        height: 14px;
        background: url("assets/images/blue-line.png") center/100% 100% no-repeat;
    }
}

@media (max-width: 600px) {
    .bp-underline-emphasis { white-space: normal; }
}


/* ==========================================================================
   FEATURED VENUES SECTION
   ========================================================================== */

.bp-featured-section {
    padding: 100px 0;
    border-top: 6px dashed #000;
}

.bp-featured-grid,
.bp-featured-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
}

@media (max-width: 900px) {
    .bp-featured-grid,
    .bp-featured-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .bp-featured-grid,
    .bp-featured-row { grid-template-columns: 1fr; }
}


/* ==========================================================================
   RECENTLY ADDED
   ========================================================================== */

.bp-recent-section {
    padding: 100px 0;
    background: #faf9f7;
}

.bp-recent-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 36px;
}

@media (max-width: 900px) {
    .bp-recent-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
    .bp-recent-list { grid-template-columns: 1fr; }
}

.bp-recent-card {
    display: block;
    background: #fff;
    border: 2px solid #000;
    border-top: 8px solid var(--cat-color, #000);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--sh);
    text-decoration: none;
    color: #000 !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.bp-recent-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sh-hover);
    text-decoration: none;
}

.bp-recent-card-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
    margin-bottom: 12px;
}

.bp-recent-card-category {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cat-color, var(--accent));
    margin-bottom: 10px;
}

.bp-recent-card-content h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
}

.bp-recent-card .bp-card-meta {
    font-size: 16px;
    color: #000;
    margin: 0 0 14px;
}

.bp-recent-card .bp-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 16px;
}

.bp-recent-card .bp-card-price {
    color: var(--accent);
    font-weight: 700;
}


/* ==========================================================================
   VIEW ALL LINK
   ========================================================================== */

.bp-view-all,
.bp-view-all-link {
    display: block;
    text-align: center;
    margin-top: 30px;
    padding: 20px 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 13px;
}

.bp-view-all a,
.bp-view-all-link {
    color: var(--accent) !important;
}


/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.bp-newsletter-section {
    position: relative;
    min-height: 620px;
    padding: 60px 0 140px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);
    color: #fff;
    border-top: 6px dashed #000;
}
.bp-newsletter-section > .bp-wrap { width: 100%; }

.bp-newsletter-section .wave-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 90px;
    display: block;
}

.bp-newsletter-section .wave-divider path { fill: var(--teal); }

.bp-newsletter-grid {
    display: grid;
    grid-template-columns: 380px auto;
    gap: 40px;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

.bp-newsletter-image {
    width: 380px;
    height: 380px;
    display: block;
    object-fit: contain;
}

.bp-newsletter-text { text-align: left; }

.bp-newsletter-section h2 {
    color: #fff;
    margin-bottom: 12px;
    font-size: 36px;
}

.bp-newsletter-section p {
    color: #fff;
    font-size: 17px;
    margin-bottom: 28px;
    opacity: 0.95;
    max-width: 540px;
}

.bp-newsletter-form {
    max-width: 520px;
    display: flex;
    gap: 8px;
}

.bp-newsletter-form input {
    flex: 1;
    padding: 16px 20px;
    font-size: 15px;
    border: 2px solid #000;
    border-radius: var(--radius);
    font-family: 'DM Sans', sans-serif;
    color: #000;
    box-shadow: var(--sh-soft);
}

.bp-newsletter-form input:focus { outline: none; box-shadow: var(--sh); }

.bp-newsletter-fineprint {
    margin-top: 14px;
    font-size: 13px;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .bp-newsletter-grid { grid-template-columns: 1fr; text-align: center; gap: 10px; }
    .bp-newsletter-image { max-width: 180px; height: auto; margin: 0 auto; }
    .bp-newsletter-text { text-align: center; }
    .bp-newsletter-section p { margin-left: auto; margin-right: auto; }
    .bp-newsletter-form { margin: 0 auto; }
}


/* ==========================================================================
   OWNER CTA
   ========================================================================== */

.bp-owner-cta {
    padding: 36px 0;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, var(--teal) 0%, var(--yellow) 100%);
    text-align: left;
}
.bp-owner-cta > .bp-wrap { width: 100%; }

.bp-owner-grid {
    display: grid;
    grid-template-columns: auto 420px;
    gap: 20px;
    align-items: center;
    justify-content: center;
    max-width: 1080px;
    margin: 0 auto;
}

.bp-owner-text { text-align: left; }

.bp-owner-cta h2 {
    font-size: 32px;
    margin-bottom: 12px;
}

.bp-owner-cta p {
    font-size: 17px;
    margin-bottom: 26px;
    max-width: 460px;
}

.bp-owner-image {
    width: 420px;
    height: 420px;
    display: block;
    object-fit: contain;
}

@media (max-width: 768px) {
    .bp-owner-cta {
        min-height: 0;
        padding: 28px 0 !important;
    }
    .bp-owner-grid { grid-template-columns: 1fr; text-align: center; gap: 8px; }
    .bp-owner-image { max-width: 180px; height: auto; margin: 0 auto; order: -1; }
    .bp-owner-text { text-align: center; }
    .bp-owner-cta p { margin-left: auto; margin-right: auto; }
}


/* ==========================================================================
   BLOG (homepage section + listing + single)
   ========================================================================== */

.bp-blog-section {
    padding: 100px 0;
    border-top: 6px dashed #000;
}

.bp-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
}

@media (max-width: 900px) {
    .bp-blog-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .bp-blog-grid { grid-template-columns: 1fr; }
}

.bp-blog-card {
    background: #fff;
    border: 2px solid #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: #000 !important;
    box-shadow: var(--sh);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    display: block;
}

.bp-blog-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sh-hover);
    text-decoration: none;
}

.bp-blog-card-image {
    height: 180px;
    background: #faf9f7;
    overflow: hidden;
    border-bottom: 2px solid #000;
}

.bp-blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bp-blog-card-content { padding: 18px; }

.bp-blog-card-date {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.bp-blog-card-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 8px;
    line-height: 1.3;
}

.bp-blog-card-excerpt {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 14px;
}

.bp-blog-card-readmore {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent) !important;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 2px;
}

.bp-blog-cta-row {
    text-align: center;
    margin-top: 50px;
}


/* ==========================================================================
   MOBILE: tighten section padding
   ========================================================================== */

@media (max-width: 768px) {
    .bp-about-section,
    .bp-featured-section,
    .bp-recent-section,
    .bp-newsletter-section,
    .bp-blog-section,
    .bp-category-section,
    .bp-section-home {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    .bp-newsletter-section { padding-bottom: 100px !important; }
}


/* ==========================================================================
   BLOG LISTING (home.php) + SINGLE POST
   ========================================================================== */

.bp-blog-page { padding: 60px 0 80px; }

.bp-blog-header {
    text-align: center;
    margin-bottom: 40px;
}

.bp-blog-header h1 {
    font-size: 44px;
    margin: 0 0 8px;
}

.bp-blog-header p {
    font-size: 18px;
    margin: 0;
}

.bp-blog-listing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.bp-blog-list-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: #000 !important;
    box-shadow: var(--sh);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.bp-blog-list-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sh-hover);
    text-decoration: none;
}

.bp-blog-list-image {
    height: 220px;
    background: #faf9f7;
    overflow: hidden;
    border-bottom: 2px solid #000;
}

.bp-blog-list-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bp-blog-list-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #000;
}

.bp-blog-list-content {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bp-blog-list-date {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.bp-blog-list-cat {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.bp-blog-list-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.3;
}

.bp-blog-list-excerpt {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 16px;
    flex: 1;
}

.bp-blog-list-read {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    align-self: flex-start;
    padding-bottom: 2px;
}

@media (max-width: 768px) {
    .bp-blog-listing { grid-template-columns: 1fr; }
}


/* Single blog post */
.bp-single-post { padding: 0 0 80px; }

.bp-post-breadcrumb {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 24px 0 20px;
}

.bp-post-breadcrumb a { color: var(--accent); }

.bp-post-header { margin-bottom: 28px; }

.bp-post-cat {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}

.bp-post-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.5px;
    margin: 0 0 14px;
}

.bp-post-meta {
    display: flex;
    gap: 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bp-post-image {
    margin-bottom: 32px;
    border: 2px solid #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--sh-hover);
}

.bp-post-image img {
    width: 100%;
    height: auto;
    display: block;
}

.bp-post-content {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: #000;
    margin-bottom: 40px;
}

.bp-post-content h2 {
    font-size: 30px;
    margin: 40px 0 14px;
}

.bp-post-content h3 {
    font-size: 24px;
    margin: 30px 0 12px;
}

.bp-post-content p { margin: 0 0 20px; }

.bp-post-content ul,
.bp-post-content ol {
    margin: 0 0 20px;
    padding-left: 26px;
    list-style: disc;
}

.bp-post-content ol { list-style: decimal; }

.bp-post-content li { margin-bottom: 8px; }

.bp-post-content blockquote {
    border-left: 4px solid #000;
    padding: 16px 20px;
    margin: 28px 0;
    font-style: italic;
    background: #faf9f7;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.bp-post-content a {
    color: var(--accent);
    font-weight: 600;
    border-bottom: 2px solid var(--accent);
}

.bp-post-content img {
    border: 2px solid #000;
    border-radius: var(--radius);
    margin: 24px 0;
}

.bp-post-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.bp-post-tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 14px;
    border: 2px solid #000;
    border-radius: 20px;
    color: #000;
    text-decoration: none;
}

.bp-post-tag:hover {
    background: #000;
    color: #fff;
}

.bp-post-cta {
    background: linear-gradient(135deg, var(--teal) 0%, var(--yellow) 100%);
    border: 2px solid #000;
    border-radius: var(--radius-lg);
    box-shadow: var(--sh-hover);
    padding: 32px;
    text-align: center;
    margin-bottom: 40px;
}

.bp-post-cta h3 {
    font-size: 24px;
    margin: 0 0 8px;
}

.bp-post-cta p {
    font-size: 16px;
    margin: 0 0 20px;
}

.bp-post-nav {
    display: flex;
    gap: 16px;
    border-top: 2px solid #000;
    padding-top: 28px;
}

.bp-post-nav-link {
    flex: 1;
    padding: 18px 22px;
    border: 2px solid #000;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--sh);
    text-decoration: none;
    color: #000;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.bp-post-nav-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sh-hover);
}

.bp-post-nav-next { text-align: right; }

.bp-post-nav-label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.bp-post-nav-title {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .bp-post-title { font-size: 30px; }
    .bp-post-nav { flex-direction: column; }
}


/* ==========================================================================
   CONTACT / FORM PAGES
   ========================================================================== */

.bp-contact-page { padding: 60px 0 80px; }

.bp-contact-header {
    text-align: center;
    margin-bottom: 40px;
}

.bp-contact-header h1 {
    font-size: 40px;
    margin: 0 0 10px;
}

.bp-contact-header p {
    font-size: 17px;
    margin: 0;
}

.bp-contact-form {
    max-width: 640px;
    margin: 0 auto;
}

.bp-contact-form .bp-form-field { margin-bottom: 20px; }

.bp-contact-form label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.bp-contact-form .bp-form-submit {
    text-align: center;
    padding-top: 8px;
}

.bp-contact-page .bp-input,
.bp-contact-page .bp-select,
.bp-contact-page .bp-textarea {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    font-family: 'DM Sans', sans-serif;
    border: 2px solid #000;
    border-radius: var(--radius);
    background: #fff;
    color: #000;
    box-shadow: var(--sh-soft);
}

.bp-contact-page .bp-input:focus,
.bp-contact-page .bp-select:focus,
.bp-contact-page .bp-textarea:focus {
    outline: none;
    box-shadow: var(--sh);
}


/* ==========================================================================
   LEGAL PAGES (Privacy, Terms)
   ========================================================================== */

.bp-legal-page { padding: 60px 0 80px; }

.bp-legal-header {
    margin-bottom: 40px;
    border-bottom: 6px dashed #000;
    padding-bottom: 20px;
}

.bp-legal-header h1 {
    font-size: 44px;
    margin: 0 0 10px;
}

.bp-legal-updated {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
}

.bp-legal-content h2 {
    font-size: 26px;
    margin: 36px 0 14px;
    color: var(--accent);
}

.bp-legal-content p,
.bp-legal-content li {
    font-size: 17px;
    line-height: 1.75;
    color: #000;
}

.bp-legal-content ul {
    padding-left: 24px;
    margin: 14px 0;
    list-style: disc;
}

.bp-legal-content li { margin-bottom: 8px; }

.bp-legal-content a {
    color: var(--accent);
    font-weight: 600;
    border-bottom: 2px solid var(--accent);
}


/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

.bp-about-page { padding: 60px 0 80px; }
.bp-about-page h1 {
    font-family: 'DM Sans', sans-serif;
    font-size: 44px;
    font-weight: 800;
    margin: 0 0 28px;
}
.bp-about-page p {
    font-size: 18px;
    line-height: 1.75;
    color: #000;
}
.bp-about-page a {
    color: var(--accent);
    font-weight: 600;
    border-bottom: 2px solid var(--accent);
}