/*
Theme Name: Amerika Inside
Description: Een rustig nieuwsthema met headlines, tagarchieven en een doorlopende stroom van korte berichten.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amerika-inside
*/

@font-face {
	font-family: "Alfa Slab One";
	src: url("assets/fonts/alfaslabone.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "Roboto Slab";
	src: url("assets/fonts/robotoslab.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: Roboto;
	src: url("assets/fonts/roboto.ttf") format("truetype");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: Oswald;
	src: url("assets/fonts/oswald.ttf") format("truetype");
	font-weight: 200 700;
	font-display: swap;
}

:root {
	--navy: #223656;
	--ink: #0e182c;
	--link: #b34a4c;
	--muted: #546276;
	--line: #e5e9ef;
	--shadow: 0 3px 18px rgb(14 24 44 / 7%);
}

* { box-sizing: border-box; }
body {
	margin: 0;
	background: #fafbfd;
	color: var(--ink);
	font: 1rem/1.65 Roboto, Arial, sans-serif;
	overflow-wrap: break-word;
}

a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; }

.screen-reader-text,
.skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	z-index: 20;
	inset: 3rem auto auto 1rem;
	padding: .5rem 1rem;
	background: white;
}

.masthead {
	position: sticky;
	top: 0;
	z-index: 10;
	background: white;
	box-shadow: var(--shadow);
	text-align: center;
}

.admin-bar .masthead { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .masthead { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .masthead { top: 0; }
}

.brand {
	padding: 1rem 1rem .65rem;
	font: 400 clamp(1.35rem, 4vw, 2rem)/1.15 "Alfa Slab One", Georgia, serif;
}

.brand a { color: var(--navy); text-decoration: none; }
.custom-logo { display: block; width: auto; height: auto; max-width: min(100%, 300px); max-height: 70px; margin: auto; object-fit: contain; }

.masthead nav { overflow-x: auto; }
.masthead nav ul {
	display: flex;
	justify-content: safe center;
	gap: clamp(.75rem, 3vw, 1.75rem);
	margin: 0;
	padding: .3rem 1rem .75rem;
	list-style: none;
	white-space: nowrap;
}

.masthead nav a {
	color: var(--navy);
	font: 500 1rem/1.5 Oswald, Arial, sans-serif;
	letter-spacing: .09em;
	text-decoration: none;
	text-transform: uppercase;
}

.masthead nav a:hover,
.masthead nav [aria-current="page"] { color: var(--link); }

.shell { width: min(100% - 2rem, 49rem); margin: 1.5rem auto 3rem; scroll-margin-top: 11rem; }
.search { display: flex; gap: .55rem; margin-bottom: 1.4rem; }
.search input,
.search button {
	padding: .65rem .85rem;
	border: 1px solid var(--line);
	border-radius: .45rem;
	font: inherit;
}

.search input { flex: 1; min-width: 0; background: white; color: var(--ink); }
.search button { background: var(--navy); color: white; cursor: pointer; }
.search button:hover { background: var(--ink); }

.panel { background: white; border: 1px solid var(--line); border-radius: .75rem; box-shadow: var(--shadow); }
.headlines, .empty { padding: 1rem clamp(1rem, 4vw, 1.75rem); }
.headlines { border-top: 3px solid var(--navy); margin-bottom: 2rem; }
.headlines h2, .section-title {
	margin: 0 0 .65rem;
	color: var(--navy);
	font: 500 1.3rem/1.3 Oswald, Arial, sans-serif;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.headlines ul { list-style: none; padding: 0; margin: 0; }
.headlines li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; padding: .55rem 0; align-items: baseline; }
.headlines li + li { border-top: 1px solid var(--line); }
.headlines time, .article-date { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.headlines a { font: 400 1rem/1.45 "Alfa Slab One", Georgia, serif; text-decoration: none; }
.headlines a:hover { text-decoration: underline; }

.feed { display: grid; gap: 1.75rem; }
.hero img { display: block; width: 100%; height: auto; max-height: 33rem; object-fit: cover; border-radius: .7rem .7rem 0 0; }
.article-inner { padding: clamp(1rem, 4vw, 2rem); }
.article-title {
	margin: 0 0 .35rem;
	color: var(--navy);
	font: 400 clamp(1.65rem, 5vw, 2.7rem)/1.15 "Alfa Slab One", Georgia, serif;
}

.article-title a { color: inherit; text-decoration: none; }
.article-title a:hover { color: var(--link); }
.article-intro { color: var(--navy); font: 400 1.15rem/1.55 "Roboto Slab", Georgia, serif; }
.article-copy { margin-top: 1rem; }
.article-copy img { max-width: 100%; height: auto; }
.article-copy iframe, .article-copy video { max-width: 100%; }
.article-copy pre { overflow: auto; }
.article-copy > :first-child { margin-top: 0; }
.article-copy > :last-child { margin-bottom: 0; }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.3rem; }
.tags a { padding: .15rem .65rem; border: 1px solid var(--line); border-radius: 1rem; font-size: .875rem; text-decoration: none; }
.tags a:hover { border-color: currentColor; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
.site-footer { border-top: 1px solid var(--line); padding: 1.4rem 1rem; text-align: center; color: var(--muted); }

@media (max-width: 480px) {
	.headlines li { grid-template-columns: 5.75rem minmax(0, 1fr); gap: .5rem; }
}