/*
 * Team Link Theme Polish — site.css
 *
 * Reference design: the homepage (page-353.php).
 * Brand orange: #dd7a17
 * Card shadow: 0px .66em 2em rgba(0,0,0,.25)
 * Card border-radius: 1rem
 * Card padding: 2rem
 *
 * Scope: everything except the homepage itself (which already looks right).
 * Each section below targets a specific page/context.
 */

/* ── 1. Global tokens ──────────────────────────────────────────────────────── */

:root {
	--tl-orange:      #dd7a17;
	--tl-radius:      1rem;
	--tl-card-shadow: 0px .66em 2em 0px rgba(0, 0, 0, .25);
	--tl-card-pad:    2rem;
}


/* ── 2. Buttons ─────────────────────────────────────────────────────────────
   The homepage "Search" button is styled by Astra as input[type=submit].
   Replicate that orange treatment for all primary buttons site-wide.       */

.button,
input[type="submit"].button,
button.button,
a.button,
.wp-element-button,
.ast-button,
.tll-card__btn {
	background-color: var(--tl-orange) !important;
	border-color:     var(--tl-orange) !important;
	color:            #fff             !important;
	border-radius:    var(--tl-radius) !important;
}

/* Active pill filter — same colour as global buttons but keeps the pill's 4px radius */
.tll-pill--active {
	background-color: var(--tl-orange) !important;
	border-color:     var(--tl-orange) !important;
	color:            #fff             !important;
	border-radius:    4px              !important;
}

.button:hover,
input[type="submit"].button:hover,
button.button:hover,
a.button:hover,
.ast-button:hover,
.tll-card__btn:hover {
	background-color: #bf6610 !important;
	border-color:     #bf6610 !important;
	color:            #fff    !important;
}

/* Search-results pill tabs */
.tll-pill {
	border-radius: 4px;
	border: 2px solid var(--tl-orange);
	color: var(--tl-orange);
	background: #fff;
	padding: .35em 1.1em;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}
.tll-pill:hover {
	background-color: var(--tl-orange);
	color: #fff;
}

/* Filter chip dropdowns (Mode B header) */
.tll-filter-chip select {
	border-radius: 4px;
}


/* ── 3. Cards ───────────────────────────────────────────────────────────────
   Homepage: .generic-card already has shadow + 2rem padding.
   Add the missing border-radius so it matches .sidekick cards.
   Also apply to search-results cards for consistency.                      */

.generic-card,
.organization-card {
	border-radius: var(--tl-radius) !important;
}

/* Search-results cards — harmonize with homepage card depth */
.tll-card {
	background:    #fff;
	border-radius: var(--tl-radius);
	box-shadow:    var(--tl-card-shadow);
	border:        none;
	padding:       1.25rem var(--tl-card-pad);
	margin-bottom: 1rem;
}

/* Results page wrap — respect Astra content width */
.tll-results-wrap {
	max-width: var(--content-max-width, 1280px);
	margin:    0 auto;
	padding:   0 1rem;
}

/* Section headings on results page */
.tll-section__heading {
	font-size:     1.25rem;
	font-weight:   700;
	margin-bottom: .75rem;
	border-bottom: 2px solid #eee;
	padding-bottom: .5rem;
}


/* ── 4. WPUM account page — accordion layout ────────────────────────────────
   Targets the custom .teamlink-accordion-page wrapper added by our
   account.php template override.                                           */

.teamlink-accordion-page {
	max-width: 780px;
}

/* Action links row (Logout, View Profile) */
.teamlink-account-actions {
	display:         flex;
	gap:             1rem;
	margin-bottom:   1.5rem;
	flex-wrap:       wrap;
	align-items:     center;
}

.teamlink-account-action-link {
	font-size:       .9rem;
	color:           var(--tl-orange) !important;
	text-decoration: underline;
	font-weight:     600;
}

.teamlink-account-action-link.tl-account-logout {
	color: #555 !important;
	font-weight: normal;
}

/* Accordion section wrapper */
.teamlink-accordion-section {
	background:    #fff;
	border-radius: var(--tl-radius);
	box-shadow:    var(--tl-card-shadow);
	margin-bottom: 1rem;
	overflow:      hidden;
}

/* Accordion header — the <summary> */
.teamlink-accordion-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         1rem var(--tl-card-pad);
	font-size:       1rem;
	font-weight:     700;
	cursor:          pointer;
	list-style:      none;
	min-height:      44px; /* touch target */
	user-select:     none;
}

/* Remove the default disclosure triangle in webkit/blink */
.teamlink-accordion-header::-webkit-details-marker,
.teamlink-accordion-header::marker {
	display: none;
}

/* Chevron via pseudo-element */
.teamlink-accordion-header::after {
	content:          '›';
	font-size:        1.4rem;
	line-height:      1;
	transform:        rotate(90deg);
	transition:       transform .18s ease;
	display:          inline-block;
}

details[open] > .teamlink-accordion-header::after {
	transform: rotate(270deg);
}

.teamlink-accordion-header:hover {
	background-color: #faf5ef;
}

/* Accordion body */
.teamlink-accordion-body {
	padding: 0 var(--tl-card-pad) var(--tl-card-pad);
	border-top: 1px solid #eee;
}

/* WPUM forms inside accordion — remove double-padded wrappers */
.teamlink-accordion-body .wpum-template {
	padding:       0;
	box-shadow:    none;
	background:    transparent;
}

.teamlink-accordion-body .wpum-template h2 {
	/* title is already in the <summary>, suppress duplicate inside body */
	display: none;
}


/* ── 5. Profile page ─────────────────────────────────────────────────────── */

/* Ensure the profile card has the same radius as homepage cards */
.player.generic-card {
	border-radius: var(--tl-radius) !important;
}


/* ── 6. Responsive tweaks ────────────────────────────────────────────────── */

/* ── 7. Experience table — input styling ─────────────────────────────────── */

.teamlink-exp-table {
	table-layout: fixed;
	width: 100%;
}

.teamlink-exp-table th:nth-child(1),
.teamlink-exp-table td:nth-child(1) { width: 38%; }

.teamlink-exp-table th:nth-child(2),
.teamlink-exp-table td:nth-child(2) { width: 13%; }

.teamlink-exp-table th:nth-child(3),
.teamlink-exp-table td:nth-child(3) { width: 20%; }

.teamlink-exp-table th:nth-child(4),
.teamlink-exp-table td:nth-child(4) { width: auto; }

.teamlink-exp-table th:nth-child(5),
.teamlink-exp-table td:nth-child(5) { width: 36px; }

.teamlink-exp-table td { padding: 4px 4px 4px 0; vertical-align: middle; }

.teamlink-exp-table input[type="text"],
.teamlink-exp-table input[type="number"],
.teamlink-exp-table input[type="date"],
.teamlink-exp-table input,
.teamlink-exp-table select,
.teamlink-exp-table textarea {
	border:        1px solid #d5d5d5;
	border-radius: 3px;
	padding:       8px 10px;
	width:         100% !important;
	box-sizing:    border-box;
}

.teamlink-exp-table input[type="text"]:focus,
.teamlink-exp-table input[type="number"]:focus,
.teamlink-exp-table input[type="date"]:focus,
.teamlink-exp-table input:focus,
.teamlink-exp-table select:focus,
.teamlink-exp-table textarea:focus {
	outline:     2px solid #dd7a17;
	outline-offset: 1px;
	border-color: #dd7a17;
}


/* ── 8. Experience page buttons — consistent style ───────────────────────── */

.teamlink-exp-add-btn,
#teamlink-save-experience {
	background:    #dd7a17 !important;
	color:         #fff    !important;
	border:        none    !important;
	padding:       0.55em 1.4em !important;
	border-radius: 4px     !important;
	cursor:        pointer !important;
	font-size:     1em     !important;
	font-family:   inherit !important;
	line-height:   1.4     !important;
}

.teamlink-exp-add-btn:hover,
#teamlink-save-experience:hover {
	background: #c46c12 !important;
}


@media (max-width: 700px) {
	.teamlink-accordion-header {
		padding: .85rem 1.25rem;
	}
	.teamlink-accordion-body {
		padding: 0 1.25rem 1.25rem;
	}
	.tll-card {
		padding: 1rem;
	}
}

/* ── Input formatting: inline field errors ──────────────────────────────────
   .tl-field-error is injected by js/input-formatting.js after each
   [data-format] input. Hidden by default; .tl-field-error--visible shows it. */

.tl-field-error {
	display: block;
	color: #c0392b;
	font-size: 0.8em;
	margin-top: 3px;
	visibility: hidden;
}
.tl-field-error.tl-field-error--visible {
	visibility: visible;
}