/* =========================================================
   base.css — variables, reset, typography, container.
   ========================================================= */

:root {
	/* Brand */
	--sonix-blue:        #1e88e5;
	--sonix-dark-blue:   #1565c0;
	--sonix-light-blue:  #42a5f5;
	--sonix-blue-footer: #204C75;
	--sonix-blue-deep:   #0f2540;

	/* Surfaces */
	--surface-page:      #ffffff;
	--surface-muted:     #F4F2F0;
	--surface-card:      #f8f9fa;
	--surface-border:    #e6e8eb;

	/* Text */
	--text-strong:       #1a1a1a;
	--text-default:      #2b2f33;
	--text-muted:        #5b6065;
	--text-quiet:        #8a8f95;

	/* Spacing scale */
	--space-1: .5rem;
	--space-2: .75rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 2.5rem;
	--space-7: 3rem;
	--space-8: 4rem;

	/* Layout */
	--content-max:  720px;
	--site-max:    1140px;
	--toc-width:    280px;

	/* Type */
	--font-ui:    'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--font-prose: 'Noto Serif', Georgia, 'Times New Roman', serif;

	--radius-card: 12px;
	--radius-pill: 999px;

	--shadow-card:    0 2px 4px rgba(15, 23, 42, .04);
	--shadow-card-h:  0 12px 32px rgba(15, 23, 42, .12);
	--shadow-cta:     0 18px 40px rgba(15, 23, 42, .18);

	--header-h: 72px;
}

/* ------- Reset (lighter than the original) ------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--sonix-blue); text-decoration: none; }
a:hover, a:focus { color: var(--sonix-dark-blue); text-decoration: underline; }
ul, ol { padding: 0; margin: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--surface-border); margin: var(--space-5) 0; }

body {
	background: var(--surface-page);
	color: var(--text-default);
	font-family: var(--font-ui);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

.gtm-noscript { display: none; visibility: hidden; }

/* ------- Skip link ------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.screen-reader-text:focus {
	background: #fff;
	color: var(--sonix-blue);
	display: block;
	padding: var(--space-2) var(--space-3);
	left: var(--space-2);
	top: var(--space-2);
	z-index: 100000;
	clip: auto !important;
	width: auto;
	height: auto;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.4);
	border-radius: 6px;
	text-decoration: none;
}

/* ------- Container helper ------- */
.site-main {
	min-height: 60vh;
}

/* ------- Buttons ------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: .65rem 1.1rem;
	border-radius: var(--radius-pill);
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
	white-space: nowrap;
}
.btn:hover, .btn:focus { text-decoration: none; transform: translateY(-1px); }
.btn--filled  { background: var(--sonix-blue); color: #fff; }
.btn--filled:hover, .btn--filled:focus { background: var(--sonix-dark-blue); color: #fff; }
.btn--outline { background: transparent; color: var(--sonix-blue); border-color: var(--sonix-blue); }
.btn--outline:hover, .btn--outline:focus { background: var(--sonix-blue); color: #fff; }
.btn--on-dark.btn--filled   { background: #fff; color: var(--sonix-blue-deep); }
.btn--on-dark.btn--filled:hover { background: var(--sonix-blue); color: #fff; }
.btn--on-dark.btn--outline  { color: #fff; border-color: rgba(255,255,255,.7); }
.btn--on-dark.btn--outline:hover { background: #fff; color: var(--sonix-blue-deep); border-color: #fff; }
.btn--block { display: flex; width: 100%; }

/* ------- Typography ------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-3);
	color: var(--text-strong);
	font-family: var(--font-ui);
	font-weight: 700;
	line-height: 1.25;
}

p { margin: 0 0 var(--space-3); }

/* ------- Forms ------- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea {
	font: inherit;
	width: 100%;
	padding: .65rem .9rem;
	border: 1px solid var(--surface-border);
	border-radius: 10px;
	background: #fff;
	color: var(--text-default);
}
input:focus, textarea:focus, button:focus, a:focus {
	outline: 2px solid var(--sonix-blue);
	outline-offset: 2px;
}

/* ------- Pagination ------- */
.pagination {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	margin: var(--space-7) auto 0;
	max-width: var(--site-max);
	padding: 0 var(--space-4);
}
.pagination a {
	display: inline-block;
	padding: .55rem 1rem;
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	color: var(--text-default);
	text-decoration: none;
	font-weight: 700;
}
.pagination a:hover { background: var(--sonix-blue); color: #fff; }