/* Sitewide custom overrides — enqueued in functions.php (sm-custom handle). */

/* Dropdown submenu — also lives in src/scss/_primary-nav.scss for the next build. */
@media (min-width: 951px) {
.primary-nav-wrap nav > ul > li.menu-item-has-children { position: relative; }
.primary-nav-wrap nav ul.sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  margin-top: 0;
  border: none;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(49, 48, 86,0.28), 0 4px 12px rgba(49, 48, 86,0.10);
  padding: 10px;
  min-width: 240px;
  overflow: hidden;
}
.primary-nav-wrap nav ul.sub-menu::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #5F1C62 0%, #D2222A 100%);
}
.primary-nav-wrap nav ul.sub-menu li { border: none; margin: 2px 0; }
.primary-nav-wrap nav ul.sub-menu li:first-child { margin-top: 6px; }
.primary-nav-wrap nav ul.sub-menu li a {
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: #5F1C62;
  padding: 11px 16px;
  border-radius: 9px;
  position: relative;
  transition: background-color .22s ease, color .22s ease, padding-left .22s ease;
}
.primary-nav-wrap nav ul.sub-menu li a::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  width: 0; height: 18px;
  background: #D2222A;
  border-radius: 3px;
  transform: translateY(-50%);
  transition: width .22s ease;
}
.primary-nav-wrap nav ul.sub-menu li a:hover,
.primary-nav-wrap nav ul.sub-menu li a.highlighted {
  background-color: #F0F0ED !important;
  color: #D2222A !important;
  padding-left: 22px;
}
.primary-nav-wrap nav ul.sub-menu li a:hover::before,
.primary-nav-wrap nav ul.sub-menu li a.highlighted::before { width: 4px; }
}

/* ---- CBUS Soul Fest: purple header bar (logo is white/gold) ---- */
.site-header,
.site-header.scrolling-up,
.site-header.no-hero {
  background: #5F1C62;
}
.site-header .primary-nav-wrap nav ul li a,
.site-header.scrolling-up .primary-nav-wrap nav ul li a {
  color: #FFFFFF;
}
.site-header .primary-nav-wrap nav ul.sub-menu,
.site-header.scrolling-up .primary-nav-wrap nav ul.sub-menu {
  background: #5F1C62;
}
.site-header .primary-nav-wrap nav ul.sub-menu li a {
  color: #FFFFFF;
}
.site-header .primary-nav-wrap nav ul li a:hover,
.site-header .primary-nav-wrap nav ul li a:focus {
  color: #F1BF2A;
}

/* SVG logo has no intrinsic dimensions - give it an explicit box */
.site-header img.header-logo {
  width: auto;
  height: 86px;
  max-width: 200px;
}
@media (max-width: 950px) {
  .site-header img.header-logo { height: 62px; }
}
/* nav bar itself must be transparent so white links read on the purple header */
.site-header .primary-nav-wrap nav.primary-nav,
.site-header .primary-nav-wrap nav.primary-nav ul.primary-menu,
.site-header.scrolling-up .primary-nav-wrap nav.primary-nav,
.site-header.scrolling-up .primary-nav-wrap nav.primary-nav ul.primary-menu {
  background: transparent;
}

/* ---- CBUS Soul Fest: tighten vertical rhythm (desktop only) ----
   The split block is sized for tall portrait imagery (min-height 873px /
   60.6vw with align-items:end). Our photos are landscape, so the forced
   height left ~900px of dead space above every one. */
@media screen and (min-width: 768px) {
  .ffitol__container--inner {
    min-height: 0;
    align-items: center;
  }
  .ffitol__container {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
@media screen and (min-width: 1440px) {
  .ffitol__container--inner { min-height: 0; }
}

/* ---- nav dropdown: keep the theme's white card, not a purple panel ----
   sub-menu links use $dark-blue, which maps to the brand purple here, so a
   purple panel made them invisible. */
.site-header .primary-nav-wrap nav ul.sub-menu,
.site-header.scrolling-up .primary-nav-wrap nav ul.sub-menu {
  background: #FFFFFF;
}
.site-header .primary-nav-wrap nav ul.sub-menu li a,
.site-header.scrolling-up .primary-nav-wrap nav ul.sub-menu li a {
  color: #5F1C62;
}
.site-header .primary-nav-wrap nav ul.sub-menu li a:hover,
.site-header .primary-nav-wrap nav ul.sub-menu li a.highlighted {
  background-color: #F0F0ED !important;
  color: #D2222A !important;
}

/* top-level: no white pill / red text on the purple bar */
.site-header .primary-nav-wrap nav > ul.primary-menu > li > a:hover,
.site-header .primary-nav-wrap nav > ul.primary-menu > li > a.highlighted,
.site-header .primary-nav-wrap nav > ul.primary-menu > li.active > a,
.site-header.scrolling-up .primary-nav-wrap nav > ul.primary-menu > li > a:hover,
.site-header.scrolling-up .primary-nav-wrap nav > ul.primary-menu > li > a.highlighted {
  background-color: transparent !important;
  color: #F1BF2A !important;
}

/* ---- footer: right-hand events panel is red with the yellow squiggle ---- */
.site-footer-right {
  background-color: #D2222A;
}
.site-footer-right {
  background-image: url("../img/footer-stroke.svg?v=soulfest-yellow");
}

/* footer events heading inherits h3 (5rem); the live title is a full sentence,
   so scale it down rather than shortening the copy */
.site-footer-events-title,
.site-footer-events-title.h3 {
  font-size: 2.6rem;
  line-height: 1.15;
  margin-bottom: 24px;
}
@media screen and (max-width: 1314px) {
  .site-footer-events-title,
  .site-footer-events-title.h3 { font-size: 2.3rem; }
}

/* the footer right panel pads with calc((100vw - 1284px)/3), which balloons to
   400px+ on wide monitors and crushes the heading into a narrow column */
@media screen and (min-width: 1315px) {
  .site-footer-right {
    padding-right: min(calc((100vw - 1284px) / 3), 90px);
  }
}
.site-footer-events-title,
.site-footer-events-title.h3 {
  width: 100%;
  max-width: none;
}

/* skip link: theme ships the markup but this copy predates the CSS, so it
   rendered visibly above the header. Off-screen until keyboard focus. */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: #FFFFFF;
  border: 2px solid #5F1C62;
  color: #5F1C62;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 22px;
  text-decoration: underline;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  left: 8px;
  top: 8px;
  outline: 3px solid #F1BF2A;
  outline-offset: 2px;
}

/* ---- header: white bar with the purple-lettered logo (supersedes the
   purple header block earlier in this file) ---- */
.site-header,
.site-header.scrolling-up,
.site-header.no-hero {
  background: #FFFFFF;
}
.site-header .primary-nav-wrap nav ul li a,
.site-header.scrolling-up .primary-nav-wrap nav ul li a {
  color: #5F1C62;
}
.site-header .primary-nav-wrap nav > ul.primary-menu > li > a:hover,
.site-header .primary-nav-wrap nav > ul.primary-menu > li > a.highlighted,
.site-header .primary-nav-wrap nav > ul.primary-menu > li.active > a,
.site-header.scrolling-up .primary-nav-wrap nav > ul.primary-menu > li > a:hover,
.site-header.scrolling-up .primary-nav-wrap nav > ul.primary-menu > li > a.highlighted {
  background-color: transparent !important;
  color: #D2222A !important;
}
/* dropdown: keep the white card, add a light border so it reads off the white bar */
.site-header .primary-nav-wrap nav ul.sub-menu,
.site-header.scrolling-up .primary-nav-wrap nav ul.sub-menu {
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* ==========================================================================
   Client review fixes, September 2026. Ported from the Jazz & Ribs theme,
   which carries the same blocks and the same compiled bundle.
   ========================================================================== */

/* --- Waves cut off --------------------------------------------------------
 *
 * Two separate causes, both here.
 *
 * 1. The artwork and its squiggle overlay were pinned to a fixed 1440px frame
 *    at any width under 1440, so on a narrower screen the right hand side ran
 *    past the section and the section's overflow clipped it. They now scale
 *    with the viewport at every width.
 *
 * 2. The wave SVG is drawn on a 1440 x 873 canvas but the text-wave block
 *    renders it into a 1440 x 756 box, and "slice" centred that mismatch, so
 *    it took 64px off the top and 64px off the bottom. The bottom is solid
 *    colour and the loss there does not show; the top is the crest of the
 *    wave, which is what was being cut off. The blocks now anchor the slice
 *    to the top (xMidYMin), so the whole crest is in frame and the crop falls
 *    entirely in the solid fill below, where the lower gradient covers it.
 *
 * The ratios below are the SVG's own declared dimensions rather than the
 * rounded 1.64 and 1.9 the bundle used, which were themselves shaving a
 * little off the artwork.
 */
/*
 * The wave fills its section and crops itself, rather than keeping its own
 * proportions and overflowing. The block already anchors the crop to the top
 * of the canvas, so what gets trimmed is the solid colour along the bottom
 * and the crest is always in frame, at any screen width.
 */
.ffitol__wave {
	top: 0;
}

.ffitol__wave--container {
	height: 100%;
}

.ffitol__wave--image {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
}

.fftw__container .ffitol__wave--container {
	height: auto;
}

.fftw__container .ffitol__wave--image {
	height: auto !important;
	aspect-ratio: 1440 / 756;
}

.ffitol__wave--squiggle,
.fftw__container .ffitol__wave--squiggle {
	width: 100%;
	height: auto;
	background-size: cover;
	aspect-ratio: 2.26 / 1;
}

/* --- Three-up cards (tracker item 1) --------------------------------------
 *
 * Buttons sit on the floor of the card and line up across all three however
 * much copy each card carries.
 *
 * The buttons on these cards were written into the card's text field as links
 * rather than added through the card's button repeater, so that field is made
 * a full height column and a trailing button in it gets pushed down. The
 * margin on the last paragraph guarantees the gap on the tallest card, where
 * there is no slack left for the auto margin to take up.
 */
.column-cards__cards {
	align-items: stretch;
}

.column-cards__card {
	height: 100%;
}

.column-cards__card--content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	/* The card centres its children, which otherwise shrinks this to its text. */
	width: 100%;
}

.column-cards__card--content > p:last-of-type {
	margin-bottom: 30px;
}

.column-cards__card--content > .btn {
	margin-top: auto;
	/* The card's text field underlines every link in it, which is right for a
	   link inside a sentence and wrong for a button. */
	text-decoration: none;
	/* A column layout would otherwise stretch every button to the full card
	   width, which is only right for the ones already set to block. */
	align-self: center;
}

.column-cards__card--content > .btn-block {
	align-self: stretch;
}

/* ==========================================================================
   Client review fixes, part two. September 2026.
   ========================================================================== */

/* --- Footer (tracker item 2) ----------------------------------------------
 *
 * Three changes to the right hand panel and the social row:
 *
 *  - the panel runs the site's three brand colours instead of a flat red,
 *    on the same diagonal the waves use so it reads as part of the family;
 *  - the stroke over it is white rather than yellow and drops to a quarter
 *    opacity, which is carried in the SVG itself (footer-stroke-white.svg)
 *    rather than here, because the stroke and the gradient are two layers of
 *    one background and CSS opacity would take the gradient with it;
 *  - the social chips go white with the purple glyph, and turn yellow on
 *    hover. They were a mint green that belongs to a different site.
 */
.site-footer-right {
	background-color: #5F1C62;
	background-image:
		url("../img/footer-stroke-white.svg"),
		linear-gradient(158deg, #5F1C62 0%, #D2222A 54%, #F1BF2A 100%);
	background-repeat: no-repeat, no-repeat;
	background-position: 0 0, 0 0;
	background-size: auto, cover;
}

.site-footer-social-link-icon {
	background-color: #FFFFFF;
	color: #5F1C62;
}

.site-footer-social-link:hover .site-footer-social-link-icon {
	background-color: #F1BF2A;
	color: #5F1C62;
}

/* --- Column card icons (tracker item 4) -----------------------------------
 *
 * The icons are uploaded artwork used as a background image, so there is no
 * fill to set. Taking them to black and then inverting flattens whatever
 * colour they arrive in to pure white, which also means a re-upload in a
 * different colour still comes out right.
 */
.column-cards__card--icon {
	filter: brightness(0) invert(1);
}

/* --- Card hover text (tracker item 5) -------------------------------------
 *
 * The theme inverts the link text when the arch slides up behind it, on the
 * assumption that the arch contrasts with the card. Here every arch is the
 * brand purple and every label is white, so the inversion put near-black
 * text on a purple arch. The label keeps the colour it was given.
 */
.ffitc__card--link:hover .ffitc__card--link-text.content-light {
	color: #FFFFFF;
}

/* --- Gradient line (tracker item 6) ---------------------------------------
 *
 * The rule under the 30/70 block was a flat image left over from the theme
 * it was built from. It is now drawn in CSS from the site's own three
 * colours, so it matches the waves, the footer and the nav rule, and it
 * stays sharp at any width.
 */
.tsit__border {
	background-image: linear-gradient(90deg, #5F1C62 0%, #D2222A 52%, #F1BF2A 100%);
	border-radius: 3px;
}

/* --- Headings inside light copy (tracker item 18) -------------------------
 *
 * The light and dark content classes only ever coloured the block's own text
 * and its paragraphs, so a heading typed into the editor kept the global
 * heading colour. On a dark block that left purple headings on purple. Only
 * the light case is set here: a heading on a light background is already the
 * right colour, and forcing it would flatten the purple the design wants.
 */
.content-light h1,
.content-light h2,
.content-light h3,
.content-light h4,
.content-light h5,
.content-light h6,
.content-light .h1,
.content-light .h2,
.content-light .h3,
.content-light .h4,
.content-light .h5,
.content-light .h6 {
	color: #FFFFFF;
}

/* --- Background squiggle without a wave (tracker item 7) ------------------
 *
 * The squiggle was only ever drawn inside the wave, so a block with the
 * squiggle switched on and no wave colours rendered nothing at all. It now
 * has its own wrapper, and because the artwork is a white stroke that would
 * be invisible on a light block, it is painted through a mask so it can take
 * the block's colour. The stroke's own 12.8% opacity is baked into the
 * artwork, so the colours below are set solid and still land soft.
 */
.ffitol__wave--bare {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	z-index: 1;
	pointer-events: none;
}

.ffitol__wave--squiggle-bare {
	background-image: none;
	-webkit-mask-image: url("../img/squiggle-stroke.svg");
	        mask-image: url("../img/squiggle-stroke.svg");
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	        mask-size: cover;
}

.ffitol__wave--squiggle-bare.squiggle-light {
	background-color: #FFFFFF;
}

.ffitol__wave--squiggle-bare.squiggle-dark {
	background-color: #5F1C62;
}

/* --- Column count on the text card block (tracker item 12) ----------------
 *
 * The block laid every card out in a single row, however many there were.
 * It now takes a column count from the block itself, and falls back to the
 * number of cards, which is exactly what it did before, so blocks that have
 * not been given a count are untouched. Below tablet it drops to two and
 * then to one regardless of the setting.
 */
.ctc__cards--container {
	grid-auto-flow: row;
	grid-template-columns: repeat(var(--ctc-columns, 3), minmax(0, 1fr));
	gap: 40px 4%;
}

@media screen and (max-width: 991px) {
	.ctc__cards--container {
		grid-template-columns: repeat(min(var(--ctc-columns, 3), 2), minmax(0, 1fr));
		gap: 30px 4%;
	}
}

@media screen and (max-width: 600px) {
	.ctc__cards--container {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Punchlist, second pass. September 2026.
   Rules here supersede anything earlier in this file.
   ========================================================================== */

/* --- Arch button clipped on hover (home, block 4) -------------------------
 *
 * The arch sits flush against the top of the link, which hides its overflow,
 * and the theme then lifts it 6px on hover. There was nowhere for it to go,
 * so the lift sliced 6px off the top of the arch. The card already rises and
 * the photo already zooms on hover, so the arch just holds still.
 */
.ffitc__card:hover .ffitc__card--link-background {
	transform: translateX(-50%);
}

/* --- Footer stroke --------------------------------------------------------
 *
 * The line is the artwork the Scioto Mile footer uses, which was sitting in
 * this theme all along; the earlier pass drew a replacement by hand instead
 * of reaching for it. It is painted through a mask so the same file can be
 * white here at a quarter opacity while it stays green over there.
 */
.site-footer-right {
	position: relative;
	background-color: #5F1C62;
	background-image: linear-gradient(158deg, #5F1C62 0%, #D2222A 54%, #F1BF2A 100%);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover;
}

.site-footer-right::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #FFFFFF;
	opacity: 0.25;
	-webkit-mask-image: url("../img/footer-stroke.webp");
	        mask-image: url("../img/footer-stroke.webp");
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
	        mask-position: 0 0;
	pointer-events: none;
}

/* Keep the footer's own content above the stroke. */
.site-footer-right > * {
	position: relative;
	z-index: 1;
}

/* --- Dotted rule on the 30/70 block (about, block 3) ----------------------
 *
 * This rule is a dotted strip, not a solid one; the earlier pass replaced the
 * artwork with a plain gradient and lost the dots. The original strip is back,
 * used as a mask so the dots carry the site's three colours.
 */
.tsit__border {
	height: 3px;
	border-top: none;
	opacity: 1;
	background-image: linear-gradient(90deg, #5F1C62 0%, #D2222A 52%, #F1BF2A 100%);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-mask-image: url("../img/gradient-dotted-border.webp");
	        mask-image: url("../img/gradient-dotted-border.webp");
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	        mask-size: cover;
	border-radius: 0;
}

/* --- Column card icons (home, block 3) -----------------------------------
 *
 * The What / When / Where icons from Jazz & Ribs, each painted in its own
 * card's heading colour: white on the purple and red cards, brand purple on
 * the yellow one. Masking rather than filtering means the colour is set
 * outright rather than approximated, and a re-upload in any colour still
 * comes out right.
 */
.column-cards__card--icon {
	/* Supersedes the flatten-to-white filter from the first pass. */
	filter: none;
	background-image: none;
	background-color: currentColor;
	-webkit-mask-image: var(--card-icon);
	        mask-image: var(--card-icon);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.column-cards__card--icon.icon-light {
	color: #FFFFFF;
}

.column-cards__card--icon.icon-dark {
	color: #5F1C62;
}

/* --- Links inside light copy ---------------------------------------------
 *
 * The site's link colour is the brand purple, which is also the colour of
 * every dark block and the footer, so a link typed into light copy was
 * purple on purple and effectively invisible. Links in a block set to light
 * text now read white, the way they do on Scioto Mile and Jazz & Ribs.
 *
 * Buttons are left alone. They carry their own fill and text colour, and a
 * white label on a white pill would disappear the same way.
 */
.content-light a:not([class*="btn"]) {
	color: #FFFFFF;
}

.content-light a:not([class*="btn"]):hover,
.content-light a:not([class*="btn"]):focus {
	color: #F1BF2A;
}