/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* ============================================================
   BWL — Navy rounded-pill header
   ------------------------------------------------------------
   Restyles the Blocksy "type-1" header into a navy band with a
   white rounded-pill container and a pill-shaped orange button.

   Brand colours come from Blocksy's palette:
     navy   = var(--theme-palette-color-1)  (#00085E)
     orange = var(--theme-palette-color-2)  (#FF4A00)
   Tweak the values marked TWEAK below to taste.
   ============================================================ */

/* 1) Navy full-width band behind the header.
      The padding creates the navy "gutter" around the white pill. */
#header.ct-header {
	background-color: var(--theme-palette-color-1); /* navy */
	padding: 14px 35.5px;                            /* TWEAK gutter — 35.5px sides => pill ≈ 1369px wide @1440 */

	/* Vertical rhythm. The pill = pad-y + top-row + middle-row + pad-y.
	   - pad-y  : white space above the utility row / below the main nav
	   - top-h  : utility-row height  (keep compact -> small gap to nav)
	   - mid-h  : main-row height     (keep compact)
	   Adjust these three; the logo/search/button centring auto-updates. */
	--bwl-pad-y: 22px;   /* TWEAK outer top/bottom padding */
	--bwl-top-h: 28px;   /* TWEAK utility-row height */
	--bwl-mid-h: 34px;   /* TWEAK main-row height */

	--bwl-logo-h: 60px;  /* TWEAK logo render height (Figma: ~60px) */
}

/* 2) The white rounded pill that wraps the whole header
      (top utility row + main logo/nav/button row). */
#header.ct-header > [data-device] {
	background-color: #ffffff;
	border-radius: 100px;                            /* Figma: 100px (fully-rounded ends) */
	box-shadow: 0 6px 20px rgba(0, 8, 94, 0.10);
	padding-block: var(--bwl-pad-y);                 /* outer top/bottom white padding */
}

/* 3) Tighten the rows so the pill is ~100px tall (30 + 70).
      Blocksy defaults: top row 50px, middle row 120px. */
#header [data-row="top"] {
	--height: var(--bwl-top-h);
}
#header [data-row="middle"] {
	--height: var(--bwl-mid-h);
}

/* Logo — Figma content box 184 × 60.1.
   object-fit:contain keeps the live (taller) logo asset undistorted,
   scaling it to ~60px tall and left-aligning it within the box.
   Also stops the container from reserving the full image height
   (which otherwise stretches the row back to ~139px). */
#header .site-logo-container img {
	width: auto;
	height: var(--bwl-logo-h);
}
#header .site-branding,
#header .site-logo-container {
	height: auto;
}
/* Centre the columns so nothing stretches the row past --height. */
#header [data-row="middle"] .ct-container {
	align-items: center;
}

/* Vertically centre the logo and the search+button over the FULL pill
   height (both rows), while the two menu texts stay stacked in the
   centre. The side columns are pulled up by the top row's height (30px)
   and given the full pill height (100px) with centred contents. */
#header [data-device="desktop"] [data-row="middle"] [data-column="start"],
#header [data-device="desktop"] [data-row="middle"] [data-column="end"] {
	align-self: start;
	margin-top: calc(-1 * var(--bwl-top-h));               /* pull up by top-row height */
	height: calc(var(--bwl-top-h) + var(--bwl-mid-h));     /* span the full pill */
	display: flex;
	align-items: center;
}
#header [data-device="desktop"] [data-row="middle"] [data-column="end"] {
	justify-content: flex-end;
}

/* Align the header content with the page content column: same 1600px
   centred container as the body, so the logo's left edge and the button's
   right edge line up exactly with the content area edges. */
#header [data-device="desktop"] [data-row="top"] .ct-container,
#header [data-device="desktop"] [data-row="middle"] .ct-container {
	max-width: var(--theme-normal-container-max-width, 1600px);
	margin-inline: auto;
}

/* 4) Clear the individual rows' own white backgrounds so the
      single pill shows through behind both rows. */
#header [data-row="top"],
#header [data-row="middle"],
#header .ct-sticky-container,
#header .ct-sticky-container > [data-sticky] {
	background-color: transparent !important;
}

/* The sticky wrapper carries its own fixed height; collapse it so the
   middle row's height (--bwl-mid-h) is what actually applies. */
#header [data-device="desktop"] .ct-sticky-container,
#header [data-device="desktop"] .ct-sticky-container > [data-sticky] {
	min-height: 0 !important;
	height: auto !important;
}

/* 5) "Become a member" → fully rounded orange pill button. */
#header .ct-header-cta .ct-button {
	border-radius: 999px;
	padding-inline: 28px;
}

/* 6) Header typography.
      Figma specifies "Nobel", but that font is not yet hosted on the
      site, so we use Arial for now. When Nobel is set up, swap the
      font-family below to: "Nobel", Arial, sans-serif (and add the
      matching @font-face). */
#header .ct-menu-link {
	font-family: Arial, Helvetica, sans-serif;   /* Nobel not hosted yet */
	color: var(--theme-palette-color-1);         /* #00085E */
	text-transform: none;                        /* Figma is sentence case, not UPPERCASE */
	overflow-wrap: break-word;                   /* word-wrap: break-word */
}

/* Utility row — Figma: 14px / 400 / 20px */
#header #header-menu-1 .ct-menu-link {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

/* Main navigation — Figma: 16px / 700 / 24px */
#header #header-menu-2 .ct-menu-link {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

/* 7) Utility row order to match Figma: About us · News & media · Login.
      (Visual reorder only — or drag the items in Appearance → Menus and
      delete this block.) */
#header #header-menu-1 .menu {
	display: flex;
	align-items: center;
}
#header #header-menu-1 .menu > li {
	order: 2;
}
#header #header-menu-1 .menu > li:has(a[href*="/about"]) {
	order: 1;
}
#header #header-menu-1 .menu > li:has(a[href*="/news"]) {
	order: 2;
}
#header #header-menu-1 .menu > li:has(a[href*="login"]) {
	order: 3;
}

/* 8) Person-avatar icon before "Login" (from the Figma SVG). */
#header #header-menu-1 a[href*="login"]::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	vertical-align: -3px;
	/* Same Figma avatar, with the circle bumped from 10% to 18% navy so
	   it's actually visible on the white pill. */
	background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'><rect width='15' height='15' rx='7.5' fill='%2300085E' fill-opacity='0.18'/><path fill-rule='evenodd' clip-rule='evenodd' d='M9.75009 6C9.75009 7.24264 8.74273 8.25 7.50009 8.25C6.25745 8.25 5.25009 7.24264 5.25009 6C5.25009 4.75736 6.25745 3.75 7.50009 3.75C8.74273 3.75 9.75009 4.75736 9.75009 6ZM9.00009 6C9.00009 6.82843 8.32852 7.5 7.50009 7.5C6.67166 7.5 6.00009 6.82843 6.00009 6C6.00009 5.17157 6.67166 4.5 7.50009 4.5C8.32852 4.5 9.00009 5.17157 9.00009 6Z' fill='%2300085E'/><path d='M7.50009 9.375C5.0722 9.375 3.00357 10.8107 2.21558 12.822C2.40754 13.0126 2.60975 13.1929 2.82132 13.362C3.4081 11.5154 5.24886 10.125 7.50009 10.125C9.75133 10.125 11.5921 11.5154 12.1789 13.362C12.3904 13.1929 12.5926 13.0126 12.7846 12.822C11.9966 10.8107 9.92799 9.375 7.50009 9.375Z' fill='%2300085E'/></svg>") center / contain no-repeat;
}

/* 9) Sticky header (scrolled state). Blocksy appends "yes" to data-sticky
      when stuck; only the middle row sticks (the utility row scrolls away),
      giving the single-row pill from the design. */
#header [data-sticky*="yes"] [data-row="middle"] {
	background: #ffffff !important;               /* row bg is forced transparent in the normal state */
	border-radius: 100px;
	box-shadow: 0 4px 10px rgba(0, 8, 94, 0.10);  /* Figma sticky shadow */
	margin: 12px 35.5px 0;                        /* TWEAK top offset + same side gutter as the pill */
	min-height: 68px;                             /* Figma sticky pill height */
}

/* compact icon logo inside the slim sticky pill */
#header [data-sticky*="yes"] .site-logo-container img {
	height: 32px;                                 /* TWEAK sticky logo size */
}

/* Reset the two-row merging math (columns are pulled up by the utility-row
   height in the normal state) — in the stuck single row they just centre. */
#header [data-sticky*="yes"] [data-row="middle"] [data-column="start"],
#header [data-sticky*="yes"] [data-row="middle"] [data-column="end"] {
	margin-top: 0;
	height: auto;
}

/* Back-to-top button (injected by js/header-top.js): hidden normally;
   when stuck it replaces the search icon, like the design. */
.bwl-top-btn {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}
#header [data-sticky*="yes"] .bwl-top-btn { display: inline-flex; }
#header [data-sticky*="yes"] .ct-header-search { display: none; }

/* 11) Header search dropdown (injected by js/header-search.js).
       Grey panel hanging from under the pill; white pill input with the
       orange Search button inside. ~6 of 12 columns wide. */
#header.ct-header {
	position: relative;
	z-index: 100;                /* above all content (incl. blocks with their own z-indexes) */
}
#header [data-device="desktop"] {
	position: relative;          /* anchor for the panel */
}
.bwl-search-panel {
	position: absolute;
	top: calc(100% - 16px);      /* top edge tucks under the pill */
	left: 50%;
	transform: translate(-50%, -8px);
	z-index: -1;                 /* behind the pill's white bg => clean tuck */
	width: min(728px, 92vw);     /* 6 of 12 columns */
	padding: 40px 48px 24px;     /* extra top = the tucked part */
	background: #ffffff;         /* same as the header pill */
	border-radius: 0 0 20px 20px;
	box-shadow: 0 10px 24px rgba(0, 8, 94, 0.08);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.bwl-search-open .bwl-search-panel {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.bwl-search-panel__form { position: relative; }
/* !important where Blocksy's global form-field styles would override
   (they force their own min-height, border and radius on inputs). */
#header .bwl-search-panel__input {
	width: 100%;
	height: 40px !important;
	min-height: 0 !important;
	padding: 8px 116px 8px 16px;
	background-color: #ffffff !important;
	background-image: none !important;
	box-shadow: none !important;          /* Blocksy/browser inset shadow = the grey tint */
	-webkit-appearance: none;
	appearance: none;
	border: 0.5px solid var(--theme-palette-color-1) !important;
	border-radius: 100px !important;   /* fully round, like the design */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: var(--theme-palette-color-1);
	outline: none;
}
#header .bwl-search-panel__input::placeholder {
	color: var(--theme-palette-color-1);
	opacity: 0.65;
}
/* button spans the input's full height and sits flush on its right end */
#header .bwl-search-panel__submit {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	height: auto;
	padding: 0 24px;
	border: 0;
	border-radius: 100px;
	background: var(--theme-palette-color-2);
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	cursor: pointer;
}

/* the search icon becomes an X while the panel is open */
.bwl-search-x { display: none; }
.bwl-search-open .ct-header-search .ct-icon { display: none; }
.bwl-search-open .ct-header-search .bwl-search-x { display: block; }

/* 12) Header mega dropdown (markup augmented by js/header-mega.js).
       Hovering a main item underlines it and opens a white panel under the
       pill: parent title + orange Overview button left, child items right. */

/* hide Blocksy's chevron-down indicators on items with sub-menus */
#header .ct-toggle-dropdown-desktop,
#header .ct-toggle-dropdown-desktop-ghost,
#header .menu-item-has-children > a > .ct-icon-container {
	display: none !important;
}

/* main item: orange underline on hover (stays while the panel is hovered) */
.bwl-mega-nav > ul > li:hover > a,
.bwl-mega-nav > ul > li.bwl-mega-open > a {
	text-decoration: underline;
	text-decoration-color: var(--theme-palette-color-2);
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

/* panel anchored to the nav, not the individual item */
.bwl-mega-nav { position: relative; }
.bwl-mega-nav .menu-item-has-children { position: static !important; }

.sub-menu.bwl-mega {
	position: absolute !important;
	left: -30px !important;                 /* TWEAK panel x vs nav start */
	right: auto !important;
	/* flush with the pill's bottom edge (nav bottom + 22px pad-y, minus 1px
	   so no hairline gap shows). Overlapping the pill doesn't work — the
	   sticky wrapper's stacking context keeps the panel above the pill. */
	top: calc(100% + 21px) !important;
	transform: none !important;
	z-index: 1 !important;
	width: min(728px, 92vw) !important;     /* same as the search dropdown */
	min-height: 230px;
	margin: 0 !important;
	padding: 40px 48px 40px !important;     /* TWEAK top: gap below the menu titles */
	background: #f2f3f7 !important;         /* Figma panel grey */
	border-radius: 0 0 20px 20px !important;
	box-shadow: 0 14px 24px rgba(0, 8, 94, 0.08) !important;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s;
}
.bwl-mega-nav .menu-item-has-children:hover > .sub-menu.bwl-mega,
.bwl-mega-nav .menu-item-has-children:focus-within > .sub-menu.bwl-mega,
.bwl-mega-nav .menu-item-has-children.bwl-mega-open > .sub-menu.bwl-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
/* invisible bridge so the pointer can travel from the link into the panel */
.sub-menu.bwl-mega::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -34px;
	height: 34px;
}

/* left column: parent title + Overview button (injected) */
.bwl-mega-head {
	position: absolute;
	top: 40px;       /* keep in step with the panel's top padding */
	left: 48px;
	width: 38%;
}
.bwl-mega-title {
	display: block;
	margin-bottom: 24px;
	font-size: 32px;
	font-weight: 900;
	line-height: 32px;
	text-transform: uppercase;
	color: var(--theme-palette-color-1);
}
.bwl-mega-overview {
	display: inline-flex;
	padding: 8px 20px;
	border-radius: 20px;
	background: var(--theme-palette-color-2) !important;
	color: #ffffff !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 24px;
	text-decoration: none !important;
}

/* right column: the child items, each with a circled chevron */
.sub-menu.bwl-mega > li:not(.bwl-mega-head) {
	margin: 0 0 16px calc(38% + 24px);
}
.sub-menu.bwl-mega > li:not(.bwl-mega-head) > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	color: var(--theme-palette-color-1) !important;
	text-decoration: none;
}
.sub-menu.bwl-mega > li:not(.bwl-mega-head) > a:hover {
	text-decoration: underline;
}
.sub-menu.bwl-mega > li:not(.bwl-mega-head) > a::after {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0.5C15.2467 0.5 19.5 4.7533 19.5 10C19.5 15.2467 15.2467 19.5 10 19.5C4.7533 19.5 0.5 15.2467 0.5 10C0.5 4.7533 4.7533 0.5 10 0.5Z' stroke='%2300085E'/%3E%3Cpath d='M7.5 5L12.5 9.93091L7.5 15' stroke='%2300085E' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 10) Smaller screens: tighten the gutter. */
@media (max-width: 999px) {
	#header.ct-header {
		padding: 10px 14px;
	}
}


/* ============================================================
   FOOTER  (Blocksy "type-1" footer)
   ------------------------------------------------------------
   Middle row columns (DOM order, left -> right):
     widget-area-4 = brand  (STAY STRONG banner + newsletter + socials)
     widget-area-3 = Getting started
     widget-area-2 = Courses
     widget-area-1 = Policies
   Bottom row: copyright (left) + widget-area-5 login menu (right)
   ============================================================ */

#footer.ct-footer {
	--bwl-footer-pad: 74px;                          /* TWEAK top/bottom padding */
	--bwl-footer-navy: #000648;                      /* Figma footer bg */
	--bwl-banner-w: 1040px;                          /* TWEAK banner SIZE (viewBox is now 855 wide) */
	--bwl-banner-text-y: 57px;                       /* text vertical position (stays fixed as the size changes) */
	--bwl-banner-nudge: 0px;                         /* fine-tune banner horizontal alignment */
	/* derived: keep the text pinned and "For news" clearing the band as size changes (banner viewBox: -280 0 855 210) */
	--bwl-banner-top: calc(var(--bwl-banner-text-y) - var(--bwl-banner-w) * 114.4 / 855);
	--bwl-banner-clear: calc(13px + var(--bwl-banner-w) * 80.2 / 855);
	position: relative;
	overflow: hidden;
	background-color: var(--bwl-footer-navy);
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	padding: var(--bwl-footer-pad) 0 56px;           /* top 74, bottom 56 */
	border-radius: 20px 20px 0 0;                    /* Figma: 20px top corners */
}

/* --- "STAY STRONG" banner: anchored to the footer's top-LEFT corner.
   White band bleeds off the left edge, orange reaches the top edge.
   (Footer has overflow:hidden, so the bleed is clipped cleanly.) --- */
#footer.ct-footer::before {
	content: "";
	position: absolute;
	/* Align the "STAY STRONG" text with the content column's left edge:
	   container left  -  the text's inset within the banner SVG (72/575). */
	left: calc(
		max(0px, (100% - var(--theme-normal-container-max-width, 1600px)) / 2)
		- (var(--bwl-banner-w) * 352.4 / 855)
		+ var(--bwl-banner-nudge, 0px)
	);
	top: var(--bwl-banner-top, -50px);               /* negative => orange tip clipped by overflow */
	width: var(--bwl-banner-w, 540px);               /* TWEAK banner size */
	aspect-ratio: 855 / 210;
	background: url("img/footer-banner.svg?v=2") no-repeat left top / contain;   /* ?v bumped: the SVG viewBox changed, force browsers/CDN to re-fetch */
	pointer-events: none;
	z-index: 1;
}

/* --- Decorative BWL mark (full icon = both pieces in one SVG), anchored to
   the footer's top-right corner. Anchoring the group top-right places the
   big curve at the top and the small piece ~27px below the columns,
   matching the Figma group geometry. --- */
#footer.ct-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.10;                                   /* Figma group opacity */
	background: url("img/footer-swoosh-group.svg") no-repeat right top;
	background-size: auto 100%;                      /* full footer height; bottom touches the footer bottom */
}

/* keep content above the decorations */
#footer .ct-container { position: relative; z-index: 2; }

/* strip Blocksy's per-row vertical padding; control spacing ourselves */
#footer [data-row] > .ct-container { padding-block: 0; }
#footer [data-row="bottom"] { margin-top: 40px; }

/* --- Middle row: 4-column grid (brand wide + 3 link columns) --- */
#footer [data-row="middle"] > .ct-container {
	--grid-template-columns: 1fr 250px 250px 250px;  /* brand flexible, link cols 250px */
	column-gap: 42px;
	align-items: start;
}

/* --- Column headings (Getting started / Courses / Policies) --- */
#footer .widget-title {
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	margin: 0 0 16px;
}

/* --- Footer menu links --- */
#footer .widget-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
#footer .widget-menu li { margin-bottom: 8px; }
#footer .widget-menu a {
	color: #ffffff;
	text-decoration: none;
	font-size: 14px;
	line-height: 20px;
}
#footer .widget-menu a:hover { text-decoration: underline; }

/* --- Brand column --- (compact vertical spacing).
   padding-top pushes "For news" below the banner, which is now anchored to
   the footer's top-left corner (see #footer::before). Keep it ~= banner
   height so the content clears it. */
#footer [data-column="widget-area-4"] {
	padding-right: 30px;
	padding-top: var(--bwl-banner-clear, 165px);     /* TWEAK to match banner height */
}
#footer [data-column="widget-area-4"] > .ct-widget { margin: 0 0 18px; }
#footer [data-column="widget-area-4"] > .ct-widget:last-child { margin-bottom: 0; }

/* "For news, info and special offers" --- Figma: 20px / lh24.
   Targets the text widget directly (not by position). */
#footer [data-column="widget-area-4"] .widget_text p {
	font-size: 20px;
	line-height: 24px;
	margin: 0;
}

/* --- Newsletter form (Contact Form 7) --- Figma: cyan-20% pill + white Subscribe --- */
#footer .wpcf7 .flex-row {
	display: flex;
	align-items: center;
	max-width: 432px;                                /* Figma field width */
	border-radius: 100px;
	background: rgba(0, 204, 255, 0.20);             /* Figma cyan 20% */
}
#footer .wpcf7 .flex-col { margin: 0; }
#footer .wpcf7 .flex-col.flex-grow { flex: 1 1 auto; min-width: 0; }
#footer .wpcf7 p { margin: 0; }
#footer .wpcf7-email {
	width: 100%;
	padding: 10px 22px;
	border: 0;
	background: transparent;
	color: #ffffff;
	font-size: 18px;
	outline: none;
}
#footer .wpcf7-email::placeholder { color: rgba(255, 255, 255, 0.75); }
#footer .wpcf7-submit {
	padding: 10px 24px;
	border: 0;
	border-radius: 20px;                             /* Figma subscribe radius */
	background: #ffffff;
	color: #00085E;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
}
#footer .wpcf7 form > p {           /* "By subscribing..." line */
	margin-top: 13px;
	font-size: 12px;
	line-height: 16px;
}
#footer .wpcf7 a { color: #ffffff; text-decoration: underline; }

/* --- Socials (Blocksy social box) --- */
#footer .ct-block-wrapper > .widget-title { display: none; }   /* hide "Socials" heading */
#footer .ct-socials-block { margin-top: 8px; }
#footer .ct-social-box { display: flex; gap: 10px; }
#footer .ct-social-box a {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ffffff;
	border-radius: 50%;
}
#footer .ct-social-box a svg { width: 18px; height: 18px; fill: #ffffff; }
#footer .ct-social-box a:hover { background: #ffffff; }
#footer .ct-social-box a:hover svg { fill: var(--bwl-footer-navy); }

/* --- Bottom row: copyright (left) + login links (right) --- */
#footer [data-row="bottom"] > .ct-container {
	--grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 30px;
}
#footer .ct-footer-copyright p {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
}
#footer [data-column="widget-area-5"] .widget-menu {
	display: flex;
	justify-content: flex-end;
	gap: 22px;
}
#footer [data-column="widget-area-5"] .widget-menu li { margin: 0; }
#footer [data-column="widget-area-5"] .widget-menu a { font-size: 12px; line-height: 16px; }

/* --- Footer responsive --- */
@media (max-width: 999px) {
	#footer [data-row="middle"] > .ct-container {
		--grid-template-columns: 1fr 1fr;
		row-gap: 36px;
	}
	#footer [data-row="bottom"] > .ct-container {
		--grid-template-columns: 1fr;
		row-gap: 14px;
	}
	#footer [data-column="widget-area-5"] .widget-menu { justify-content: flex-start; }
}
@media (max-width: 600px) {
	#footer [data-row="middle"] > .ct-container { --grid-template-columns: 1fr; }
}


/* ============================================================
   Block overrides kept in the main stylesheet.
   This host caches the per-block stylesheets aggressively, but the main
   style.css busts via filemtime — so layout values that need to update
   reliably live here, with slightly higher specificity to win.
   ============================================================ */

/* Partner Cards — gap below the heading */
.bwl-partners .bwl-partners__title {
	margin-bottom: 77px;
}

/* Feature Cards — gap below the heading */
.bwl-feature .bwl-feature__title {
	margin-bottom: 77px;
}

/* Hero — sit flush under the navy header band (cancel Blocksy's
   content-area top padding when the hero is the first block). */
.entry-content > .bwl-hero.alignfull:first-child {
	margin-top: calc(-1 * var(--theme-content-vertical-spacing, 60px));
}

/* (Hero sizing/image rules now live in blocks/hero/style.css — the panel
   restructure for the speckle + event card baked them into the base.) */