/*
 * DKF Member Area Layout
 *
 * Provides the Flawless column grid, gdlr wrapper classes, and utility styles
 * needed by DKF member-area plugins (/mitc/*) when Flawless is not the active theme.
 *
 * Does NOT override global body/heading/link styles — those are handled by the
 * active theme. Only structural layout and DKF-scoped component styles here.
 */

/* -------------------------------------------------------------------
   Container + 12-column grid (from Flawless)
   ------------------------------------------------------------------- */

.section-container.container,
.section-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px 20px;
	box-sizing: border-box;
}

.container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	box-sizing: border-box;
}

.column,
.columns {
	float: left;
	position: relative;
	min-height: 1px;
	box-sizing: border-box;
	padding: 0 10px;
}

.one    { width: 8.333%; }
.two    { width: 16.666%; }
.three  { width: 25%; }
.four   { width: 33.333%; }
.five   { width: 41.666%; }
.six    { width: 50%; }
.seven  { width: 58.334%; }
.eight  { width: 66.667%; }
.nine   { width: 75%; }
.ten    { width: 83.334%; }
.eleven { width: 91.667%; }
.twelve { width: 100%; }

.one-fifth   { width: 20%; }
.two-fifth   { width: 40%; }
.three-fifth { width: 60%; }
.four-fifth  { width: 80%; }

/* "four columns" written as two classes in HTML */
.four.columns { width: 33.333%; }
.six.columns  { width: 50%; }
.eight.columns { width: 66.667%; }

.clear {
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clear-fix { zoom: 1; }
.clear-fix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

/* -------------------------------------------------------------------
   gdlr wrapper classes
   ------------------------------------------------------------------- */

.gdlr-item {
	margin: 0 0 20px;
	min-height: 1px;
}

.gdlr-content-item {
	margin: 0 0 20px;
}

/* -------------------------------------------------------------------
   Report tables (dkf_print_report) on /mitc/forening and subpages
   -------------------------------------------------------------------
   dkf_print_report() wraps each <table> in a .gdlr-content-item div
   that spans the full content width, but the <table> itself has auto
   width and defaults to the left edge. Stretch it to fill that width
   instead of leaving it shrink-to-content (table.statistic keeps its
   own `width: auto !important` and is unaffected). */
.gdlr-content-item > table {
	width: 100%;
}

.gdlr-color-wrapper {
	overflow: hidden;
	background-position: center 0;
	background-repeat: repeat;
	position: relative;
	padding: 30px 0;
}

/* -------------------------------------------------------------------
   gdlr-item-title-wrapper  (section headings in member pages)
   ------------------------------------------------------------------- */

.gdlr-item-title-wrapper {
	margin: 0 0 25px;
	position: relative;
}

.gdlr-item-title-wrapper.pos-center {
	text-align: center;
}

.gdlr-item-title-wrapper .gdlr-item-title {
	margin-bottom: 0;
	color: #00583c;
}

.gdlr-item-title-wrapper .gdlr-item-caption {
	color: #3d3d3d;
	display: block;
	margin-top: 8px;
	font-size: 18px !important;
	line-height: 1.5;
	text-align: left !important;
}

.gdlr-item-title-wrapper .gdlr-item-prefix {
	display: block;
	color: #008254;
	font-weight: 600;
	margin-bottom: 4px;
}

/* -------------------------------------------------------------------
   gdlr-button — DKF green palette, matching twentyfour child
   ------------------------------------------------------------------- */

.gdlr-button {
	display: inline-block;
	background-color: #008254;
	color: #fff;
	border: none;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 700;
	padding: 9px 18px;
	margin-bottom: 10px;
	margin-right: 5px;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.5;
}

.gdlr-button:hover {
	background-color: #00583c;
	color: #fff;
	text-decoration: none;
}

.gdlr-button.right {
	float: right;
}

.gdlr-button-form {
	display: inline-block;
	background-color: #008254;
	color: #fff;
	border: none;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 700;
	padding: 9px 18px;
	margin-bottom: 10px;
	cursor: pointer;
}

.gdlr-button-form:hover {
	background-color: #00583c;
}

/* ── ".arrow" links (Tilføj/Download/Login etc.) — never had any CSS,
   rendered as unstyled plain text. Same icon glyph + font as the existing
   .list-arrow bullets, same green palette as .gdlr-button-form. ── */
a.arrow {
	color: #00583c;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

a.arrow:hover {
	color: #008254;
	text-decoration: underline;
}

a.arrow::after {
	content: "\f105";
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
}

/* -------------------------------------------------------------------
   Form fields — clear visual distinction between editable and display
   ------------------------------------------------------------------- */

/* Scoped to DKF forms so we don't bleed into the rest of the page */
.dkf_form label,
.gdlr-item.gdlr-form-item label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: #3d3d3d;
	margin-bottom: 4px;
	margin-top: 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* First label in a field group needs less top margin */
.gdlr-item.gdlr-form-item:first-child label {
	margin-top: 0;
}

/* Editable inputs — text, email, number, date, tel, password */
.dkf_form input[type="text"],
.dkf_form input[type="email"],
.dkf_form input[type="number"],
.dkf_form input[type="tel"],
.dkf_form input[type="date"],
.dkf_form input[type="password"],
.dkf_form input[type="search"],
.dkf_form input.autocomplete,
.gdlr-item.gdlr-form-item input[type="text"],
.gdlr-item.gdlr-form-item input[type="email"],
.gdlr-item.gdlr-form-item input[type="number"],
.gdlr-item.gdlr-form-item input[type="tel"],
.gdlr-item.gdlr-form-item input[type="date"],
.gdlr-item.gdlr-form-item input[type="password"],
#prices input[type="text"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #292929;
	background-color: #fff;
	border: 1px solid #a0b09a;
	border-radius: 4px;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

/* Textarea */
.dkf_form textarea,
.gdlr-item.gdlr-form-item textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #292929;
	background-color: #fff;
	border: 1px solid #a0b09a;
	border-radius: 4px;
	outline: none;
	resize: vertical;
	min-height: 80px;
	transition: border-color 0.15s;
}

/* Select dropdowns */
.dkf_form select,
.gdlr-item.gdlr-form-item select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #292929;
	background-color: #fff;
	border: 1px solid #a0b09a;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
}

/* Focus state — green ring */
.dkf_form input:focus,
.dkf_form textarea:focus,
.dkf_form select:focus,
.gdlr-item.gdlr-form-item input:focus,
.gdlr-item.gdlr-form-item textarea:focus,
.gdlr-item.gdlr-form-item select:focus,
#prices input[type="text"]:focus {
	border-color: #008254;
	box-shadow: 0 0 0 3px rgba(0, 130, 84, 0.15);
}

/* Disabled and readonly — visually different, clearly not editable */
.dkf_form input:disabled,
.dkf_form input[readonly],
.dkf_form textarea:disabled,
.dkf_form textarea[readonly],
.dkf_form select:disabled,
.gdlr-item.gdlr-form-item input:disabled,
.gdlr-item.gdlr-form-item input[readonly],
.gdlr-item.gdlr-form-item textarea:disabled,
.gdlr-item.gdlr-form-item select:disabled {
	background-color: #f0f4ef;
	border-color: #cdd8cb;
	color: #6b7a68;
	cursor: not-allowed;
}

/* type="value" — display-only span (no form field), styled as plain info */
.gdlr-item.gdlr-form-item > span,
.dkf_form .gdlr-form-item > span {
	display: block;
	padding: 8px 0;
	font-size: 0.95rem;
	color: #3d3d3d;
	border-bottom: 1px solid #e0e8de;
}

/* Error state — red border */
.dkf_form input.error,
.dkf_form textarea.error,
.dkf_form select.error,
.gdlr-item.gdlr-form-item input.error,
.gdlr-item.gdlr-form-item textarea.error {
	border-color: #c0392b;
	background-color: #fff5f5;
}

/* Select2 custom dropdowns — same style as native selects */
.dkf_form .select2-container .select2-selection--single,
.dkf_form .select2-container--default .select2-selection--multiple {
	border: 1px solid #a0b09a !important;
	border-radius: 4px !important;
	min-height: 40px;
	padding: 4px 8px;
	background-color: #fff;
}

.dkf_form .select2-container--focus .select2-selection--single,
.dkf_form .select2-container--open .select2-selection--single {
	border-color: #008254 !important;
	box-shadow: 0 0 0 3px rgba(0, 130, 84, 0.15);
}

/* Checkbox and radio labels — inline, not uppercase */
.dkf_form input[type="checkbox"],
.dkf_form input[type="radio"],
.gdlr-item.gdlr-form-item input[type="checkbox"],
.gdlr-item.gdlr-form-item input[type="radio"] {
	width: auto;
	margin-right: 6px;
	cursor: pointer;
}

.dkf_form label:has(input[type="checkbox"]),
.dkf_form label:has(input[type="radio"]) {
	text-transform: none;
	font-weight: 400;
	font-size: 0.95rem;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

/* Field spacing */
.gdlr-item.gdlr-form-item {
	margin-bottom: 4px;
	padding: 0 0 4px;
}

/* -------------------------------------------------------------------
   Responsive: stack columns below 768px
   ------------------------------------------------------------------- */

@media only screen and (max-width: 768px) {
	.column,
	.columns,
	.one, .two, .three, .four, .five, .six,
	.seven, .eight, .nine, .ten, .eleven, .twelve,
	.four.columns, .six.columns, .eight.columns {
		width: 100%;
		float: none;
		padding: 0;
	}

	.container,
	.section-container.container,
	.section-container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* -------------------------------------------------------------------
   twentyfour header compat
   -------------------------------------------------------------------
   Flawless screen.css (loaded on member pages by dkf-gdlr-compat.php)
   sets a global `.social-icons { display: inline-block }`. That overrides
   the twentyfour header's `flex flex-row gap-2` on the light-green top
   strip, so the social icons drop onto a text baseline (extra leading
   below) and inflate the secondary-navigation bar's height.

   Re-assert the theme's flex layout. The descendant selector (two
   classes) outranks screen.css's single `.social-icons` class, so it
   wins regardless of stylesheet load order. */
.secondary-navigation .social-icons,
#masthead .social-icons {
	display: flex;
}

/* -------------------------------------------------------------------
   "Show publicly" toggle switches (board members only)
   -------------------------------------------------------------------
   dkf_functions.php renders a checkbox (public_mobile, public_phone, etc.)
   inside a .PublicHide-wrapper / .onoffswitch, styled by
   dkf_flawless/css/dkf_flawless.css. That plugin is inactive on this site,
   so the toggle CSS is missing and the inputs render as plain checkboxes.
   Re-add the styling for /mitc/* pages, sized to match the form fields.
   "Vist" uses the theme's green (matches .gdlr-button-form), "Skjult" is
   neutral grey. The knob is positioned relative to .onoffswitch-label
   itself (not .onoffswitch) so it stays inside the rounded box. */
.PublicHide-wrapper {
	position: relative;
}
.PublicHide-wrapper input {
	padding-right: 96px;
}
.onoffswitch {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	width: 80px;
	height: 28px;
}
.onoffswitch-checkbox {
	display: none !important;
}
.onoffswitch-label {
	position: relative;
	display: block;
	overflow: hidden;
	cursor: pointer;
	border-radius: 3px;
	height: 100%;
	width: 100%;
}
.onoffswitch-inner {
	display: block;
	width: 200%;
	margin-left: -100%;
	transition: margin 0.3s ease-in 0s;
	height: 100%;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
	display: block;
	float: left;
	width: 50%;
	height: 100%;
	padding: 0;
	line-height: 28px;
	font-size: 10px;
	color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	box-sizing: border-box;
}
.onoffswitch-inner:before {
	content: "Vist";
	text-transform: uppercase;
	padding-left: 8px;
	background-color: #008254;
}
.onoffswitch-inner:after {
	content: "Skjult";
	text-transform: uppercase;
	padding-right: 6px;
	background-color: #9e9e9e;
	text-align: right;
}
.onoffswitch-switch {
	display: block;
	width: 20px;
	height: 20px;
	background: #ffffff;
	position: absolute;
	top: 4px;
	left: 4px;
	border-radius: 3px;
	transition: left 0.3s ease-in 0s;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
	margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	left: 56px;
}

/* -------------------------------------------------------------------
   Member number ("Medlemsnummer") at the top of the profile form
   ------------------------------------------------------------------- */
label[for="debtorAccountNumber"] + span {
	font-weight: 700;
}

/* -------------------------------------------------------------------
   "Vælg fil" button (profile picture upload)
   -------------------------------------------------------------------
   Styled via dkf_flawless/css/dkf_flawless.css (a.dkf_link_button), but
   that plugin is inactive on this site. Reuse the same green as
   .gdlr-button-form ("Gem ændringer") for visual consistency. */
.dkf_link_button {
	display: inline-block;
	background-color: #008254;
	color: #fff;
	border: none;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 700;
	padding: 9px 18px;
	margin-bottom: 10px;
	cursor: pointer;
	text-decoration: none;
}
.dkf_link_button:hover,
.dkf_link_button:focus {
	background-color: #00583c;
	color: #fff;
	text-decoration: none;
}

/* -------------------------------------------------------------------
   Profile summary footer ("You are logged in as...")
   -------------------------------------------------------------------
   dkf_membercare's profile_summery() wraps its footer in .container
   (max-width: 1000px, fixed 20px padding), but the rest of the page
   (header, sidebar menu) uses the theme's responsive content-width /
   h-padding scale. Match that scale here so the footer's left edge
   lines up with the content above it. */
#content-section-profile-summery .container {
	max-width: 1500px;
	padding-left: 20px;
	padding-right: 20px;
}

@media (min-width: 48rem) {
	#content-section-profile-summery .container {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (min-width: 64rem) {
	#content-section-profile-summery .container {
		padding-left: 48px;
		padding-right: 48px;
	}
}

@media (min-width: 80rem) {
	#content-section-profile-summery .container {
		padding-left: 100px;
		padding-right: 100px;
	}
}

/* ── User dropdown (header) ───────────────────────────────────────── */
.dkf-user-menu {
  position: relative;
}

.dkf-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  padding: 5px 12px 5px 5px;
  cursor: pointer;
  color: white;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s;
}

.dkf-user-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dkf-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #00a265;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.dkf-chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.dkf-user-btn[aria-expanded="true"] .dkf-chevron {
  transform: rotate(180deg);
}

.dkf-user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  min-width: 210px;
  padding: 6px 0;
  z-index: 9999;
}

.dkf-user-dropdown[hidden] {
  display: none;
}

.dkf-user-dropdown-header {
  padding: 10px 16px 8px;
  font-weight: 700;
  font-size: 14px;
  color: #00583c;
  border-bottom: 1px solid #e8f0e6;
  margin-bottom: 4px;
}

.dkf-user-dropdown a {
  display: block;
  padding: 8px 16px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.dkf-user-dropdown a:hover {
  background: #f0f7f4;
  color: #008254;
}

/* Login button (standalone, not in nav menu) */
.dkf-login-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  background: #008254;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 14px;
  color: white;
  text-decoration: none;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.dkf-login-btn:hover {
  background: #00a265;
  color: white;
}

/* Mobile user section */
.dkf-user-mobile {
  list-style: none;
  border-top: 1px solid #d4e1d1;
  margin-top: 12px;
  padding-top: 12px;
}

.dkf-user-mobile-name {
  font-weight: 700;
  font-size: 14px;
  color: #00583c;
  padding: 4px 0 10px;
}

.dkf-user-mobile a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
}

.dkf-user-mobile a:hover {
  color: #008254;
}

.dkf-login-btn-mobile {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  background: #008254;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 14px;
  color: white !important;
  text-decoration: none;
  transition: background-color 0.2s;
  margin-top: 4px;
}

.dkf-login-btn-mobile:hover {
  background: #00a265;
}

/* ── Interests checkboxes ──────────────────────────────────────────── */
.dkf_interests_form .interests {
    display: flex !important;
    flex-wrap: wrap !important;
}

.dkf_interests_form .interests .column.six {
    flex: 0 0 50% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-right: 24px !important;
    display: block !important;
}

.dkf_interests_form .interests .column.six:nth-child(even) {
    padding-right: 0 !important;
}

.dkf_interests_form .interests .gdlr-item.gdlr-form-item {
    display: flex !important;
    flex-direction: column !important;
}

.dkf_interests_form .interests label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 3px 0 !important;
    cursor: pointer !important;
    font-weight: normal !important;
    width: 100% !important;
}

.dkf_interests_form .interests label input[type="checkbox"] {
    flex-shrink: 0 !important;
    margin-top: 3px !important;
}

/* ── Hide second Andet textarea (org-field, was JS-toggled by Flawless) */
#interest_other_org {
    display: none;
}

/* ── Hide Tilbage til MitC link ────────────────────────────────────── */
.gdlr-return_link-item {
    display: none;
}

#dkf_membercare_person .messages.warning {
  background: #fff8e1;
  border-left: 4px solid #f59e0b;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
}