/* ==========================================================================
   GCNB — supplemental styles (block styles + brand polish that theme.json
   cannot express). Loaded on the front end AND in the editor.
   ========================================================================== */

/* ---- Headings ---- */
/* Several headings already carried an inline uppercase transform while others
   were left in sentence case. Enforcing it here keeps every h1/h2 consistent no
   matter how the copy was typed into the editor. */
h1,
h2 {
	text-transform: uppercase;
}

/* Section headings resolved to ~56px at desktop and card titles to ~39px, which
   overpowered the body copy beneath them. These bring both tiers down while
   keeping the h1 > h2 > card-h2 > body ladder intact and staying fluid, so
   phones get a proportionally smaller size rather than a fixed one.
   WordPress emits its preset size classes with !important, so matching them
   takes the same. */
h2:not([class*="-font-size"]),
h2.has-xx-large-font-size {
	font-size: clamp(26px, 1.5rem + 1.1vw, 42px) !important;
}

h2.has-x-large-font-size {
	font-size: clamp(21px, 1.2rem + 0.85vw, 32px) !important;
}

/* A heading dropped into a dark section without an explicit colour would render
   in the default navy and disappear. Anything already coloured keeps its own. */
.has-navy-deep-background-color h1:not(.has-text-color),
.has-navy-deep-background-color h2:not(.has-text-color),
.has-navy-background-color h1:not(.has-text-color),
.has-navy-background-color h2:not(.has-text-color) {
	color: #ffffff;
}

/* ---- Body copy: justified ---- */
/* Scoped to page content so header and footer chrome are untouched, and skips
   any paragraph that was given an explicit alignment in the editor — centred
   hero subtitles, captions and CTAs keep the alignment they were authored with.
   Only multi-line paragraphs change: a justified last line stays start-aligned,
   so single-line copy renders identically.
   hyphens keeps word spacing sane where a paragraph sits in a narrow card
   column, which is where unhyphenated justification opens visible rivers. */
.wp-block-post-content p:not([class*="has-text-align"]) {
	text-align: justify;
	hyphens: auto;
}

/* Short label and caption paragraphs are data, not prose. They carry no
   alignment class of their own, so the rule above would catch them and stretch
   the first line of any that wrap. These have to match its specificity exactly
   (two classes + the element) and sit after it to win. */
.wp-block-post-content .gcnb-nstat p,
.wp-block-post-content p.gcnb-nstat-label,
.wp-block-post-content p.gcnb-eyebrow,
.wp-block-post-content .gcnb-dedicated-list p {
	text-align: left;
	hyphens: manual;
}

/* ---- Block style: Card (core/group .is-style-card) ---- */
.wp-block-group.is-style-card {
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--border, #e8e8e8);
	border-radius: 14px;
	padding: clamp(18px, 2.4vw, 28px);
}

/* On dark sections the white card background would swallow the white text, so
   cards there become translucent panels instead (see: goals-principles). */
.has-navy-deep-background-color .wp-block-group.is-style-card,
.has-navy-background-color .wp-block-group.is-style-card {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.2);
}
.has-navy-deep-background-color .wp-block-group.is-style-card:hover,
.has-navy-background-color .wp-block-group.is-style-card:hover {
	background: rgba(255, 255, 255, 0.09);
	box-shadow: none;
}

/* Figma-exported SVG icons carry no pixel dimensions; without this an image
   block that only sets a width falls back to the 150px default height and the
   icon is stretched. */
.wp-block-image img[src*=".svg"] {
	height: auto;
}

/* Icon glyphs have different natural widths, so pinning them by width leaves a
   row of icons at visibly different heights. Pin the height instead — overrides
   the per-block inline width the image block emits. */
.wp-block-column.is-style-stat-tile > .wp-block-image img,
.has-navy-deep-background-color .wp-block-group.has-border-color > .wp-block-image img {
	width: auto !important;
	height: 30px;
}

/* ---- Block style: Stat tile (core/group or core/column .is-style-stat-tile) ---- */
/* The About page applies this style to columns, not groups. With only the group
   selector here the tiles inherited nothing and rendered as hard-edged squares
   with the label jammed against the bottom edge. */
.wp-block-group.is-style-stat-tile,
.wp-block-column.is-style-stat-tile {
	border-radius: 14px;
	padding: 26px 20px 22px;
	text-align: center;
}

/* Groups carry no background of their own; columns take theirs from the block's
   background-colour class, so only the group variant needs a fill. */
.wp-block-group.is-style-stat-tile {
	background: rgba(255, 255, 255, 0.08);
}

/* Hairline edge, matching the bordered benefit tiles further down the page. */
.wp-block-column.is-style-stat-tile {
	border: 1px solid rgba(255, 255, 255, 0.14);
}

/* The 45px xx-large preset overpowers a ~300px tile — "3000+" ran nearly edge
   to edge. Scale with the viewport so the figure always sits inside the tile. */
.is-style-stat-tile .wp-block-heading {
	font-size: clamp(30px, 2.6vw, 38px);
	line-height: 1.1;
	margin: 14px 0 4px;
}

.is-style-stat-tile > .wp-block-image {
	margin-bottom: 0;
}

/* Four stat tiles stacked full-width on a phone is a very tall column; pair
   them up instead. */
@media (max-width: 781px) {
	.gcnb-stat-row.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}

	.gcnb-stat-row.wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		margin: 0;
	}
}

/* ---- Block style: Outline Gold button ---- */
.wp-block-button.is-style-outline-gold .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary, #eba52c);
	border: 1px solid var(--wp--preset--color--primary, #eba52c);
}
.wp-block-button.is-style-outline-gold .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary, #eba52c);
	color: #ffffff;
}

/* ---- Header (template part) ---- */
.gcnb-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.gcnb-header .wp-block-navigation {
	gap: 30px;
}
.gcnb-header .wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 600;
}
.gcnb-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary, #eba52c) !important;
}

/* ---- Footer link columns ---- */
.gcnb-footer a { text-decoration: none; transition: color .15s ease; }
.gcnb-footer a:hover { color: #ffffff; }
.gcnb-foot-heading { font-weight: 600; }

/* Footer menus are Navigation blocks so they can be edited under Appearance →
   Navigation. These rules reproduce the plain link list they replaced: the
   2.1 line-height did the vertical spacing, so the flex layout's gap is zeroed
   in the block itself and the rhythm comes from line-height as before. */
.gcnb-footer .gcnb-foot-nav .wp-block-navigation__container {
	gap: 0;
	align-items: flex-start;
}
/* The 2.1 line-height carried the rhythm; the link colour comes from the
   theme.json link element, exactly as it did for the plain list. */
.gcnb-footer .gcnb-foot-nav .wp-block-navigation-item__content {
	line-height: 2.1;
}
/* Core pins navigation items to `color: inherit` with a deliberately doubled
   selector, so a footer menu takes its colour from the block's Text setting
   (currently Primary) rather than from a link colour. Hover has to clear that
   same specificity, hence the three classes here. */
.gcnb-footer .gcnb-foot-nav .wp-block-navigation-item__content:hover,
.gcnb-footer .gcnb-foot-nav .wp-block-navigation-item__content:focus {
	text-decoration: none;
	color: #ffffff;
}
/* Navigation items now carry current-menu-item and aria-current on the page
   being viewed. The links are left looking the same as every other one — the
   hook is here if the current page should ever be marked visually. */

/* ---- Hero cover blocks: keep titles tight ---- */
.gcnb-hero .wp-block-cover__inner-container { max-width: 1000px; }

/* ---- Social icon chips ---- */
.gcnb-social .wp-block-social-link { background: #5b6b86; border-radius: 8px; }
.gcnb-social .wp-block-social-link:hover { background: var(--wp--preset--color--primary, #eba52c); }

/* ==========================================================================
   People grids (Board of Directors, Our Team)
   ========================================================================== */
/* A rigid 3-column row leaves a hole wherever the count doesn't divide evenly.
   Wrapping and centring means 7 cards read as 4 + 3 centred instead. */
.gcnb-people {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Core's flex layout defaults to align-items:center, which leaves cards of
	   differing text length floating at different heights within a row. */
	align-items: stretch;
	align-content: flex-start;
	gap: 24px;
}
.gcnb-people > .gcnb-person {
	flex: 0 1 296px;
	max-width: 296px;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.gcnb-person > .wp-block-image { margin: 0 0 4px; }
/* Headshots are supplied at assorted crops and aspect ratios; one fixed frame
   keeps every face the same size across the grid. */
.gcnb-person > .wp-block-image img {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: center top;
	border-radius: 10px;
}
/* 22px wrapped the longer names onto a second line, which made the cards ragged.
   18px keeps every name on one line inside a 296px card. */
.gcnb-person h3 {
	margin: 0;
	font-size: 18px;
	line-height: 1.25;
}
.gcnb-person .gcnb-person-role,
.gcnb-person .gcnb-person-affil { margin: 0; }
.gcnb-person .gcnb-person-affil { margin-top: 2px; }

/* Monogram stand-in until real headshots are supplied. */
.gcnb-person-avatar {
	width: 100%;
	height: 300px;
	border-radius: 10px;
	background: #092848;
	color: #eba52c;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 54px;
	font-weight: 800;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

/* Clickable cards open a bio dialog. */
.gcnb-person--has-bio { cursor: pointer; }
.gcnb-person--has-bio:focus-visible { outline: 3px solid #eba52c; outline-offset: 3px; }
.gcnb-person-more { margin: auto 0 0 !important; padding-top: 8px; }
.gcnb-person-more::after { content: " \2192"; }
/* The flag is set in <head>, so bios are hidden before first paint when JS can
   take over — and stay visible inline when it can't. */
html.gcnb-js .gcnb-person-bio { display: none; }
html:not(.gcnb-js) .gcnb-person-more { display: none; }

.gcnb-person-modal {
	border: 0;
	border-radius: 16px;
	padding: 0;
	max-width: 520px;
	width: calc(100% - 32px);
	box-shadow: 0 24px 60px rgba(9, 40, 72, .28);
}
.gcnb-person-modal::backdrop { background: rgba(9, 40, 72, .55); }
.gcnb-person-modal__body { padding: 28px; }
.gcnb-person-modal__body img,
.gcnb-person-modal__body .gcnb-person-avatar {
	width: 120px; height: 120px; object-fit: cover; object-position: center top;
	border-radius: 12px; margin: 0 0 16px; font-size: 34px;
}
.gcnb-person-modal__body h3 { margin: 0 0 4px; font-size: 24px; color: #23324e; }
.gcnb-person-modal__body .gcnb-person-role { margin: 0 0 12px; }
.gcnb-person-modal__body .gcnb-person-bio { display: block; margin: 0; color: #4d6c8b; }
.gcnb-person-modal__close {
	position: absolute; top: 12px; right: 14px;
	background: transparent; border: 0; cursor: pointer;
	font-size: 30px; line-height: 1; color: #5c6c83;
}
.gcnb-person-modal__close:hover { color: #23324e; }

/* Six people wrap to 4 + 2 at full width; capping the row to three keeps it 3 + 3. */
.gcnb-people--3up { max-width: 936px; margin-left: auto; margin-right: auto; }

@media (max-width: 781px) {
	.gcnb-people > .gcnb-person { flex-basis: 100%; max-width: 340px; }
}

/* ---- Cards with a full-bleed image on top ---- */
/* Source photos come in every aspect ratio going, so left to themselves a grid
   of these cards has images of four different heights. Pin one aspect. */
.gcnb-media-top > .wp-block-image {
	margin: 0 !important;
	max-width: none;
}
.gcnb-media-top > .wp-block-image img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}

/* ---- Member / logo tiles ---- */
/* Logos vary wildly in aspect ratio, so left/top-aligning them makes a grid look
   ragged. Centre each logo in the space above its caption and let every tile in
   a row share the tallest height. */
.wp-block-column:has(> .gcnb-logo-tile) { display: flex; }
.gcnb-logo-tile {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 170px;
}
.gcnb-logo-tile > .wp-block-image {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	max-width: none;
}
.gcnb-logo-tile img { max-height: 72px; width: auto; object-fit: contain; }
.gcnb-logo-tile > p {
	margin: 14px 0 0 !important;
	max-width: none;
}

/* ---- Numbered goal rows ---- */
.gcnb-goal-num { color: var(--wp--preset--color--primary, #eba52c); font-weight: 700; font-size: 22px; }

/* ---- Floating WhatsApp button ---- */
.gcnb-wa {
	position: fixed; right: 28px; bottom: 28px; z-index: 200;
	width: 60px; height: 60px; border-radius: 9999px;
	background: #25d366; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.gcnb-wa svg { width: 32px; height: 32px; fill: #fff; }

/* ---- Small-screen polish ---- */
@media (max-width: 781px) {
	.gcnb-wa { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}

/* ---- Homepage stats: translucent tiles overlapping the hero ---- */
.gcnb-stats { margin-top: -150px; position: relative; z-index: 5; }
.gcnb-stats .wp-block-column {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	padding: 16px;
}
.gcnb-stats .wp-block-column .wp-block-heading { margin: 0 0 4px; }
@media (max-width: 781px) {
	.gcnb-stats { margin-top: -70px; }
}

/* ---- Homepage stat boxes (Globally / In Bangladesh) ---- */
.gcnb-statbox-card { gap: 10px; align-items: stretch; }
.gcnb-statbox-card > .wp-block-group { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.gcnb-statbox-card .wp-block-heading { line-height: 1; }

/* ---- Homepage Featured: horizontal cards ---- */
.gcnb-feat { align-items: center; gap: 24px; }
.gcnb-feat > .wp-block-image,
.gcnb-feat > .wp-block-post-featured-image { flex: 0 0 231px; margin: 0; }
.gcnb-feat > .wp-block-post-featured-image img { width: 231px; height: 134px; object-fit: cover; border-radius: 10px; display: block; }
.gcnb-feat > .wp-block-group { flex: 1 1 auto; }
.gcnb-feat > .wp-block-buttons { flex: 0 0 auto; }
.gcnb-feat .wp-block-post-title { margin: 0; }
.gcnb-feat .wp-block-post-title a { color: #23324e; text-decoration: none; }
.gcnb-feat .wp-block-post-title a:hover { color: #eba52c; }
.gcnb-feat .wp-block-post-date { margin: 0; }

/* The read-more block is the card's CTA, so it has to read as a button. */
.gcnb-feat > .gcnb-feat-cta {
	flex: 0 0 auto; margin: 0;
	background: #eba52c; color: #fff; text-decoration: none;
	border-radius: 7px; padding: 11px 22px; font-size: 15px; font-weight: 600;
	white-space: nowrap; transition: filter .15s ease;
}
.gcnb-feat > .gcnb-feat-cta:hover { filter: brightness(.95); color: #fff; }
.gcnb-featured .wp-block-post-template { list-style: none; margin: 0; padding: 0; gap: 20px; display: flex; flex-direction: column; }

@media (max-width: 781px) {
	.gcnb-feat { flex-wrap: wrap; }
	.gcnb-feat > .wp-block-image,
	.gcnb-feat > .wp-block-post-featured-image { flex-basis: 100%; }
	.gcnb-feat > .wp-block-image img,
	.gcnb-feat > .wp-block-post-featured-image img { width: 100%; height: auto; }
	.gcnb-feat > .gcnb-feat-cta { width: 100%; text-align: center; box-sizing: border-box; }
}

/* ---- Card grids: every tile in a row is the same height ---- */
/* Columns already stretch, but the card inside each column only grows to fit its
   own text, so a row of tiles ends up ragged. Fill the column and push the CTA
   to the bottom so the buttons line up too. */
.gcnb-cardgrid > .wp-block-column { display: flex; }
.gcnb-cardgrid > .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	width: 100%;
}
/* Constrained layout centres children with `margin-inline: auto !important`.
   Once the card is a flex column that shrink-wraps them, so full-bleed heading
   bars and 100%-width buttons collapse to their text width. Core uses
   !important here, so overriding it takes the same. */
.gcnb-cardgrid > .wp-block-column > .wp-block-group > *,
.gcnb-cardgrid > .wp-block-column > .wp-block-group > .wp-block-group > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none;
}
.gcnb-cardgrid > .wp-block-column > .wp-block-group > .wp-block-buttons,
.gcnb-cardgrid > .wp-block-column > .wp-block-group > .wp-block-list:last-child { margin-top: auto; }

/* Some cards wrap their text in a padding group, which puts the buttons two
   levels down where the rule above can't reach them. Carry the flex column
   through that wrapper so a one-line title and a two-line title still line their
   buttons up along the bottom of the row. */
.gcnb-cardgrid > .wp-block-column > .wp-block-group > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.gcnb-cardgrid > .wp-block-column > .wp-block-group > .wp-block-group > .wp-block-buttons {
	margin-top: auto;
}

/* ---- Homepage: "1 Unified Objective" callout ---- */
/* The callout stretches the full column but its content is only ~200px wide,
   which left a large dead area to the right. Centre the pair instead. */
.gcnb-objective { align-items: center; justify-content: center; }
.gcnb-objective p { margin: 0; }
/* Both lines are flex-centred, but the digit's ink sits high in its line box
   while the label's fills it, so they read as misaligned. Matching line-heights
   puts the two optical centres on the same axis. */
.gcnb-objective p:first-child { line-height: 1; }
.gcnb-objective p + p { line-height: 1; }

/* ---- Homepage: image + caption media card ---- */
.gcnb-media-card > .wp-block-image { margin: 0; }
.gcnb-media-card > .wp-block-image img { display: block; width: 100%; height: 260px; object-fit: cover; }
.gcnb-media-card > p { margin: 0; }

/* ---- Homepage: "Become a member" cards ---- */
/* The three cards share identical markup, yet the middle one's list picked up a
   1.5em top margin that opened a gap under its heading. The rule responsible
   outranks a plain class selector, so pin it with !important — a no-op for the
   two that already compute to 0, and deterministic for all three. */
.gcnb-join-card > .wp-block-list {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* ---- Homepage: navy stat tiles (Globally / In Bangladesh) ---- */
.gcnb-nstat-row { gap: 12px; }
/* Horizontal padding matches the vertical so left-aligned content sits on a
   square inset rather than hard against the tile edge. */
.gcnb-nstat-row > .wp-block-column.gcnb-nstat {
	background: #092848;
	border-radius: 12px;
	padding: 18px;
	margin: 0;
}
.gcnb-nstat h4, .gcnb-nstat p { margin: 0; }

/* The tile figures and captions are left-aligned now, so the label no longer
   floats over centred content. It sits on the section gutter rather than the
   tile's inner inset, keeping one left edge with the heading and body copy
   above it. */
.gcnb-nstat-label { padding-left: 0; }

/* ---- Homepage: "Dedicated to..." lede + photo ---- */
/* The 980px cap left the headline floating inside the 1280px content column,
   indented from the eyebrow above it and short of the photo/list row below.
   Let it use the full column so the whole section shares one left edge. */
.gcnb-lede { line-height: 1.2; }

/* The eyebrow was 14px/600 against a ~40px headline and read as an afterthought.
   Size and tracking give it enough presence to work as a section label. */
.gcnb-eyebrow {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.16em;
}

/* Photo and list are separate columns of unequal natural height, so their
   bottoms did not line up. Stretch both to the row, then spread the list items
   so the last one ends level with the photo. */
.gcnb-dedicated-row > .wp-block-column { align-self: stretch; }
.gcnb-dedicated-list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
.gcnb-dedicated-img { margin: 0; height: 100%; }
.gcnb-dedicated-img img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }

/* ---- Flush the header into the hero (no gap) ---- */
.wp-site-blocks > main { margin-block-start: 0; }
.wp-site-blocks > main { padding-top: 0; }
.wp-site-blocks > main > .wp-block-post-content > :first-child { margin-top: 0; }
.gcnb-header { margin-block-end: 0; }

/* ==========================================================================
   Contact form (gcnb/contact-form)
   ==========================================================================
   These rules replace the inline styles the form used to carry when it lived
   in a Custom HTML block. Values are unchanged — only their home is. */
.gcnb-contact-form { display: block; }
.gcnb-contact-form .gcnb-fields { display: flex; flex-direction: column; gap: 14px; }
.gcnb-contact-form label {
	display: block;
	font-size: 14px;
	color: #23324e;
	font-weight: 600;
	margin: 0 0 6px;
}
.gcnb-contact-form input[type="text"],
.gcnb-contact-form input[type="email"],
.gcnb-contact-form input[type="tel"],
.gcnb-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: #f8f8f8;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	padding: 13px 16px;
	font: inherit;
	font-size: 15px;
	color: #23324e;
}
.gcnb-contact-form textarea { border-radius: 14px; resize: vertical; }

.gcnb-contact-form .gcnb-fieldset { border: none; padding: 0; margin: 24px 0 0; }
.gcnb-contact-form .gcnb-fieldset legend {
	font-size: 22px;
	font-weight: 700;
	color: #23324e;
	padding: 0;
	margin: 0 0 14px;
}
.gcnb-contact-form .gcnb-check-list { display: flex; flex-direction: column; gap: 12px; }

/* The checkbox label is a row, not the stacked field label above. */
.gcnb-contact-form label.gcnb-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 16px;
	font-weight: 400;
	color: #23324e;
	margin: 0;
}
.gcnb-contact-form .gcnb-check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: #eba52c;
	flex: none;
	margin-top: 1px;
}

.gcnb-contact-form .gcnb-submit {
	display: block;
	width: 100%;
	text-align: center;
	border: none;
	cursor: pointer;
	margin-top: 24px;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	background: #eba52c;
	color: #23324e;
	border-radius: 10px;
	padding: 15px 24px;
}

/* Editor preview only: the canvas shows dummy controls, so make it obvious
   they are not interactive. */
.gcnb-contact-form.is-editor-preview input,
.gcnb-contact-form.is-editor-preview .gcnb-submit { pointer-events: none; }

/* ==========================================================================
   Listing pages (News, Publications, Gallery) — filter bar + card grid
   ========================================================================== */
.gcnb-listing { padding: 50px 0 70px; }
.gcnb-filterbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; }
.gcnb-pill {
	font: inherit; cursor: pointer; border: 1px solid #d8dde5; background: #fff;
	color: #23324e; border-radius: 999px; padding: 9px 22px; font-size: 15px;
	font-weight: 500; line-height: 1; transition: all .15s ease;
}
.gcnb-pill:hover { border-color: #eba52c; color: #eba52c; }
.gcnb-pill.is-active { background: #eba52c; border-color: #eba52c; color: #fff; }

/* card */
.gcnb-listing li.wp-block-post {
	background: #fff; border: 1px solid #e8e8e8; border-radius: 14px; overflow: hidden;
	display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease;
}
.gcnb-listing li.wp-block-post:hover { box-shadow: 0 12px 30px rgba(9,40,72,.12); transform: translateY(-3px); }
.gcnb-listing li.wp-block-post .wp-block-post-featured-image { margin: 0; }
.gcnb-listing li.wp-block-post .wp-block-post-featured-image img { width: 100%; height: 210px; object-fit: cover; display: block; }
.gcnb-listing li.wp-block-post .gcnb-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gcnb-listing li.wp-block-post .wp-block-post-terms {
	align-self: flex-start; background: #f0f2f5; color: #5c6c83; font-size: 12.5px;
	font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 4px 12px; border-radius: 6px;
}
.gcnb-listing li.wp-block-post .wp-block-post-terms a { color: inherit; text-decoration: none; }
.gcnb-listing li.wp-block-post .wp-block-post-date { color: #8a93a3; font-size: 14px; }
.gcnb-listing li.wp-block-post .wp-block-post-title { font-size: 20px; line-height: 1.25; margin: 0; }
.gcnb-listing li.wp-block-post .wp-block-post-title a { color: #23324e; text-decoration: none; }
.gcnb-listing li.wp-block-post .wp-block-post-title a:hover { color: #eba52c; }
.gcnb-listing li.wp-block-post .wp-block-read-more,
.gcnb-listing li.wp-block-post .wp-block-button__link { margin-top: auto; }

/* gallery card: square-ish image, title overlay-less */
.gcnb-listing--album li.wp-block-post .wp-block-post-featured-image img { height: 240px; }

/* ==========================================================================
   Events (ongoing-programs) — toolbar, cards, calendar
   ========================================================================== */
.gcnb-events { margin-top: 10px; }
.gcnb-events-toolbar { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.gcnb-seg { display: inline-flex; background: #fff; border: 1px solid #d8dde5; border-radius: 999px; padding: 4px; gap: 2px; }
.gcnb-seg button { font: inherit; cursor: pointer; border: 0; background: transparent; color: #23324e; border-radius: 999px; padding: 9px 20px; font-size: 15px; font-weight: 500; line-height: 1; transition: all .15s; }
.gcnb-seg button:hover { color: #eba52c; }
.gcnb-seg button.is-active { background: #eba52c; color: #fff; }

.gcnb-events-list { display: flex; flex-direction: column; gap: 16px; }
.gcnb-event-card {
	display: flex; align-items: stretch; gap: 22px; text-decoration: none;
	background: #fff; border: 1px solid #e8e8e8; border-radius: 14px; padding: 18px 22px;
	transition: box-shadow .18s ease, transform .18s ease;
}
.gcnb-event-card:hover { box-shadow: 0 12px 30px rgba(9,40,72,.12); transform: translateY(-2px); }
.gcnb-event-date {
	flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: #092848; color: #fff; border-radius: 12px; padding: 10px;
}
.gcnb-event-date .d { font-size: 34px; font-weight: 700; line-height: 1; color: #eba52c; }
.gcnb-event-date .m { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.gcnb-event-main { flex: 1; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.gcnb-event-badge { align-self: flex-start; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 11px; border-radius: 6px; }
.gcnb-event-badge--ongoing { background: rgba(235,165,44,.15); color: #b97d10; }
.gcnb-event-badge--past { background: #eef0f3; color: #5c6c83; }
.gcnb-event-title { font-size: 21px; font-weight: 700; color: #23324e; line-height: 1.2; }
.gcnb-event-loc, .gcnb-event-time { font-size: 14.5px; color: #5c6c83; }
.gcnb-event-cta { align-self: center; flex: 0 0 auto; color: #eba52c; font-weight: 600; white-space: nowrap; }
/* `hidden` is only display:none at UA weight, so the display:flex above kept the
   list on screen underneath the calendar. */
.gcnb-events-list[hidden] { display: none; }

.gcnb-events-calendar { background: #fff; border: 1px solid #e8e8e8; border-radius: 14px; padding: 22px; }
#gcnb-cal {
	--fc-border-color: #e8ecf1;
	--fc-today-bg-color: transparent; /* replaced by .fc-day-today below */
	--fc-event-border-color: transparent;
	--fc-page-bg-color: #fff;
}

/* ---- Calendar toolbar panel ---- */
#gcnb-cal .fc-header-toolbar.fc-toolbar {
	background: #092848;
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 18px;
	gap: 12px;
}
#gcnb-cal .fc-toolbar-title {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	letter-spacing: .01em;
}
#gcnb-cal .fc-button,
#gcnb-cal .fc-button-primary {
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
	border-radius: 8px;
	box-shadow: none;
	font-size: 14px;
	font-weight: 600;
	padding: 7px 14px;
	transition: background .15s ease, border-color .15s ease;
}
#gcnb-cal .fc-button-primary:hover,
#gcnb-cal .fc-button-primary:not(:disabled):active,
#gcnb-cal .fc-button-primary:not(:disabled).fc-button-active {
	background: #eba52c;
	border-color: #eba52c;
	color: #fff;
}
#gcnb-cal .fc-button-primary:focus-visible { outline: 2px solid #eba52c; outline-offset: 2px; box-shadow: none; }
#gcnb-cal .fc-button-primary:disabled { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); opacity: 1; }
#gcnb-cal .fc-prev-button, #gcnb-cal .fc-next-button { padding: 7px 11px; }

/* ---- Grid ---- */
#gcnb-cal .fc-col-header-cell {
	background: #f4f6f9;
	padding: 10px 0;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #5c6c83;
}
#gcnb-cal .fc-col-header-cell a { color: inherit; text-decoration: none; }
#gcnb-cal .fc-daygrid-day-number { color: #23324e; font-size: 14px; font-weight: 600; padding: 8px 10px; text-decoration: none; }
#gcnb-cal .fc-day-other .fc-daygrid-day-number { color: #b3bcc9; font-weight: 500; }

/* Day shading. Order matters: today wins over an event day, which wins over a
   weekend or holiday. */
#gcnb-cal .gcnb-day--weekend,
#gcnb-cal .gcnb-day--holiday { background: rgba(235, 165, 44, .10); }
#gcnb-cal .gcnb-day--event { background: rgba(39, 151, 136, .16); }
#gcnb-cal .fc-day-today { background: rgba(29, 111, 208, .14) !important; }
#gcnb-cal .fc-day-today .fc-daygrid-day-number {
	background: #1d6fd0;
	color: #fff;
	border-radius: 999px;
	min-width: 28px;
	padding: 4px 0;
	margin: 6px 8px 0 0;
	text-align: center;
	display: inline-block;
}

/* ---- Event chips: full title, no truncation ---- */
#gcnb-cal .fc-daygrid-event {
	white-space: normal;
	border-radius: 6px;
	padding: 4px 7px;
	margin: 2px 4px;
	font-size: 12.5px;
	line-height: 1.3;
}
#gcnb-cal .fc-event-title { white-space: normal; overflow: visible; font-weight: 600; }
#gcnb-cal .fc-event-time { font-weight: 700; margin-right: 4px; }
#gcnb-cal .fc-daygrid-day-frame { min-height: 104px; }

/* ---- Legend ---- */
.gcnb-cal-legend {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 14px;
	color: #5c6c83;
}
.gcnb-cal-legend li { display: flex; align-items: center; gap: 8px; }
.gcnb-cal-key { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.gcnb-cal-key--today { background: #1d6fd0; }
.gcnb-cal-key--event { background: rgba(39, 151, 136, .55); }
.gcnb-cal-key--off { background: rgba(235, 165, 44, .45); }

@media (max-width: 600px) {
	#gcnb-cal .fc-header-toolbar.fc-toolbar { flex-wrap: wrap; justify-content: center; }
	#gcnb-cal .fc-toolbar-title { font-size: 18px; }
}
@media (max-width: 600px) {
	.gcnb-event-card { flex-wrap: wrap; gap: 14px; }
	.gcnb-event-date { flex-direction: row; gap: 8px; flex-basis: auto; padding: 8px 14px; }
	.gcnb-event-cta { display: none; }
}

/* ==========================================================================
   Motion — scroll reveal + sticky header (only under html.gcnb-anim)
   ========================================================================== */
html { scroll-behavior: smooth; }

html.gcnb-anim .wp-block-post-content > *,
html.gcnb-anim .gcnb-listing li.wp-block-post,
html.gcnb-anim .gcnb-event-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform;
}
html.gcnb-anim .wp-block-post-content > *.is-in,
html.gcnb-anim .gcnb-listing li.wp-block-post.is-in,
html.gcnb-anim .gcnb-event-card.is-in {
	opacity: 1;
	transform: none;
}

/* the hero should fade only (no upward shift that reveals a gap under a fixed header) */
html.gcnb-anim .wp-block-post-content > .wp-block-cover:first-child { transform: none; }

/* sticky header gains a shadow once scrolled */
.gcnb-header { transition: box-shadow .25s ease, background-color .25s ease; }
.gcnb-header.is-stuck { box-shadow: 0 8px 28px rgba(9,40,72,.22); }

/* gentle hover lift on content cards */
.is-style-card { transition: transform .2s ease, box-shadow .2s ease; }
.wp-block-group.is-style-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(9,40,72,.10); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Hide the header CTA buttons on mobile (keep logo + hamburger nav) */
@media (max-width: 781px) {
	.gcnb-header .wp-block-buttons { display: none !important; }
}

/* Mobile: stats sit as a clean 2x2 navy block (no hero overlap) */
@media (max-width: 781px) {
	.gcnb-hero.wp-block-cover { min-height: 460px !important; padding-top: 48px !important; padding-bottom: 44px !important; }
	.gcnb-stats { margin-top: 0; background: #092848; padding: 24px 16px 30px; }
	.gcnb-stats .wp-block-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
	.gcnb-stats .wp-block-column { background: rgba(255,255,255,0.12); margin: 0; }
	.gcnb-stats .wp-block-column .wp-block-heading { font-size: 34px; }
}

/* Mobile: hide the hero counters entirely (looked odd stacked) */
@media (max-width: 781px) {
	.gcnb-stats { display: none !important; }
}