/*!
 * Genuine Sugar Mummies — brand layer over OceanWP.
 *
 * Order: tokens (injected inline by inc/brand.php) -> base -> icons -> header ->
 * cards -> pagination -> footer -> utilities -> responsive.
 *
 * Every colour here is a var(--gsm-*) token. Nothing is hard-coded, so changing the
 * palette in inc/brand.php restyles the whole site.
 */

/* ---------------------------------------------------------------- 1. Base */

html {
	-webkit-text-size-adjust: 100%;

	/* This site has one theme, and it is light. Without this declaration the UA
	   treats the page as scheme-agnostic, and Chrome's automatic dark mode is then
	   free to re-colour it on any device set to dark: the whole page came back
	   inverted - dark cards, dark sidebar, dark enquiry panel - with contrast the
	   palette was never checked against. Declaring the scheme opts the page out of
	   that rewriting; it does not add a dark theme, it states there isn't one. */
	color-scheme: light;
}

body,
body.oceanwp-theme {
	font-family: var(--gsm-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--gsm-ink);
	background: var(--gsm-canvas);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.gsm-footer__logo-text {
	font-family: var(--gsm-font-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.22;
	color: var(--gsm-ink);
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); }
h3 { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); }

a {
	color: var(--gsm-brand-mid);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--gsm-brand);
}

/* A focus ring that is visible on both light cards and the navy footer. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--gsm-brand-mid);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Content column. OceanWP sets `width:1200px; max-width:90%`, and the 90% is what
   keeps the container inside the viewport on a phone. A bare `max-width:1200px`
   here replaced that and the footer and page header then laid out 1200px wide at
   390px, overflowing the page horizontally. `min()` caps the width at 1200px and
   at the viewport in one declaration, so neither case can be lost again. */
.container {
	width: min(1200px, 90%);
	max-width: min(1200px, 90%);
}

/* Buttons */
.button,
button,
input[type="submit"],
.wp-block-button__link,
.gsm-btn {
	font-family: var(--gsm-font);
	font-weight: 600;
	background: var(--gsm-brand);
	color: #fff;
	border: 0;
	border-radius: var(--gsm-radius-sm);
	padding: 0.7em 1.35em;
	line-height: 1.3;
	transition: background 0.15s ease, transform 0.15s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.gsm-btn:hover {
	background: var(--gsm-brand-dark);
	color: #fff;
}

/* ------------------------------------------------------- 2. Icon system */

/*
 * Material Symbols, used two ways:
 *  - .material-symbols-outlined  — ligature form, for this theme's own templates.
 *  - .gsmi-*                     — codepoint form, for icons the parent theme
 *                                  prints as a bare <i> with no inner text.
 * Both inherit currentColor, which is why no icon on the site carries its own
 * colour: it takes the brand colour from whatever it sits in.
 */

.material-symbols-outlined,
.gsmi {
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-size: 1.25em;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	vertical-align: middle;
	color: currentColor;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* The parent theme's <i> elements have no text node, so the glyph comes from
   `content`. Keep this list in step with gsm_icon_map() in inc/icons.php. */
.gsmi::before { content: "\e836"; } /* unmapped fallback: an outlined circle */

.gsmi-search::before        { content: "\e8b6"; }
.gsmi-close::before         { content: "\e5cd"; }
.gsmi-menu::before          { content: "\e5d2"; }
.gsmi-arrow_upward::before  { content: "\e5d8"; }
.gsmi-arrow_downward::before{ content: "\e5db"; }
.gsmi-arrow_back::before    { content: "\e5c4"; }
.gsmi-arrow_forward::before { content: "\e5c8"; }
.gsmi-expand_less::before   { content: "\e5ce"; }
.gsmi-expand_more::before   { content: "\e5cf"; }
.gsmi-chevron_left::before  { content: "\e5cb"; }
.gsmi-chevron_right::before { content: "\e5cc"; }
.gsmi-home::before          { content: "\e88a"; }
.gsmi-person::before        { content: "\e7fd"; }
.gsmi-group::before         { content: "\e7ef"; }
.gsmi-mail::before          { content: "\e158"; }
.gsmi-call::before          { content: "\e0b0"; }
.gsmi-schedule::before      { content: "\e8b5"; }
.gsmi-event::before         { content: "\e878"; }
.gsmi-visibility::before    { content: "\e8f4"; }
.gsmi-chat_bubble::before   { content: "\e0ca"; }
.gsmi-forum::before         { content: "\e0bf"; }
.gsmi-folder::before        { content: "\e2c7"; }
.gsmi-sell::before          { content: "\f05b"; }
.gsmi-share::before         { content: "\e80d"; }
.gsmi-favorite::before      { content: "\e87d"; }
.gsmi-star::before          { content: "\e838"; }
.gsmi-lock::before          { content: "\e897"; }
.gsmi-place::before         { content: "\e55f"; }
.gsmi-language::before      { content: "\e894"; }
.gsmi-edit::before          { content: "\e3c9"; }
.gsmi-check::before         { content: "\e5ca"; }
.gsmi-shopping_cart::before { content: "\e8cc"; }
.gsmi-add::before           { content: "\e145"; }
.gsmi-remove::before        { content: "\e15b"; }
.gsmi-info::before          { content: "\e88e"; }
.gsmi-help::before          { content: "\e887"; }
.gsmi-refresh::before       { content: "\e5d5"; }
.gsmi-settings::before      { content: "\e8b8"; }
.gsmi-grid_view::before     { content: "\e9b0"; }
.gsmi-list::before          { content: "\e896"; }
.gsmi-play_arrow::before    { content: "\e037"; }
.gsmi-description::before   { content: "\e873"; }
.gsmi-menu_book::before     { content: "\ea19"; }
.gsmi-zoom_in::before       { content: "\e8ff"; }
.gsmi-image::before         { content: "\e3f4"; }

/*
 * Brand marks. Material Symbols has no company logos, so these few are drawn as
 * CSS masks over currentColor — monochrome, and still inheriting the brand colour.
 */
.gsmi[class*="gsmi-brand-"] {
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.gsmi[class*="gsmi-brand-"]::before {
	content: none;
}

.gsmi-brand-x {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.9 1.2h3.7l-8.1 9.2L24 22.8h-7.4l-5.8-7.6-6.7 7.6H.4l8.6-9.9L0 1.2h7.6l5.2 6.9 6.1-6.9Zm-1.3 19.4h2L6.5 3.3H4.3l13.3 17.3Z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.9 1.2h3.7l-8.1 9.2L24 22.8h-7.4l-5.8-7.6-6.7 7.6H.4l8.6-9.9L0 1.2h7.6l5.2 6.9 6.1-6.9Zm-1.3 19.4h2L6.5 3.3H4.3l13.3 17.3Z"/></svg>');
}

.gsmi-brand-facebook {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07Z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07Z"/></svg>');
}

.gsmi-brand-whatsapp {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M.06 24l1.69-6.16a11.87 11.87 0 01-1.6-5.95C.16 5.33 5.5 0 12.06 0a11.8 11.8 0 018.4 3.49 11.8 11.8 0 013.48 8.4c0 6.56-5.34 11.9-11.9 11.9a11.9 11.9 0 01-5.69-1.45L.06 24zm6.6-3.8c1.68 1 3.28 1.6 5.4 1.6 5.45 0 9.9-4.43 9.9-9.9a9.86 9.86 0 00-9.9-9.9c-5.46 0-9.9 4.44-9.9 9.9 0 2.22.65 3.88 1.74 5.62l-1 3.65 3.76-.98zm11.39-5.1c-.08-.12-.27-.2-.56-.35-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.29-.76.95-.93 1.15-.17.2-.34.22-.63.07-.3-.15-1.25-.46-2.38-1.47a8.9 8.9 0 01-1.64-2.04c-.17-.3-.02-.46.13-.6.13-.14.3-.35.44-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.6-.92-2.2-.24-.57-.49-.5-.67-.5l-.57-.01c-.2 0-.52.07-.79.37-.27.3-1.03 1-1.03 2.45s1.06 2.84 1.2 3.04c.15.2 2.08 3.18 5.04 4.46.7.3 1.25.48 1.68.62.7.22 1.35.19 1.86.12.57-.09 1.75-.72 2-1.41.24-.7.24-1.29.17-1.41z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M.06 24l1.69-6.16a11.87 11.87 0 01-1.6-5.95C.16 5.33 5.5 0 12.06 0a11.8 11.8 0 018.4 3.49 11.8 11.8 0 013.48 8.4c0 6.56-5.34 11.9-11.9 11.9a11.9 11.9 0 01-5.69-1.45L.06 24zm6.6-3.8c1.68 1 3.28 1.6 5.4 1.6 5.45 0 9.9-4.43 9.9-9.9a9.86 9.86 0 00-9.9-9.9c-5.46 0-9.9 4.44-9.9 9.9 0 2.22.65 3.88 1.74 5.62l-1 3.65 3.76-.98zm11.39-5.1c-.08-.12-.27-.2-.56-.35-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.29-.76.95-.93 1.15-.17.2-.34.22-.63.07-.3-.15-1.25-.46-2.38-1.47a8.9 8.9 0 01-1.64-2.04c-.17-.3-.02-.46.13-.6.13-.14.3-.35.44-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.6-.92-2.2-.24-.57-.49-.5-.67-.5l-.57-.01c-.2 0-.52.07-.79.37-.27.3-1.03 1-1.03 2.45s1.06 2.84 1.2 3.04c.15.2 2.08 3.18 5.04 4.46.7.3 1.25.48 1.68.62.7.22 1.35.19 1.86.12.57-.09 1.75-.72 2-1.41.24-.7.24-1.29.17-1.41z"/></svg>');
}

.gsmi-brand-telegram {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.95 4.57l-3.62 17.05c-.27 1.2-.98 1.5-1.99.94l-5.5-4.05-2.65 2.55c-.3.3-.54.54-1.1.54l.39-5.57L19.6 6.9c.44-.4-.1-.62-.68-.22L6.4 14.53l-5.42-1.7c-1.18-.37-1.2-1.18.25-1.75L22.42 2.8c.98-.36 1.84.22 1.53 1.77z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.95 4.57l-3.62 17.05c-.27 1.2-.98 1.5-1.99.94l-5.5-4.05-2.65 2.55c-.3.3-.54.54-1.1.54l.39-5.57L19.6 6.9c.44-.4-.1-.62-.68-.22L6.4 14.53l-5.42-1.7c-1.18-.37-1.2-1.18.25-1.75L22.42 2.8c.98-.36 1.84.22 1.53 1.77z"/></svg>');
}

.gsmi-brand-instagram {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 01-1.38-.9 3.7 3.7 0 01-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.85 5.85 0 00-2.13 1.38A5.85 5.85 0 00.63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91a5.85 5.85 0 001.38 2.13 5.85 5.85 0 002.13 1.38c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.85 5.85 0 002.13-1.38 5.85 5.85 0 001.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.85 5.85 0 00-1.38-2.13A5.85 5.85 0 0019.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1018.16 12 6.16 6.16 0 0012 5.84zM12 16a4 4 0 114-4 4 4 0 01-4 4zm7.85-10.4a1.44 1.44 0 11-1.44-1.44 1.44 1.44 0 011.44 1.44z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 01-1.38-.9 3.7 3.7 0 01-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.85 5.85 0 00-2.13 1.38A5.85 5.85 0 00.63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91a5.85 5.85 0 001.38 2.13 5.85 5.85 0 002.13 1.38c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.85 5.85 0 002.13-1.38 5.85 5.85 0 001.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.85 5.85 0 00-1.38-2.13A5.85 5.85 0 0019.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1018.16 12 6.16 6.16 0 0012 5.84zM12 16a4 4 0 114-4 4 4 0 01-4 4zm7.85-10.4a1.44 1.44 0 11-1.44-1.44 1.44 1.44 0 011.44 1.44z"/></svg>');
}

.gsmi-brand-youtube {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 00-2.12-2.13C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.52A3 3 0 00.5 6.2 31.4 31.4 0 000 12a31.4 31.4 0 00.5 5.8 3 3 0 002.12 2.13c1.88.52 9.38.52 9.38.52s7.5 0 9.38-.52a3 3 0 002.12-2.13A31.4 31.4 0 0024 12a31.4 31.4 0 00-.5-5.8zM9.55 15.57V8.43L15.82 12l-6.27 3.57z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 00-2.12-2.13C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.52A3 3 0 00.5 6.2 31.4 31.4 0 000 12a31.4 31.4 0 00.5 5.8 3 3 0 002.12 2.13c1.88.52 9.38.52 9.38.52s7.5 0 9.38-.52a3 3 0 002.12-2.13A31.4 31.4 0 0024 12a31.4 31.4 0 00-.5-5.8zM9.55 15.57V8.43L15.82 12l-6.27 3.57z"/></svg>');
}

.gsmi-brand-linkedin {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05a3.74 3.74 0 013.37-1.85c3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zm1.78 13.02H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05a3.74 3.74 0 013.37-1.85c3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zm1.78 13.02H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/></svg>');
}

/* ------------------------------------------------------------ 3. Header */

#site-header,
#site-header.minimal-header {
	background: var(--gsm-surface);
	border-bottom: 1px solid var(--gsm-line);
	box-shadow: none;
}

#site-header #site-logo img,
#site-header .site-logo-img img {
	max-height: 44px;
	width: auto;
}

/* Breathing room around the wordmark; without it the logo sits hard against the
   top-left corner of the page on the minimal header. */
#site-header #site-logo {
	padding: 6px 0;
}

/*
 * The logo and the menu are both floated into one row by OceanWP's 'one' header,
 * so they only stay on that row while they fit: at the parent theme's default
 * link padding the thirteen items measured 1040px, the logo 230px, and 1270px
 * does not fit a 1200px container, so the right-floated menu wrapped under the
 * logo and the header looked stacked. Tightening the horizontal padding takes
 * the menu to roughly 900px, which leaves real slack beside the logo rather
 * than only just fitting. Below the 1200px breakpoint this row is replaced by
 * the mobile toggle, so these values only ever apply where the row exists.
 */
#site-navigation-wrap .dropdown-menu > li > a {
	font-family: var(--gsm-font);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: -0.01em;
	color: var(--gsm-ink);
	padding-left: 11px;
	padding-right: 11px;
}

#site-navigation-wrap .dropdown-menu > li > a:hover,
#site-navigation-wrap .dropdown-menu > li.current-menu-item > a {
	color: var(--gsm-brand);
}

/* The brand underline on the active item, instead of a coloured block. */
#site-navigation-wrap .dropdown-menu > li > a::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 4px;
	background: var(--gsm-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}

#site-navigation-wrap .dropdown-menu > li > a:hover::after,
#site-navigation-wrap .dropdown-menu > li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* Submenus: a card, not a slab. */
.dropdown-menu .sub-menu {
	border: 1px solid var(--gsm-line);
	border-radius: var(--gsm-radius-sm);
	box-shadow: var(--gsm-shadow-lg);
	padding: 6px;
	overflow: hidden;
}

.dropdown-menu .sub-menu a {
	border-radius: 6px;
}

/* No spinning or blurred header ornaments. */
#site-header .fa-spin,
#site-header [class*="spin"] {
	animation: none !important;
}

/* ------------------------------------------------------------- 4. Cards */

#blog-entries {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 24px;
}

/* The parent theme floats entries for its own column system; the grid replaces it. */
#blog-entries .gsm-card {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
}

.gsm-card__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--gsm-surface);
	border: 1px solid var(--gsm-line);
	border-radius: var(--gsm-radius);
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.gsm-card__inner:hover {
	border-color: transparent;
	box-shadow: var(--gsm-shadow-lg);
	transform: translateY(-2px);
}

/* The thumbnail: a true 16:9 frame, so every card in a row lines up regardless of
   the source image's shape. */
.gsm-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--gsm-brand-soft);
	overflow: hidden;
}

.gsm-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.gsm-card__inner:hover .gsm-card__img {
	transform: scale(1.04);
}

.gsm-card__img--empty {
	display: grid;
	place-items: center;
	color: var(--gsm-brand);
	opacity: 0.35;
}

.gsm-card__img--empty .gsm-icon {
	font-size: 2.5rem;
}

/* The corner badge, in the position a video platform puts a duration. */
.gsm-card__badge {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(10, 19, 40, 0.86);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 5px;
	letter-spacing: 0.01em;
}

.gsm-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
	flex: 1 1 auto;
}

.gsm-card__kicker {
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--gsm-brand-mid);
	text-decoration: none;
}

.gsm-card__kicker:hover {
	color: var(--gsm-brand);
	text-decoration: underline;
}

.gsm-card__title {
	font-size: 1.02rem;
	line-height: 1.35;
	margin: 0;
	font-weight: 700;
}

.gsm-card__title a {
	color: var(--gsm-ink);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gsm-card__inner:hover .gsm-card__title a {
	color: var(--gsm-brand);
}

.gsm-card__excerpt {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--gsm-ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gsm-card__meta {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: auto;
	padding-top: 10px;
	font-size: 0.78rem;
	color: var(--gsm-ink-soft);
	border-top: 1px solid var(--gsm-line);
}

.gsm-card__meta-icon {
	font-size: 1rem;
}

/* Make the whole card clickable without adding a second tab stop: the title link
   is stretched over the card, and the thumbnail link sits beneath it. */
.gsm-card__inner { position: relative; }

.gsm-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.gsm-card__kicker,
.gsm-card__meta { position: relative; z-index: 3; }

/* -------------------------------------------------------- 5. Pagination */

.gsm-pagination {
	margin: 36px 0 8px;
}

.gsm-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gsm-pagination__list li { margin: 0; }

.gsm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--gsm-line);
	border-radius: var(--gsm-radius-sm);
	background: var(--gsm-surface);
	color: var(--gsm-ink);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gsm-pagination .page-numbers:hover {
	border-color: var(--gsm-brand-mid);
	color: var(--gsm-brand);
}

.gsm-pagination .page-numbers.current {
	background: var(--gsm-brand);
	border-color: var(--gsm-brand);
	color: #fff;
}

.gsm-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 24px;
}

/* ------------------------------------------------------------ 6. Footer */

.gsm-footer {
	background: var(--gsm-brand-dark);
	color: #aab3c9;
	padding: 48px 0 40px;
}

.gsm-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
	gap: 40px;
}

.gsm-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	margin-bottom: 14px;
}

/* The contact heading sits inside the brand block, so it needs separating from the
   tagline above it without looking like another column heading. */
.gsm-footer__heading--contact {
	margin-top: 20px;
}

/* ---- Policy strip -------------------------------------------------------
   A band under the columns carrying the site's own policies. It is visually
   quieter than the links above it: these are terms, not navigation, and should
   read as the fine print they are while still being reachable. */
.gsm-footer__policies {
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	margin-top: 40px;
	padding-top: 22px;
}

.gsm-footer__policy-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 24px;
}

.gsm-footer__policy {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #939db7;
}

.gsm-footer__policy a {
	color: #c9d2e4;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.gsm-footer__policy a:hover,
.gsm-footer__policy a:focus-visible {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.45);
}

.gsm-footer__policy-icon {
	font-size: 1.05rem;
	color: #7d8aa8;
	flex: none;
	margin-top: 1px;
}

/* The brand mark is a navy shield, and the footer is navy — on its own it would
   disappear. A white tile gives it the contrast the header gets for free. */
.gsm-brandmark {
	border-radius: 8px;
	display: block;
	background: #fff;
	padding: 4px;
	box-sizing: content-box;
}

.gsm-footer__logo-text {
	font-size: 1.1rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.02em;
}

.gsm-footer__about {
	font-size: 0.9rem;
	line-height: 1.6;
	max-width: 42ch;
	margin: 0 0 16px;
	color: #aab3c9;
}

.gsm-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
	font-size: 0.875rem;
}

.gsm-footer__contact li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.gsm-footer__icon {
	font-size: 1.1rem;
	color: #7d8aa8;
}

.gsm-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.gsm-footer__heading {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #fff;
	margin: 0 0 12px;
}

.gsm-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.gsm-footer__links li { margin: 0; }

.gsm-footer__links a {
	color: #dfe5f1;
	font-size: 0.9rem;
	text-decoration: none;
}

.gsm-footer__links a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#footer-bottom {
	background: #0a1328;
	color: #8e99b3;
	font-size: 0.82rem;
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

#footer-bottom a { color: #c9d2e4; }

.gsm-footer__notice {
	max-width: 1200px;
	margin: 10px auto 0;
	padding: 0 20px;
	font-size: 0.78rem;
	line-height: 1.5;
	color: #74809c;
	text-align: center;
}

/* --------------------------------------------------------- 7. Utilities */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	padding: 8px 14px;
	background: var(--gsm-brand);
	color: #fff;
	border-radius: var(--gsm-radius-sm);
}

/* ------------------------------------------------------- 8. Responsive */

@media (max-width: 1024px) {
	#blog-entries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gsm-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Four link columns do not fit a tablet, and two rows of two read better than
	   four cramped ones. */
	.gsm-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	.gsm-footer__policy-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	#blog-entries {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.gsm-footer {
		padding: 36px 0 28px;
	}

	.gsm-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.gsm-footer__policy-list {
		grid-template-columns: 1fr;
	}

	.gsm-card__title { font-size: 1.05rem; }
}

@media (max-width: 380px) {
	.gsm-footer__cols { grid-template-columns: 1fr; }
}

/* Respect a reduced-motion preference: keep the state changes, drop the movement. */
@media (prefers-reduced-motion: reduce) {
	.gsm-card__inner,
	.gsm-card__img,
	#site-navigation-wrap .dropdown-menu > li > a::after,
	a, button {
		transition: none !important;
	}

	.gsm-card__inner:hover { transform: none; }
	.gsm-card__inner:hover .gsm-card__img { transform: none; }
}