/*
Theme Name: CURE Herb Database
Theme URI: https://cure.chula.ac.th/
Author: Chulalongkorn Herbal Extract Research
Author URI: https://www.chula.ac.th/
Description: Custom WordPress theme for the CURE herbal-extract research database. Implements the approved CURE Figma design with a searchable herb database (custom post type), taxonomies, ACF-driven content, and EN/TH multilingual support.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: herb-theme
Tags: custom-menu, featured-images, translation-ready, custom-post-type
*/

/* =========================================================================
   CURE — Chulalongkorn Herbal Database — Design tokens + base layer
   Ported 1:1 from the approved static prototype (html-prototype/assets/styles.css).
   Component / layout / page rules live in assets/css/main.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   01. Design tokens
   Prototype names (--pink, --green-800, …) are the source of truth.
   Legacy --cure-* aliases are kept so existing selectors keep resolving.
   ------------------------------------------------------------------------- */
:root {
	/* Pink scale */
	--pink:        #D63384;  /* Primary / Chula Pink */
	--pink-hover:  #b82a72;  /* Hover darken */
	--pink-200:    #F0A3C5;
	--pink-100:    #F9D0E3;
	--pink-50:     #FCE8F2;

	/* Green scale */
	--green-800:   #1B4D2E;  /* Nav text, footer bg, headings */
	--green-600:   #2E6B42;
	--green-200:   #8DC49D;
	--green-50:    #EAF5EE;

	/* Neutrals */
	--white:       #FFFFFF;
	--n900:        #000000;  /* Headings — measured pure black in the Figma */
	--n600:        #525252;  /* Genuinely muted small print (dates, labels) */
	--n200:        #E7E7E7;  /* Card / input borders */

	/* Body / intro / inactive-nav text */
	--text-body:   #404040;

	/* Cream — hero bands + panels */
	--cream:       #FAF9F2;
	/* Deep cream — icon tiles, search inputs, catalogue chips */
	--cream-deep:  #F1EFD9;

	/* System */
	--content-max: 1230px;
	--header-h:    87px;
	--radius-card: 14px;
	--radius-pill: 999px;
	--shadow-card: 0 1px 3px rgba(23,23,23,.06), 0 8px 24px rgba(23,23,23,.05);
	--shadow-soft: 0 1px 2px rgba(23,23,23,.05);
	--ring-pink:   0 0 0 4px var(--pink-100);

	/* --- Legacy --cure-* aliases (same values, do not change) --- */
	--cure-pink: var(--pink);
	--cure-pink-200: var(--pink-200);
	--cure-pink-100: var(--pink-100);
	--cure-pink-50: var(--pink-50);
	--cure-green-800: var(--green-800);
	--cure-green-600: var(--green-600);
	--cure-green-200: var(--green-200);
	--cure-green-50: var(--green-50);
	--cure-white: var(--white);
	--cure-neutral-900: var(--n900);
	--cure-neutral-600: var(--n600);
	--cure-neutral-200: var(--n200);
	--cure-cream: var(--cream);
	--cure-cream-deep: var(--cream-deep);
	--cure-text-body: var(--text-body);

	--cure-color-primary: var(--pink);
	--cure-color-text: var(--text-body);
	--cure-color-text-muted: var(--n600);
	--cure-color-border: var(--n200);
	--cure-color-surface: var(--white);
	--cure-color-footer-bg: var(--green-800);
	--cure-color-heading: var(--n900);

	--cure-font-base: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cure-font-weight-regular: 400;
	--cure-font-weight-medium: 500;
	--cure-font-weight-semibold: 600;

	--cure-content-width: var(--content-max);
	--cure-radius-card: var(--radius-card);
	--cure-radius-input: 8px;
	--cure-radius-pill: var(--radius-pill);
	--cure-header-height: var(--header-h);

	--cure-space-1: 4px;
	--cure-space-2: 8px;
	--cure-space-3: 12px;
	--cure-space-4: 16px;
	--cure-space-5: 24px;
	--cure-space-6: 32px;
	--cure-space-7: 48px;
	--cure-space-8: 64px;
	--cure-space-9: 96px;

	--cure-shadow-sm: var(--shadow-soft);
	--cure-shadow-md: var(--shadow-card);
	--cure-shadow-lg: var(--shadow-card);
}

/* -------------------------------------------------------------------------
   02. Reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--text-body);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--n900);
}

p { margin: 0; }

iconify-icon { display: inline-block; vertical-align: middle; }

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

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	background: var(--white);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card);
	color: var(--pink);
	display: block;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	left: 16px;
	line-height: 1;
	padding: 14px 22px;
	text-decoration: none;
	top: 16px;
	width: auto;
	z-index: 100000;
}