/*
 * 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 {
	--tgm-content-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);
	max-width: var(--tgm-content-width);
	margin-inline: auto;
	padding-inline: var(--tgm-gap-side);
}

/* 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 {
	background: var(--tgm-accent);
	color: var(--tgm-accent-contrast);
}

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

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

.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;
	gap: calc(var(--tgm-gap) * 2);
	max-width: var(--tgm-content-width);
	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) {
	.tgm-has-sidebar.tgm-layout-content-sidebar .tgm-content-area {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	/* 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: 300px minmax(0, 1fr);
	}
	.tgm-has-sidebar.tgm-layout-sidebar-content .tgm-main { order: 2; }
	.tgm-has-sidebar.tgm-layout-sidebar-content .tgm-sidebar { order: 1; }
}

/* The reading measure. Long-form text at 1200px is genuinely hard to read. */
.tgm-layout-narrow .tgm-content-area { max-width: 760px; }

/* -- 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 {
	max-width: var(--tgm-content-width);
	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; }