/*
==========================================================
Generic Styles
==========================================================
*/
/* Character set */
@charset "utf-8";

/* Self-hosted web fonts */
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2");
}

:root {
    /* Section spacing */
    --section-spacing:        4rem;
    --section-spacing-mobile: 3rem;
    --section-spacing-small:  2rem;

    /* Typography */
    --font-family-base: "Source Sans 3", "Segoe UI", Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Height of the fixed navigation bar */
    --navbar-height: 124px;
    --navbar-height-mobile: 108px;

     /* Brand palette (basis for semantic colors - do not use these outside of root) */
    --brand-blue-navy:   				#001434;
    --brand-blue-dark: 					#2a537b;
    --brand-blue:        				#2f5597;
    --brand-blue-bright: 				#4e9fe4;
    --brand-blue-pale:   				#edf7fd;
    --brand-white:       				#ffffff;

    /* Semantic colors - only use these */
    --color-text:                		var(--brand-blue-navy);
    --color-text-reversed:       		var(--brand-white);
    --color-text-reversed-muted: 		color-mix(in srgb, var(--brand-white) 85%, transparent);
    --color-text-reversed-subtle: 		color-mix(in srgb, var(--brand-white) 70%, transparent);

    --color-primary: 					var(--brand-blue-dark);
    --color-heading: 					var(--brand-blue);
    --color-accent:  					var(--brand-blue-bright);

    --color-background:      			var(--brand-blue-pale);
    --color-surface:         			var(--brand-white);
    --color-background-dark: 			var(--brand-blue-navy);

    --color-surface-translucent:		color-mix(in srgb, var(--brand-white) 95%, transparent);
        --color-decoration-subtle:   		color-mix(in srgb, var(--brand-white) 8%, transparent);
    --color-pattern-subtle:      		color-mix(in srgb, var(--brand-blue-dark) 5%, transparent);

    --color-divider:       				color-mix(in srgb, var(--brand-blue-dark) 8%, transparent);
    --color-border:        				color-mix(in srgb, var(--brand-blue-dark) 10%, transparent);
    --color-border-strong: 				color-mix(in srgb, var(--brand-blue-dark) 20%, transparent);
    --color-shadow-strong: 				color-mix(in srgb, var(--brand-blue-navy) 30%, transparent);

    --color-image-overlay-strong:		color-mix(in srgb, var(--brand-blue-navy) 65%, transparent);
    --color-image-overlay-medium:		color-mix(in srgb, var(--brand-blue-navy) 48%, transparent);
    --color-image-overlay-light:		color-mix(in srgb, var(--brand-blue-navy) 25%, transparent);
    --color-image-overlay-case-strong:	color-mix(in srgb, var(--brand-blue-navy) 72%, transparent);
    --color-image-overlay-case-light:	color-mix(in srgb, var(--brand-blue-navy) 28%, transparent);
	
	--status-success:         			#2e7d32;
    --status-warning:					#f9a825;
    --status-error:            			#c62828;
}

/* Margins and padding */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Text */
body {
	font-family: var(--font-family-base);
	line-height: 1.6;
	color: var(--color-text);
	overflow-x: hidden;
	background: var(--color-background);
}

/* Links */
a,
a:visited {
    color: var(--color-primary);
    text-decoration-color: var(--color-accent);
    text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
    text-decoration-thickness: 2px;
}

/* Buttons */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem;
    padding: 0.75rem 1.2rem; border: 2px solid var(--color-accent);
    border-radius: 999px; background: var(--color-surface); color: var(--color-background-dark);
    font-family: var(--font-family-base); font-size: 1rem; font-weight: var(--font-weight-bold);
    line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.button:hover, .button:focus-visible {
    transform: translateY(-2px); background: var(--color-accent); color: var(--color-background-dark);
}
.button:focus-visible { outline: 3px solid var(--color-surface); outline-offset: 3px; }

.button-icon {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 1.35rem;
}

/* Unordered lists */
ul {
    margin: 0;
    padding-left: 0;
    list-style-position: inside;
}
ul li {
    margin-bottom: 0.25rem;
}

/* Nested unordered lists */
ul ul {
    margin-top: 0.25rem;
	padding-left: 2rem;
    list-style-position: outside;
}

/* Smooth scrolling + offset anchor for fixed navigation */
html {
	scroll-behavior: smooth;
}
section[id] {
	scroll-margin-top: var(--navbar-height);
}
@media (max-width: 940px) {
	section[id] {
		scroll-margin-top: var(--navbar-height-mobile);
	}
}

/* Sections */
.section {
	padding: var(--section-spacing-small) 5% var(--section-spacing);
	max-width: 1200px;
	margin: 0 auto;
}
.section-title {
	text-align: center;
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: var(--font-weight-bold);
	margin-bottom: 3rem;
	color: var(--color-heading);
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s ease;
	letter-spacing: -0.02em;
}
.section-title.animate {
	opacity: 1;
	transform: translateY(0);
}
.fade-in {
	opacity: 0;
	transform: translateY(40px);
	transition: all 0.8s ease;
}
.fade-in.animate {
	opacity: 1;
	transform: translateY(0);
}
@media (max-width: 940px) {
    .section {
        padding: var(--section-spacing-small) 5% var(--section-spacing-mobile);
    }
}
@media (max-width: 480px) {
    .section {
        padding: 1.5rem 5% var(--section-spacing-small);
    }
}

/* Page content */
.page-content {
    width: min(90%, 1000px);
    margin: 0 auto;
    padding: var(--section-spacing) 0;
}
.page-section {
    margin-bottom: 3.5rem;
}
.page-content h2 {
    margin: 0 0 1rem;
    color: var(--color-heading);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
}
.page-section h3 {
    margin: 1.5rem 0 0.5rem;
    color: var(--color-primary);
}
.page-content p,
.page-content li {
    font-size: 1.08rem;
    line-height: 1.7;
}
.page-content p + p {
    margin-top: 0.75rem;
}