/* =============================================================================
 * ogace-footer-tripadvisor.css — light OTA-directory footer skin.
 * Loads only when 'ogace_footer_skin' === 'tripadvisor' (class-footer.php).
 * Scoped entirely under .ogta-footer. Uses the real OGACE brand tokens
 * from ogace-brand-tokens.css (--oga-*) — no invented palette.
 * ========================================================================== */

.ogta-footer{
	--ogta-ink:      var(--oga-ink, #1a1a1a);
	--ogta-ink-dim:  var(--oga-ink-muted, #5a5a5a);
	--ogta-navy:     var(--oga-logo-navy, #1c3f8f);
	--ogta-green:    #1D9E75;
	--ogta-red:      var(--oga-red, #e00025);
	--ogta-bg:       var(--oga-bg, #ffffff);
	--ogta-bg-soft:  var(--oga-bg-soft, #f5f6f8);
	--ogta-border:   var(--oga-border, #e2e4e9);
	--ogta-font-d:   var(--ogama-font-d, 'Playfair Display', Georgia, serif);
	--ogta-font-b:   var(--ogama-font-b, 'Plus Jakarta Sans', system-ui, sans-serif);

	background: var(--ogta-bg);
	color: var(--ogta-ink);
	font-family: var(--ogta-font-b);
	border-top: 1px solid var(--ogta-border);
}
.ogta-footer a{ color: var(--ogta-ink); text-decoration: none; }
.ogta-footer a:hover{ color: var(--ogta-green); text-decoration: underline; }
.ogta-footer button{ font-family: inherit; }

/* ── Top: brand statement ───────────────────────────────────────────── */
.ogta-top{ background: var(--ogta-bg); padding: 48px 0 32px; }
.ogta-top-inner{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.ogta-headline{
	font-family: var(--ogta-font-d);
	font-weight: 700;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.2;
	color: var(--ogta-navy);
	margin: 0 0 14px;
}
.ogta-sub{
	max-width: 74ch;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ogta-ink);
	margin: 0;
}

/* ── Middle: column grid ────────────────────────────────────────────── */
.ogta-mid{ background: var(--ogta-bg-soft); border-top: 1px solid var(--ogta-border); }
.ogta-mid-inner{ max-width: 1180px; margin: 0 auto; padding: 40px 24px; }
.ogta-cols{
	display: grid;
	grid-template-columns: repeat(4, minmax(160px, 1fr));
	gap: 28px 24px;
}
.ogta-col{ min-width: 0; }
.ogta-h{
	font-family: var(--ogta-font-b);
	font-size: 16px; font-weight: 700;
	color: var(--ogta-ink);
	margin: 0 0 14px;
}
.ogta-h-tight{ margin-top: 26px; }
.ogta-list{ list-style: none; margin: 0; padding: 0; }
.ogta-list li{ margin: 0 0 12px; }
.ogta-list a{ font-size: 14.5px; color: var(--ogta-ink); }
.ogta-list a:hover{ color: var(--ogta-green); }

/* ── Bottom: logo, legal, region note, selectors, socials ───────────── */
.ogta-bottom{ background: var(--ogta-bg-soft); }
.ogta-bottom-inner{ max-width: 1180px; margin: 0 auto; padding: 0 24px 32px; }
.ogta-bottom-row{
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px 32px;
	align-items: start;
	padding-top: 4px;
}
.ogta-logo-line{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ogta-logo-mark{ font-size: 22px; line-height: 1; }
.ogta-copy{ font-size: 13.5px; color: var(--ogta-ink); }
.ogta-legal-links{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; }
.ogta-legal-links a{ font-size: 13.5px; font-weight: 600; text-decoration: underline; }
.ogta-region-note{
	font-size: 13px; color: var(--ogta-ink-dim); margin: 0 0 8px; max-width: 68ch;
}
.ogta-readmore{
	display: inline-flex; align-items: center; gap: 4px;
	background: none; border: 0; padding: 0; margin-left: 4px;
	font-size: 13px; font-weight: 700; text-decoration: underline;
	color: var(--ogta-ink); cursor: pointer;
}
.ogta-readmore:hover{ color: var(--ogta-green); }
.ogta-readmore[aria-expanded="true"] span{ display: inline-block; transform: rotate(180deg); }
.ogta-region-more{
	font-size: 13px; color: var(--ogta-ink-dim); line-height: 1.5; max-width: 68ch; margin: 0;
}

.ogta-selectors{ display: flex; gap: 12px; justify-self: end; }
.ogta-select{
	position: relative; display: inline-flex; align-items: center;
	border: 1px solid var(--ogta-ink); border-radius: 999px;
	padding: 9px 30px 9px 14px;
}
.ogta-select select{
	appearance: none; -webkit-appearance: none; background: none; border: 0;
	font: inherit; font-weight: 700; font-size: 14px; color: var(--ogta-ink);
	padding: 0; margin: 0; cursor: default;
}
.ogta-select span{
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	font-size: 11px; color: var(--ogta-ink); pointer-events: none;
}

.ogta-social-row{
	display: flex; gap: 14px; margin-top: 24px;
	border-top: 1px solid var(--ogta-border); padding-top: 24px;
}
.ogta-soc{
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--ogta-ink); color: var(--ogta-bg);
	font-size: 15px;
}
.ogta-soc:hover{ background: var(--ogta-green); color: var(--ogta-bg); text-decoration: none; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px){
	.ogta-cols{ grid-template-columns: repeat(2, 1fr); }
	.ogta-bottom-row{ grid-template-columns: 1fr; }
	.ogta-selectors{ justify-self: start; }
}
@media (max-width: 520px){
	.ogta-cols{ grid-template-columns: 1fr 1fr; gap: 24px 16px; }
	.ogta-top{ padding: 36px 0 24px; }
	.ogta-mid-inner, .ogta-bottom-inner{ padding-left: 18px; padding-right: 18px; }
}