/* GOL Directory — theme-agnostic responsive styles.
   Works with ANY WordPress theme; inherits the theme's colours/fonts where
   possible via CSS variables with safe fallbacks. Mobile-first. */

.gol-wrap { --gol-border: var(--wp--preset--color--border, #e2e6ea);
	--gol-muted: var(--wp--preset--color--muted, #5c6670);
	--gol-primary: var(--wp--preset--color--primary, #0f6fc5);
	--gol-accent: var(--wp--preset--color--accent, #1a7f37);
	--gol-surface: var(--wp--preset--color--surface, #f6f8fa); }

/* ---------------------------------------------------------------- search */

.gol-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.gol-search-form input[type="text"] {
	flex: 1 1 240px;
	min-width: 0;              /* lets the input shrink on small screens */
	padding: 10px 12px;
	font-size: 16px;           /* 16px stops iOS auto-zoom on focus */
}
.gol-search-form select { padding: 10px 12px; font-size: 16px; }
.gol-search-form button { padding: 10px 18px; font-size: 16px; }

.gol-search-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	align-items: flex-start;
}
.gol-facets { flex: 0 0 230px; min-width: 200px; }
.gol-results { flex: 1 1 320px; min-width: 0; }

.gol-facet { margin-bottom: 18px; }
.gol-facet h3 { font-size: 0.95rem; margin: 0 0 6px; }
.gol-facet ul { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.gol-facet li { padding: 3px 0; }

.gol-search-results { list-style: none; padding: 0; margin: 0; }
.gol-search-results li { padding: 14px 0; border-bottom: 1px solid var(--gol-border, #eee); }
.gol-result-name { font-weight: 600; }
.gol-result-meta { color: var(--gol-muted, #666); font-size: 0.9rem; }
.gol-verified { color: var(--gol-accent, #1a7f37); font-size: 0.85rem; white-space: nowrap; }

.gol-sponsored {
	padding: 12px;
	border: 1px solid var(--gol-border, #e3e3e3);
	background: #fcfcfa;
	margin-bottom: 8px;
	border-radius: 4px;
}
.gol-sponsored-tag {
	display: inline-block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #8a6d3b;
	background: #fdf6e3;
	padding: 2px 6px;
	border-radius: 3px;
	margin-bottom: 4px;
}

.gol-pagination { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 4px; }
.gol-pagination a, .gol-pagination strong {
	padding: 8px 12px;          /* 44px tap targets on mobile */
	min-width: 40px;
	text-align: center;
	border: 1px solid var(--gol-border, #e2e6ea);
	border-radius: 4px;
	text-decoration: none;
}
.gol-pagination strong { background: var(--gol-surface, #f6f8fa); }

/* --------------------------------------------------------------- profile */

.gol-profile { max-width: 900px; margin: 0 auto; padding: 24px 16px; }
.gol-profile-header { border-bottom: 2px solid var(--gol-border, #eee); padding-bottom: 16px; margin-bottom: 20px; }
.gol-profile-header h1 { margin-bottom: 4px; font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.15; }
.gol-profile section { margin-bottom: 26px; }

/* Any wide table scrolls inside itself instead of breaking the page. */
.gol-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gol-profile table { width: 100%; border-collapse: collapse; }
.gol-profile th, .gol-profile td { text-align: left; }
.gol-details-table td { padding: 8px 12px 8px 0; vertical-align: top; }
.gol-details-table td:first-child { color: var(--gol-muted, #666); width: 40%; max-width: 220px; }
.gol-details-table tr { border-bottom: 1px solid #f0f0f0; }

.gol-proscons { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px; }
.gol-proscons > div { flex: 1 1 220px; min-width: 0; }

.gol-links a { margin-right: 14px; display: inline-block; padding: 4px 0; }

.gol-disclosure { color: var(--gol-muted, #999); font-size: 0.82rem; margin-top: 8px; line-height: 1.5; }

/* -------------------------------------------------------------- AI search */

.gol-ai-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gol-ai-search input[type="text"] {
	flex: 1 1 280px;
	min-width: 0;
	padding: 14px;
	font-size: 16px;
}
.gol-ai-search button { padding: 14px 22px; font-size: 16px; }

/* ------------------------------------------------------ claim / my profile */

.gol-claim-steps { color: var(--gol-muted, #555); padding-left: 20px; }
.gol-form-field { margin-bottom: 16px; }
.gol-form-field label { display: block; font-weight: 600; margin-bottom: 4px; }
.gol-form-field input[type="text"],
.gol-form-field textarea {
	width: 100%;
	max-width: 640px;
	padding: 10px;
	font-size: 16px;
	box-sizing: border-box;
}

/* ------------------------------------------------------------- breakpoints */

@media (max-width: 782px) {
	.gol-search-layout { flex-direction: column; }
	.gol-facets { flex: 1 1 auto; width: 100%; order: 2; }
	.gol-results { order: 1; width: 100%; }
	/* On phones the facet list collapses to a compact two-column grid. */
	.gol-facet ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
	.gol-profile { padding: 16px 12px; }
	.gol-details-table td:first-child { width: 45%; }
}

@media (max-width: 480px) {
	.gol-search-form input[type="text"],
	.gol-search-form select,
	.gol-search-form button { flex: 1 1 100%; }
	.gol-facet ul { grid-template-columns: 1fr; }
	.gol-proscons { gap: 12px; }
}

/* ---------------------------------------------- AI Visibility Score meter */
/* High-contrast by default: this is read by older users on phones. */

.gol-visibility {
	border: 1px solid var(--gol-border, #d8dee4);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 28px;
	background: #fff;
}
.gol-vis-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}
.gol-vis-title { font-size: 1.05rem; font-weight: 700; color: #111; }
.gol-vis-band  { font-size: 0.95rem; font-weight: 600; margin-top: 2px; }
.gol-vis-number { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.gol-vis-number span { font-size: 1rem; font-weight: 600; color: #666; }

.gol-vis-bar {
	height: 14px;                     /* thick enough to see at a glance */
	background: #e9edf1;
	border-radius: 7px;
	overflow: hidden;
	margin: 14px 0 12px;
}
.gol-vis-bar > span { display: block; height: 100%; border-radius: 7px; transition: width .4s ease; }

.gol-vis-explain { color: #444; font-size: 0.95rem; margin: 0 0 4px; }
.gol-vis-sub { font-size: 1rem; margin: 20px 0 8px; color: #111; }
.gol-vis-list { list-style: none; margin: 0; padding: 0; }
.gol-vis-list li { padding: 14px 0; border-bottom: 1px solid #eef1f4; }
.gol-vis-list li:last-child { border-bottom: 0; }
.gol-vis-item { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.gol-vis-item strong { color: #111; font-size: 1rem; }
.gol-vis-pts { color: #1a7f37; font-weight: 700; white-space: nowrap; }
.gol-vis-why { color: #444; font-size: 0.9rem; margin-top: 4px; line-height: 1.5; }
.gol-vis-unlock { color: #5c6670; font-size: 0.88rem; margin-top: 3px; }
.gol-vis-locked li { opacity: .85; }

@media (max-width: 480px) {
	.gol-visibility { padding: 16px; }
	.gol-vis-number { font-size: 2.1rem; }
	.gol-vis-item { flex-direction: column; gap: 2px; }
}

/* Larger tap targets + text for accessibility on the editor forms. */
.gol-form-field input[type="text"],
.gol-form-field textarea,
.gol-form-field select {
	min-height: 46px;
	border: 1px solid #c9d1d9;
	border-radius: 6px;
}
.gol-form-field input:focus,
.gol-form-field textarea:focus {
	outline: 3px solid rgba(15,111,197,.35);
	border-color: #0f6fc5;
}