/*
Theme Name:   Fox Cigar Bar
Theme URI:    https://foxcigarbar.com
Description:  Child theme for Fox Cigar Bar. Four lounges, one brand. The design system is drawn from the cigar band — cream paper, double-rule brass borders, oxblood small caps — and from the Spanish cedar of a humidor's interior rather than the near-black every cigar site defaults to.
Author:       Fox Cigar Bar
Template:     blocksy
Version:      1.4.0
Text Domain:  foxcigarbar
*/

/* ==========================================================================
   Tokens
   Cedar and tobacco, not black and gold. The ground is the inside of a
   humidor; cream is band paper; oxblood and brass are band ink and foil,
   spent sparingly so the bands stay the loudest thing on the page.
   ========================================================================== */

:root {
	--fox-ink:      #17110D;  /* aged tobacco, warmer than black */
	--fox-cedar:    #3A2519;  /* Spanish cedar, humidor lining   */
	--fox-ash:      #CBC4B6;  /* cigar ash — body text on dark   */
	--fox-cream:    #F0E9DA;  /* band paper                      */
	--fox-oxblood:  #7E2E27;  /* band ink                        */
	--fox-brass:    #B08D57;  /* foil stamp, used with restraint */

	--fox-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
	--fox-body:    "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

	/* Type scale — fluid, with the display face allowed to get genuinely
	   large. A Didone at small sizes loses its contrast and its point. */
	--fox-t-hero:  clamp(2.75rem, 7.5vw, 6.5rem);
	--fox-t-h2:    clamp(1.85rem, 3.6vw, 3rem);
	--fox-t-h3:    clamp(1.15rem, 1.7vw, 1.5rem);
	--fox-t-body:  clamp(1rem, 1.05vw, 1.0625rem);
	--fox-t-small: 0.8125rem;

	--fox-band-h:  0.16em;   /* letter-spacing for band small caps */
	--fox-gut:     clamp(1.25rem, 3vw, 2.5rem);
	--fox-section: clamp(4rem, 9vw, 7.5rem);
	--fox-max:     1220px;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background: var(--fox-ink);
	color: var(--fox-ash);
	font-family: var(--fox-body);
	font-size: var(--fox-t-body);
	font-weight: 300;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

body h1, body h2, body h3 {
	font-family: var(--fox-display);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--fox-cream);
	margin: 0;
}

.fox-wrap { max-width: var(--fox-max); margin-inline: auto; padding-inline: var(--fox-gut); }
.fox-section { padding-block: var(--fox-section); position: relative; }
.fox-section--cedar { background: var(--fox-cedar); }
.fox-section--paper { background: var(--fox-cream); color: #4A3524; }
.fox-section--paper h2, .fox-section--paper h3 { color: var(--fox-ink); }

/* ==========================================================================
   The band — this page's signature
   A cigar band is cream paper held by two brass rules, with the maker's name
   in tight small caps. Every eyebrow, card and label on this site is a
   variation of that one object.
   ========================================================================== */

.fox-band {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.5em 1.4em;
	background: var(--fox-cream);
	border-top: 3px double var(--fox-brass);
	border-bottom: 3px double var(--fox-brass);
	color: var(--fox-oxblood);
	font-family: var(--fox-body);
	font-size: var(--fox-t-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--fox-band-h);
	line-height: 1;
}

/* The lozenge that sits at a band's centre, printed on nearly every one. */
.fox-band::before,
.fox-band::after {
	content: "";
	width: 5px; height: 5px;
	background: var(--fox-oxblood);
	transform: rotate(45deg);
	flex: none;
}

.fox-band--quiet {
	background: transparent;
	border-color: color-mix(in srgb, var(--fox-brass) 55%, transparent);
	color: var(--fox-brass);
}

/* Section heading cluster */
.fox-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.fox-head h2 { font-size: var(--fox-t-h2); margin-top: 0.7em; }
.fox-head p  { max-width: 54ch; margin: 0.9em 0 0; opacity: 0.85; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.fox-btn {
	display: inline-flex; align-items: center; gap: 0.6em;
	padding: 0.95em 1.9em;
	font-family: var(--fox-body);
	font-size: var(--fox-t-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--fox-band-h);
	text-decoration: none;
	border: 1px solid var(--fox-brass);
	background: var(--fox-brass);
	color: var(--fox-ink);
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
.fox-btn:hover { background: var(--fox-cream); border-color: var(--fox-cream); transform: translateY(-2px); }
.fox-btn--ghost { background: transparent; color: var(--fox-brass); }
.fox-btn--ghost:hover { background: var(--fox-brass); color: var(--fox-ink); }

.fox-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ==========================================================================
   Hero
   ========================================================================== */

.fox-hero {
	position: relative;
	min-height: min(88vh, 860px);
	display: flex; align-items: center;
	background: var(--fox-ink);
	overflow: hidden;
	text-align: center;
}
.fox-hero__media {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0.42;
}
/* Vignette: a lounge is lit from the middle out, never evenly. */
.fox-hero::after {
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(120% 85% at 50% 42%, transparent 0%, rgba(23,17,13,.55) 58%, var(--fox-ink) 100%),
		linear-gradient(180deg, rgba(23,17,13,.7) 0%, transparent 30%);
}
.fox-hero__inner { position: relative; z-index: 2; width: 100%; }

.fox-hero h1 {
	font-size: var(--fox-t-hero);
	margin: 0.5em auto 0;
	max-width: 16ch;
	text-wrap: balance;
}
.fox-hero h1 em {
	display: block;
	font-style: italic;
	color: var(--fox-brass);
}
.fox-hero__sub {
	max-width: 56ch; margin: 1.5em auto 0;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	color: var(--fox-ash);
}
.fox-hero .fox-actions { justify-content: center; margin-top: 2.4rem; }

/* ==========================================================================
   Location cards — each lounge is a band on the same cigar
   ========================================================================== */

.fox-grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.fox-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.fox-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.fox-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

.fox-loc {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--fox-cream);
	color: #4A3524;
	border-top: 4px double var(--fox-brass);
	border-bottom: 4px double var(--fox-brass);
	text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease;
	min-height: 100%;
}
.fox-loc:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.fox-loc__media { aspect-ratio: 4/3; background: var(--fox-cedar) center/cover; }
.fox-loc__body { padding: 1.5rem 1.4rem 1.7rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.fox-loc__city {
	font-family: var(--fox-display);
	font-size: 1.75rem; line-height: 1;
	color: var(--fox-ink);
}
.fox-loc__meta {
	font-size: var(--fox-t-small);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--fox-oxblood);
}
.fox-loc__addr { font-size: 0.9375rem; opacity: .8; }
.fox-loc__cta {
	margin-top: auto; padding-top: 1rem;
	font-size: var(--fox-t-small); font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--fox-band-h);
	color: var(--fox-oxblood);
}

/* A lounge that isn't open yet shouldn't wear a finished band. */
.fox-loc--soon { background: transparent; color: var(--fox-ash); border-style: solid; border-color: color-mix(in srgb, var(--fox-brass) 40%, transparent); }
.fox-loc--soon .fox-loc__city { color: var(--fox-cream); }
.fox-loc--soon .fox-loc__meta,
.fox-loc--soon .fox-loc__cta { color: var(--fox-brass); }
.fox-loc--soon .fox-loc__media { opacity: .35; filter: grayscale(1); }

/* ==========================================================================
   Events, promotions, shop
   ========================================================================== */

.fox-card {
	background: var(--fox-cedar);
	border: 1px solid color-mix(in srgb, var(--fox-brass) 28%, transparent);
	padding: 1.5rem;
	display: flex; flex-direction: column; gap: .6rem;
	text-decoration: none; color: inherit;
	transition: border-color .25s ease, transform .25s ease;
}
.fox-card:hover { border-color: var(--fox-brass); transform: translateY(-4px); }
.fox-section--paper .fox-card { background: #fff; border-color: color-mix(in srgb, var(--fox-oxblood) 20%, transparent); }
.fox-card__date {
	font-size: var(--fox-t-small); text-transform: uppercase;
	letter-spacing: 0.12em; color: var(--fox-brass);
}
.fox-card__title { font-family: var(--fox-display); font-size: var(--fox-t-h3); color: var(--fox-cream); }
.fox-section--paper .fox-card__title { color: var(--fox-ink); }
.fox-card__venue { font-size: var(--fox-t-small); text-transform: uppercase; letter-spacing: .1em; opacity: .75; }
.fox-card__excerpt { font-size: .9375rem; opacity: .85; }

.fox-empty {
	border: 1px dashed color-mix(in srgb, var(--fox-brass) 40%, transparent);
	padding: 2.25rem; text-align: center; font-size: .9375rem; opacity: .8;
}

/* Filter chips for the events section */
.fox-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.fox-chip {
	font: inherit; font-size: var(--fox-t-small); font-weight: 500;
	text-transform: uppercase; letter-spacing: .1em;
	padding: .55em 1.15em; cursor: pointer;
	background: transparent; color: var(--fox-ash);
	border: 1px solid color-mix(in srgb, var(--fox-brass) 35%, transparent);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fox-chip:hover { border-color: var(--fox-brass); }
.fox-chip[aria-pressed="true"] { background: var(--fox-brass); border-color: var(--fox-brass); color: var(--fox-ink); }

/* ==========================================================================
   Location picker — the permanent "Choose Your Fox" control
   ========================================================================== */

.fox-picker {
	background: var(--fox-cedar);
	border-bottom: 1px solid color-mix(in srgb, var(--fox-brass) 30%, transparent);
	font-size: var(--fox-t-small);
}
.fox-picker__inner {
	max-width: var(--fox-max); margin-inline: auto;
	padding: .6rem var(--fox-gut);
	display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.fox-picker__label {
	text-transform: uppercase; letter-spacing: var(--fox-band-h);
	color: var(--fox-brass); font-weight: 500;
}
.fox-picker__list { display: flex; gap: .4rem; flex-wrap: wrap; }
.fox-picker a {
	color: var(--fox-ash); text-decoration: none;
	padding: .35em .85em; border: 1px solid transparent;
	text-transform: uppercase; letter-spacing: .08em;
	transition: color .2s ease, border-color .2s ease;
}
.fox-picker a:hover { color: var(--fox-cream); border-color: color-mix(in srgb, var(--fox-brass) 45%, transparent); }
.fox-picker a[data-current="1"] { color: var(--fox-ink); background: var(--fox-brass); }

/* ==========================================================================
   Signup
   ========================================================================== */

.fox-signup { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); align-items: end; }
.fox-field { display: flex; flex-direction: column; gap: .35rem; }
.fox-field label {
	font-size: var(--fox-t-small); text-transform: uppercase;
	letter-spacing: .1em; color: var(--fox-oxblood); font-weight: 500;
}
.fox-field input, .fox-field select {
	font: inherit; padding: .8em .9em;
	background: #fff; color: var(--fox-ink);
	border: 1px solid color-mix(in srgb, var(--fox-oxblood) 30%, transparent);
}
.fox-field input:focus-visible, .fox-field select:focus-visible { outline: 2px solid var(--fox-oxblood); outline-offset: 1px; }
.fox-fineprint { font-size: var(--fox-t-small); opacity: .7; margin-top: 1rem; max-width: 62ch; }

/* ==========================================================================
   Single location page
   ========================================================================== */

.fox-loc-hero { position: relative; min-height: min(62vh, 620px); display: flex; align-items: flex-end; background: var(--fox-cedar); overflow: hidden; }
.fox-loc-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; }
.fox-loc-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,17,13,.45) 0%, transparent 40%, rgba(23,17,13,.92) 100%); }
.fox-loc-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(2rem, 5vw, 4rem); }
.fox-loc-hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); margin-top: .4em; }

.fox-cols { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .fox-cols { grid-template-columns: 1fr; } }

.fox-hours { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.fox-hours th, .fox-hours td { text-align: left; padding: .55em 0; border-bottom: 1px solid color-mix(in srgb, var(--fox-brass) 20%, transparent); }
.fox-hours th { font-weight: 500; text-transform: uppercase; letter-spacing: .1em; font-size: var(--fox-t-small); color: var(--fox-brass); width: 5.5em; }
.fox-hours tr[data-today="1"] td, .fox-hours tr[data-today="1"] th { color: var(--fox-cream); font-weight: 500; }

.fox-amenities { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.fox-amenities li {
	font-size: var(--fox-t-small); text-transform: uppercase; letter-spacing: .09em;
	padding: .4em .9em; border: 1px solid color-mix(in srgb, var(--fox-brass) 35%, transparent);
	color: var(--fox-brass);
}

.fox-aside { border-top: 3px double var(--fox-brass); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1.75rem; }
.fox-aside h3 { font-size: var(--fox-t-h3); }
.fox-aside__block { display: flex; flex-direction: column; gap: .6rem; }

.fox-prose h2, .fox-prose h3 { margin-top: 1.6em; }
.fox-prose p { margin: 0 0 1.1em; }
.fox-prose a { color: var(--fox-brass); }

/* ==========================================================================
   Motion — one orchestrated entrance, then stillness
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.fox-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
	.fox-reveal.is-in { opacity: 1; transform: none; }
	.fox-hero .fox-band { animation: fox-band-in 1s cubic-bezier(.2,.7,.3,1) both; }
	@keyframes fox-band-in { from { opacity: 0; transform: scaleX(.82); } to { opacity: 1; transform: none; } }
}

/* Focus visibility is not optional. */
.fox-page a:focus-visible, .fox-page button:focus-visible {
	outline: 2px solid var(--fox-brass);
	outline-offset: 3px;
}

@media (max-width: 640px) {
	.fox-hero { min-height: 78vh; }
	.fox-cols { gap: 2rem; }
}


/* ==========================================================================
   Responsive hardening
   Everything below exists to stop one specific failure: the page scrolling
   sideways on a phone. Each rule targets a thing that is fixed-width by
   default and therefore escapes its container.
   ========================================================================== */

/* Embedded media does not know how wide its container is. Maps are the usual
   culprit — a Google Maps iframe carries width="600" in the markup. */
.fox-page img,
.fox-page video,
.fox-page iframe,
.fox-page embed,
.fox-page object {
	max-width: 100%;
	height: auto;
}
.fox-page iframe { display: block; border: 0; }

/* Long unbroken strings — a pasted URL, an email address in the aside — are
   the other way a layout gets pushed wide. */
.fox-page p,
.fox-page li,
.fox-page h1,
.fox-page h2,
.fox-page h3,
.fox-loc__addr,
.fox-card__title { overflow-wrap: anywhere; }

/* A wide table should scroll inside itself, never take the page with it. */
.fox-prose table,
.fox-page .wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* ...but the hours table is small and must stay a real table to keep its
   row semantics for screen readers. */
.fox-hours { display: table; overflow: visible; }

/* Last-resort guard: nothing may widen the document itself. */
html, body.fox-page { max-width: 100%; overflow-x: clip; }

/* Blocksy's own alignfull/wide blocks inside our prose column */
.fox-prose .alignfull,
.fox-prose .alignwide { max-width: 100%; margin-inline: 0; }

@media (max-width: 900px) {
	/* The band is set in wide tracking; below this it needs room to wrap. */
	.fox-band { flex-wrap: wrap; row-gap: .35em; text-align: center; justify-content: center; }
}

@media (max-width: 640px) {
	:root { --fox-band-h: 0.12em; }        /* wide tracking eats the line on small screens */

	.fox-hero { min-height: 76svh; }        /* svh, so mobile browser chrome does not clip it */
	.fox-hero h1 { max-width: 13ch; }
	.fox-hero .fox-actions { flex-direction: column; align-items: stretch; }
	.fox-hero .fox-btn { justify-content: center; }

	.fox-picker__inner { gap: .5rem; padding-block: .5rem; }
	.fox-picker__list { gap: .25rem; }

	.fox-loc__body { padding: 1.25rem 1.1rem 1.4rem; }
	.fox-loc__city { font-size: 1.5rem; }

	.fox-aside { padding-top: 1.25rem; }
	.fox-section { padding-block: clamp(3rem, 12vw, 4.5rem); }

	/* Filter chips become a horizontal rail rather than a tall stack. */
	.fox-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: .35rem;
		margin-inline: calc(var(--fox-gut) * -1);
		padding-inline: var(--fox-gut);
	}
	.fox-filters::-webkit-scrollbar { display: none; }
	.fox-chip { flex: none; }
}

/* Touch targets: 44px is the smallest reliably tappable control. */
@media (pointer: coarse) {
	.fox-picker a, .fox-chip, .fox-btn { min-height: 44px; display: inline-flex; align-items: center; }
}


/* ==========================================================================
   Blocksy skin — feed the tokens into the theme's own variable system
   Blocksy renders the header, footer, shop, calendar, search and blog. Rather
   than restyling each of those by hand, its variables are pointed at the Fox
   palette so every page it renders comes out in the same cedar-and-brass
   system as the custom templates. This stylesheet loads after Blocksy's
   dynamic CSS, so these :root values win.
   ========================================================================== */

:root {
	/* Palette slots. Blocksy: 1 primary, 2 primary-hover, 3 headings,
	   4 body text, 5 borders/subtle, 6 subtle bg, 7 card bg, 8 site bg. */
	--theme-palette-color-1: var(--fox-brass);
	--theme-palette-color-2: var(--fox-cream);
	--theme-palette-color-3: var(--fox-cream);
	--theme-palette-color-4: var(--fox-ash);
	--theme-palette-color-5: #4E3627;
	--theme-palette-color-6: var(--fox-cedar);
	--theme-palette-color-7: var(--fox-cedar);
	--theme-palette-color-8: var(--fox-ink);

	--theme-text-color:          var(--fox-ash);
	--theme-headings-color:      var(--fox-cream);
	--theme-heading-color:       var(--fox-cream);
	--theme-link-initial-color:  var(--fox-brass);
	--theme-link-hover-color:    var(--fox-cream);
	--theme-link-active-color:   var(--fox-cream);
	--theme-border-color:        #4E3627;

	--theme-font-family:         var(--fox-body);
	--theme-font-weight:         300;
	--theme-line-height:         1.65;

	--theme-button-background-initial-color: var(--fox-brass);
	--theme-button-background-hover-color:   var(--fox-cream);
	--theme-button-text-initial-color:       var(--fox-ink);
	--theme-button-text-hover-color:         var(--fox-ink);
	--theme-button-border-radius:            0;
	--theme-button-font-family:              var(--fox-body);
	--theme-button-font-weight:              500;
	--theme-button-text-transform:           uppercase;
	--theme-button-letter-spacing:           var(--fox-band-h);
	--theme-button-font-size:                var(--fox-t-small);

	--theme-form-field-background-initial-color: #fff;
	--theme-form-field-background-focus-color:   #fff;
	--theme-form-field-border-initial-color:     #4E3627;
	--theme-form-field-border-focus-color:       var(--fox-brass);
	--theme-form-text-initial-color:             var(--fox-ink);
	--theme-form-text-focus-color:               var(--fox-ink);
	--theme-form-field-border-radius:            0;
	--theme-form-border-radius:                  0;
	--theme-border-radius:                       0;
	--theme-boxed-content-border-radius:         0;
}

/* Headings everywhere in the display face, not only in our templates. */
h1, h2, h3, .entry-title, .woocommerce-loop-product__title, .tribe-events-calendar-list__event-title {
	font-family: var(--fox-display);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--fox-cream);
}

/* Header and footer — Blocksy paints these from its own customizer values,
   which are set for a light site. */
header#header, [data-header*="type-"] .ct-container, .ct-header, [data-id="logo"] { background: transparent; }
header#header .ct-header { background: var(--fox-ink); }
header#header [data-row] > .ct-container, header#header [data-row] > .ct-container-fluid { background: var(--fox-ink); }
header#header [data-row="middle"] { border-bottom: 1px solid color-mix(in srgb, var(--fox-brass) 28%, transparent); }
header#header .site-title, header#header .site-title a { font-family: var(--fox-display); color: var(--fox-cream); letter-spacing: .02em; }
header#header .menu > li > a {
	font-size: var(--fox-t-small); font-weight: 500;
	text-transform: uppercase; letter-spacing: .1em;
	color: var(--fox-ash);
}
header#header .menu > li > a:hover, header#header .menu > li.current-menu-item > a { color: var(--fox-brass); }
header#header .sub-menu { background: var(--fox-cedar); border: 1px solid color-mix(in srgb, var(--fox-brass) 30%, transparent); border-radius: 0; }
header#header .sub-menu a { color: var(--fox-ash); }
header#header .sub-menu a:hover { color: var(--fox-cream); }
header#header .ct-toggle, header#header .ct-icon, header#header [data-id="cart"] { color: var(--fox-ash); }

footer#footer, footer#footer .ct-container, footer#footer [data-row] > div { background: var(--fox-cedar); color: var(--fox-ash); }
footer#footer [data-row="bottom"] { border-top: 1px solid color-mix(in srgb, var(--fox-brass) 25%, transparent); }
footer#footer a { color: var(--fox-ash); }
footer#footer a:hover { color: var(--fox-brass); }
footer#footer .ct-widget h3, footer#footer .widget-title { color: var(--fox-cream); font-size: var(--fox-t-small); font-family: var(--fox-body); text-transform: uppercase; letter-spacing: var(--fox-band-h); }

/* Blocksy page title area on pages it renders (events, shop, search) */
.hero-section, .ct-page-title { background: transparent; }
.hero-section .page-title, .ct-page-title .page-title { font-family: var(--fox-display); color: var(--fox-cream); }
.hero-section .ct-breadcrumbs, .ct-breadcrumbs { color: var(--fox-brass); font-size: var(--fox-t-small); text-transform: uppercase; letter-spacing: .1em; }

/* Content area on Blocksy-rendered pages */
.entry-content, .content-area, .ct-container, .ct-container-fluid { color: var(--fox-ash); }
.entry-content a { color: var(--fox-brass); }
.entry-content a:hover { color: var(--fox-cream); }
.entry-content blockquote { border-left: 3px double var(--fox-brass); color: var(--fox-cream); font-family: var(--fox-display); font-size: 1.25em; }
.entry-content hr { border: 0; border-top: 3px double var(--fox-brass); max-width: 6rem; margin: 2.5rem 0; }

/* WooCommerce */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: var(--fox-cedar); border: 1px solid color-mix(in srgb, var(--fox-brass) 28%, transparent); border-radius: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: var(--fox-t-h3); color: var(--fox-cream); }
.woocommerce ul.products li.product .price, .woocommerce div.product p.price { color: var(--fox-brass); font-family: var(--fox-body); font-weight: 500; }
.woocommerce .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
	background: var(--fox-brass); color: var(--fox-ink); border-radius: 0;
	text-transform: uppercase; letter-spacing: var(--fox-band-h); font-weight: 500; font-size: var(--fox-t-small);
}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover { background: var(--fox-cream); color: var(--fox-ink); }
.woocommerce span.onsale { background: var(--fox-oxblood); color: var(--fox-cream); border-radius: 0; font-family: var(--fox-body); text-transform: uppercase; letter-spacing: .1em; font-size: var(--fox-t-small); }
.woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a { color: var(--fox-brass); }
.woocommerce-info, .woocommerce-message, .woocommerce-error { background: var(--fox-cedar); color: var(--fox-ash); border-top-color: var(--fox-brass); }
.woocommerce table.shop_table { border-color: color-mix(in srgb, var(--fox-brass) 28%, transparent); border-radius: 0; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: color-mix(in srgb, var(--fox-brass) 20%, transparent); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { background: #fff; color: var(--fox-ink); border: 1px solid #4E3627; border-radius: 0; }

/* The Events Calendar */
.tribe-common, .tribe-events { color: var(--fox-ash); }
.tribe-common .tribe-common-c-btn, .tribe-common .tribe-common-c-btn-border, .tribe-events .tribe-events-c-ical__link {
	background: var(--fox-brass); color: var(--fox-ink); border-color: var(--fox-brass); border-radius: 0;
	text-transform: uppercase; letter-spacing: var(--fox-band-h); font-family: var(--fox-body); font-weight: 500;
}
.tribe-common .tribe-common-c-btn:hover, .tribe-common .tribe-common-c-btn-border:hover { background: var(--fox-cream); color: var(--fox-ink); }
.tribe-events .tribe-events-calendar-list__event-row, .tribe-events .tribe-events-calendar-list__month-separator { border-color: color-mix(in srgb, var(--fox-brass) 25%, transparent); }
.tribe-events .tribe-events-calendar-list__event-title-link, .tribe-events .tribe-events-calendar-list__event-title-link:visited { color: var(--fox-cream); }
.tribe-events .tribe-events-calendar-list__event-title-link:hover { color: var(--fox-brass); }
.tribe-events .tribe-events-calendar-list__event-date-tag-daynum, .tribe-common .tribe-common-h1, .tribe-common .tribe-common-h2, .tribe-common .tribe-common-h3, .tribe-common .tribe-common-h4, .tribe-common .tribe-common-h5, .tribe-common .tribe-common-h6 { color: var(--fox-cream); font-family: var(--fox-display); }
.tribe-events .tribe-events-calendar-list__event-datetime, .tribe-events .tribe-events-calendar-list__event-venue, .tribe-common .tribe-common-b2, .tribe-common .tribe-common-b3 { color: var(--fox-ash); }
.tribe-events .tribe-events-calendar-list__event-venue-title { color: var(--fox-brass); }
.tribe-common .tribe-common-c-svgicon { color: var(--fox-brass); }
.tribe-events .tribe-events-c-view-selector__button, .tribe-events .tribe-events-c-events-bar__search-button, .tribe-events .tribe-events-c-nav__prev, .tribe-events .tribe-events-c-nav__next { color: var(--fox-ash); }
.tribe-events .tribe-events-c-events-bar, .tribe-events .tribe-events-c-events-bar__search-container, .tribe-events .tribe-events-c-view-selector__content { background: var(--fox-cedar); border-color: color-mix(in srgb, var(--fox-brass) 30%, transparent); border-radius: 0; }
.tribe-events .tribe-events-c-search__input, .tribe-common .tribe-common-form-control-text__input { background: #fff; color: var(--fox-ink); border-radius: 0; }
.tribe-events-single .tribe-events-single-event-title, .tribe-events-single h1 { font-family: var(--fox-display); color: var(--fox-cream); }
.tribe-events-single .tribe-events-event-meta, .tribe-events-single .tribe-events-schedule { background: var(--fox-cedar); border: 1px solid color-mix(in srgb, var(--fox-brass) 28%, transparent); color: var(--fox-ash); }
.tribe-events-single .tribe-events-event-meta a { color: var(--fox-brass); }

/* Pagination and search, Blocksy-rendered */
.ct-pagination .page-numbers, .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { border-color: color-mix(in srgb, var(--fox-brass) 35%, transparent); color: var(--fox-ash); border-radius: 0; }
.ct-pagination .page-numbers.current, .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--fox-brass); color: var(--fox-ink); border-color: var(--fox-brass); }
.ct-search-form input[type="search"], .search-form input[type="search"] { background: #fff; color: var(--fox-ink); border-radius: 0; }

/* Selection colour, so even highlighted text is on brand. */
::selection { background: var(--fox-oxblood); color: var(--fox-cream); }

/* ==========================================================================
   Mobile offcanvas menu
   Blocksy styles this panel through CSS variables set on
   [data-header*="type-1"] [data-id="mobile-menu"] — link colour, weight,
   size, divider — not through direct rules, which is why direct rules on the
   links do nothing. Set the same variables at the same selector; this file
   loads later, so it wins on order.
   ========================================================================== */

[data-header*="type-"] #offcanvas .ct-panel-inner,
#offcanvas .ct-panel-inner {
	background: var(--fox-ink);
	border-left: 3px double var(--fox-brass);
}

[data-header*="type-"] [data-id="mobile-menu"],
[data-id="mobile-menu"] {
	--theme-link-initial-color: var(--fox-cream);
	--theme-link-hover-color:   var(--fox-brass);
	--theme-link-active-color:  var(--fox-brass);
	--theme-font-weight: 500;                 /* Blocksy's 700 is heavy at 20px */
	--theme-font-size: 1.25rem;
	--mobile-menu-divider: 1px solid color-mix(in srgb, var(--fox-brass) 22%, transparent);
}

/* Everything else inside the panel (close control, search, socials) */
[data-header*="type-"] #offcanvas,
#offcanvas {
	--theme-link-initial-color: var(--fox-cream);
	--theme-link-hover-color:   var(--fox-brass);
	--theme-text-color:         var(--fox-ash);
	color: var(--fox-ash);
}
#offcanvas .ct-toggle-close { color: var(--fox-brass); }
#offcanvas .ct-toggle-close:hover { color: var(--fox-cream); }

/* Sub-menu (the four lounges under Locations) — quieter, tracked caps */
#offcanvas .mobile-menu .sub-menu {
	--theme-font-size: var(--fox-t-small);
	--theme-font-weight: 500;
	--theme-link-initial-color: var(--fox-ash);
}
#offcanvas .mobile-menu .sub-menu a { text-transform: uppercase; letter-spacing: .1em; }

/* The dim behind the panel, in the site's own dark rather than neutral black */
#offcanvas::before, .ct-panel::before { background: rgba(23, 17, 13, .72); }

/* ==========================================================================
   Single event (The Events Calendar) — meta box
   TEC's legacy single template paints section titles and dt labels in its own
   near-black, which vanishes on the cedar box. Every text role is set here.
   ========================================================================== */

.tribe-events-single .tribe-events-event-meta,
.tribe-events-single .tribe-events-meta-group { color: var(--fox-ash); }
.tribe-events-single .tribe-events-single-section-title,
.tribe-events-single .tribe-events-meta-group .tribe-events-single-section-title {
	font-family: var(--fox-body);
	font-size: var(--fox-t-small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--fox-band-h);
	color: var(--fox-brass);
}
.tribe-events-single .tribe-events-meta-group dt { color: var(--fox-cream); font-weight: 500; }
.tribe-events-single .tribe-events-meta-group dd,
.tribe-events-single .tribe-events-meta-group dd abbr { color: var(--fox-ash); text-decoration: none; border: 0; }
.tribe-events-single .tribe-events-meta-group dd a { color: var(--fox-brass); }
.tribe-events-single .tribe-events-schedule h2,
.tribe-events-single .tribe-events-schedule .tribe-events-abbr { color: var(--fox-cream); font-family: var(--fox-body); font-weight: 400; }
.tribe-events-single .tribe-events-back a { color: var(--fox-brass); }
.tribe-events-single .tribe-events-nav-pagination a { color: var(--fox-ash); }
.tribe-events-single .tribe-events-nav-pagination a:hover { color: var(--fox-brass); }

/* "Add to calendar" — its icon is an inline SVG inheriting currentColor */
.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button,
.tribe-events .tribe-events-c-subscribe-dropdown__button-text { color: var(--fox-ink); }
.tribe-events .tribe-events-c-subscribe-dropdown .tribe-common-c-svgicon { color: var(--fox-ink); }
.tribe-events .tribe-events-c-subscribe-dropdown__content { background: var(--fox-cedar); border-color: color-mix(in srgb, var(--fox-brass) 30%, transparent); }
.tribe-events .tribe-events-c-subscribe-dropdown__list-item-link { color: var(--fox-ash); }
.tribe-events .tribe-events-c-subscribe-dropdown__list-item-link:hover { color: var(--fox-cream); }

/* ==========================================================================
   Search results / archive cards — never print the author login name
   ========================================================================== */
.entry-meta .meta-author, .ct-meta-element-author { display: none; }

/* ==========================================================================
   Location grid between phone and desktop: 2×2, never 3+1
   auto-fit yields three columns from ~720px and strands the fourth lounge on
   its own row. Two-by-two is symmetrical and every card stays the same size.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1099px) {
	.fox-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A button placed inside page content inherits .fox-prose a's brass text and
   vanishes against its own brass fill. Buttons keep their own colours. */
.fox-prose .fox-btn, .entry-content .fox-btn { color: var(--fox-ink); text-decoration: none; }
.fox-prose .fox-btn:hover, .entry-content .fox-btn:hover { color: var(--fox-ink); }
.fox-prose .fox-btn--ghost, .entry-content .fox-btn--ghost { color: var(--fox-brass); }
.fox-prose .fox-btn--ghost:hover, .entry-content .fox-btn--ghost:hover { color: var(--fox-ink); }

/* ==========================================================================
   The Events Calendar — events bar, month separators, day tags
   TEC paints its toolbar text and SVG icons #141827 (navy) via its own
   --tec-color-* variables and direct fills. Every visible role is set here.
   ========================================================================== */
.tribe-events .tribe-events-c-view-selector__button-text,
.tribe-events .tribe-events-c-view-selector__list-item-text,
.tribe-events .tribe-events-c-events-bar__search-button,
.tribe-events .tribe-events-c-events-bar__search-button-icon,
.tribe-events .tribe-events-c-top-bar__today-button,
.tribe-events .tribe-events-c-top-bar__nav-link,
.tribe-events .tribe-events-c-top-bar__datepicker-button,
.tribe-events .tribe-events-c-nav__prev, .tribe-events .tribe-events-c-nav__next,
.tribe-events .tribe-events-c-nav__today,
.tribe-events .tribe-events-calendar-list__month-separator-text,
.tribe-events .tribe-events-calendar-list__event-date-tag-weekday,
.tribe-events .tribe-events-calendar-list__event-datetime,
.tribe-events .tribe-events-calendar-list__event-venue-address,
.tribe-events .tribe-events-c-ical__link { color: var(--fox-ash); }

.tribe-events .tribe-events-calendar-list__month-separator-text { color: var(--fox-brass); text-transform: uppercase; letter-spacing: var(--fox-band-h); font-family: var(--fox-body); font-size: var(--fox-t-small); font-weight: 500; }
.tribe-events .tribe-events-calendar-list__month-separator::after { background: color-mix(in srgb, var(--fox-brass) 30%, transparent); }
.tribe-events .tribe-events-calendar-list__event-date-tag-daynum { color: var(--fox-cream); }
.tribe-events .tribe-events-calendar-list__event-date-tag-weekday { color: var(--fox-brass); }
.tribe-events .tribe-events-c-view-selector__button-text { color: var(--fox-cream); font-family: var(--fox-display); font-size: 1.5rem; }
.tribe-events .tribe-events-c-top-bar__nav-link:hover, .tribe-events .tribe-events-c-top-bar__today-button:hover,
.tribe-events .tribe-events-c-view-selector__button:hover .tribe-events-c-view-selector__button-text { color: var(--fox-brass); }

/* SVG icons: TEC fills them with a hard navy; route through currentColor */
.tribe-events .tribe-common-c-svgicon__svg-fill, .tribe-events .tribe-common-c-svgicon { fill: currentColor; color: var(--fox-brass); }
.tribe-events .tribe-common-c-svgicon__svg-stroke { stroke: currentColor; }
.tribe-events .tribe-events-c-view-selector__button-icon-caret-svg,
.tribe-events .tribe-events-c-events-bar__search-button-icon-svg,
.tribe-events .tribe-events-c-view-selector__list-item-icon { color: var(--fox-brass); fill: var(--fox-brass); }
.tribe-events .tribe-events-c-top-bar__nav-link-icon-svg { color: var(--fox-ash); }
.tribe-events .tribe-events-c-events-bar__search-button,
.tribe-events .tribe-events-c-view-selector__button { background: transparent; }
.tribe-events .tribe-events-c-events-bar__search-button--active,
.tribe-events .tribe-events-c-events-bar__search-container { background: var(--fox-cedar); }
.tribe-events .tribe-events-c-view-selector__content,
.tribe-events .tribe-events-c-view-selector__list-item-link { background: var(--fox-cedar); color: var(--fox-ash); }
.tribe-events .tribe-events-c-view-selector__list-item-link:hover { background: var(--fox-ink); }
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link { border-left-color: var(--fox-brass); }
.tribe-events .tribe-events-c-top-bar { border-bottom-color: color-mix(in srgb, var(--fox-brass) 25%, transparent); }
.tribe-events .tribe-events-header { background: transparent; }
.tribe-events .tribe-events-c-events-bar { background: transparent; border: 0; }

/* ==========================================================================
   Content pages at desktop widths — a lounge rail beside the text
   A 72ch measure is right for reading; a 72ch column alone on a 1920px
   screen is not. From 1100px the page becomes text + rail, and the rail
   does the one job every page shares: get you to a lounge.
   ========================================================================== */
.fox-page-layout { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .fox-page-layout { grid-template-columns: minmax(0, 68ch) minmax(280px, 1fr); } }
.fox-rail { border-top: 3px double var(--fox-brass); padding-top: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.fox-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fox-rail__list li + li { border-top: 1px solid color-mix(in srgb, var(--fox-brass) 20%, transparent); }
.fox-rail__list a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 0; text-decoration: none; color: var(--fox-cream); }
.fox-rail__list a:hover .fox-rail__name { color: var(--fox-brass); }
.fox-rail__name { font-family: var(--fox-display); font-size: 1.25rem; }
.fox-rail__meta { font-size: var(--fox-t-small); text-transform: uppercase; letter-spacing: .08em; color: var(--fox-brass); white-space: nowrap; }
.fox-rail__meta--soon { color: var(--fox-ash); opacity: .7; }
@media (max-width: 1099px) { .fox-rail { display: none; } }   /* phones/tablets already have the picker + nav */

/* ==========================================================================
   The Events Calendar — its variable layer
   TEC's views resolve every colour through --tec-color-*. Pointing those at
   the Fox palette covers the view-selector label that direct rules could not
   reach, and every other view (month, day, single) in one place.
   ========================================================================== */
.tribe-common, .tribe-events, .tribe-events-view, .tribe-common--breakpoint-medium.tribe-events {
	--tec-color-text-primary:            var(--fox-cream);
	--tec-color-text-primary-light:      var(--fox-ash);
	--tec-color-text-secondary:          var(--fox-ash);
	--tec-color-text-disabled:           color-mix(in srgb, var(--fox-ash) 50%, transparent);
	--tec-color-text-events-title:       var(--fox-cream);
	--tec-color-text-event-title:        var(--fox-cream);
	--tec-color-text-event-date:         var(--fox-brass);
	--tec-color-text-event-date-secondary: var(--fox-ash);
	--tec-color-text-events-bar-input:   var(--fox-ink);
	--tec-color-text-events-bar-input-placeholder: #6b5a4a;
	--tec-color-text-view-selector-list-item: var(--fox-ash);
	--tec-color-text-view-selector-list-item-hover: var(--fox-cream);
	--tec-color-text-day-of-week-month:  var(--fox-brass);
	--tec-color-text-secondary-event-date: var(--fox-ash);
	--tec-color-link-primary:            var(--fox-brass);
	--tec-color-link-accent:             var(--fox-brass);
	--tec-color-link-accent-hover:       var(--fox-cream);
	--tec-color-accent-primary:          var(--fox-brass);
	--tec-color-accent-primary-hover:    var(--fox-cream);
	--tec-color-accent-primary-active:   var(--fox-cream);
	--tec-color-accent-primary-background: color-mix(in srgb, var(--fox-brass) 14%, transparent);
	--tec-color-accent-secondary:        var(--fox-oxblood);
	--tec-color-icon-primary:            var(--fox-brass);
	--tec-color-icon-primary-alt:        var(--fox-ash);
	--tec-color-icon-secondary:          var(--fox-ash);
	--tec-color-icon-active:             var(--fox-cream);
	--tec-color-icon-disabled:           color-mix(in srgb, var(--fox-ash) 40%, transparent);
	--tec-color-icon-focus:              var(--fox-cream);
	--tec-color-background:              transparent;
	--tec-color-background-secondary:    var(--fox-cedar);
	--tec-color-background-events:       transparent;
	--tec-color-background-view-selector: var(--fox-cedar);
	--tec-color-background-view-selector-list-item-hover: var(--fox-ink);
	--tec-color-background-events-bar-submit-button: var(--fox-brass);
	--tec-color-background-events-bar-submit-button-hover: var(--fox-cream);
	--tec-color-background-events-bar-submit-button-active: var(--fox-cream);
	--tec-color-background-messages:     var(--fox-cedar);
	--tec-color-background-secondary-hover: var(--fox-ink);
	--tec-color-background-primary-multiday: color-mix(in srgb, var(--fox-brass) 25%, transparent);
	--tec-color-background-primary-multiday-hover: color-mix(in srgb, var(--fox-brass) 40%, transparent);
	--tec-color-background-secondary-multiday: color-mix(in srgb, var(--fox-oxblood) 30%, transparent);
	--tec-color-background-secondary-multiday-hover: color-mix(in srgb, var(--fox-oxblood) 45%, transparent);
	--tec-color-background-tooltip:      var(--fox-cedar);
	--tec-color-border-default:          color-mix(in srgb, var(--fox-brass) 28%, transparent);
	--tec-color-border-secondary:        color-mix(in srgb, var(--fox-brass) 18%, transparent);
	--tec-color-border-active:           var(--fox-brass);
	--tec-color-border-events-bar:       color-mix(in srgb, var(--fox-brass) 28%, transparent);
	--tec-color-button-primary:          var(--fox-brass);
	--tec-color-button-primary-hover:    var(--fox-cream);
	--tec-color-button-primary-active:   var(--fox-cream);
	--tec-color-button-primary-background: color-mix(in srgb, var(--fox-brass) 14%, transparent);
	--tec-color-button-secondary:        var(--fox-cedar);
	--tec-color-button-secondary-hover:  var(--fox-ink);
	--tec-color-day-marker-month:        var(--fox-cream);
	--tec-color-day-marker-current-month: var(--fox-brass);
	--tec-color-day-marker-past-month:   var(--fox-ash);
	--tec-font-family-sans-serif:        var(--fox-body);
	--tec-font-family-base:              var(--fox-body);
}
/* Belt and braces for the label itself, at TEC's own breakpoint specificity */
.tribe-common--breakpoint-medium.tribe-common .tribe-events-c-view-selector__button-text,
.tribe-common .tribe-events-c-view-selector__button-text,
.tribe-events .tribe-events-c-view-selector__button-text { color: var(--fox-cream); }