/*
Theme Name: GoCamp
Theme URI: https://www.gocamp.dk/
Template: listify
Author: Sommer Systems ApS
Author URI: https://sommersystems.com
Description: Child-tema til Listify for gocamp.dk. Alle tilpasninger laves her – aldrig i Listify selv – så forældretemaet kan opdateres uden at overskrive dem.
Version: 1.1.0
Requires PHP: 8.3
Text Domain: gocamp
*/

/* Fonte: Fraunces og Figtree (SIL Open Font License 1.1), selv-hostede. */
@font-face {
	font-family: "Fraunces";
	src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("fonts/fraunces-latin-wght-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("fonts/figtree-latin-wght-italic.woff2") format("woff2");
	font-weight: 300 900;
	font-style: italic;
	font-display: swap;
}

/* Designtokens: skov, mos, salvie, sand, creme, terracotta. */
:root {
	--gc-skov: #2f4a3a;
	--gc-skov-moerk: #1f3329;
	--gc-mos: #5b6e45;
	--gc-salvie: #a9b8a0;
	--gc-salvie-lys: #dde5d6;
	--gc-sand: #ede4d3;
	--gc-creme: #f7f3ec;
	--gc-hvid: #fffdf9;
	--gc-terracotta: #b8683f;
	--gc-okker: #c9973f;
	--gc-tekst: #26302a;
	--gc-tekst-bloed: #4a554d;
	--gc-kant: #e2dacb;
	--gc-radius: 14px;
	--gc-radius-lille: 10px;
	--gc-skygge: 0 1px 2px rgba(38, 48, 42, 0.06), 0 6px 20px rgba(38, 48, 42, 0.08);
	--gc-font-overskrift: "Fraunces", Georgia, serif;
	--gc-font-tekst: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--gc-skygge-loeft: 0 2px 4px rgba(38, 48, 42, 0.06), 0 16px 36px rgba(38, 48, 42, 0.14);
}

/* ------------------------------------------------------------------ */
/* Grundlag                                                            */
/* ------------------------------------------------------------------ */

body {
	font-family: var(--gc-font-tekst);
	color: var(--gc-tekst-bloed);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
.home-widget-title,
.cta-title,
.page-title,
.entry-title,
.footer-widget-title {
	font-family: var(--gc-font-overskrift);
	color: var(--gc-tekst);
	font-weight: 600;
	letter-spacing: -0.01em;
}

a {
	color: var(--gc-skov);
}

a:hover,
a:focus {
	color: var(--gc-terracotta);
}

::selection {
	background: var(--gc-salvie-lys);
	color: var(--gc-tekst);
}

/* Knapper og felter: bløde hjørner, store klikflader. */
.button,
button,
input[type="submit"],
input[type="button"],
.update_results_override {
	border-radius: 12px;
	font-family: var(--gc-font-tekst);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
	transform: translateY(-1px);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.select2-container .select2-selection,
.chosen-container .chosen-single,
.chosen-container-multi .chosen-choices {
	border-radius: var(--gc-radius-lille);
	border-color: var(--gc-kant);
	font-family: var(--gc-font-tekst);
	color: var(--gc-tekst);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--gc-salvie);
	box-shadow: 0 0 0 3px rgba(169, 184, 160, 0.35);
	outline: none;
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

.site-header,
.primary-header {
	background-color: var(--gc-creme);
}

.site-header {
	border-bottom: 1px solid var(--gc-kant);
	box-shadow: none;
}

.site-title a,
.site-title a:hover {
	font-family: var(--gc-font-overskrift);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--gc-skov);
}

.primary.nav-menu .menu-item > a {
	font-weight: 500;
	color: var(--gc-tekst);
}

.primary.nav-menu .menu-item > a:hover,
.primary.nav-menu .current-menu-item > a {
	color: var(--gc-skov);
}

/* "Opret dit sted" som knap – terracotta er sidens eneste stærke accent. */
.primary.nav-menu .gc-menu-knap > a {
	margin-left: 6px;
	padding: 10px 20px;
	border-radius: 999px;
	background-color: var(--gc-terracotta);
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
}

.primary.nav-menu .gc-menu-knap > a:hover,
.primary.nav-menu .gc-menu-knap > a:focus {
	background-color: #a55a34;
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Forsidens hero                                                      */
/* ------------------------------------------------------------------ */

.entry-cover--home.homepage-cover {
	background-color: var(--gc-skov-moerk);
	padding: 110px 0 120px;
}

.entry-cover--home.homepage-cover.no-image {
	background-image:
		radial-gradient(ellipse 60% 55% at 85% 15%, rgba(201, 151, 63, 0.18), transparent 70%),
		radial-gradient(ellipse 90% 60% at 10% 120%, rgba(91, 110, 69, 0.55), transparent 70%),
		linear-gradient(160deg, #1f3329 0%, #2f4a3a 55%, #4f6b55 100%);
}

/* Diskret mørkegrøn toning over fotoet, så teksten står tydeligt. */
.entry-cover--home.entry-cover--gradient:not(.no-image):after {
	background: linear-gradient(180deg, rgba(31, 51, 41, 0.35) 0%, rgba(31, 51, 41, 0.72) 100%);
	opacity: 1;
}

.entry-cover--home .home-widget-title {
	color: var(--gc-hvid);
	font-size: clamp(38px, 5.2vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: none;
	margin-bottom: 16px;
}

.entry-cover--home .home-widget-description {
	color: rgba(255, 253, 249, 0.88);
	font-size: clamp(17px, 1.6vw, 20px);
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: 36px;
}

/* Søgeknappen ligger direkte i formularen (ikke i .search_jobs), så selve
   formularen er flex-containeren; ellers falder panelets højde sammen. */
.entry-cover--home .job_search_form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
	max-width: 860px;
	margin: 0 auto;
	padding: 12px;
	background: var(--gc-hvid);
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(10, 20, 14, 0.35);
}

.entry-cover--home .job_search_form > .search_jobs {
	display: flex;
	flex: 1 1 520px;
	gap: 10px;
	align-items: stretch;
	margin: 0;
}

.entry-cover--home .search_jobs > div {
	flex: 1 1 0;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Heroen søger på sted og type – nøgleord, radius og pris findes på oversigten. */
.entry-cover--home .search_keywords,
.entry-cover--home .search-radius-wrapper,
.entry-cover--home .filter-by-type-label,
.entry-cover--home .job_types,
.entry-cover--home .showing_jobs {
	display: none !important;
}

.entry-cover--home .search_jobs input,
.entry-cover--home .search_jobs select,
.entry-cover--home .search_categories .select2-selection {
	height: 56px;
	border: 1px solid var(--gc-kant);
	border-radius: 12px;
	background-color: #fff;
	font-size: 16px;
}

.entry-cover--home .update_results_override,
.entry-cover--home .search_jobs button[type="submit"] {
	position: static;
	float: none;
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	height: 56px;
	padding: 0 32px;
	border: 0;
	border-radius: 12px;
	background-color: var(--gc-skov);
	color: #fff;
	font-size: 16px;
}

.entry-cover--home .update_results_override:hover {
	background-color: var(--gc-skov-moerk);
}

/* ------------------------------------------------------------------ */
/* Sektioner på forsiden                                               */
/* ------------------------------------------------------------------ */

.home-widget {
	margin-top: 88px;
}

.home-widget-section-title {
	margin-bottom: 36px;
}

.home-widget .home-widget-title {
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1.12;
}

.home-widget .home-widget-description {
	color: var(--gc-tekst-bloed);
	font-size: 18px;
}

/* Store billedkort for overnatningstyper og områder. */
.image-grid-item {
	margin-bottom: 24px;
}

.image-grid-cover {
	min-height: 280px;
	border-radius: var(--gc-radius);
	overflow: hidden;
	box-shadow: var(--gc-skygge);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.image-grid-item:hover .image-grid-cover {
	transform: translateY(-4px);
	box-shadow: var(--gc-skygge-loeft);
}

.image-grid-item .image-grid-cover.entry-cover .cover-wrapper {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 28px;
	font-family: var(--gc-font-overskrift);
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 600;
	color: var(--gc-hvid);
	text-align: left;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

/* Indtil der er fotos: naturfarvede flader med et diskret, organisk lys. */
.image-grid-cover.no-image {
	background-color: var(--gc-skov);
	background-image:
		radial-gradient(circle at 82% 18%, rgba(255, 253, 249, 0.14) 0 90px, transparent 91px),
		radial-gradient(ellipse 120% 70% at 20% 118%, rgba(20, 32, 25, 0.45), transparent 60%),
		linear-gradient(150deg, var(--gc-flise-a, #4f6b55), var(--gc-flise-b, #2f4a3a));
}

.image-grid-item:nth-child(6n + 1) { --gc-flise-a: #5b6e45; --gc-flise-b: #2f4a3a; }
.image-grid-item:nth-child(6n + 2) { --gc-flise-a: #8a6a4a; --gc-flise-b: #5a4531; }
.image-grid-item:nth-child(6n + 3) { --gc-flise-a: #6f8a78; --gc-flise-b: #3c5747; }
.image-grid-item:nth-child(6n + 4) { --gc-flise-a: #b8683f; --gc-flise-b: #7e4528; }
.image-grid-item:nth-child(6n + 5) { --gc-flise-a: #7c8c5c; --gc-flise-b: #4a5a37; }
.image-grid-item:nth-child(6n + 6) { --gc-flise-a: #4f6b7a; --gc-flise-b: #2e4452; }

/* "Har du plads til eventyr?" som et roligt kort i sand. */
.home-widget.listify_call_to_action {
	margin-top: 96px;
	margin-bottom: 96px;
}

.listify_call_to_action .call-to-action {
	max-width: 1140px;
	margin: 0 auto;
	padding: 56px 48px;
	border-radius: 24px;
	background-image: radial-gradient(ellipse 50% 90% at 100% 100%, rgba(169, 184, 160, 0.45), transparent 70%);
}

.listify_call_to_action:after {
	display: none;
}

.listify_call_to_action .cta-title {
	font-size: clamp(28px, 3vw, 40px);
	margin-bottom: 12px;
}

.listify_call_to_action .cta-description p {
	font-size: 18px;
	line-height: 1.6;
	opacity: 1;
}

.listify_call_to_action .button {
	padding: 16px 28px;
	border: 0;
	border-radius: 999px;
	background-color: var(--gc-terracotta);
	color: #fff;
	font-size: 17px;
}

.listify_call_to_action .button:hover {
	background-color: #a55a34;
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Undersider: sidehoved og formularer                                 */
/* ------------------------------------------------------------------ */

.page-cover.entry-cover:not(.entry-cover--home) {
	background-color: var(--gc-skov);
}

.page-cover.entry-cover:not(.entry-cover--home) .page-title {
	color: var(--gc-hvid);
	letter-spacing: -0.01em;
	text-transform: none;
}

.job-manager-form label,
.job-manager-form fieldset > label {
	color: var(--gc-tekst);
	font-weight: 600;
}

.job-manager-form small,
.job-manager-form .description {
	color: var(--gc-tekst-bloed);
}

/* Faciliteter på stedsiden (gocamp-core). */
.gocamp-faciliteter {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gocamp-facilitet {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--gc-tekst);
}

.gocamp-facilitet span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--gc-salvie-lys);
	color: var(--gc-skov);
	font-size: 17px;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.site-footer-widgets .footer-widget-title {
	color: var(--gc-hvid);
	font-size: 20px;
}

.site-footer-widgets a {
	color: #d9d2c3;
}

.site-footer-widgets a:hover {
	color: var(--gc-hvid);
}

.site-footer .site-info {
	color: rgba(217, 210, 195, 0.8);
}

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

@media (max-width: 767px) {
	.entry-cover--home.homepage-cover {
		padding: 64px 0 72px;
	}

	.entry-cover--home .job_search_form,
	.entry-cover--home .job_search_form > .search_jobs {
		flex-direction: column;
	}

	.entry-cover--home .job_search_form > .search_jobs {
		flex-basis: auto;
	}

	.entry-cover--home .update_results_override,
	.entry-cover--home .search_jobs button[type="submit"] {
		width: 100%;
	}

	.home-widget {
		margin-top: 56px;
	}

	.image-grid-cover {
		min-height: 200px;
	}

	.listify_call_to_action .call-to-action {
		padding: 40px 24px;
		border-radius: 18px;
	}
}