/*
Theme Name: GeneratePress (Bourbon & Bacon Fest)
Theme URI: https://bourbonandbaconfest.com
Description: Child theme of GeneratePress for the Bourbon & Bacon Fest site. Restyles GeneratePress to mirror the brand of the old hazel/Qode site (typography pair, sandy-brown accent, dark footer, centered narrow content layout). Pairs with site-specific functions.php for parent enqueue + Google Fonts.
Author: Audacy Station Tools
Author URI: https://gitlab.com/audacy-inc/station-tools/bourbonandbaco
Template: generatepress
Version: 1.0.1
*/

/* ============================================================
   Design tokens — reverse-engineered from the live hazel site.
   ============================================================ */
:root {
	--bb-accent:        #ecae80;  /* sandy-brown, brand accent */
	--bb-accent-dark:   #d49464;  /* hover */
	--bb-heading:       #696969;  /* dark gray for headings */
	--bb-body:          #9d9d9d;  /* light gray for body */
	--bb-bg-alt:        #f9f9f9;  /* alternating section bg */
	--bb-footer-top:    #5d5d5d;  /* footer main */
	--bb-footer-bottom: #444444;  /* footer bottom bar */
	--bb-white:         #ffffff;
}

/* ============================================================
   Typography
   - Body paragraphs / list items: Roboto (sans-serif) 14px.
   - Headings:                     Roboto Slab 700 with 3px tracking
                                   and a generous 80px line-height on h1
                                   (mirrors the hazel/Qode page-title style).
   ============================================================ */
body,
.widget {
	font-family: "Roboto Slab", serif;
	font-size: 14px;
	color: var(--bb-body);
	line-height: 1.57; /* 22/14 */
}
.entry-content,
.entry-content p,
.entry-content li,
p {
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	color: var(--bb-body);
	line-height: 22px;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
	font-family: "Roboto Slab", serif;
	font-weight: 700;
	color: var(--bb-heading);
	letter-spacing: 3px;
	text-transform: none;
}
h1, .entry-title { font-size: 30px; line-height: 80px; }
h2 { font-size: 24px; line-height: 1.4; }
h3 { font-size: 18px; line-height: 1.5; }
h4 { font-size: 16px; line-height: 1.5; }
h5, h6 { font-size: 14px; line-height: 1.5; }

a {
	color: var(--bb-body);
	text-decoration: none;
}
a:hover {
	color: var(--bb-accent);
}
strong, b { color: var(--bb-heading); }

/* ============================================================
   Page background
   - The old site uses pure white with alternating #f9f9f9 section
     bands. GeneratePress defaults to its own off-white; force.
   ============================================================ */
body { background-color: var(--bb-white); }

/* ============================================================
   Header / Site navigation
   - Single header row with the logo injected (via PHP filter) into
     the middle of the nav. The default `<header class="site-header">`
     is hidden; everything renders inside `.main-navigation`.
   - Background: distressed-wood photo from the original hazel site,
     overlaid with a subtle white wash for legibility.
   ============================================================ */
.site-header { display: none !important; }

.main-navigation {
	position: relative;
	z-index: 100;
	background-color: #2a1610;
	background-image: url("/app/uploads/2014/06/bnb-background-1024x806-1.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	padding: 40px 0;
	min-height: 220px;
	display: flex;
	align-items: center;
	transition: min-height 0.25s ease, padding 0.25s ease,
		background-color 0.25s ease, box-shadow 0.25s ease;
}
/* Sticky/collapsed state — toggled by assets/nav-sticky.js once the
   user scrolls past the hero. Wood plank collapses into a thin WHITE
   bar with dark text (matches the live Qode "light header on scroll"
   behavior). Logo is hidden in the stuck bar — menu items run edge
   to edge. */
body.bb-nav-stuck .main-navigation {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	min-height: 64px;
	padding: 0;
	background-color: #ffffff !important;
	background-image: none !important;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	animation: bb-nav-slide-down 0.25s ease;
}
@keyframes bb-nav-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}
body.bb-nav-stuck .main-navigation .main-nav ul li.bb-nav-logo {
	display: none;
}
body.bb-nav-stuck .main-navigation .main-nav ul li a {
	color: #555555;
	padding: 22px 16px;
	text-shadow: none;
}
body.bb-nav-stuck .main-navigation .main-nav ul li a:hover,
body.bb-nav-stuck .main-navigation .main-nav ul li.sfHover > a,
body.bb-nav-stuck .main-navigation .main-nav ul li[class*="current-menu-"] > a,
body.bb-nav-stuck .main-navigation .main-nav ul li[class*="current_page_"] > a,
body.bb-nav-stuck .main-navigation .main-nav ul li.menu-item-has-children:hover > a,
body.bb-nav-stuck .main-navigation .main-nav ul li.menu-item-has-children:focus-within > a {
	color: var(--bb-accent);
}
/* Pipe separator color flip for the light bar */
body.bb-nav-stuck .main-navigation .main-nav ul li:not(.bb-nav-logo):not(:last-child)::after {
	color: #d0d0d0;
}
/* Dropdown arrow tint */
body.bb-nav-stuck .main-navigation .main-nav ul li.menu-item-has-children .gp-icon.icon-arrow svg {
	fill: #555555;
}
/* On the home page the BBSlider hero is pulled up under the nav so
   the artwork's small upper-left logo lands inside the nav row,
   matching the live LayerSlider treatment. Make the nav background
   transparent there so the artwork shows through, and clear its
   wood image so we don't get a seam. */
body.home:not(.bb-nav-stuck) .main-navigation {
	background-color: transparent;
	background-image: none;
}
.main-navigation .inside-navigation { max-width: 100%; padding: 0 30px; }
.main-navigation .main-nav ul {
	flex-wrap: nowrap;
}
.main-navigation .inside-navigation { justify-content: center; width: 100%; }
.main-navigation .main-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.main-navigation .main-nav ul li {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.main-navigation .main-nav ul li a {
	font-family: "Raleway", sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: var(--bb-white);
	letter-spacing: 2.5px;
	text-transform: uppercase;
	padding: 22px 14px;
	line-height: 1;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li.menu-item-has-children:hover > a,
.main-navigation .main-nav ul li.menu-item-has-children:focus-within > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li.current-menu-parent > a,
.main-navigation .main-nav ul li.current_page_parent > a,
.main-navigation .main-nav ul li.current_page_ancestor > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current_page_"] > a {
	color: var(--bb-accent) !important;
	background-color: transparent !important;
}
/* GP injects its own .main-nav a:hover etc. rules — make sure our
   accent wins for the SVG caret colour too. */
.main-navigation .main-nav ul li.menu-item-has-children:hover > a .gp-icon svg,
.main-navigation .main-nav ul li.menu-item-has-children:focus-within > a .gp-icon svg {
	fill: var(--bb-accent);
}

/* Submenu dropdowns — appear on hover/focus of a parent item that
   has children. Styled to match the live hazel/Qode treatment: dark
   wood-grey background, Raleway 12px white uppercase items,
   ~180-220px wide column, fades in below the parent. */
.main-navigation .main-nav ul li.menu-item-has-children {
	position: relative;
}
/* GP renders its own caret as <span class="dropdown-menu-toggle"><svg
   class="gp-icon icon-arrow">…</svg></span> inside the parent link.
   Style it to match the live's small subtle indicator instead of adding
   another ::after triangle. */
.main-navigation .main-nav ul li.menu-item-has-children .dropdown-menu-toggle {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	opacity: 0.7;
}
.main-navigation .main-nav ul li.menu-item-has-children .gp-icon.icon-arrow svg {
	width: 0.7em;
	height: 0.7em;
	fill: currentColor;
}
.main-navigation .main-nav ul li ul.sub-menu,
.main-navigation .main-nav ul li ul.children {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 220px;
	/* Opaque cream/white panel with a sandy-brown accent line on top —
	   mirrors the live hazel/Qode dropdown look. */
	background-color: #ffffff;
	border-top: 3px solid var(--bb-accent);
	padding: 6px 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
	z-index: 10;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.main-navigation .main-nav ul li.menu-item-has-children:hover > ul.sub-menu,
.main-navigation .main-nav ul li.menu-item-has-children:focus-within > ul.sub-menu,
.main-navigation .main-nav ul li.menu-item-has-children > a:focus + ul.sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.main-navigation .main-nav ul li ul.sub-menu li {
	display: block;
	width: 100%;
}
.main-navigation .main-nav ul li ul.sub-menu li a {
	display: block;
	padding: 12px 22px;
	color: var(--bb-heading);
	font-family: "Roboto Slab", serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	text-align: left;
	text-shadow: none;
}
.main-navigation .main-nav ul li ul.sub-menu li a:hover,
.main-navigation .main-nav ul li ul.sub-menu li.current-menu-item > a {
	color: var(--bb-accent);
	background: transparent;
}
/* Suppress pipe separator on sub-menu items */
.main-navigation .main-nav ul li ul.sub-menu li::after,
.main-navigation .main-nav ul li ul.sub-menu li::before { content: none !important; }

/* The injected logo <li> in the middle of the nav row */
.main-navigation .main-nav ul li.bb-nav-logo {
	padding: 0 20px;
	flex: 0 0 auto;
	position: relative;
	/* Keep the logo BELOW the dropdown panels (z-index: 10) so hover
	   menus from BOURBON & BACON sit on top of the circular logo
	   that protrudes down past the nav row. */
	z-index: 1;
}
/* Lift the parent li (and therefore its absolute-positioned
   sub-menu) above the logo while the menu is open. */
.main-navigation .main-nav ul li.menu-item-has-children:hover,
.main-navigation .main-nav ul li.menu-item-has-children:focus-within {
	z-index: 20;
}
.main-navigation .main-nav ul li.bb-nav-logo .custom-logo-link {
	display: inline-block;
	line-height: 0;
}
.main-navigation .main-nav ul li.bb-nav-logo img,
.main-navigation .main-nav ul li.bb-nav-logo .custom-logo {
	height: 140px;
	width: auto;
	max-width: none;
	margin: 0;
	display: block;
}
/* Suppress pipes on either side of the logo */
.main-navigation .main-nav ul li.bb-nav-logo::after,
.main-navigation .main-nav ul li.bb-nav-logo::before,
.main-navigation .main-nav ul li.bb-nav-logo + li::before { content: none !important; }

/* Pipe separator between top-level nav items, mirroring the old hazel
   layout. Use ::after on every item except the last so the pipe stays
   tied to the preceding li and doesn't wrap onto its own line.
   GeneratePress (and likely some legacy rule) also adds a ::before
   pipe on intermediate li's — explicitly null it out so we don't
   render `||`. */
.main-navigation .main-nav > ul > li::before { content: none !important; }
.main-navigation .main-nav > ul > li:not(:last-child)::after {
	content: "|";
	color: var(--bb-white);
	opacity: 0.4;
	font-weight: 300;
	pointer-events: none;
	font-family: "Raleway", sans-serif;
}

/* ============================================================
   Home-page hero
   - Rendered as a full-bleed <section> via generate_after_header
     in functions.php. Sits between the nav and the site grid
     container so it can span the full viewport width without
     fighting GP's max-width.
   - The BBSlider PNG is transparent — wood comes from the section
     background. We size the section to the image's natural aspect
     so there's no empty wood band between the nav and the artwork.
   ============================================================ */
.bb-home-hero {
	position: relative;
	width: 100%;
	background-color: #2a1610;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	overflow: hidden;
	padding: 0;
	line-height: 0;
	/* Pull the section up the full height of the nav so the BBSlider
	   artwork starts at the very top of the page. The transparent
	   nav floats over the top portion of the artwork (where the
	   small upper-left logo sits), matching the live LayerSlider
	   treatment. */
	margin-top: -260px;
}
.bb-home-hero__art {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}
/* Keep the nav items above the BBSlider artwork that's pulled up
   under them. */
.main-navigation { position: relative; z-index: 2; }
.bb-home-hero { z-index: 1; }
/* Drop GP's top padding on the home content area so the wood band
   reads as one continuous tone with the nav above it. */
body.home .site-content { padding-top: 0; }

/* ============================================================
   Content area
   - Centered, narrow column, generous vertical padding to mirror
     the old WPBakery 90px/80px row gaps.
   ============================================================ */
.site-content {
	padding-top: 60px;
	padding-bottom: 60px;
}
.entry-content {
	max-width: 1100px;
	margin: 0 auto;
}
.inside-article,
.entry-content > * {
	max-width: 1100px;
}

/* Alternating section bg: Gutenberg group blocks with "is-style-bb-alt" */
.wp-block-group.is-style-bb-alt {
	background-color: var(--bb-bg-alt);
	padding: 90px 0 80px;
}

/* Banded sections used on the home page to mirror the live hazel
   layout: the h1 sits in a full-bleed WHITE band, the body content
   below it sits in a full-bleed #f9f9f9 band. Both escape GP's
   grid-container max-width via the negative-margin trick. */
.entry-content .wp-block-group.bb-section-light,
.entry-content .wp-block-group.bb-section-alt {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* Title band: tight padding so the h1 sits close to the hero above
   and the alt content band below — matches the live hazel/Qode
   page-title row (~140-160px total). */
.entry-content .wp-block-group.bb-section-light {
	background-color: var(--bb-white);
	padding: 30px 20px;
}

/* ============================================================
   Inside-page title treatment
   - On every page EXCEPT the home, GP's <header class="entry-header">
     gets a tall wood-plank panel and a large light Roboto Slab title
     in WHITE, framed by 4px white horizontal rules above and below.
     Matches the live hazel "standard_title has_separators" band.
   - The wood image continues the texture from the nav row above
     (nav: center bottom; title band: center top) so the grain reads
     as one panel from the top of the page down to the content area.
   ============================================================ */
body:not(.home) .entry-header {
	background-color: #2a1610;
	/* background-image is injected via wp_add_inline_style() in functions.php
	   so the URL goes through wp_get_attachment_image_url() → AS3CF rewrite
	   → CloudFront. Static CSS can't carry attachment URLs since AS3CF only
	   rewrites URLs at template/content render time. */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 40px 20px 50px;
	text-align: center;
}
body:not(.home) .entry-header .entry-title,
body:not(.home) .entry-header h1 {
	color: var(--bb-white);
	font-family: "Roboto Slab", serif;
	font-weight: 300;
	font-size: 59px;
	letter-spacing: 5px;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 20px 40px;
	margin: 0 auto;
	display: inline-block;
	border-top: 4px solid var(--bb-white);
	border-bottom: 4px solid var(--bb-white);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	background: transparent;
}
/* On inside pages drop the white site-content top padding so the
   wood-plank entry-header sits flush against the nav above. */
body:not(.home) .site-content { padding-top: 0; }
/* GP's .inside-article default padding would inset the entry-header
   from the grid container; we want full-bleed. */
body:not(.home) .inside-article > .entry-header {
	margin-top: -30px; /* offset GP's wrapper padding if present */
}
/* Body band: matches the live WPBakery row spacing of 90/0/80. */
.entry-content .wp-block-group.bb-section-alt {
	background-color: var(--bb-bg-alt);
	padding: 90px 20px 80px;
}
/* Gutenberg's constrained-layout adds its own vertical padding on the
   inner-container (40px) plus a block-gap between children. Zero
   those out on our bands so the only vertical padding comes from
   .bb-section-* itself. */
.entry-content .wp-block-group.bb-section-light > .wp-block-group__inner-container,
.entry-content .wp-block-group.bb-section-alt   > .wp-block-group__inner-container {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}
/* Re-constrain inner content to the page's max-width so paragraphs
   don't run full-bleed too. */
.entry-content .wp-block-group.bb-section-light > *,
.entry-content .wp-block-group.bb-section-alt > * {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
/* Lose the h1's default block margin so the page-title band sits
   tight against the hero above and the alt band below. */
.entry-content .bb-section-light h1 { margin: 0; }

/* In-content section labels (Definition / Recipes / etc.) used on
   the Bourbon Basics page. The global h1-h6 rule applies 3px
   letter-spacing — too heavy for these mid-body subheads. Reset. */
.entry-content .bb-section-label {
	letter-spacing: 0 !important;
	font-weight: 400;
	font-size: 22px;
	color: var(--bb-body);
	margin: 32px 0 18px;
}

/* Mid-body category labels: "Appetizers/Sides:" / "Meals:" /
   "Desserts:" on the Bacon Basics page. Slightly larger left-aligned
   serif. */
.entry-content .bb-subsection-label {
	letter-spacing: 0 !important;
	font-weight: 700;
	font-size: 18px;
	color: var(--bb-heading);
	margin: 36px 0 16px;
}
/* Individual recipe names — sandy-brown accent so each card reads
   as a distinct unit even without dividing lines. */
.entry-content .bb-recipe-name {
	letter-spacing: 0 !important;
	font-weight: 700;
	font-size: 15px;
	color: var(--bb-accent);
	margin: 24px 0 10px;
}
/* Small attribution caption shown under a video / between recipe
   sections. Used on Bacon Basics. */
.entry-content .bb-video-caption {
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	color: var(--bb-body);
	margin: 12px 0 24px;
	letter-spacing: 1px;
}
/* Spacing for the embedded YouTube videos so they sit comfortably
   between section headings. The core/embed responsive ratio takes
   care of width — we just need vertical breathing room. */
.entry-content .wp-block-embed.is-type-video {
	margin: 24px auto 32px;
	max-width: 880px;
}

/* ============================================================
   Page-load fade transition. Mirrors the live Qode site's
   `ajax_fade` behavior — content fades up from invisible on
   every page load. Pure-CSS, no JS, no FOUC: the keyframe
   starts at opacity:0 so the first paint is already faded.
   ============================================================ */
@keyframes bb-page-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.main-navigation,
.site,
.bb-home-hero {
	animation: bb-page-fade-in 0.9s ease-out both;
}
/* Stagger the body content slightly behind the nav so the page
   reads top-to-bottom rather than everything appearing at the
   same instant. */
.site { animation-delay: 0.1s; }
/* Respect users who've asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	.main-navigation,
	.site,
	.bb-home-hero {
		animation: none;
	}
}
/* Leaving state — set by assets/page-transition.js on link click.
   Fades the entire page (nav + body) out before the browser actually
   navigates, so the next page feels like a fresh paint. */
body.bb-page-leaving .main-navigation,
body.bb-page-leaving .site,
body.bb-page-leaving .bb-home-hero {
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.55s ease, transform 0.55s ease;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	body.bb-page-leaving .main-navigation,
	body.bb-page-leaving .site,
	body.bb-page-leaving .bb-home-hero {
		transition: none;
		transform: none;
	}
}

/* ============================================================
   Contact page — "Say Hello" heading + 2-col layout
   (icon list on the left, CF7 form on the right).
   ============================================================ */
.bb-contact-intro {
	max-width: 720px;
	margin: 0 auto 40px !important;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--bb-body);
}
.bb-contact-columns {
	max-width: 1080px;
	margin: 0 auto 40px;
	gap: 60px !important;
}
.bb-contact-details {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bb-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid #e5e5e5;
}
.bb-contact-row:last-child { border-bottom: 0; }
.bb-contact-row__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--bb-accent);
	color: var(--bb-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bb-contact-row__body { flex: 1; min-width: 0; }
.bb-contact-row__title {
	font-family: "Roboto Slab", serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bb-heading);
	margin: 0 0 6px;
}
.bb-contact-row__text {
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--bb-body);
	margin: 0;
}
.bb-contact-row__text a { color: var(--bb-accent-dark); }
.bb-contact-row__text a:hover { color: var(--bb-accent); }

/* CF7 form — flat, full-width inputs with sandy-brown submit. */
.wpcf7 .bb-cf7-row {
	display: flex;
	gap: 16px;
}
.wpcf7 .bb-cf7-row > .wpcf7-form-control-wrap { flex: 1; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	width: 100%;
	padding: 12px 14px;
	margin-bottom: 16px;
	border: 1px solid #d9d9d9;
	background: #ffffff;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	color: var(--bb-body);
	border-radius: 0;
	box-sizing: border-box;
}
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--bb-accent);
}
.wpcf7 .bb-cf7-submit,
.wpcf7 input[type="submit"] {
	background: var(--bb-accent);
	color: #ffffff;
	border: 0;
	padding: 12px 32px;
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
	border-radius: 0;
}
.wpcf7 .bb-cf7-submit:hover,
.wpcf7 input[type="submit"]:hover {
	background: var(--bb-accent-dark);
}
.wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 12px 14px !important;
	font-family: "Roboto", sans-serif;
	font-size: 13px;
}
@media (max-width: 768px) {
	.bb-contact-columns { gap: 30px !important; }
	.wpcf7 .bb-cf7-row { flex-direction: column; gap: 0; }
}

/* ============================================================
   Photos page — album switcher tab strip (shown when there are
   multiple albums to choose between).
   ============================================================ */
.bb-album-switcher {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	margin: 0 auto 32px;
	max-width: 100%;
	border-bottom: 1px solid #e5e5e5;
}
.bb-album-switcher__tab {
	display: inline-block;
	padding: 14px 22px;
	font-family: "Raleway", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--bb-body);
	text-decoration: none !important;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: color 180ms ease, border-color 180ms ease;
}
.bb-album-switcher__tab:hover { color: var(--bb-accent); }
.bb-album-switcher__tab.is-active {
	color: var(--bb-accent);
	border-bottom-color: var(--bb-accent);
}

/* ============================================================
   FAQs page — native <details> accordion. Alternating row
   backgrounds, centered question text, sandy-brown caret that
   flips on open. Matches the live Qode "more_facts" design.
   ============================================================ */
.bb-faqs-wrap {
	max-width: 960px;
	margin: 24px auto 40px;
	border-top: 1px solid #e5e5e5;
}
/* Each FAQ — works for both the legacy shortcode markup (bare <details>)
   and the core Details block (.wp-block-details). */
.bb-faq {
	border-bottom: 1px solid #e5e5e5;
	background: #ffffff;
	padding: 0;
}
.bb-faq:nth-of-type(even) { background: #f9f9f9; }

/* Question (the <summary>). Core's Details block uses <summary> directly;
   we target it via descendant selector and via the legacy .bb-faq__q
   class to keep both rendering paths styled identically. */
.bb-faq > summary,
.bb-faq__q {
	list-style: none;
	cursor: pointer;
	padding: 22px 56px 22px 28px;
	position: relative;
	font-family: "Roboto Slab", serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--bb-heading);
	letter-spacing: 0.5px;
	text-align: center;
	transition: color 0.2s ease;
}
.bb-faq > summary::-webkit-details-marker,
.bb-faq__q::-webkit-details-marker { display: none; }
.bb-faq > summary::marker,
.bb-faq__q::marker { content: ""; }
.bb-faq > summary:hover,
.bb-faq__q:hover { color: var(--bb-accent); }

/* Caret on the right — painted via ::after on the summary so editors
   never have to touch markup. Flips on open. */
.bb-faq > summary::after,
.bb-faq__caret {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -8px;
	border-right: 2px solid var(--bb-accent);
	border-bottom: 2px solid var(--bb-accent);
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}
.bb-faq[open] > summary::after,
.bb-faq[open] .bb-faq__caret {
	transform: rotate(-135deg);
	margin-top: -4px;
}

/* Answer body — for the core Details block, the answer is whatever
   blocks sit inside the <details> (typically a paragraph). The
   legacy .bb-faq__a wrapper still works for the old shortcode path. */
.bb-faq > p,
.bb-faq > .wp-block-paragraph,
.bb-faq__a {
	padding: 4px 40px 26px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: var(--bb-body);
	margin: 0;
}
.bb-faq > p a,
.bb-faq__a a { color: var(--bb-accent-dark); }
.bb-faq > p a:hover,
.bb-faq__a a:hover { color: var(--bb-accent); }

/* ============================================================
   Tickets page — date + venue intro line + 4-card grid.
   ============================================================ */
.bb-tickets-intro {
	text-align: center;
	font-family: "Roboto Slab", serif;
	color: var(--bb-heading);
	font-size: 20px;
	line-height: 1.5;
	margin: 0;
}
.bb-tickets-intro p { margin: 0 0 8px; font-family: "Roboto Slab", serif; color: var(--bb-heading); font-size: 20px; }
.bb-tickets-intro p:last-child { margin-bottom: 0; }

.bb-tickets-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
}
@media (max-width: 1100px) {
	.bb-tickets-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.bb-tickets-grid { grid-template-columns: 1fr; }
}

/* Each card fills its parent column so all 4 cards on the row land at
   the same height regardless of how many features each tier lists.
   The CTA pins to the bottom via `margin-top:auto` on .wp-block-buttons.
   Note: wp:group wraps its children in `.wp-block-group__inner-container`,
   so the flex chain runs through that wrapper too. */
.bb-tickets-grid-wrap .wp-block-column {
	display: flex;
	flex-direction: column;
}
.bb-ticket-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	background-color: var(--bb-white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}
.bb-ticket-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
}
/* Header on the live hazel site: white background, dark heading
   text in Roboto Slab, ticket icon directly below in sandy-brown.
   No orange bar. */
.bb-ticket-card__title {
	background-color: var(--bb-white);
	color: var(--bb-heading);
	font-family: "Roboto Slab", serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: none;
	text-align: center;
	padding: 28px 20px 8px;
	margin: 0;
	line-height: 1.3;
}
/* Legacy __body wrapper (used by [bb_tickets] shortcode path). Kept
   for backwards compatibility — the block-pattern path doesn't emit
   this wrapper, so direct children of .bb-ticket-card get the
   equivalent padding below. */
.bb-ticket-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 22px 18px 8px;
	text-align: center;
}
.bb-ticket-card__icon {
	width: 40px;
	height: 40px;
	color: var(--bb-accent);
	margin: 0 auto 16px;
}
/* Block-pattern path: apply horizontal padding directly on the card
   so the time/list/button sit inset without needing an inner wrapper.
   Selectors traverse the wp:group inner-container wrapper that core
   inserts between .bb-ticket-card and its content blocks. */
.bb-ticket-card .bb-ticket-card__time,
.bb-ticket-card .wp-block-list,
.bb-ticket-card .wp-block-buttons {
	padding-left: 18px;
	padding-right: 18px;
}
/* Ticket icon, painted via CSS — no inline SVG to maintain. Lives
   in the header area, directly below the title, in sandy-brown.
   The title's bottom-border then divides header from body content. */
.bb-ticket-card__title::after {
	content: "";
	display: block;
	width: 42px;
	height: 42px;
	margin: 24px auto 8px;
	background-color: var(--bb-accent);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21,7H3A1,1 0 0,0 2,8V11A2,2 0 0,1 4,13A2,2 0 0,1 2,15V18A1,1 0 0,0 3,19H21A1,1 0 0,0 22,18V15A2,2 0 0,1 20,13A2,2 0 0,1 22,11V8A1,1 0 0,0 21,7M21,11.18A4,4 0 0,0 21,14.82V18H3V14.82A4,4 0 0,0 3,11.18V8H21V11.18Z'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21,7H3A1,1 0 0,0 2,8V11A2,2 0 0,1 4,13A2,2 0 0,1 2,15V18A1,1 0 0,0 3,19H21A1,1 0 0,0 22,18V15A2,2 0 0,1 20,13A2,2 0 0,1 22,11V8A1,1 0 0,0 21,7M21,11.18A4,4 0 0,0 21,14.82V18H3V14.82A4,4 0 0,0 3,11.18V8H21V11.18Z'/></svg>") center / contain no-repeat;
}
/* Thin separator between header (title + icon) and body. */
.bb-ticket-card__title {
	border-bottom: 1px solid #f6f6f6;
	padding-bottom: 28px;
}
/* Pin the CTA to the bottom of every card so the 4 buttons line up
   across the row even when feature lists are different lengths.
   We grow the features list to absorb extra vertical space and
   anchor the buttons via margin-top:auto. Selectors run through
   the wp:group inner-container wrapper. */
.bb-ticket-card .wp-block-group__inner-container > .wp-block-list,
.bb-ticket-card .wp-block-group__inner-container > .bb-ticket-card__features {
	flex: 1 1 auto;
}
.bb-ticket-card .wp-block-group__inner-container > .wp-block-buttons {
	margin-top: auto !important;
	margin-bottom: 0 !important;
	padding-bottom: 18px;
}
.bb-ticket-card__time {
	font-family: "Roboto Slab", serif;
	font-size: 20px;
	font-weight: 500;
	color: var(--bb-heading);
	letter-spacing: 1px;
	margin: 0 0 16px;
}
.bb-ticket-card__features {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}
.bb-ticket-card__feature {
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	color: var(--bb-body);
	padding: 12px 8px;
	border-bottom: 1px solid #eee;
	line-height: 1.5;
}
.bb-ticket-card__feature:first-child {
	color: var(--bb-accent);
	font-weight: 500;
}
.bb-ticket-card__feature:last-child { border-bottom: none; }
.bb-ticket-card__cta {
	display: block;
	background-color: var(--bb-accent);
	color: var(--bb-white) !important;
	font-family: "Raleway", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
	padding: 18px 16px;
	text-decoration: none;
	transition: background-color 180ms ease;
}
.bb-ticket-card__cta:hover {
	background-color: var(--bb-accent-dark);
	color: var(--bb-white) !important;
}
.bb-ticket-card__cta--sold-out {
	background-color: #b7b7b7;
	pointer-events: none;
	cursor: default;
}
.bb-ticket-card__cta--sold-out:hover { background-color: #b7b7b7; }

/* When the CTA is a core/button block (block-pattern path), strip
   GP/core defaults and re-apply our flat sandy-brown CTA styling
   directly on the .wp-block-button__link element. */
.bb-ticket-card .wp-block-buttons {
	margin: 0;
	gap: 0;
}
.bb-ticket-card .wp-block-button {
	width: 100%;
	margin: 0;
}
/* CTA — modeled on hazel's `.vc_btn3-style-modern.vc_btn3-shape-rounded
   .vc_btn3-color-sandy-brown`: peachier sandy-brown (#f79468), 5px
   rounded corners, subtle top-down white highlight gradient that gives
   the button its 3D "modern" feel. */
.bb-ticket-card .wp-block-button__link {
	display: block;
	width: 100%;
	background-color: #f79468;
	background-image: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.02) 100%);
	background-repeat: repeat-x;
	color: var(--bb-white) !important;
	font-family: "Raleway", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	border: 1px solid #f79468;
	border-radius: 5px;
	transition: background-color 180ms ease;
}
.bb-ticket-card .wp-block-button__link:hover {
	background-color: #f57f4b;
	border-color: #f57f4b;
	color: #f7f7f7 !important;
}
/* Sold-out block style: editors apply this from the Styles panel on
   the Button block. Renders as a grey, non-clickable CTA AND swaps
   the visible label to "SOLD OUT" via a ::before overlay — so editors
   only have to toggle the style, no need to also edit the button
   text. The real `<a>` text stays "BUY NOW" in source. */
.bb-ticket-card .is-style-sold-out .wp-block-button__link,
.bb-ticket-card .wp-block-button.is-style-sold-out .wp-block-button__link {
	background-color: #b7b7b7;
	background-image: none;
	border-color: #b7b7b7;
	pointer-events: none;
	cursor: default;
	/* Hide the real label without removing it from the accessibility
	   tree; the ::before paints "SOLD OUT" in its place. */
	color: transparent !important;
	position: relative;
}
.bb-ticket-card .is-style-sold-out .wp-block-button__link::before,
.bb-ticket-card .wp-block-button.is-style-sold-out .wp-block-button__link::before {
	content: "SOLD OUT";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bb-white);
	font-family: "Raleway", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
}
.bb-ticket-card .is-style-sold-out .wp-block-button__link:hover,
.bb-ticket-card .wp-block-button.is-style-sold-out .wp-block-button__link:hover {
	background-color: #b7b7b7;
}

/* ============================================================
   Sponsors page — BENEFITING feature, filter bar, 4-column grid.
   ============================================================ */
.bb-sponsors-benefiting {
	text-align: center;
	margin: 0 auto 50px;
}
.bb-sponsors-benefiting__label {
	font-family: "Roboto Slab", serif;
	font-size: 18px;
	letter-spacing: 4px;
	color: var(--bb-heading);
	margin: 0 0 30px;
	text-transform: uppercase;
}
.bb-sponsors-benefiting__logo {
	max-width: 320px;
	height: auto;
	display: block;
	margin: 0 auto;
}
.bb-sponsors-filter {
	text-align: center;
	margin: 0 auto 60px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px;
}
.bb-sponsors-filter__btn {
	background: transparent !important;
	background-color: transparent !important;
	border: 0;
	cursor: pointer;
	color: var(--bb-body) !important;
	font-family: "Roboto Slab", serif !important;
	font-size: 17px;
	font-weight: 400 !important;
	letter-spacing: 1px;
	padding: 6px 12px;
	transition: color 180ms ease;
	text-transform: none !important;
	box-shadow: none;
}
.bb-sponsors-filter__btn:hover,
.bb-sponsors-filter__btn.is-active {
	color: var(--bb-accent) !important;
	background: transparent !important;
	background-color: transparent !important;
}
.bb-sponsors-filter__sep {
	color: var(--bb-body);
	opacity: 0.5;
	padding: 0 4px;
	font-family: "Roboto Slab", serif;
	font-size: 18px;
}
.bb-sponsors-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 30px;
	max-width: 1200px;
	margin: 0 auto;
}
@media (max-width: 1024px) { .bb-sponsors-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .bb-sponsors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .bb-sponsors-grid { grid-template-columns: 1fr; } }
.bb-sponsor-card {
	text-align: center;
	padding: 20px 8px 30px;
	transition: opacity 200ms ease;
}
.bb-sponsor-card__logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 130px;
	margin-bottom: 18px;
}
.bb-sponsor-card__logo {
	max-width: 100%;
	max-height: 130px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.bb-sponsor-card__name {
	font-family: "Roboto Slab", serif;
	font-size: 19px;
	font-weight: 400;
	letter-spacing: 1px;
	color: #5d5d5d;
	margin: 0 0 8px;
	line-height: 1.3;
}
.bb-sponsor-card__cats {
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	margin: 0;
}
.bb-sponsor-card__cat {
	color: var(--bb-accent);
	text-decoration: none;
}
.bb-sponsor-card__cat:hover { text-decoration: underline; }

/* ============================================================
   Photos page — gallery hover treatment
   - Default: slight desaturation + dark overlay so the grid reads
     as one cohesive panel.
   - Hover:  full colour, subtle scale-up, accent border tint,
     and a magnifier cursor to signal "click to enlarge".
   - The lightbox itself is WP 6.4's native one — enabled per
     wp:image via the scripts/photo-lightbox.php helper.
   ============================================================ */
.entry-content .wp-block-gallery .wp-block-image {
	overflow: hidden;
	position: relative;
	cursor: zoom-in;
}
.entry-content .wp-block-gallery .wp-block-image img {
	transition: transform 400ms ease, filter 400ms ease;
	filter: saturate(0.85) brightness(0.92);
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.entry-content .wp-block-gallery .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(42, 22, 16, 0.35), rgba(42, 22, 16, 0));
	opacity: 1;
	pointer-events: none;
	transition: opacity 400ms ease;
}
.entry-content .wp-block-gallery .wp-block-image:hover img,
.entry-content .wp-block-gallery .wp-block-image:focus-within img {
	transform: scale(1.05);
	filter: saturate(1) brightness(1);
}
.entry-content .wp-block-gallery .wp-block-image:hover::after,
.entry-content .wp-block-gallery .wp-block-image:focus-within::after {
	opacity: 0;
}
/* Subtle outline tint when actively focused for keyboard users */
.entry-content .wp-block-gallery .wp-block-image:focus-within {
	outline: 3px solid var(--bb-accent);
	outline-offset: -3px;
}

/* ============================================================
   bb-lightbox: gallery-aware lightbox with prev/next + counter.
   Built by assets/gallery-lightbox.js when a wp:gallery is on the
   page. Replaces WP 6.4 native single-image lightbox.
   ============================================================ */
.bb-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(15, 8, 5, 0.92);
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 220ms ease;
}
.bb-lightbox.is-open {
	display: flex;
	opacity: 1;
}
.bb-lightbox__figure {
	margin: 0;
	max-width: 92vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.bb-lightbox__img {
	max-width: 92vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
	display: block;
}
.bb-lightbox__caption {
	color: var(--bb-white);
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	margin-top: 14px;
	text-align: center;
	max-width: 80ch;
}
.bb-lightbox__counter {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.7);
	font-family: "Raleway", sans-serif;
	font-size: 12px;
	letter-spacing: 2px;
	font-weight: 700;
}
.bb-lightbox__btn {
	position: fixed;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: var(--bb-white);
	cursor: pointer;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-family: "Roboto", sans-serif;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, border-color 180ms ease;
	z-index: 2;
	padding: 0;
	line-height: 1;
}
.bb-lightbox__btn:hover,
.bb-lightbox__btn:focus-visible {
	background: var(--bb-accent);
	color: var(--bb-white);
	outline: none;
}
.bb-lightbox__close { top: 20px; right: 20px; font-size: 32px; }
.bb-lightbox__prev  { top: 50%; left: 20px; transform: translateY(-50%); }
.bb-lightbox__next  { top: 50%; right: 20px; transform: translateY(-50%); }
.bb-lightbox__prev:hover,
.bb-lightbox__next:hover { transform: translateY(-50%) scale(1.08); }

/* Compact controls on smaller viewports. */
@media (max-width: 640px) {
	.bb-lightbox__btn { width: 44px; height: 44px; font-size: 20px; }
	.bb-lightbox__close { font-size: 26px; top: 12px; right: 12px; }
	.bb-lightbox__prev { left: 10px; }
	.bb-lightbox__next { right: 10px; }
}

/* Lists in content */
.entry-content ul li::marker { color: var(--bb-body); }

/* ============================================================
   Buttons
   - Match the old qbutton / vc_btn3 styling: pill, uppercase Raleway.
   ============================================================ */
.wp-block-button__link,
button,
input[type="submit"],
.wp-block-search__button {
	background-color: var(--bb-accent) !important;
	color: var(--bb-white) !important;
	font-family: "Raleway", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 14px 32px;
	border: none;
	border-radius: 0;
	transition: background-color 200ms ease;
}
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover {
	background-color: var(--bb-accent-dark) !important;
}

/* ============================================================
   Footer
   - Dark gray top band with the logo + address + social, then
     a darker bottom strip for the copyright line. Mirrors hazel.
   ============================================================ */
.site-footer { background-color: var(--bb-footer-top) !important; }
.footer-widgets {
	background-color: var(--bb-footer-top) !important;
	color: var(--bb-white);
	padding: 70px 0 40px;
}
.footer-widgets-container,
.inside-footer-widgets {
	color: #acacac;
}
.footer-widgets .widget,
.footer-widgets p,
.footer-widgets li { color: #acacac; }
.site-footer a, .footer-widgets a { color: #acacac; }
.site-footer a:hover, .footer-widgets a:hover { color: var(--bb-accent); }
/* Vertical column separators between the 3 footer widgets — mirrors the
   live footer's qode_column.column2 / .column3 `border-left: 1px solid #777`. */
.footer-widgets .inside-footer-widgets {
	display: flex;
	gap: 0;
	align-items: stretch;
}
.footer-widgets .inside-footer-widgets > .footer-widget-1,
.footer-widgets .inside-footer-widgets > .footer-widget-2,
.footer-widgets .inside-footer-widgets > .footer-widget-3 {
	flex: 1 1 0;
	padding: 30px 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-widgets .inside-footer-widgets > .footer-widget-2,
.footer-widgets .inside-footer-widgets > .footer-widget-3 {
	border-left: 1px solid #777;
}
.site-info {
	background-color: var(--bb-footer-bottom) !important;
	color: var(--bb-white);
	font-size: 12px;
	letter-spacing: 1px;
	padding: 18px 0;
}
.footer-widgets .widget-title {
	color: var(--bb-white);
	font-size: 14px;
	margin-bottom: 14px;
	text-align: center;
}

/* ============================================================
   Page title (single-page header band — keep minimal, the old
   site had a small title strip with centered Roboto Slab text)
   ============================================================ */
.page-title,
.entry-header .entry-title {
	text-align: center;
	margin-bottom: 40px;
	padding-top: 20px;
}

/* ============================================================
   Misc — comments are disabled site-wide via the mu-plugin, but
   hide any residual comment templates in case the theme renders
   an empty container.
   ============================================================ */
#comments, .comments-area { display: none !important; }