/*
 * TGM Framework — structural base.
 *
 * Deliberately minimal. The parent ships scaffolding, not design: colour,
 * typography and spacing are emitted by the CSS engine in Phase 3 as custom
 * properties, and site design lives in the child theme.
 *
 * The custom properties below are the contract those layers write into.
 */

:root {
	/* The five widths. Overwritten by the generated stylesheet from the
	   settings; these are the fallbacks before anything is saved. */
	--tgm-full-width-content: 1200px;
	--tgm-content-width: 1200px;
	--tgm-sidebar-width: 300px;
	--tgm-header-width: 1200px;
	--tgm-footer-width: 1200px;

	/* Spacing. Overwritten by the generated stylesheet from the settings;
	   these are the fallbacks so the theme is sane before anything is saved. */
	--tgm-gap: 24px;
	--tgm-gap-side: 24px;
	--tgm-space-content-top: 48px;
	--tgm-space-content-bottom: 48px;
	--tgm-space-section: 40px;
	--tgm-space-header: 20px;
	--tgm-space-footer: 40px;
	--tgm-primary: #18213A;
	--tgm-accent: #E29A12;
	--tgm-ink: #22262F;
	--tgm-background: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	color: var(--tgm-ink);
	background: var(--tgm-background);
	font-family: var(--tgm-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: var(--tgm-size-body, 17px);
	font-weight: var(--tgm-font-body-weight, 400);
	line-height: var(--tgm-line-body, 1.6);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tgm-font-heading, inherit);
	font-weight: var(--tgm-font-heading-weight, 700);
	line-height: var(--tgm-line-heading, 1.2);
}

a { color: var(--tgm-accent); }

/* Accessibility: visible on focus, per the tgm-accessibility support flag. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip-path: none;
	background: var(--tgm-background);
	color: var(--tgm-ink);
	outline: 2px solid var(--tgm-accent);
}

/* -- Header & footer parts -----------------------------------------------
 *
 * A part is WPBakery content, so its own rows and columns do the layout. A
 * 2/3 - 1/3 header stacks into two full-width rows on a phone by itself, which
 * is how every TGM site has always handled mobile. The theme does not
 * interfere.
 */

/* The built-in fallback header, used when no part is assigned. */
.tgm-header-inner,
.tgm-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tgm-gap);
	margin-inline: auto;
	padding-inline: var(--tgm-gap-side);
}

/* The header and footer answer to themselves. They used to inherit the content
 * width, which meant they were governed by a control on a different tab with a
 * different name and no indication that it reached them. */
.tgm-header-inner { max-width: var(--tgm-header-width); }
.tgm-footer-inner { max-width: var(--tgm-footer-width); }

/* Site-wide padding on the regions themselves, so it applies whether the
   header is a built-in fallback or a WPBakery part. */
#tgm-header { padding-block: var(--tgm-space-header); }
#tgm-footer { padding-block: var(--tgm-space-footer); }

/* Rhythm between WPBakery rows, set once for the whole site. A row's own
   Design Options still win where a specific row needs something else. */
.tgm-main > .vc_row,
.tgm-entry-content > .vc_row { margin-block-end: var(--tgm-space-section); }
.tgm-main > .vc_row:last-child,
.tgm-entry-content > .vc_row:last-child { margin-block-end: 0; }

.tgm-menu,
.tgm-footer-menu {
	display: flex;
	gap: var(--tgm-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A TGM element dropped into a builder row. */
.tgm-element {
	display: flex;
	align-items: center;
}

/* -- Elements -------------------------------------------------------------
 *
 * Structural only. Colour and type come from the generated custom properties
 * (Phase 3), so a client rebrand never touches this file.
 */

.tgm-button {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border: 2px solid var(--tgm-accent);
	border-radius: 4px;
	text-decoration: none;
	line-height: 1;
}

/* The contrast colour is DERIVED from the accent, so the label is readable
 * whatever the client picks. That is the whole point of TGM_Color. */
.tgm-button--solid {
	/* The fallback is the whole trick. When no gradient is set the property is
	 * never emitted, so this resolves to the flat accent and the button is
	 * exactly what it always was. Switch a gradient on and it fills. */
	background: var(--tgm-accent-gradient, var(--tgm-accent));
	color: var(--tgm-accent-contrast);
}

.tgm-button--solid:hover,
.tgm-button--solid:focus-visible {
	background: var(--tgm-accent-gradient-hover, var(--tgm-accent-hover));
	border-color: var(--tgm-accent-hover);
}

.tgm-button--outline {
	background: transparent;
	color: var(--tgm-accent);
}

/* ---------------------------------------------------------------------------
   Gradient utilities — how a gradient reaches a section

   There is no section element in this theme to hook. Sections are WPBakery
   rows, and their backgrounds belong to WPBakery's own Design Options, which
   R3.4 says we leave alone. Competing for the same property would mean
   whichever loaded last won, which is not a design, it is a race.

   So a gradient reaches a row the way any other row styling does: type the
   class into the row's Extra Class Name field. It also works on any element a
   snippet or child theme emits.

   Each falls back to its flat colour, so a class applied before its gradient
   is switched on is a solid background rather than nothing at all.
   --------------------------------------------------------------------------- */

.tgm-gradient-accent {
	background: var(--tgm-accent-gradient, var(--tgm-accent));
	color: var(--tgm-accent-contrast);
}

.tgm-gradient-primary {
	background: var(--tgm-primary-gradient, var(--tgm-primary));
	color: var(--tgm-primary-contrast);
}

.tgm-gradient-ink {
	background: var(--tgm-ink-gradient, var(--tgm-ink));
	color: var(--tgm-ink-contrast);
}

.tgm-gradient-background {
	background: var(--tgm-background-gradient, var(--tgm-background));
	color: var(--tgm-background-contrast);
}

.tgm-button--outline:hover,
.tgm-button--outline:focus-visible {
	background: var(--tgm-accent);
	color: var(--tgm-accent-contrast);
}

.tgm-social {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tgm-social-link {
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.tgm-contact {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 0.9em;
}

.tgm-divider {
	width: 1px;
	height: 24px;
	/* rgb() with the derived triplet — one stored colour, any opacity. */
	background: rgb(var(--tgm-ink-rgb) / 25%);
}

.tgm-search-panel {
	position: absolute;
	z-index: 20;
	inset-inline-end: 0;
	padding: 12px;
	background: var(--tgm-background);
	box-shadow: 0 8px 24px rgb(var(--tgm-ink-rgb) / 15%);
}

.tgm-search--icon { position: relative; }

.tgm-search-toggle,
.tgm-dark-mode-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.tgm-search-toggle:focus-visible,
.tgm-dark-mode-toggle:focus-visible,
.tgm-button:focus-visible,
.tgm-social-link:focus-visible,
.tgm-account:focus-visible {
	outline: 2px solid var(--tgm-accent);
	outline-offset: 2px;
}

/* The toggle shows the state you would switch TO, not the one you are in. */
.tgm-dark-mode-toggle .tgm-icon-moon { display: none; }
[data-tgm-theme="dark"] .tgm-dark-mode-toggle .tgm-icon-sun { display: none; }
[data-tgm-theme="dark"] .tgm-dark-mode-toggle .tgm-icon-moon { display: inline-flex; }

.tgm-breadcrumb { font-size: 0.85em; }
.tgm-breadcrumb-sep { margin: 0 6px; opacity: 0.5; }

.tgm-date-time { font-size: 0.9em; }

/* Off-canvas panel. Hidden by default via [hidden]; the JS flips it. */
.tgm-offcanvas-open { overflow: hidden; }

/* -- Layout ---------------------------------------------------------------
 *
 * The content area is a grid. A sidebar-less layout has one column and needs
 * no special class, because an empty sidebar emits no markup at all — see
 * tgm_do_sidebar(). Nothing has to ask "is the sidebar empty?".
 */

.tgm-content-area {
	display: grid;

	/* minmax(0, 1fr), NOT 1fr, and this is load-bearing.
	 *
	 * A grid track defaults to min-width:auto, which means it refuses to be
	 * narrower than its widest content. A WPBakery stretched row sets itself to
	 * the viewport width, so the track grew to match, dragging the content area
	 * past its own max-width and off centre. Every row-stretch option was
	 * broken by it. minmax(0, …) lets the track hold its declared size and lets
	 * the row overflow it deliberately, which is exactly what stretching is. */
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--tgm-gap) * 2);
	max-width: var(--tgm-full-width-content);
	margin-inline: auto;
	padding-inline: var(--tgm-gap-side);
	padding-block-start: var(--tgm-space-content-top);
	padding-block-end: var(--tgm-space-content-bottom);
	align-items: start;
}

/* Two columns ONLY when a sidebar is really there.
 *
 * Gated on .tgm-has-sidebar, not on the layout name. A grid track declared in
 * grid-template-columns exists whether or not anything fills it, so a
 * sidebar-less page under .tgm-layout-content-sidebar would reserve 300px for
 * nothing and shove the content off-centre. It did exactly that on a live
 * site. The layout says what is WANTED; the body class says what is THERE. */
@media (min-width: 900px) {
	/* A sidebar page's container is content + gap + sidebar. Both columns are
	 * settings, so the container is simply what they add up to — it is not
	 * capped to the full-width number, which answers a different question. */
	.tgm-has-sidebar.tgm-layout-content-sidebar .tgm-content-area,
	.tgm-has-sidebar.tgm-layout-sidebar-content .tgm-content-area {
		max-width: calc(
			var(--tgm-content-width) + calc(var(--tgm-gap) * 2) + var(--tgm-sidebar-width)
		);
	}

	.tgm-has-sidebar.tgm-layout-content-sidebar .tgm-content-area {
		grid-template-columns: minmax(0, var(--tgm-content-width)) var(--tgm-sidebar-width);
	}

	/* Reorder without touching markup: the sidebar stays second in the DOM,
	 * so screen readers and keyboard users still meet the content first. */
	.tgm-has-sidebar.tgm-layout-sidebar-content .tgm-content-area {
		grid-template-columns: var(--tgm-sidebar-width) minmax(0, var(--tgm-content-width));
	}
	.tgm-has-sidebar.tgm-layout-sidebar-content .tgm-main { order: 2; }
	.tgm-has-sidebar.tgm-layout-sidebar-content .tgm-sidebar { order: 1; }
}

/* -- Archives -------------------------------------------------------------- */

.tgm-archive-grid .tgm-main,
.tgm-archive-masonry .tgm-main {
	display: grid;
	gap: calc(var(--tgm-gap) * 1.5);
}

@media (min-width: 700px) {
	.tgm-archive-grid .tgm-main,
	.tgm-archive-masonry .tgm-main {
		grid-template-columns: repeat(var(--tgm-archive-columns, 3), minmax(0, 1fr));
	}
}

/* Masonry with no JS and no library: let the browser do it. */
.tgm-archive-masonry .tgm-main {
	grid-template-rows: masonry;
	align-tracks: start;
}

/* Pagination spans the grid rather than becoming a column. */
.tgm-archive-grid .tgm-main > .navigation,
.tgm-archive-masonry .tgm-main > .navigation {
	grid-column: 1 / -1;
}

/* -- Entry variants -------------------------------------------------------- */

.tgm-entry--wide .tgm-entry-content { max-width: none; }
.tgm-entry--narrow .tgm-entry-content { max-width: 65ch; }

.tgm-entry--minimal .tgm-entry-thumbnail,
.tgm-entry--minimal .tgm-entry-meta { display: none; }

.tgm-entry-hero {
	display: flex;
	align-items: flex-end;
	min-height: 60vh;
	padding: var(--tgm-gap);
	background-size: cover;
	background-position: center;
}

.tgm-entry-hero-inner {
	/* A hero spans the page, not a sidebar column, so it answers to the
	   full-width number even on a page that has a sidebar below it. */
	max-width: var(--tgm-full-width-content);
	margin-inline: auto;
	padding: var(--tgm-gap);
	/* The overlay is the accent's own contrast colour, so hero text stays
	 * readable whatever image or palette a client uses. */
	background: rgb(var(--tgm-background-rgb) / 85%);
}

.tgm-entry-thumbnail img { max-width: 100%; height: auto; display: block; }
.tgm-entry-meta { display: flex; gap: 12px; font-size: 0.85em; opacity: 0.75; }
.tgm-sidebar { display: flex; flex-direction: column; gap: var(--tgm-gap); }

/* -- Icons ----------------------------------------------------------------
 *
 * Inline SVG inheriting currentColor, so icons follow the palette and dark
 * mode with no extra rules. Sized in em so they scale with their context.
 */

.tgm-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	vertical-align: middle;
}

.tgm-social-link .tgm-icon { width: 1.1em; height: 1.1em; }

/* Fallback when we have no icon for a network — a text label beats an empty
 * link, which is the bug the search element shipped with. */
.tgm-social-text { font-size: 0.85em; }