/*/////////////////////////////////////////////////////////
	System: New CMS
	Theme: Metadas Media
	Page: themes/metadas/css/main.css
	Description: The site's styles: the header and footer, and
	             each row type (rows/*-body.tpl). The editor's
	             system/editor/assets/content.css repeats the text
	             styles for its rich text areas.
	Copyright: (c) Metadas Media 2026 - All rights reserved
/////////////////////////////////////////////////////////*/

/* TOKENS ------------------------------------------------------------------- */
:root {
	--text: #1f2a37;
	--heading: #0b2333;
	--muted: #5d6b7c;
	--accent: #1f6fa5;
	--accent-dark: #185a86;
	--grey: #f3f5f8;
	--blue: #0b2333;
	--line: #e3e8ef;
	--wrap: 1200px;
	--gutter: clamp(16px, 4vw, 40px);
	--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

body {
	margin: 0;
	background: #fff;
	color: var(--text);
	font: 17px/1.65 var(--font);
}

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; color: var(--heading); }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p, ul, ol { margin: 0 0 1em; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
img { max-width: 100%; height: auto; }

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.wrap-narrow { max-width: calc(760px + 2 * var(--gutter)); }
.wrap-wide { max-width: calc(1440px + 2 * var(--gutter)); }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: 8px 14px;
	background: var(--heading);
	color: #fff;
}

.skip-link:focus { left: 8px; top: 8px; z-index: 10; }

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Text classes editors can choose (system/editor/assets/content.css lists them in the editor) */
.lead { font-size: 1.2em; color: var(--muted); }
.note { padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--grey); }

.button {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.button:hover { background: var(--accent-dark); color: #fff; }

/* HEADER AND FOOTER -------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); }

.site-header .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.site-name { font-size: 1.25rem; font-weight: 700; color: var(--heading); text-decoration: none; }

.site-nav ul { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.site-nav li { position: relative; }
.site-nav a { color: var(--text); text-decoration: none; }
.site-nav a:hover, .site-nav .is-current > a, .site-nav .is-parent > a { color: var(--accent); }
.site-nav .is-current > a { font-weight: 600; }

/* Submenus open on hover or keyboard focus */
.site-nav ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: -14px;
	z-index: 5;
	min-width: 200px;
	padding: 8px 0;
	flex-direction: column;
	gap: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(11, 35, 51, 0.12);
}

.site-nav li:hover > ul, .site-nav li:focus-within > ul { display: flex; }
.site-nav ul ul a { display: block; padding: 6px 14px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; }
.crumbs a { color: var(--muted); }

.site-footer { padding: 32px 0; background: var(--blue); color: #c9d6e0; font-size: 0.9rem; }
.site-footer p { margin: 0; }

/* ROWS --------------------------------------------------------------------- */
.row { padding: clamp(40px, 6vw, 80px) 0; }
.row > .wrap > :last-child { margin-bottom: 0; }

.bg-grey { background: var(--grey); }
.bg-blue { background: var(--blue); color: #dbe6ee; }
.bg-blue h1, .bg-blue h2, .bg-blue h3 { color: #fff; }
.bg-blue a:not(.button) { color: #8cc6ee; }

/* Two columns (rows/two-column-body.tpl) */
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; }
.columns-wide-left { grid-template-columns: 2fr 1fr; }
.columns-wide-right { grid-template-columns: 1fr 2fr; }
.column > :last-child { margin-bottom: 0; }

.bg-gradient { background: linear-gradient(90deg, #2a597e, #75a1c5); color: #fff; }
.bg-gradient h1, .bg-gradient h2, .bg-gradient h3, .bg-gradient a:not(.button) { color: #fff; }

/* Columns, Gradient two columns and Cards: 2, 3 or 4 across */
.grid { display: grid; grid-template-columns: repeat(var(--across, 2), minmax(0, 1fr)); gap: 32px 40px; }
.grid-3 { --across: 3; }
.grid-4 { --across: 4; }
.row > .wrap > h2 + .grid, .row > .wrap > .intro + .grid { margin-top: 24px; }

/* Cards (rows/cards-body.tpl) */
.row-cards .intro { max-width: 70ch; }
.card { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(11, 35, 51, 0.08), 0 6px 20px rgba(11, 35, 51, 0.08); }
.card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card-text { flex: 1; padding: 20px 22px 4px; }
.card-text h3 { color: var(--heading); }
.card-button { margin: 0; padding: 0 22px 22px; }
.bg-white .card { border: 1px solid var(--line); }

/* Feature grid (rows/feature-body.tpl): the photo runs to the screen's edge */
.row-feature { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.feature-image img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.feature-text { align-self: center; max-width: calc(var(--wrap) / 2); padding: clamp(40px, 6vw, 80px) var(--gutter); }
.feature-text > :last-child { margin-bottom: 0; }
.feature-right .feature-image { order: 2; }
.feature-right .feature-text { justify-self: end; }
.row-feature:not(:has(.feature-image)) .feature-text { grid-column: 1 / -1; justify-self: center; }

/* Table (rows/table-body.tpl) */
.table-scroll { overflow-x: auto; }
.table-scroll > :last-child { margin-bottom: 0; }
.row-table table { width: 100%; margin: 0 0 1em; border-collapse: collapse; }
.row-table th, .row-table td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.row-table th { background: var(--grey); color: var(--heading); }
.table-stripes tbody tr:nth-child(even) { background: var(--grey); }
.bg-grey.row-table th, .bg-grey.table-stripes tbody tr:nth-child(even) { background: #fff; }
.bg-blue.row-table th, .bg-blue.row-table td { border-color: rgba(255, 255, 255, 0.2); }
.bg-blue.row-table th, .bg-blue.table-stripes tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.06); color: #fff; }

/* Breadcrumbs and share (rows/crumbs-body.tpl, modules/crumbs-share.php) */
.row-crumbs { padding: 16px 0; }
.crumbs-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.crumbs-share .crumbs { margin: 0; }
.share { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; }
.share a { display: block; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); text-decoration: none; }
.share a:hover { border-color: var(--accent); color: var(--accent); }
.bg-blue .crumbs, .bg-blue .crumbs a { color: #b9cbd8; }

/* Two images (rows/two-images-body.tpl): 3 by 2, cropped to fit if the photo isn't */
.row-images .image { margin: 0; }
.row-images .image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.row-images .image figcaption { margin-top: 8px; font-size: 0.9rem; color: var(--muted); }
.row-images.bg-blue .image figcaption { color: #b9cbd8; }

/* Hero (rows/hero-body.tpl) */
.row-hero { padding: clamp(64px, 12vw, 160px) 0; background: var(--blue) center / cover no-repeat; color: #fff; }
.row-hero h1 { color: #fff; max-width: 18ch; }
.row-hero.has-image { position: relative; isolation: isolate; }
.row-hero.has-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 35, 51, 0.85), rgba(11, 35, 51, 0.35)); }
.row-hero .hero-text { max-width: 60ch; font-size: 1.15em; }
.row-hero.align-center { text-align: center; }
.row-hero.align-center h1, .row-hero.align-center .hero-text { margin-left: auto; margin-right: auto; }

@media (max-width: 960px) {
	.grid-3, .grid-4 { --across: 2; }
}

@media (max-width: 760px) {
	.columns, .columns-wide-left, .columns-wide-right { grid-template-columns: 1fr; }
	.grid, .grid-3, .grid-4 { --across: 1; }
	.row-feature { grid-template-columns: 1fr; }
	.feature-right .feature-image { order: 0; }
	.feature-text, .feature-right .feature-text { max-width: none; justify-self: stretch; }
	.feature-image img { min-height: 0; aspect-ratio: 4 / 3; }
}