/*
 * Cooltips - layout-CSS til GeneratePress child theme.
 *
 * VIGTIGT: Denne fil styrer kun LAYOUT (afstand, gitter, størrelser).
 * Farver og skrifttyper hentes fra GeneratePress' egne CSS-variabler
 * (--accent, --contrast, --base-2 osv.), som sættes i Udseende > Tilpas.
 * Ændrer du farver/skrifttyper der, opdateres alt automatisk - også det
 * der styles herfra.
 */

/* -------------------------------------------------------------------- */
/*  Forside: hero-overskrift + søgefelt                                 */
/* -------------------------------------------------------------------- */

.cooltips-hero {
	text-align: center;
	padding: 1rem 0 2rem;
}

.cooltips-hero__title {
	margin: 0;
}

.cooltips-hero__search {
	width: 100%;
	text-align: center;
}

.cooltips-hero .cooltips-hero__search .search-form {
	display: flex;
	width: 100%;
	max-width: 480px;
	margin: 1.5rem auto 0;
}

/* GeneratePress' søgeformular pakker <input> ind i et <label>. Det er
   <label>'et - ikke selve inputtet - der er det direkte flex-element, så
   det er DEN, der skal vokse for at fylde pladsen ud. */
.cooltips-hero__search .search-form label {
	flex: 1 1 auto;
	display: flex;
}

.cooltips-hero__search .search-field {
	width: 100%;
	border-radius: 999px 0 0 999px;
}

.cooltips-hero__search .search-submit {
	flex: 0 0 auto;
	border-radius: 0 999px 999px 0;
}

/* -------------------------------------------------------------------- */
/*  Artikel-gitter: forside + arkiv/kategori/søgning                    */
/*  Antal kolonner styres af --cooltips-grid-columns                    */
/*  (Udseende > Tilpas > Cooltips - Indstillinger > Forside)            */
/* -------------------------------------------------------------------- */

.cooltips-grid,
.archive .site-main,
.search .site-main {
	display: grid;
	grid-template-columns: repeat(var(--cooltips-grid-columns, 3), 1fr);
	gap: 2.5rem 2rem;
	margin: 2rem 0 3rem;
}

/* Overskriften øverst på arkiv-/kategorisider skal fylde hele bredden. */
.archive .site-main > .page-header {
	grid-column: 1 / -1;
}

/* Billede -> titel -> uddrag (GeneratePress udskriver som standard titel
   først i lister, det rykkes visuelt med flexbox-rækkefølge). */
.cooltips-grid .inside-article,
.archive .site-main .inside-article,
.search .site-main .inside-article {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	border-radius: 16px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.cooltips-grid > article,
.archive .site-main > article,
.search .site-main > article {
	box-sizing: border-box;
}

.cooltips-grid .post-image,
.archive .site-main .post-image,
.search .site-main .post-image {
	order: -1;
	margin: 0 0 1rem;
}


.cooltips-grid .post-image img,
.archive .site-main .post-image img,
.search .site-main .post-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 12px;
}

.cooltips-grid .entry-title,
.archive .site-main .entry-title,
.search .site-main .entry-title {
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 0.5rem;
}

.cooltips-grid .entry-summary p,
.archive .site-main .entry-summary p,
.search .site-main .entry-summary p {
	color: var(--contrast-2);
	font-size: 0.9375rem;
	margin: 0;
}

.cooltips-pagination {
	margin: 1rem 0 3rem;
}

.cooltips-pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cooltips-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.9rem;
	border: 1px solid var(--base);
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 600;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cooltips-pagination .page-numbers.dots {
	border-color: transparent;
}

.cooltips-pagination a.page-numbers:hover {
	background: var(--base-2);
	border-color: var(--base-2);
}

.cooltips-pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* -------------------------------------------------------------------- */
/*  Forsidens tekstblok (nederst)                                       */
/* -------------------------------------------------------------------- */

.cooltips-intro {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 2rem;
	border-top: 1px solid var(--base);
}

/* -------------------------------------------------------------------- */
/*  Enkelt artikel: billede + hvid titel-boks + disclaimer + brødkrummer */
/* -------------------------------------------------------------------- */

.single-post .page-header-image-single img {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	display: block;
}

.single-post .entry-header {
	background: var(--base-3);
	text-align: center;
	padding: 2rem;
	border-radius: 0 0 30px 30px;
}

.single-post .entry-title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin: 0 0 0.5rem;
}

.cooltips-disclaimer {
	color: var(--contrast-2);
	font-size: 0.875rem;
	margin: 0;
}

.cooltips-breadcrumbs {
	margin: 1.5rem 0;
	font-size: 0.875rem;
	color: var(--contrast-2);
}

.cooltips-breadcrumbs a {
	color: inherit;
	text-decoration: underline;
}

/* -------------------------------------------------------------------- */
/*  "Nye artikler" widget i sidebaren ved siden af artikler              */
/* -------------------------------------------------------------------- */

.widget_cooltips_recent_posts .cooltips-recent-posts {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.cooltips-recent-post {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
}

.cooltips-recent-post__thumb {
	flex: 0 0 90px;
	width: 90px;
	height: 60px;
	overflow: hidden;
	border-radius: 4px;
}

.cooltips-recent-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cooltips-recent-post__title {
	font-weight: 600;
	line-height: 1.35;
}

/* -------------------------------------------------------------------- */
/*  Footer-widgets: ryd op i standard-lister                            */
/* -------------------------------------------------------------------- */

.footer-widgets ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-widgets li {
	margin: 0 0 0.5rem;
}

/* -------------------------------------------------------------------- */
/*  Mobil / tablet                                                      */
/* -------------------------------------------------------------------- */

@media (max-width: 768px) {
	.cooltips-grid,
	.archive .site-main,
	.search .site-main {
		grid-template-columns: 1fr;
	}

	.single-post .entry-header {
		padding: 1.5rem;
		border-radius: 0 0 20px 20px;
	}
}