/* ================================================================
   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:       #7c3aed;
    --bw-accent-dark:  #6d28d9;
    --bw-accent-deep:  #4c1d95;
    --bw-accent-light: rgba(124,58,237,0.08);
    --bw-accent-glow:  rgba(124,58,237,0.15);

    /* -- Override base vars -- */
    --bg: #ffffff;
    --text: #0a0a0a;
    --primary: #7c3aed;

    /* -- Force clean sans-serif — integral to B&W design.
         Overrides theme font_pair set on :root so the template
         always renders with a geometric grotesque, regardless
         of what the tenant's theme has configured. -- */
    --font-heading: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}


/* ===================================================== */
/* 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 — White BG, Massive Typography, No Image     */
/* ===================================================== */

/* Override base rule that strips container padding for heroes.
   Base: .pub-section-hero .pub-container { padding:0; max-width:none; }
   We RESTORE container to match the about section so h1 aligns with image. */
.tpl-blackwhite .pub-section-hero {
    padding: 0;
}
.tpl-blackwhite .pub-section-hero .pub-container {
    max-width: 1100px;
    padding: 0 24px;
}

/* Override background-image (set inline) and base hero styles */
.tpl-blackwhite .pub-hero {
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 48px 0 0;
    background: var(--bw-bg) !important;
    background-image: none !important;
    background-color: var(--bw-bg) !important;
    color: var(--bw-text);
    overflow: visible;
}

/* Hide background overlay, video, and photo credit */
.tpl-blackwhite .pub-hero-overlay {
    display: none !important;
}
.tpl-blackwhite .pub-hero-video-bg {
    display: none !important;
}
.tpl-blackwhite .pub-hero-credit {
    display: none;
}

/* Hero content fills the container width */
.tpl-blackwhite .pub-hero-content {
    position: relative;
    z-index: 2;
    max-width: none;
    width: 100%;
    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(--bw-text);
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0;
    padding-bottom: 0;
}

/* Subheadline — hide on the hero, the about section shows copy instead */
.tpl-blackwhite .pub-hero-content p {
    display: none;
}

/* Hero CTA — hide in hero (booking handled by book_now section) */
.tpl-blackwhite .pub-hero-content .pub-btn {
    display: none;
}

/* Hero badge — hide in hero, tag style is used in about section */
.tpl-blackwhite .pub-hero-badge {
    display: none;
}


/* ===================================================== */
/* 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);
}

/* Hero button — black on white bg */
.tpl-blackwhite .pub-hero .pub-btn {
    background: var(--bw-text);
    color: #fff;
    border: 2px solid var(--bw-text);
}
.tpl-blackwhite .pub-hero .pub-btn:hover {
    background: var(--bw-accent);
    border-color: var(--bw-accent);
    color: #fff;
}

/* 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 — Split Tag+Text, Full-Width Image   */
/* ===================================================== */

/* Flows seamlessly from hero — zero padding, force white bg.
   The container stays default width for the tag+text, but the
   image breaks out of it to fill the full section width. */
.tpl-blackwhite .pub-section-about_snippet {
    padding: 0;
    background: var(--bw-bg) !important;
    overflow: visible;
}

/* Stack text block above image */
.tpl-blackwhite .pub-about {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Split layout: tag on left, body text on right.
   Padding-top creates space between divider and text. */
.tpl-blackwhite .pub-about-text {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0 48px;
    padding-top: 20px;
    margin-top: 16px;
    border-top: 1px solid var(--bw-border);
    align-items: start;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--bw-text-secondary);
}

/* Tag sits in the left column */
.tpl-blackwhite .pub-about-text .pub-section-tag {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    margin-top: 2px;
}

/* Hide the h2 title — the section tag replaces it */
.tpl-blackwhite .pub-about-text h2 {
    display: none;
}

/* Body text sits in the right column */
.tpl-blackwhite .pub-about-text .pub-about-body {
    grid-column: 2;
    grid-row: 1 / 4;
}

/* Full-width image — negative margins pull it out of the .pub-container
   to fill the entire <section> width. No 100vw = no scrollbar issues. */
.tpl-blackwhite .pub-about-image {
    min-height: 0;
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
}
.tpl-blackwhite .pub-about-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 700px;
    object-fit: cover;
    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: #fff;
    border-bottom: 1px solid var(--bw-border);
}
.tpl-blackwhite .pub-header .pub-logo {
    color: 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(--bw-text-secondary);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    opacity: 1;
}
.tpl-blackwhite .pub-header .pub-nav a:hover,
.tpl-blackwhite .pub-header .pub-nav a.active {
    color: var(--bw-text);
}
.tpl-blackwhite .pub-header .pub-nav-dropdown-trigger: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: 400;
    font-size: 0.9rem;
}
.tpl-blackwhite .pub-nav-dropdown-menu a:hover {
    background: var(--bw-bg-alt);
}
.tpl-blackwhite .pub-nav-dropdown-menu a.active {
    color: var(--bw-accent) !important;
}

/* Nav login/logout button — outlined pill */
.tpl-blackwhite .pub-nav-admin-btn {
    background: transparent !important;
    color: var(--bw-text) !important;
    border: 2px solid var(--bw-border) !important;
    border-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(--bw-text) !important;
}


/* ===================================================== */
/* 21. ANNOUNCEMENT BAR                                  */
/* ===================================================== */

.tpl-blackwhite .pub-announcement-bar {
    background: var(--bw-text);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}


/* ===================================================== */
/* 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 container padding on mobile */
    .tpl-blackwhite .pub-section-hero .pub-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* About image: tighter margins on mobile, move ABOVE text */
    .tpl-blackwhite .pub-about-image {
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
        order: -1;
    }
    .tpl-blackwhite .pub-about-image img {
        max-height: 350px;
    }
    .tpl-blackwhite .pub-section-hero {
        padding-top: 24px;
        padding-bottom: 0;
    }
    .tpl-blackwhite .pub-hero {
        padding: 12px 0 8px;
    }
    .tpl-blackwhite .pub-hero-content h1 {
        font-size: clamp(2.2rem, 9vw, 3rem);
        margin-bottom: 8px;
    }
    /* About: stack tag above body text on mobile */
    .tpl-blackwhite .pub-about-text {
        grid-template-columns: 1fr;
        gap: 8px 0;
    }
    .tpl-blackwhite .pub-about-text .pub-section-tag {
        grid-column: 1;
        grid-row: auto;
    }
    .tpl-blackwhite .pub-about-text .pub-about-body {
        grid-column: 1;
        grid-row: auto;
    }
    .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(--bw-text), var(--bw-text)) top    / 100% 2.5px no-repeat,
            linear-gradient(var(--bw-text), var(--bw-text)) center / 100% 2.5px no-repeat,
            linear-gradient(var(--bw-text), var(--bw-text)) bottom / 100% 2.5px no-repeat;
    }
    /* Mobile nav dropdown */
    .tpl-blackwhite .pub-nav-dropdown-menu {
        border: none;
        box-shadow: none;
        background: transparent;
    }
}

@media (max-width: 480px) {
    .tpl-blackwhite .pub-hero {
        padding: 8px 0 4px;
    }
    .tpl-blackwhite .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;
    }
}