/* GoalHosting Core — forms, resources directory, student area.
   Uses GoalHosting theme color tokens when present, with fallbacks. */
:root {
	--gh-purple: var(--wp--preset--color--purple, #4B2E83);
	--gh-green: var(--wp--preset--color--green, #2F6B4F);
	--gh-ink: var(--wp--preset--color--ink, #1F1D2B);
	--gh-slate: var(--wp--preset--color--slate, #55555F);
	--gh-line: var(--wp--preset--color--line, #E3E1EA);
	--gh-light: var(--wp--preset--color--light-gray, #F5F6F8);
	--gh-lav: var(--wp--preset--color--lavender, #F1ECF9);
	--gh-err: #B3261E;
}

/* ---------- Forms ---------- */
.gh-form { display: grid; gap: 1.1rem; }
.gh-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.gh-form > fieldset > legend {
	font-family: var(--wp--preset--font-family--poppins, inherit);
	font-weight: 700; font-size: 1.2rem; color: var(--gh-purple);
	padding: 0; margin-bottom: 0.25rem;
}
.gh-field { display: grid; gap: 0.35rem; }
.gh-field > label, .gh-field > legend { font-weight: 700; color: var(--gh-ink); padding: 0; }
.gh-form input[type="text"], .gh-form input[type="email"], .gh-form input[type="url"],
.gh-form input[type="search"], .gh-form select, .gh-form textarea,
.gh-login input[type="text"], .gh-login input[type="password"] {
	width: 100%; box-sizing: border-box;
	font: inherit; font-size: 1.05rem;
	padding: 0.75rem 0.9rem; min-height: 48px;
	border: 2px solid #B9B6C6; border-radius: 10px;
	background: #fff; color: var(--gh-ink);
}
.gh-form input:focus, .gh-form select:focus, .gh-form textarea:focus,
.gh-login input:focus { outline: 3px solid var(--gh-green); outline-offset: 1px; border-color: var(--gh-purple); }
.gh-form [aria-invalid="true"] { border-color: var(--gh-err) !important; }
.gh-inline { display: flex !important; flex-wrap: wrap; gap: 0.5rem 1.5rem !important; }
.gh-inline > legend { width: 100%; margin-bottom: 0.35rem; }
.gh-radio { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; }
.gh-radio input, .gh-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--gh-purple); flex: 0 0 auto; }
.gh-check { grid-template-columns: auto 1fr; align-items: start; column-gap: 0.75rem; }
.gh-check input { margin-top: 0.3rem; }
.gh-check .gh-field-error { grid-column: 1 / -1; }
.gh-hint, .gh-form-note { font-size: 0.92rem; color: var(--gh-slate); margin: 0; }
.gh-field-error { color: var(--gh-err); font-weight: 700; font-size: 0.95rem; margin: 0; }
.gh-error-summary { border: 2px solid var(--gh-err); border-radius: 10px; padding: 1rem 1.25rem; background: #FDECEA; }
.gh-error-summary:focus { outline: 3px solid var(--gh-err); }
.gh-error-summary ul { margin: 0.5rem 0 0; }
.gh-error-summary a { color: var(--gh-err); }
.gh-success { border: 2px solid var(--gh-green); border-radius: 12px; padding: 1.25rem 1.5rem; background: #E8F3EE; }
.gh-success h2 { margin-top: 0; color: var(--gh-green); }
.gh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.gh-form button.wp-block-button__link { border: 0; cursor: pointer; }

/* ---------- Login ---------- */
.gh-login form p { display: grid; gap: 0.35rem; margin: 0 0 1rem; }
.gh-login label { font-weight: 700; }
.gh-login .login-remember label { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; }
.gh-login input[type="submit"] {
	background: var(--gh-green); color: #fff; border: 0; border-radius: 10px;
	padding: 0.9rem 1.5rem; font: inherit; font-weight: 700; cursor: pointer; min-height: 48px;
}

/* ---------- Admin-only notes on the front end ---------- */
.gh-admin-only {
	font-size: 0.9rem; background: #FFF8E1; border: 1px dashed #C99A1C;
	padding: 0.6rem 0.9rem; border-radius: 8px; color: #3D2E00;
}

/* ---------- Resources ---------- */
.gh-resources { display: grid; gap: 2rem; }
.gh-res-tools { display: grid; gap: 0.75rem; position: sticky; top: 76px; z-index: 5; background: #fff; padding: 1rem 0; border-bottom: 1px solid var(--gh-line); }
@media (max-width: 782px) { .gh-res-tools { position: static; } }
.gh-res-label { font-weight: 700; }
.gh-res-search { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.05rem; padding: 0.8rem 1rem; min-height: 48px; border: 2px solid #B9B6C6; border-radius: 10px; }
.gh-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gh-chip {
	font: inherit; font-size: 0.95rem; font-weight: 600;
	padding: 0.5rem 1rem; min-height: 44px; border-radius: 999px;
	border: 2px solid var(--gh-purple); background: #fff; color: var(--gh-purple); cursor: pointer;
}
.gh-chip[aria-pressed="true"] { background: var(--gh-purple); color: #fff; }
.gh-chip:focus-visible { outline: 3px solid var(--gh-green); outline-offset: 2px; }
.gh-res-status { margin: 0; font-size: 0.95rem; color: var(--gh-slate); }
.gh-res-section h2 { margin-bottom: 0.25rem; }
.gh-res-desc { color: var(--gh-slate); margin-top: 0; }
.gh-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.gh-res-card {
	display: flex; flex-direction: column; gap: 0.6rem;
	border: 1px solid var(--gh-line); border-radius: 16px; padding: 1.35rem;
	background: #fff; box-shadow: 0 6px 24px rgba(31,20,60,0.06);
}
.gh-res-card.is-featured { border: 2px solid var(--gh-green); }
.gh-res-head { display: flex; gap: 0.9rem; align-items: center; }
.gh-res-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: var(--gh-light); flex: 0 0 auto; }
.gh-res-logo--initial { display: grid; place-items: center; font-family: var(--wp--preset--font-family--poppins, inherit); font-weight: 700; font-size: 1.5rem; color: var(--gh-purple); background: var(--gh-lav); }
.gh-res-name { margin: 0 !important; font-size: 1.15rem !important; }
.gh-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
.gh-tag { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--gh-light); color: var(--gh-ink); }
.gh-tag--featured { background: var(--gh-green); color: #fff; }
.gh-tag--free, .gh-tag--freemium { background: #E8F3EE; color: #1E4A36; }
.gh-tag--trial { background: #E6F0FA; color: #0B3A63; }
.gh-tag--paid { background: var(--gh-lav); color: var(--gh-purple); }
.gh-tag--placeholder { background: #FFF3CD; color: #5C4400; }
.gh-res-text, .gh-res-best { margin: 0; }
.gh-res-best { font-size: 0.95rem; }
.gh-res-disclosure { margin: 0; font-size: 0.85rem; color: var(--gh-slate); background: var(--gh-light); padding: 0.5rem 0.7rem; border-radius: 8px; }
.gh-res-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding-top: 0.5rem; }
.gh-res-btn {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0.6rem 1.1rem;
	border-radius: 10px; background: var(--gh-green); color: #fff !important; text-decoration: none; font-weight: 700;
	font-family: var(--wp--preset--font-family--poppins, inherit);
}
.gh-res-btn:hover { background: #245740; }
.gh-res-btn--soon { background: var(--gh-light); color: var(--gh-slate) !important; cursor: default; }
.gh-res-reviewed { font-size: 0.8rem; color: var(--gh-slate); }
.gh-res-empty { color: var(--gh-slate); font-style: italic; }
[hidden] { display: none !important; }

/* ---------- Student area ---------- */
.gh-student-area { display: grid; gap: 1.5rem; }
.gh-portal-notice { background: #FFF8E1; border-left: 6px solid #C99A1C; border-radius: 10px; padding: 1rem 1.25rem; }
.gh-card-plain { border: 1px solid var(--gh-line); border-radius: 16px; padding: 1.5rem; background: #fff; }
.gh-card-plain h2 { margin-top: 0; font-size: 1.35rem; }
.gh-sa-top { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gh-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0 0 1rem; }
.gh-dl dt { font-weight: 700; }
.gh-dl dd { margin: 0; }
.gh-app-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.gh-sa-h { margin-bottom: 0; }
.gh-sa-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gh-sa-link { border: 1px solid var(--gh-line); border-radius: 14px; padding: 1.1rem 1.25rem; background: var(--gh-light); }
.gh-sa-link h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.gh-sa-link p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.gh-sa-link a { font-weight: 700; }