/* ==========================================================
   Amager Fotoklub – stylesheet
   Bygger oven på Bootstrap 5.3. Farverne er hentet fra logoet.
   ========================================================== */

/* ---------- Farver og grundværdier ---------- */
:root {
	--af-green: #4C7A1E;        /* knapper og accenter (mørk nok til hvid tekst) */
	--af-green-dark: #3B6216;   /* hover på knapper */
	--af-green-logo: #6A9A30;   /* logoets egen grøn – kun til pynt */
	--af-grey: #585858;         /* logoets grå */
	--af-ink: #1C1C1A;          /* brødtekst */
	--af-muted: #5E5B55;        /* sekundær tekst */
	--af-soft: #F3F5EF;         /* lys grønlig baggrund */
	--af-line: #E6E4DF;         /* tynde streger */

	--bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--bs-body-font-size: 1.1875rem;   /* 19 px – let at læse */
	--bs-body-line-height: 1.6;
	--bs-body-color: var(--af-ink);
	--bs-link-color-rgb: 28, 28, 26;
	--bs-link-hover-color-rgb: 76, 122, 30;
	--bs-border-color: var(--af-line);
}

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, .serif {
	font-family: "Newsreader", Georgia, "Times New Roman", serif;
	font-weight: 400;
	line-height: 1.12;
}
h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(2.1rem, 3.4vw, 2.875rem); }
h3 { font-size: 1.75rem; }

a { text-underline-offset: 3px; }

:focus-visible {
	outline: 3px solid var(--af-green);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	top: .5rem;
	left: .5rem;
	z-index: 2000;
	background: #fff;
	padding: .75rem 1.25rem;
	border: 2px solid var(--af-ink);
	border-radius: .5rem;
	font-weight: 700;
}

/* ---------- Knapper ---------- */
.btn { font-size: 1.125rem; }

.btn-pill {
	border-radius: 999px;
	padding: .75rem 1.6rem;
	font-weight: 700;
	min-height: 3.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-af {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--af-green);
	--bs-btn-border-color: var(--af-green);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--af-green-dark);
	--bs-btn-hover-border-color: var(--af-green-dark);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--af-green-dark);
	--bs-btn-active-border-color: var(--af-green-dark);
	--bs-btn-focus-shadow-rgb: 76, 122, 30;
}

.btn-outline-ink {
	--bs-btn-color: var(--af-ink);
	--bs-btn-border-color: var(--af-ink);
	--bs-btn-border-width: 2px;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--af-ink);
	--bs-btn-hover-border-color: var(--af-ink);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--af-ink);
	--bs-btn-active-border-color: var(--af-ink);
}

/* ---------- Header og menu ---------- */
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--af-line);
	position: relative;
	z-index: 1030;
}

.site-header .navbar { padding-top: 1rem; padding-bottom: 1rem; }
.navbar-brand { padding: 0; margin-right: 1.5rem; }
.navbar-brand img { height: 64px; width: auto; display: block; }

.navbar-toggler {
	border: 2px solid var(--af-ink);
	border-radius: 999px;
	padding: .55rem 1.1rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	color: var(--af-ink);
}
.navbar-toggler:focus { box-shadow: 0 0 0 .25rem rgba(76, 122, 30, .3); }
.navbar-toggler-icon { width: 1.25em; height: 1.25em; }

.navbar .nav-link {
	font-weight: 600;
	color: var(--af-ink);
	padding: .65rem .8rem;
	min-height: 3rem;
	display: flex;
	align-items: center;
	gap: .4rem;
	border-radius: .4rem;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible,
.navbar .nav-link.show { background: var(--af-soft); color: var(--af-ink); }
.navbar .nav-link.active { color: var(--af-green); }

.nav-lock { flex: none; }

.nav-item-login { margin-left: .5rem; }

/* Dropdowns */
.navbar .dropdown-menu {
	--bs-dropdown-font-size: 1.125rem;
	--bs-dropdown-color: var(--af-ink);
	--bs-dropdown-border-color: #DCDAD4;
	--bs-dropdown-border-radius: .5rem;
	--bs-dropdown-padding-y: .5rem;
	--bs-dropdown-item-padding-x: 1.25rem;
	--bs-dropdown-item-padding-y: .55rem;
	--bs-dropdown-link-hover-bg: var(--af-soft);
	--bs-dropdown-link-hover-color: var(--af-ink);
	--bs-dropdown-link-active-bg: var(--af-green);
	--bs-dropdown-link-active-color: #fff;
	--bs-dropdown-divider-margin-y: .4rem;
	--bs-dropdown-header-color: var(--af-grey);
	box-shadow: 0 12px 28px rgba(28, 28, 26, .14);
	min-width: 18rem;
}

.navbar .dropdown-item { white-space: normal; line-height: 1.35; }

.navbar .dropdown-header {
	font-family: var(--bs-body-font-family);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding-top: .6rem;
	margin: 0;
}

.dd-group > ul { margin: 0; }
.dd-group .dropdown-divider { margin-left: 1.25rem; margin-right: 1.25rem; }

/* Grupper (overskrift + undersider) adskilles med en tynd streg */
.navbar .dropdown-menu > li.dd-group { padding: .25rem 0; }
.navbar .dropdown-menu > li + li.dd-group,
.navbar .dropdown-menu > li.dd-group + li:not(.dd-group) {
	border-top: 1px solid #ECEAE5;
	margin-top: .35rem;
	padding-top: .35rem;
}
.dropdown-item-parent { font-weight: 700; }
.nav-link-static { cursor: default; }
.nav-link-static:hover { background: transparent !important; }

/* Adgangsikon fra databasen (password-feltet på siden) */
.pageaccessok,
.pageaccessno {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: .35em;
	vertical-align: -0.1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .75;
}

/* Lange dropdowns i to kolonner – kun på store skærme */
@media (min-width: 992px) {
	.navbar .dropdown-menu-cols {
		columns: 2;
		column-gap: 0;
		width: 40rem;
	}
	.dropdown-menu-cols .dd-group { break-inside: avoid; }
}

/* Mobil: menuen foldet ud under logoet */
@media (max-width: 991.98px) {
	.navbar-collapse { padding-top: 1rem; }
	.navbar .nav-link { font-size: 1.3rem; border-bottom: 1px solid var(--af-line); border-radius: 0; min-height: 3.5rem; }
	.navbar .dropdown-menu { box-shadow: none; border: 0; padding-left: .75rem; border-left: 2px solid var(--af-line); border-radius: 0; margin: .25rem 0 .75rem; }
	.navbar .dropdown-item { padding-top: .7rem; padding-bottom: .7rem; }
	.nav-item-login { margin: 1.25rem 0 .5rem; }
	.nav-item-login .btn { width: 100%; }
}

/* ---------- Generelle sektioner ---------- */
.section { padding: 4.5rem 0; }
.section-soft { background: var(--af-soft); }
.section-tight { padding: 3rem 0; }

.eyebrow {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--af-green);
	margin-bottom: 1rem;
}

.lead-text { font-size: 1.3125rem; color: #3D3B37; max-width: 34ch; }
.text-muted-af { color: var(--af-muted); }

.section-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	margin-bottom: 2rem;
}
.section-head h2 { margin: 0; }
.more-link { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.more-link:hover { text-decoration: underline; }

/* Pladsholder til billeder, indtil rigtige billeder sættes ind */
.ph {
	background: #3B3A37;
	color: #CFCBC3;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1rem;
	padding: 1rem;
	aspect-ratio: 3 / 2;
}
.ph-4x3 { aspect-ratio: 4 / 3; }
.ph-a { background: #6E6A5F; }
.ph-b { background: #4A4744; }
.ph-c { background: #5C6670; }
.ph-d { background: #7A7466; }
.ph-e { background: #3F4448; }
.ph-f { background: #5A554D; }

/* Rigtige billeder skal fylde ud på samme måde */
.photo { width: 100%; height: auto; display: block; border-radius: 4px; object-fit: cover; }

/* ---------- Forside: hero ---------- */
.hero { padding: 4.5rem 0 4rem; }
.hero h1 { margin-bottom: 1.5rem; }
.hero .lead-text { margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.25rem; }

.facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--af-line);
}
.facts > div { display: flex; flex-direction: column; }
.fact-num { font-family: "Newsreader", Georgia, serif; font-size: 2.25rem; line-height: 1; }
.fact-label { font-size: 1rem; color: var(--af-muted); }

.figure-caption-af {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem;
	margin-top: .75rem;
	font-size: 1rem;
	color: var(--af-muted);
}
.figure-caption-af strong { color: var(--af-ink); }

/* ---------- Program ---------- */
.event-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid var(--af-line);
	border-radius: .4rem;
}
.event {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	padding: 1.5rem 1.75rem;
	border-bottom: 1px solid #ECEAE5;
}
.event:last-child { border-bottom: 0; }
.event-date { flex: 0 0 4.75rem; text-align: center; }
.event-day { display: block; font-family: "Newsreader", Georgia, serif; font-size: 2.6rem; line-height: 1; }
.event-month { display: block; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--af-muted); }
.event-body { flex: 1 1 18rem; min-width: 0; }
.event-title { font-family: var(--bs-body-font-family); font-size: 1.375rem; font-weight: 700; line-height: 1.3; margin: 0; }
.event-meta { font-size: 1.0625rem; color: var(--af-muted); }
.event .btn { font-size: 1.0625rem; padding: .5rem 1.1rem; border-radius: 999px; }

@media (max-width: 575.98px) {
	.event { padding: 1.1rem 1rem; gap: .75rem 1rem; }
	.event-date { flex-basis: 3.25rem; }
	.event-day { font-size: 2rem; }
	.event .btn { display: none; } /* hele rækken er klikbar via titlen */
}

/* ---------- Galleri ---------- */
.photo-card { margin: 0; }
.photo-card figcaption { margin-top: .6rem; font-size: 1.0625rem; line-height: 1.4; }
.photo-card figcaption span { color: var(--af-muted); }

/* ---------- Medlemmernes billeder (ét billede pr. medlem) ---------- */
.member-grid { margin-bottom: 0; }
.member-card {
	display: block;
	text-decoration: none;
	color: var(--af-ink);
}
.member-card img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 250px;           /* billederne er 250 x 250 px */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 4px;
	background: var(--af-soft);
	transition: opacity .2s ease;
}
.member-name {
	display: block;
	margin-top: .6rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
}
.member-more {
	display: block;
	font-size: 1rem;
	color: var(--af-muted);
}
.member-card:hover img { opacity: .85; }
.member-card:hover .member-name,
.member-card:focus-visible .member-name { color: var(--af-green); text-decoration: underline; }

/* ---------- Månedens tema ---------- */
.theme-box {
	border: 1px solid var(--af-line);
	border-radius: .4rem;
	padding: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
}
.theme-box .theme-title { font-family: "Newsreader", Georgia, serif; font-size: 2.1rem; line-height: 1.2; margin: 0; }

/* ---------- Bliv medlem ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; counter-reset: trin; }
.steps li {
	background: #fff;
	border-radius: .4rem;
	padding: 1.5rem;
	display: flex;
	gap: 1.25rem;
	counter-increment: trin;
}
.steps li::before {
	content: counter(trin);
	font-family: "Newsreader", Georgia, serif;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--af-green);
}
.steps strong { font-size: 1.3rem; display: block; }

/* ---------- Undersider ---------- */
.page-head { background: var(--af-soft); padding: 2.5rem 0 2.75rem; border-bottom: 1px solid var(--af-line); }
.page-head h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); margin: 0; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--af-muted); --bs-breadcrumb-item-active-color: var(--af-muted); font-size: 1rem; margin-bottom: .75rem; }
.breadcrumb a { color: var(--af-ink); }

.content { max-width: 42rem; }
.content p, .content ul, .content ol { margin-bottom: 1.25rem; }
.content h2 { margin: 2.5rem 0 1rem; font-size: 2rem; }
.content h3 { margin: 2rem 0 .75rem; }
.content img { max-width: 100%; height: auto; border-radius: 4px; }
.content table { width: 100%; }

.side-box { background: var(--af-soft); border-radius: .5rem; padding: 1.5rem; margin-bottom: 1.5rem; }
.side-box h2 { font-size: 1.6rem; margin-bottom: .75rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--af-ink); color: #E8E6E0; padding: 3.5rem 0 2rem; font-size: 1.125rem; }
.site-footer a { color: #E8E6E0; }
.site-footer a:hover { color: #fff; }
.footer-title { font-size: 1.65rem; margin-bottom: .75rem; color: #fff; }
.footer-muted { font-size: 1rem; color: #BDBAB2; }
.footer-links li { margin-bottom: .35rem; }
.footer-bottom {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #3A3936;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .75rem;
	font-size: .95rem;
	color: #BDBAB2;
}
.footer-bottom a { color: #BDBAB2; }