/*
 * Member account area (page-my-account.php).
 *
 * Members never see wp-admin, so this screen has to feel like the site rather
 * than like a dashboard. Everything here is built from the existing tokens -
 * no new colours, no new radii - and the ACF form is tamed to match the rest
 * of the design instead of arriving with its own admin styling.
 *
 * @author Jeferson Luiz de Paula
 */

/* ------------------------------------------------------------ page header */

.page-head {
	padding: 34px 0 6px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 26px;
}

.page-head .h-page {
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.1;
	margin: 0 0 8px;
}

.page-head .sub {
	color: var(--muted);
	margin: 0;
	font-size: 15px;
}

.page-head .sub a {
	color: var(--gold-deep);
	text-decoration: underline;
}

/* --------------------------------------------------------- section header */

.sec-head .quota {
	margin-left: auto;
	font-size: 13px;
	color: var(--muted);
	background: var(--wash-gold);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 4px 12px;
	white-space: nowrap;
}


.sec-head .sec-add {
	margin-left: 10px;
}

/* --------------------------------------------------------- record listing */

.member-list {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--card);
}

.member-list li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
}

.member-list li:last-child {
	border-bottom: 0;
}

.mi-main {
	min-width: 0; /* so a long church name can ellipsis instead of pushing the button out */
	flex: 1;
}

.mi-title {
	display: block;
	font-weight: 600;
	color: var(--ink);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.mi-title:hover {
	color: var(--gold-deep);
}

.mi-meta {
	display: block;
	font-size: 13px;
	color: var(--muted);
	margin-top: 2px;
}


/* The remove control: a two-step confirm with no JavaScript. */

.mi-remove {
	position: relative;
}

.mi-remove summary {
	list-style: none;
	cursor: pointer;
}

.mi-remove summary::-webkit-details-marker {
	display: none;
}

.mi-remove[open] form {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 5;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-btn);
	box-shadow: var(--shadow);
	padding: 14px;
	width: 250px;
}

.mi-remove form p {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--muted);
}

/* ------------------------------------------------------------- feedback */

.notice-ok {
	background: var(--wash-gold);
	border: 1px solid var(--gold-soft);
	border-left: 3px solid var(--gold);
	border-radius: var(--radius-btn);
	padding: 12px 16px;
	margin-bottom: 22px;
	font-size: 15px;
}

/* ------------------------------------------------------------- ACF form */

.member-form {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 8px 22px 22px;
	box-shadow: var(--shadow-soft);
}

.member-form .acf-field {
	border: 0;
	padding: 18px 0 0;
}

.member-form .acf-label label {
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
}

.member-form .acf-label .description,
.member-form .acf-field p.description {
	color: var(--muted);
	font-size: 13px;
	margin-top: 3px;
}

.member-form .acf-input input[type="text"],
.member-form .acf-input input[type="email"],
.member-form .acf-input input[type="url"],
.member-form .acf-input input[type="number"],
.member-form .acf-input input[type="date"],
.member-form .acf-input textarea,
.member-form .acf-input select {
	width: 100%;
	max-width: 560px;
	border: 1px solid var(--line);
	border-radius: var(--radius-btn);
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	background: var(--bg);
	color: var(--ink);
}

.member-form .acf-input input:focus,
.member-form .acf-input textarea:focus,
.member-form .acf-input select:focus {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
	border-color: var(--gold);
}

/*
 * ACF paints its own surfaces assuming the white wp-admin behind them. On this
 * site the page behind can be navy, so every one of those surfaces has to be
 * restated in tokens - doing it with variables rather than with a [data-theme]
 * block means light and dark are both correct from one set of rules.
 */

/* ---- repeater tables (service times, tags) ---- */

.member-form .acf-table {
	border-color: var(--line);
	background: var(--card);
	border-radius: var(--radius-btn);
	overflow: hidden;
}

.member-form .acf-table > thead > tr > th,
.member-form .acf-table > tbody > tr > td {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}

.member-form .acf-table > thead > tr > th {
	background: var(--wash-gold);
	font-weight: 600;
}

/* The row number and the remove handle: narrow strips that were solid white. */
.member-form .acf-row-handle {
	background: var(--bg) !important;
	border-color: var(--line) !important;
	color: var(--muted);
}

.member-form .acf-row-handle .acf-icon {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

.member-form .acf-row-handle .acf-icon:hover {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--navy);
}

.member-form .acf-actions {
	padding: 10px 0 0;
	text-align: right;
}

/* ---- gallery ---- */

.member-form .acf-gallery,
.member-form .acf-gallery-main,
.member-form .acf-gallery-side,
.member-form .acf-gallery-attachments {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink);
}

.member-form .acf-gallery {
	border-radius: var(--radius-btn);
	overflow: hidden;
}

.member-form .acf-gallery-toolbar {
	background: var(--bg);
	border-color: var(--line);
}

.member-form .acf-gallery-attachment .margin,
.member-form .acf-gallery-attachment .filename {
	background: var(--card);
	color: var(--ink);
	border-color: var(--line);
}

/* ---- the map field ---- */

.member-form .acf-field-open-street-map .acf-input > div,
.member-form .acf-osm-map {
	border-radius: var(--radius-btn);
	overflow: hidden;
	border: 1px solid var(--line);
}

/*
 * The address search above the map.
 *
 * It is a Leaflet control (leaflet-control-geocoder inside leaflet-bar), so it
 * arrives with Leaflet's own white bar and its own layout. Styling the INPUT
 * alone - as the generic rule above did - painted a dark field inside that
 * white bar and capped it at 560px, so the leftover bar showed as a second
 * field behind the first. The bar itself is what has to be restyled.
 */
.member-form .acf-osm-above .leaflet-control-geocoder,
.member-form .acf-osm-above .leaflet-control-geocoder.leaflet-bar {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: none;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-btn);
	box-shadow: none;
	overflow: hidden;
}

.member-form .acf-osm-above .leaflet-control-geocoder-form {
	order: 1; /* The button precedes the input in the DOM but sits right of it. */
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
}

.member-form .acf-osm-above .leaflet-control-geocoder-form input {
	width: 100%;
	max-width: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--ink);
	padding: 11px 14px;
}

.member-form .acf-osm-above .leaflet-control-geocoder-form input:focus {
	outline: 0;
}

.member-form .acf-osm-above .leaflet-control-geocoder:focus-within {
	border-color: var(--gold);
	outline: 2px solid var(--gold);
	outline-offset: 1px;
}

.member-form .acf-osm-above .leaflet-control-geocoder-icon {
	order: 2;
	flex: 0 0 auto;
	width: 46px;
	background-color: var(--gold);
	border: 0;
	cursor: pointer;
	filter: none;
}

.member-form .acf-osm-above .leaflet-control-geocoder-icon:hover {
	background-color: var(--gold-deep);
}

/* Results and the "nothing found" line drop out of the bar, so they need the
   card surface rather than Leaflet's white. */
.member-form .acf-osm-above .leaflet-control-geocoder-alternatives,
.member-form .acf-osm-above .leaflet-control-geocoder-form-no-error {
	order: 3;
	flex: 0 0 100%;
	background: var(--card);
	color: var(--ink);
	border-top: 1px solid var(--line);
	margin: 0;
}

.member-form .acf-osm-above .leaflet-control-geocoder-alternatives-minimized {
	display: none;
}

.member-form .acf-osm-above .leaflet-control-geocoder-alternatives a {
	color: var(--ink);
}

.member-form .acf-osm-above .leaflet-control-geocoder-alternatives li:hover {
	background: var(--wash-gold);
}

/* ---- the wysiwyg ---- */

.member-form .wp-editor-container {
	border: 1px solid var(--line);
	border-radius: var(--radius-btn);
	overflow: hidden;
}

.member-form .wp-editor-tools {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	padding: 4px 4px 0;
}

/* The typing area stays light on purpose: it is a sheet of paper, and its
   contents live inside an iframe that page CSS cannot reach anyway. */
.member-form .acf-editor-wrap iframe {
	min-height: 240px;
	max-height: 420px;
}

.member-form .mce-toolbar-grp,
.member-form .quicktags-toolbar {
	background: var(--ivory) !important;
	border-color: var(--line) !important;
}

/* ---- buttons: ACF uses wp-admin's classes, which are not our design ---- */

.member-form .button,
.member-form .button-primary,
.member-form .acf-button {
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--ink);
	border-radius: var(--radius-btn);
	padding: 7px 14px;
	height: auto;
	line-height: 1.4;
	text-shadow: none;
	box-shadow: none;
	font-weight: 600;
	cursor: pointer;
}

.member-form .button-primary,
.member-form .acf-button.button-primary {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--navy);
}

.member-form .button:hover,
.member-form .acf-button:hover {
	border-color: var(--gold);
	color: var(--gold-deep);
}

.member-form .button-primary:hover {
	background: var(--gold-deep);
	border-color: var(--gold-deep);
	color: var(--ivory);
}

.member-form .acf-form-submit {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

/* ---- odds and ends ACF borrows from wp-admin ---- */

.member-form .acf-gallery-sort,
.member-form .acf-gallery select {
	background: var(--bg);
	border: 1px solid var(--line);
	color: var(--ink);
	border-radius: var(--radius-btn);
	padding: 6px 10px;
}

.member-form .acf-tab-wrap {
	background: transparent;
	border-color: var(--line);
}

.member-form .acf-notice,
.member-form .acf-error-message {
	border-radius: var(--radius-btn);
}

/* WordPress admin classes the front end never defines: without these, markup
   meant to be invisible simply prints on the page. NOTE: `.hide-if-no-js` is
   NOT one of them - it means "hide when JS is absent", so hiding it outright
   would delete the editor's Visual/Text tabs. */
.member-form .hidden {
	display: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 640px) {
	.member-list li {
		flex-wrap: wrap;
	}

	.sec-head .quota {
		margin-left: 0;
	}
}