/* =========================================================
   TC Design System — "Gilded Noir"
   Global CSS custom properties + base styling
   ========================================================= */

:root {
	--tc-color-bg: oklch(0.97 0.008 75);
	--tc-color-text: #333333;
	--tc-color-accent-1: #2cc4e7; /* Ocean Teal — links / active nav / highlights */
	--tc-color-accent-2: oklch(0.72 0.12 75); /* Sand Gold — borders / badges */
	--tc-color-cta: #EA580C; /* Coral Orange — primary buttons only */
	--tc-color-cta-hover: #c9490a;

	--tc-font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--tc-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--tc-radius-image: 8px;
	--tc-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* ---------------------------------------------------------
   Base typography & color
   --------------------------------------------------------- */
body {
	background-color: var(--tc-color-bg);
	color: var(--tc-color-text);
	font-family: var(--tc-font-body);
}

h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.entry-title {
	font-family: var(--tc-font-heading);
}

a {
	color: var(--tc-color-accent-1);
}

a:hover,
a:focus {
	color: var(--tc-color-accent-1);
	filter: brightness(0.9);
}

nav a.current-menu-item,
nav a[aria-current="page"],
.wp-block-navigation-item.current-menu-item > a {
	color: var(--tc-color-accent-1);
}

/* Primary CTA buttons only use Coral Orange */
.tc-cta-button,
.wp-block-button.tc-cta .wp-block-button__link {
	background-color: var(--tc-color-cta);
	border-color: var(--tc-color-cta);
	color: #ffffff;
	font-family: var(--tc-font-body);
	font-weight: 700;
	border-radius: 6px;
	display: inline-block;
	padding: 0.65em 1.4em;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.tc-cta-button:hover,
.wp-block-button.tc-cta .wp-block-button__link:hover {
	background-color: var(--tc-color-cta-hover);
	color: #ffffff;
}

/* Sand Gold used for borders / badges */
.tc-badge,
.tc-bordered {
	border: 1px solid var(--tc-color-accent-2);
}

.tc-badge {
	display: inline-block;
	background-color: color-mix(in oklch, var(--tc-color-accent-2) 18%, white);
	color: var(--tc-color-text);
	border-radius: 4px;
	padding: 0.2em 0.7em;
	font-size: 0.85em;
	font-family: var(--tc-font-body);
}

/* ---------------------------------------------------------
   Global image styling — rounded corners + soft shadow
   --------------------------------------------------------- */
img,
.wp-block-image img,
.wp-block-cover img,
.wp-block-media-text__media img,
figure img {
	border-radius: var(--tc-radius-image);
	box-shadow: var(--tc-shadow-soft);
}

/* ---------------------------------------------------------
   Custom travel-themed cursor (site-wide), CSS + JS with fallback.
   Uses the plugin's palm-cursor.svg asset with a graceful "auto" fallback
   for browsers/situations that cannot load a custom cursor image.
   --------------------------------------------------------- */
html,
body {
	cursor: url('../images/palm-cursor.svg') 12 22, auto;
}

a,
button,
.tc-cta-button,
input[type="submit"],
.wp-block-button__link {
	cursor: url('../images/palm-cursor.svg') 12 22, pointer;
}

/* JS-added fallback class in case the custom cursor image fails to load */
body.tc-cursor-fallback,
body.tc-cursor-fallback a,
body.tc-cursor-fallback button {
	cursor: auto;
}

/* ---------------------------------------------------------
   Persistent slim top banner
   --------------------------------------------------------- */
.tc-ds-top-banner {
	background-color: var(--tc-color-text);
	color: var(--tc-color-bg);
	text-align: center;
	font-family: var(--tc-font-body);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	position: relative;
	z-index: 9999;
	width: 100%;
}

.tc-ds-top-banner p {
	margin: 0;
	padding: 6px 12px;
}

/* ---------------------------------------------------------
   Ad zone placeholders — hidden by default, revealed only
   once a publisher ID is set (body.tc-ads-enabled)
   --------------------------------------------------------- */
.tc-ad-zone {
	display: none;
	align-items: center;
	justify-content: center;
	background-color: color-mix(in oklch, var(--tc-color-accent-2) 10%, white);
	border: 1px dashed var(--tc-color-accent-2);
	border-radius: var(--tc-radius-image);
	color: var(--tc-color-text);
	font-family: var(--tc-font-body);
	font-size: 0.8rem;
	margin: 1.5rem auto;
	overflow: hidden;
}

body.tc-ads-enabled .tc-ad-zone {
	display: flex;
}

.tc-ad-leaderboard {
	width: 100%;
	max-width: 728px;
	height: 90px;
}

.tc-ad-incontent {
	width: 100%;
	max-width: 336px;
	min-height: 120px;
}

.tc-ad-sidebar {
	width: 300px;
	height: 250px;
	position: sticky;
	top: 20px;
}

@media (min-width: 1024px) {
	.tc-ad-sidebar {
		height: 600px;
	}
}

@media (max-width: 600px) {
	.tc-ad-leaderboard {
		height: 60px;
	}
}