/* ================================================================
   Black & White Template (Growth Tier) — Bold Monochrome
   Loaded ONLY when site.template == "blackwhite".
   Design language: stark black-on-white contrast, massive bold
   headings, purple/violet accent for section tags and highlights,
   abundant whitespace, clean sans-serif, purple footer.

   Inspired by modern creative agency aesthetics adapted for
   hospitality websites.

   Palette:
     White         #ffffff   (primary background)
     Off-white     #fafafa   (alt section bg)
     Near-black    #0a0a0a   (primary text, headings)
     Charcoal      #374151   (secondary text)
     Gray          #6b7280   (muted/caption text)
     Light Gray    #f3f4f6   (card bg, inputs)
     Border        #e5e7eb   (subtle borders)
     Violet        #7c3aed   (primary accent)
     Violet Dark   #6d28d9   (hover accent)
     Violet Deep   #4c1d95   (footer bg)
     Violet Light  rgba(124,58,237,0.08)  (tag bg, subtle tints)
     Violet Glow   rgba(124,58,237,0.15)  (hover glow)
   ================================================================ */


/* ===================================================== */
/* 1. CSS VARIABLES — Black & White Design System        */
/* ===================================================== */

.tpl-blackwhite {
    /* -- Clean white palette -- */
    --bw-bg:           #ffffff;
    --bw-bg-alt:       #fafafa;
    --bw-bg-card:      #f3f4f6;
    --bw-border:       #e5e7eb;
    --bw-border-light: rgba(0,0,0,0.06);

    /* -- Text -- */
    --bw-text:         #0a0a0a;
    --bw-text-secondary: #374151;
    --bw-text-muted:   #6b7280;

    /* -- Violet accent -- */
    --bw-accent:       var(--primary, #7c3aed);
    --bw-accent-dark:  var(--accent, #6d28d9);
    --bw-accent-deep:  #4c1d95;
    --bw-accent-light: rgba(124,58,237,0.08);
    --bw-accent-glow:  rgba(124,58,237,0.15);

    /* Base vars (--bg, --text, --font-*) set via TenantTheme on :root */
}


/* ===================================================== */
/* 2. TYPOGRAPHY — Bold, Clean, High-Contrast            */
/* ===================================================== */

.tpl-blackwhite {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.7;
    color: var(--bw-text);
    background: var(--bw-bg);
}

/* All headings — bold sans-serif, tight tracking */
.tpl-blackwhite h1,
.tpl-blackwhite h2,
.tpl-blackwhite h3,
.tpl-blackwhite h4,
.tpl-blackwhite h5,
.tpl-blackwhite h6 {
    font-family: var(--font-heading);
    color: var(--bw-text);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* Section headings — very large and bold */
.tpl-blackwhite .pub-section h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    margin-bottom: 16px;
}

/* Section subtitles */
.tpl-blackwhite .pub-section-subtitle {
    color: var(--bw-text-secondary);
    font-size: 1.05rem;
    font-weight: 400;
    max-width: 600px;
}

/* Section tags — purple dot + uppercase label */
.tpl-blackwhite .pub-section-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bw-text);
    background: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.tpl-blackwhite .pub-section-tag::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--bw-accent);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Links */
.tpl-blackwhite a {
    color: var(--bw-accent);
    transition: color 0.2s;
}
.tpl-blackwhite a:hover {
    color: var(--bw-accent-dark);
}


/* ===================================================== */
/* 3. SECTIONS — General                                 */
/* ===================================================== */

.tpl-blackwhite .pub-section {
    padding: 80px 0;
}

/* Alt bg */
.tpl-blackwhite .pub-section-alt {
    background: var(--bw-bg-alt);
}

/* Dark sections */
.tpl-blackwhite .pub-section-dark {
    background: var(--bw-text);
    color: rgba(255,255,255,0.9);
}
.tpl-blackwhite .pub-section-dark h2,
.tpl-blackwhite .pub-section-dark h3,
.tpl-blackwhite .pub-section-dark h4 {
    color: #fff;
}
.tpl-blackwhite .pub-section-dark .pub-section-tag {
    color: rgba(255,255,255,0.8);
}
.tpl-blackwhite .pub-section-dark .pub-section-tag::before {
    background: var(--bw-accent);
}
.tpl-blackwhite .pub-section-dark .pub-section-subtitle {
    color: rgba(255,255,255,0.6);
}

/* Accent sections — violet */
.tpl-blackwhite .pub-section-accent {
    background: var(--bw-accent-deep);
    color: #fff;
}
.tpl-blackwhite .pub-section-accent h2,
.tpl-blackwhite .pub-section-accent h3 {
    color: #fff;
}
.tpl-blackwhite .pub-section-accent .pub-section-tag::before {
    background: #fff;
}


/* ===================================================== */
/* 4. HERO — Clean Minimal Default, Full Editor Support  */
/* ===================================================== */

/* Hero section — no outer padding (base default) */
.tpl-blackwhite .pub-section-hero {
    padding: 0;
}

/* Minimal layout: restore container width so text aligns with content below.
   Non-minimal layouts use the base rule: max-width:none; padding:0 (full bleed). */
.tpl-blackwhite .pub-section-hero:has(.hero-minimal) .pub-container {
    max-width: 1100px;
    padding: 0 24px;
}

/* B&W hero — defaults to minimal aesthetic but all editor controls work.
   When user switches hero layout from minimal to full_bleed/contained/split,
   the base hero classes take over and everything works. */
.tpl-blackwhite .pub-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: var(--hero-align-items, center);
    justify-content: var(--hero-justify, center);
    text-align: var(--hero-text-align, center);
    padding: var(--hero-padding, 80px 24px);
    color: var(--bw-text);
}

/* Minimal layout — white bg instead of the base gradient (which uses --primary violet).
   Use background-color + background-image separately so inline background-image !important
   from the editor can still show through. */
.tpl-blackwhite .hero-minimal {
    background-color: var(--bw-bg) !important;
    background-image: none !important;
}

/* Non-minimal layouts — use base bg-color which the editor can override via inline style */
.tpl-blackwhite .pub-hero:not(.hero-minimal) {
    background-color: var(--bw-bg);
}

/* Overlay — let the base overlay system work (opacity controlled by editor) */
.tpl-blackwhite .pub-hero-overlay {
    background: var(--hero-overlay-gradient, var(--hero-overlay-color, #000));
}

/* Hero content — inherit base max-width (720px default) so alignment
   repositions the block, not the text inside it */
.tpl-blackwhite .pub-hero-content {
    position: relative;
    z-index: 4;
    padding: 0;
}

/* Large heading — bold statement, aligned with content below */
.tpl-blackwhite .pub-hero-content h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 5.5vw, 4.5rem);
    font-weight: 900;
    color: var(--hero-h1-color, var(--bw-text));
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0;
    padding-bottom: 0;
}

/* Subheadline — B&W styling (visible when user enters text) */
.tpl-blackwhite .pub-hero-content p {
    color: var(--hero-p-color, var(--bw-text-secondary));
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.7;
    margin-top: 16px;
}

/* Hero CTA buttons — B&W styling (visible when user enters CTA text) */
.tpl-blackwhite .pub-hero-content .pub-btn {
    background: var(--bw-text);
    color: #fff;
    border: 2px solid var(--bw-text);
}
.tpl-blackwhite .pub-hero-content .pub-btn:hover {
    background: var(--bw-accent);
    border-color: var(--bw-accent);
}

/* Hero badge — B&W styling (visible when user enters badge text) */
.tpl-blackwhite .pub-hero-badge {
    margin-bottom: 16px;
}


/* ===================================================== */
/* 5. BUTTONS                                            */
/* ===================================================== */

.tpl-blackwhite .pub-btn {
    background: var(--bw-text);
    color: #fff;
    border: 2px solid var(--bw-text);
    padding: 14px 32px;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.25s ease;
}
.tpl-blackwhite .pub-btn:hover {
    background: var(--bw-accent);
    border-color: var(--bw-accent);
    color: #fff;
}

/* Secondary / outline button */
.tpl-blackwhite .pub-btn-secondary,
.tpl-blackwhite .pub-btn.pub-btn-secondary {
    background: transparent;
    color: var(--bw-text);
    border: 2px solid var(--bw-border);
}
.tpl-blackwhite .pub-btn-secondary:hover {
    border-color: var(--bw-text);
    color: var(--bw-text);
}

/* CTA banner buttons */
.tpl-blackwhite .pub-section-dark .pub-btn {
    background: #fff;
    color: var(--bw-text);
    border-color: #fff;
}
.tpl-blackwhite .pub-section-dark .pub-btn:hover {
    background: var(--bw-accent);
    color: #fff;
    border-color: var(--bw-accent);
}


/* ===================================================== */
/* 6. CARDS — Room, Feature, Generic                     */
/* ===================================================== */

/* Room cards */
.tpl-blackwhite .pub-room-card {
    background: #fff;
    border: 1px solid var(--bw-border);
    overflow: hidden;
    transition: all 0.3s ease;
}
.tpl-blackwhite .pub-room-card:hover {
    border-color: var(--bw-text);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.tpl-blackwhite .pub-room-card img {
    border-radius: 0;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.tpl-blackwhite .pub-room-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bw-text);
}
.tpl-blackwhite .pub-room-card .pub-room-price {
    color: var(--bw-accent);
    font-weight: 700;
    font-size: 1.1rem;
}
.tpl-blackwhite .pub-room-card .pub-btn {
    font-size: 0.85rem;
    padding: 10px 24px;
}

/* Feature cards (use .pub-card class in the HTML) */
.tpl-blackwhite .pub-card {
    background: #fff;
    padding: 32px 24px;
    border: 1px solid var(--bw-border);
    text-align: left;
    transition: all 0.3s ease;
    overflow: hidden;
}
.tpl-blackwhite .pub-card:hover {
    border-color: var(--bw-accent);
    box-shadow: 0 4px 24px var(--bw-accent-glow);
}
.tpl-blackwhite .pub-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: var(--bw-text);
}
.tpl-blackwhite .pub-card-text {
    color: var(--bw-text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* Dark section cards — light text on dark bg */
.tpl-blackwhite .pub-section-dark .pub-card {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}
.tpl-blackwhite .pub-section-dark .pub-card:hover {
    border-color: var(--bw-accent);
    background: rgba(255,255,255,0.10);
}
.tpl-blackwhite .pub-section-dark .pub-card-title {
    color: #fff;
}
.tpl-blackwhite .pub-section-dark .pub-card-text,
.tpl-blackwhite .pub-section-dark .pub-card-text p {
    color: rgba(255,255,255,0.7);
}

/* Generic cards */
.tpl-blackwhite .pub-card {
    border: 1px solid var(--bw-border);
    overflow: hidden;
    transition: all 0.3s ease;
}
.tpl-blackwhite .pub-card:hover {
    border-color: var(--bw-text);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}


/* ===================================================== */
/* 7. ABOUT SNIPPET — B&W Styling, Standard Layout       */
/* ===================================================== */

/* B&W about section — white bg, works with all editor layouts */
.tpl-blackwhite .pub-section-about_snippet {
    background: var(--bw-bg);
}

/* B&W about text styling */
.tpl-blackwhite .pub-about-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--bw-text-secondary);
}
.tpl-blackwhite .pub-about-text h2 {
    color: var(--bw-text);
    font-weight: 800;
}

/* Clean image — no shadow, no hover, no decorative frame */
.tpl-blackwhite .pub-about-image img {
    border-radius: 0;
    box-shadow: none;
}
.tpl-blackwhite .pub-about-image:hover img {
    transform: none;
    box-shadow: none;
}
.tpl-blackwhite .pub-about-image::after {
    display: none;
}


/* ===================================================== */
/* 8. GALLERY                                            */
/* ===================================================== */

.tpl-blackwhite .pub-gallery-item {
    overflow: hidden;
    border: 1px solid var(--bw-border);
    transition: all 0.3s ease;
}
.tpl-blackwhite .pub-gallery-item:hover {
    border-color: var(--bw-text);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.tpl-blackwhite .pub-gallery-item img {
    transition: transform 0.5s ease;
}
.tpl-blackwhite .pub-gallery-item:hover img {
    transform: scale(1.04);
}


/* ===================================================== */
/* 9. TESTIMONIALS                                       */
/* ===================================================== */

.tpl-blackwhite .pub-testimonial {
    background: #fff;
    padding: 32px;
    border: 1px solid var(--bw-border);
    position: relative;
}
.tpl-blackwhite .pub-testimonial::before {
    content: '\201C';
    position: absolute;
    top: 16px;
    left: 24px;
    font-size: 3rem;
    color: var(--bw-accent);
    opacity: 0.3;
    line-height: 1;
}
.tpl-blackwhite .pub-testimonial-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--bw-text-secondary);
}
.tpl-blackwhite .pub-testimonial-author {
    font-weight: 700;
    color: var(--bw-text);
    margin-top: 16px;
}
.tpl-blackwhite .pub-section-alt .pub-testimonial {
    background: #fff;
}


/* ===================================================== */
/* 10. FAQ                                               */
/* ===================================================== */

.tpl-blackwhite .pub-faq-item {
    border: 1px solid var(--bw-border);
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.tpl-blackwhite .pub-faq-item:hover {
    border-color: var(--bw-text);
}
.tpl-blackwhite .pub-faq-question {
    font-weight: 600;
    color: var(--bw-text);
    padding: 18px 24px;
    cursor: pointer;
}
.tpl-blackwhite .pub-faq-answer {
    padding: 0 24px 18px;
    color: var(--bw-text-secondary);
    line-height: 1.7;
}


/* ===================================================== */
/* 11. STATS — Left-aligned, tag-style header            */
/* ===================================================== */

/* Divider at top of stats section */
.tpl-blackwhite .pub-section-stats {
    border-top: 1px solid var(--bw-border);
}

/* Style the stats h2 like a section tag */
.tpl-blackwhite .pub-stats .pub-section-header h2 {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bw-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tpl-blackwhite .pub-stats .pub-section-header h2::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--bw-accent);
    border-radius: 2px;
    flex-shrink: 0;
}

.tpl-blackwhite .pub-stats-grid {
    gap: 32px 48px;
}
.tpl-blackwhite .pub-stat-item {
    text-align: left;
    padding: 24px 0;
}
.tpl-blackwhite .pub-stat-number {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: var(--bw-text);
    line-height: 1.1;
    letter-spacing: -0.03em;
}
/* Purple "+" suffix via JS or content */
.tpl-blackwhite .pub-stat-suffix {
    color: var(--bw-accent);
}
.tpl-blackwhite .pub-stat-label {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--bw-text-muted);
    margin-top: 8px;
}
/* Stats on dark bg */
.tpl-blackwhite .pub-section-dark .pub-stat-number {
    color: #fff;
}
.tpl-blackwhite .pub-section-dark .pub-stat-label {
    color: rgba(255,255,255,0.6);
}


/* ===================================================== */
/* 12. AMENITIES                                         */
/* ===================================================== */

.tpl-blackwhite .pub-amenity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px;
    transition: all 0.25s ease;
}
.tpl-blackwhite .pub-amenity:hover {
    background: var(--bw-accent-light);
}
.tpl-blackwhite .pub-amenity-icon {
    color: var(--bw-accent);
}
.tpl-blackwhite .pub-amenity-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bw-text-secondary);
}


/* ===================================================== */
/* 13. CTA BANNER                                        */
/* ===================================================== */

.tpl-blackwhite .pub-section-cta_banner {
    background: var(--bw-text);
    color: #fff;
    text-align: center;
    padding: 64px 24px;
}
.tpl-blackwhite .pub-section-cta_banner h2 {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.tpl-blackwhite .pub-section-cta_banner p {
    color: rgba(255,255,255,0.6);
    max-width: 500px;
    margin: 12px auto 24px;
}


/* ===================================================== */
/* 14. CONTACT                                           */
/* ===================================================== */

.tpl-blackwhite .pub-map-container {
    overflow: hidden;
    border: 1px solid var(--bw-border);
}
.tpl-blackwhite .pub-contact-form input,
.tpl-blackwhite .pub-contact-form textarea,
.tpl-blackwhite .pub-contact-form select {
    border: 1px solid var(--bw-border);
    padding: 14px 18px;
    font-family: var(--font-body);
    font-weight: 400;
    background: var(--bw-bg-card);
    transition: border-color 0.25s;
}
.tpl-blackwhite .pub-contact-form input:focus,
.tpl-blackwhite .pub-contact-form textarea:focus {
    border-color: var(--bw-text);
    box-shadow: none;
    outline: none;
}


/* ===================================================== */
/* 15. BOOK NOW / CHECK-IN                               */
/* ===================================================== */

.tpl-blackwhite .pub-section-book_now,
.tpl-blackwhite .pub-section-checkin_lookup {
    background: var(--bw-bg-alt);
}


/* ===================================================== */
/* 16. VIDEO                                             */
/* ===================================================== */

.tpl-blackwhite .pub-video-container {
    overflow: hidden;
    border: 1px solid var(--bw-border);
}


/* ===================================================== */
/* 17. IMAGE CAROUSEL                                    */
/* ===================================================== */

.tpl-blackwhite .pub-carousel {
    overflow: hidden;
    border: 1px solid var(--bw-border);
}
.tpl-blackwhite .pub-carousel-slide img {
    border-radius: 0;
}
.tpl-blackwhite .pub-carousel-prev,
.tpl-blackwhite .pub-carousel-next {
    background: rgba(255,255,255,0.9);
    color: var(--bw-text);
    border-radius: 0;
    width: 48px;
    height: 48px;
    border: 1px solid var(--bw-border);
    transition: all 0.25s ease;
}
.tpl-blackwhite .pub-carousel-prev:hover,
.tpl-blackwhite .pub-carousel-next:hover {
    background: #fff;
    border-color: var(--bw-text);
}
.tpl-blackwhite .pub-carousel-dot {
    background: rgba(255,255,255,0.5);
    border: none;
    width: 10px;
    height: 10px;
    border-radius: 0;
    transition: all 0.25s;
}
.tpl-blackwhite .pub-carousel-dot.active {
    background: #fff;
    transform: scale(1.3);
}


/* ===================================================== */
/* 18. IMAGE GRID                                        */
/* ===================================================== */

.tpl-blackwhite .pub-image-grid-item {
    overflow: hidden;
    border: 1px solid var(--bw-border);
    transition: all 0.3s ease;
}
.tpl-blackwhite .pub-image-grid-item:hover {
    border-color: var(--bw-text);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}


/* ===================================================== */
/* 19. FOOTER — Purple/Violet                            */
/* ===================================================== */

.tpl-blackwhite .pub-footer {
    background: var(--bw-accent-deep);
    color: rgba(255,255,255,0.75);
}
.tpl-blackwhite .pub-footer h4 {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}
.tpl-blackwhite .pub-footer a {
    color: rgba(255,255,255,0.65);
    transition: color 0.25s;
}
.tpl-blackwhite .pub-footer a:hover {
    color: #fff;
}
.tpl-blackwhite .pub-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.4);
}

/* Social icons */
.tpl-blackwhite .pub-social-link {
    color: rgba(255,255,255,0.5);
    transition: color 0.25s;
}
.tpl-blackwhite .pub-social-link:hover {
    color: #fff;
}


/* ===================================================== */
/* 20. NAV OVERRIDES                                     */
/* ===================================================== */

/* Clean white nav */
.tpl-blackwhite .pub-header {
    background: var(--nav-bg, #fff);
    border-bottom: 1px solid var(--nav-underline-color, var(--bw-border));
}
.tpl-blackwhite .pub-header .pub-logo {
    color: var(--nav-text, var(--bw-text));
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
}
.tpl-blackwhite .pub-header .pub-nav a,
.tpl-blackwhite .pub-header .pub-nav-dropdown-trigger {
    color: var(--nav-text, var(--bw-text-secondary));
    font-family: var(--nav-font-family, var(--font-body));
    font-weight: var(--nav-font-weight, 500);
    font-size: var(--nav-font-size, 0.9rem);
    opacity: 1;
}
.tpl-blackwhite .pub-header .pub-nav a:hover {
    color: var(--nav-hover-color, var(--bw-text));
}
.tpl-blackwhite .pub-header .pub-nav a.active {
    color: var(--nav-active-color, var(--bw-text));
}
.tpl-blackwhite .pub-header .pub-nav-dropdown-trigger:hover {
    color: var(--nav-hover-color, var(--bw-text));
}

/* Dropdown panel */
.tpl-blackwhite .pub-nav-dropdown-menu {
    background: #fff;
    border: 1px solid var(--bw-border);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.tpl-blackwhite .pub-nav-dropdown-menu a {
    font-weight: var(--nav-font-weight, 500);
    font-size: var(--nav-font-size, 0.9rem);
    font-family: var(--nav-font-family, var(--font-body));
    color: var(--nav-text, var(--bw-text-secondary)) !important;
}
.tpl-blackwhite .pub-nav-dropdown-menu a:hover {
    background: var(--bw-bg-alt);
    color: var(--nav-hover-color, var(--bw-text)) !important;
}
.tpl-blackwhite .pub-nav-dropdown-menu a.active {
    color: var(--nav-active-color, var(--bw-accent)) !important;
}

/* Nav login/logout button — outlined pill */
.tpl-blackwhite .pub-nav-admin-btn {
    background: var(--login-btn-bg, transparent) !important;
    color: var(--login-btn-color, var(--bw-text)) !important;
    border: 2px solid var(--login-btn-border, var(--bw-border)) !important;
    border-radius: var(--login-btn-radius, 9999px) !important;
    padding: 8px 24px !important;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.25s;
    opacity: 1 !important;
}
.tpl-blackwhite .pub-nav-admin-btn:hover {
    border-color: var(--login-btn-border, var(--bw-text)) !important;
}


/* ── Hero-transparent override — let branding opacity slider control ── */
.tpl-blackwhite .pub-nav-hero-transparent {
    background: var(--nav-bg, #ffffff) !important;
    border-bottom: 1px solid var(--nav-underline-color, var(--bw-border)) !important;
}
.tpl-blackwhite .pub-nav-hero-transparent .pub-logo {
    color: var(--nav-text, var(--bw-text));
}
.tpl-blackwhite .pub-nav-hero-transparent .pub-nav-link {
    color: var(--nav-text, var(--bw-text-secondary)) !important;
}
.tpl-blackwhite .pub-nav-hero-transparent.pub-nav-scrolled {
    background: var(--nav-bg, #ffffff) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

/* ===================================================== */
/* 22. PAGE HERO (non-home pages)                        */
/* ===================================================== */

.tpl-blackwhite .pub-page-hero {
    background: var(--bw-bg-alt);
    padding: 64px 0;
    text-align: left;
}
.tpl-blackwhite .pub-page-hero::before {
    display: none;
}
.tpl-blackwhite .pub-page-hero h1 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 900;
    color: var(--bw-text);
    letter-spacing: -0.04em;
    margin-bottom: 8px;
}
.tpl-blackwhite .pub-page-hero p {
    color: var(--bw-text-secondary);
    font-size: 1.05rem;
    max-width: 600px;
}

/* Horizontal rule under page hero title — inside the container */
.tpl-blackwhite .pub-page-hero::after {
    display: none;
}
.tpl-blackwhite .pub-page-hero-inner::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--bw-accent);
    margin-top: 24px;
}


/* ===================================================== */
/* 23. ANIMATIONS — Clean fade-in                        */
/* ===================================================== */

.tpl-blackwhite .bw-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.tpl-blackwhite .bw-in {
    opacity: 1;
    transform: translateY(0);
}


/* ===================================================== */
/* 24. COOKIE CONSENT                                    */
/* ===================================================== */

.tpl-blackwhite .pub-cookie-banner {
    border-radius: 0;
    font-family: var(--font-body);
}
.tpl-blackwhite .pub-cookie-banner .pub-btn {
    border-radius: 0;
    padding: 10px 20px;
    font-size: 0.85rem;
}


/* ===================================================== */
/* 25. RESPONSIVE — Mobile Tweaks                        */
/* ===================================================== */

@media (max-width: 768px) {
    .tpl-blackwhite .pub-section {
        padding: 56px 0;
    }
    /* Hero must stay padding:0 — override the generic .pub-section rule above */
    .tpl-blackwhite .pub-section-hero {
        padding: 0;
    }
    /* Hero container padding on mobile — only for minimal layout */
    .tpl-blackwhite .pub-section-hero:has(.hero-minimal) .pub-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .tpl-blackwhite .pub-section-hero:has(.hero-minimal) {
        padding-top: 24px;
        padding-bottom: 0;
    }
    .tpl-blackwhite .hero-minimal {
        padding: 12px 0 8px;
    }
    .tpl-blackwhite .pub-hero-content h1 {
        font-size: clamp(2.2rem, 9vw, 3rem);
        margin-bottom: 8px;
    }
    .tpl-blackwhite .pub-feature-card {
        padding: 24px 20px;
    }
    .tpl-blackwhite .pub-testimonial {
        padding: 24px;
    }
    .tpl-blackwhite .pub-carousel-prev,
    .tpl-blackwhite .pub-carousel-next {
        width: 36px;
        height: 36px;
    }
    /* Hamburger — three CSS bars instead of the default character */
    .tpl-blackwhite .pub-nav-toggle {
        font-size: 0;
        line-height: 0;
        color: transparent;
        width: 26px;
        height: 18px;
        background:
            linear-gradient(var(--burger-color, var(--bw-text)), var(--burger-color, var(--bw-text))) top    / 100% 2.5px no-repeat,
            linear-gradient(var(--burger-color, var(--bw-text)), var(--burger-color, var(--bw-text))) center / 100% 2.5px no-repeat,
            linear-gradient(var(--burger-color, var(--bw-text)), var(--burger-color, var(--bw-text))) bottom / 100% 2.5px no-repeat;
    }
    /* Mobile nav dropdown — !important needed to layer on base accordion !important */
    .tpl-blackwhite .pub-nav-dropdown-menu {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}

@media (max-width: 480px) {
    .tpl-blackwhite .hero-minimal {
        padding: 8px 0 4px;
    }
    .tpl-blackwhite .hero-minimal .pub-hero-content h1 {
        font-size: clamp(2rem, 10vw, 2.8rem);
        margin-bottom: 4px;
    }
    .tpl-blackwhite .pub-btn {
        padding: 12px 24px;
        font-size: 0.85rem;
    }
    .tpl-blackwhite .pub-page-hero h1 {
        font-size: 1.8rem;
    }
}


/* ===================================================== */
/* 26. REDUCED MOTION                                    */
/* ===================================================== */

@media (prefers-reduced-motion: reduce) {
    .tpl-blackwhite .bw-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .tpl-blackwhite .pub-gallery-item:hover img,
    .tpl-blackwhite .pub-room-card:hover,
    .tpl-blackwhite .pub-feature-card:hover,
    .tpl-blackwhite .pub-card:hover {
        transform: none;
    }
}