@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i");

/* ============================================================
   MRL website refresh
   A layer on top of main.css + header.css (loaded AFTER them,
   so equal-specificity rules here win). Additive only — no
   template files are modified.

   Stage 1 — Typography, colour & readability
   Stage 2 — Navigation
   ============================================================ */

:root {
	--mrl-ink: #15293f;        /* deep navy — headings, nav, brand */
	--mrl-text: #2b3641;       /* body copy (softer than pure black) */
	--mrl-muted: #6b7682;      /* meta / secondary text */
	--mrl-accent: #0e7c90;     /* links & current page (readable on white) */
	--mrl-accent-bright: #47D3E5; /* the original bright cyan, for dark areas */
	--mrl-line: #e7eaee;       /* hairline borders */
	--mrl-surface: #f5f7f9;    /* alternating section background */
}

/* ============================================================
   Stage 1 — Headings & colour
   Per preference: the previous (light) body font is left exactly
   as it was. Only the headings get extra weight + a subtle deep-
   navy tone — at their ORIGINAL sizes and letter-spacing.
   ============================================================ */

h1,
h2,
h3,
h4 {
	color: var(--mrl-ink);
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
h4 { font-weight: 600; }

/* Bold emphasis inside body copy */
strong,
b {
	font-weight: 600;
	color: var(--mrl-ink);
}

/* Reading measure: the content columns are sized inline with
   width:75% / 80%, which stretches lines too wide on large
   monitors. Cap the column so line length stays comfortable. */
.wrapper.style1 > .inner {
	max-width: 70rem;
}

/* Links inside body copy */
a:hover {
	color: var(--mrl-accent);
}

/* ============================================================
   Stage 2 — Navigation
   ============================================================ */

#site-header {
	border-bottom: 1px solid var(--mrl-line);
	background: #ffffff;
}

.navbar {
	align-items: center;
	padding: 0.35rem 1.25rem;
}

.navbar-nav {
	align-items: center;
	gap: 0.1rem;
	margin: 0;
	padding: 0;
}

.navbar .nav-item {
	list-style: none;
}

.navbar .nav-link {
	font-size: 1rem;                  /* down from the template's 25px */
	font-weight: 600;
	color: var(--mrl-ink);
	padding: 0.55rem 0.95rem;
	border-radius: 6px;
	position: relative;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
	color: var(--mrl-accent);
	background-color: rgba(14, 124, 144, 0.08);
	text-decoration: none;
}

/* Current page */
.navbar .nav-link.active {
	color: var(--mrl-accent);
}

.navbar .nav-link.active::after {
	content: "";
	position: absolute;
	left: 0.95rem;
	right: 0.95rem;
	bottom: 0.3rem;
	height: 2px;
	border-radius: 2px;
	background: var(--mrl-accent);
}

/* Mobile dropdown: mark the current page there too */
.navbar .dropdown-content a.active {
	color: var(--mrl-accent);
	font-weight: 600;
}

/* ============================================================
   Gallery — clear the fixed header
   The site header is position:fixed (~110px tall). Unlike the
   other pages, the gallery grid has no wrapping container with
   top padding, so its first row sits hidden behind the header.
   Add top spacing (matching the wrappers' 7rem) so the whole
   first row is visible when the page opens.
   ============================================================ */

.gallery.style1 {
	padding-top: 7rem;
}

@media screen and (max-width: 736px) {
	.gallery.style1 {
		padding-top: 4rem;
	}
}