/**
 * Main Stylesheet
 *
 * Base styles + component/page imports.
 * Uses theme.json tokens for consistency.
 *
 * @package CPDC_Sovereign_Debt_Hub
 * @since 0.1.0
 */

 /* ==========================================================================
   COMPONENT IMPORTS
   ========================================================================== */

@import url("./components/skip-link.css");
@import url("./components/layout.css");
@import url("./components/site-header.css");
@import url("./components/site-footer.css");
@import url("./components/card.css");
@import url("./components/chip.css");
@import url("./components/meta-row.css");
@import url("./components/filter-bar.css");
@import url("./components/tabs.css");
@import url("./components/pagination.css");

/* ==========================================================================
   PAGE IMPORTS
   ========================================================================== */

@import url("./pages/home.css");
@import url("./pages/resources.css");
@import url("./pages/countries.css");
@import url("./pages/policy.css");
@import url("./pages/advocacy.css");
@import url("./pages/documentary.css");
@import url("./pages/error-404.css");
@import url("./pages/search.css");
@import url("./pages/about.css");
@import url("./pages/contact.css");

/* ==========================================================================
   SKIN IMPORTS
   Uncomment ONE skin at a time. Each builds on the previous version.
   ========================================================================== */

/* V1: Original dark palette — deep space blue ambient, cyan accents,
       all sections transparent on dark gradient background.
       File: skins/command-center.css */
/* @import url("./skins/command-center.css"); */

/* V2: Color blocking — solid-color sections on dark base,
       sky blue explore, amber take-action, deep blue stats.
       File: skins/command-center-v2.css */
/* @import url("./skins/command-center-v2.css"); */

/* V3: Gradient & Motion (ACTIVE) — V1 dark palette enhanced with
       artful radial/linear gradient backgrounds per section,
       CSS parallax on hero & documentary, scroll-reveal animations.
       Palette: Deep Space #023047, Blue Green #219EBC, Amber #FFB703.
       File: skins/command-center-v3.css */
/* @import url("./skins/command-center-v3.css"); */

/* V4: Ocean Currents (ACTIVE) — Caribbean sea-inspired wave movement,
       serif display headlines, frosted glass cards, alternating cool/warm
       section temperatures, pill-shaped buttons, wave-animated gradients.
       Same palette reimagined with ocean depth metaphor.
       File: skins/ocean-currents.css */
@import url("./skins/ocean-currents.css");


/* ==========================================================================
   1. CSS Custom Properties (fallbacks for theme.json tokens)
   ========================================================================== */

:root {
	/* Spacing fallbacks if theme.json not loaded */
	--wp--preset--spacing--2xs: 0.25rem;
	--wp--preset--spacing--xs: 0.5rem;
	--wp--preset--spacing--sm: 1rem;
	--wp--preset--spacing--md: 1.5rem;
	--wp--preset--spacing--lg: 2rem;
	--wp--preset--spacing--xl: 3rem;
	--wp--preset--spacing--2xl: 4rem;

	/* Color fallbacks for ocean palette tokens */
	--wp--preset--color--primary: #4A7CC6;
	--wp--preset--color--ocean-mint: #7BEAA4;
	--wp--preset--color--ocean-teal: #2ECBC3;
	--wp--preset--color--ocean-cyan: #60D4F2;
	--wp--preset--color--ocean-blue: #4A7CC6;
	--wp--preset--color--ocean-indigo: #6068D2;

	/* Font family fallback */
	--wp--preset--font-family--heading-serif: 'Playfair Display', Georgia, 'Times New Roman', Times, serif;

	/* Accent pink */
	--wp--preset--color--accent-pink: #E8487F;
	--sdh-accent-pink-light: rgba(232, 72, 127, 0.08);

	/* Transitions */
	--sdh-transition-fast: 150ms ease;
	--sdh-transition-medium: 250ms ease;
	--sdh-transition-slow: 400ms cubic-bezier(0.25, 0.1, 0.25, 1);

	/* Shadows */
	--sdh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
	--sdh-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
	--sdh-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
}

/* ==========================================================================
   2. Box Sizing Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ==========================================================================
   3. Base Typography & Body
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--wp--preset--font-family--system-sans);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
	color: var(--wp--preset--color--gray-900);
	background-color: var(--wp--preset--color--white);
}

/* Main content grows to fill space */
#main-content {
	display: block;
	flex: 1;
	padding-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
}

#main-content:focus {
	outline: none;
}

/* ==========================================================================
   4. Vertical Rhythm: Headings
   ========================================================================== */

:where(h1, h2, h3, h4, h5, h6) {
	margin-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--heading-serif);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

:where(h1, h2, h3, h4, h5, h6):first-child {
	margin-block-start: 0;
}

:where(h1) { font-size: var(--wp--preset--font-size--4xl); }
:where(h2) { font-size: var(--wp--preset--font-size--3xl); }
:where(h3) { font-size: var(--wp--preset--font-size--2xl); }
:where(h4) { font-size: var(--wp--preset--font-size--xl); }
:where(h5) { font-size: var(--wp--preset--font-size--lg); }
:where(h6) { font-size: var(--wp--preset--font-size--md); }

/* ==========================================================================
   5. Vertical Rhythm: Paragraphs, Lists, Blocks
   ========================================================================== */

:where(p, ul, ol, dl, blockquote, figure, pre, table) {
	margin-block: 0 var(--wp--preset--spacing--sm);
}

:where(ul, ol) {
	padding-inline-start: var(--wp--preset--spacing--md);
}

:where(li) {
	margin-block-end: var(--wp--preset--spacing--xs);
}

:where(li):last-child {
	margin-block-end: 0;
}

:where(blockquote) {
	margin-inline: 0;
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	border-left: 4px solid var(--wp--preset--color--gray-400);
}

:where(pre) {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	overflow-x: auto;
	font-size: var(--wp--preset--font-size--sm);
}

:where(code) {
	padding: 0.125em 0.375em;
	background-color: var(--wp--preset--color--gray-100);
	font-size: 0.875em;
	border-radius: 2px;
}

:where(pre code) {
	padding: 0;
	background: none;
}

/* ==========================================================================
   6. Responsive Images & Media
   ========================================================================== */

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

img {
	border-style: none;
}

/* Prevent images from breaking layout */
figure {
	margin-inline: 0;
}

figure img {
	width: 100%;
}

figcaption {
	margin-block-start: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
}

/* ==========================================================================
   7. Links
   ========================================================================== */

a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

a:hover {
	text-decoration: none;
}

/* ==========================================================================
   8. Focus Styles (Accessibility)
   ========================================================================== */

:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ==========================================================================
   9. Tables
   ========================================================================== */

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}

th,
td {
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--gray-300);
}

th {
	font-weight: 600;
	background-color: var(--wp--preset--color--gray-100);
}

tbody tr:hover {
	background-color: var(--wp--preset--color--gray-100);
}

/* ==========================================================================
   10. Form Elements
   ========================================================================== */

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
	appearance: button;
	cursor: pointer;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	appearance: textfield;
	outline-offset: -2px;
}

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/* ==========================================================================
   11. Block Editor Alignment Support
   ========================================================================== */

.alignwide {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.alignfull {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* ==========================================================================
   12. Utility Classes
   ========================================================================== */

/* Visually hidden (accessible) */
.visually-hidden,
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

.visually-hidden:focus,
.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	width: auto;
	z-index: 100000;
	background-color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--sm);
}