/*
Theme Name:        Natureil
Theme URI:         https://natureil.com
Author:            Natureil
Author URI:        https://natureil.com
Description:       Ultra-lightweight, high-performance multi-purpose travel theme. Native Gutenberg block patterns, full Customizer engine, REST API draft gate for AI content automation, semantic SEO schema, RTL-ready. Zero frameworks, zero page builders — pure WordPress at maximum velocity.
Version:           1.0.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.0
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       natureil
Domain Path:       /languages
Tags:              blog, travel, custom-logo, custom-colors, custom-menu, block-patterns, wide-blocks, rtl-language-support, translation-ready, threaded-comments, featured-images
*/

/* ═══════════════════════════════════════════════════════════════════════════════
   Design Tokens — Global CSS Custom Properties
   Defaults that the WordPress Customizer overrides at runtime via wp_head().
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand Palette ──────────────────────────────────────────────────────── */
  --flavor-primary:     #2563eb;
  --flavor-primary-h:   #1d4ed8;
  --flavor-secondary:   #0f172a;
  --flavor-accent:      #f59e0b;
  --flavor-accent-h:    #d97706;
  --flavor-success:     #16a34a;
  --flavor-danger:      #dc2626;

  /* ── Surfaces ───────────────────────────────────────────────────────────── */
  --flavor-bg:          #ffffff;
  --flavor-bg-alt:      #f8fafc;
  --flavor-surface:     #ffffff;
  --flavor-border:      #e2e8f0;

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --flavor-text:        #1e293b;
  --flavor-text-muted:  #64748b;
  --flavor-text-inv:    #ffffff;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --flavor-font-body:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --flavor-font-heading: var(--flavor-font-body);
  --flavor-font-mono:   "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  --flavor-fs-base:     1rem;
  --flavor-lh-base:     1.7;
  --flavor-lh-heading:  1.25;

  /* ── Spacing Scale ──────────────────────────────────────────────────────── */
  --flavor-sp-xs:       0.25rem;
  --flavor-sp-sm:       0.5rem;
  --flavor-sp-md:       1rem;
  --flavor-sp-lg:       1.5rem;
  --flavor-sp-xl:       2rem;
  --flavor-sp-2xl:      3rem;
  --flavor-sp-3xl:      4rem;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --flavor-content-w:   720px;
  --flavor-wide-w:      1200px;
  --flavor-full-w:      100%;
  --flavor-header-h:    64px;
  --flavor-radius:      8px;
  --flavor-radius-lg:   12px;
  --flavor-shadow:      0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --flavor-shadow-lg:   0 10px 25px rgba(0,0,0,.1);
  --flavor-transition:  200ms cubic-bezier(.4, 0, .2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Modern CSS Reset — Minimal, standards-compliant
   ═══════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  min-height: 100vh;
  font-family: var(--flavor-font-body);
  font-size: var(--flavor-fs-base);
  line-height: var(--flavor-lh-base);
  color: var(--flavor-text);
  background-color: var(--flavor-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--flavor-font-heading);
  line-height: var(--flavor-lh-heading);
  font-weight: 700;
  color: var(--flavor-secondary);
}

a {
  color: var(--flavor-primary);
  text-decoration: none;
  transition: color var(--flavor-transition);
}
a:hover, a:focus-visible { color: var(--flavor-primary-h); }

ul, ol { padding-inline-start: 1.5em; }

/* Focus ring for accessibility */
:focus-visible {
  outline: 2px solid var(--flavor-primary);
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 99999;
  padding: 8px 16px;
  background: var(--flavor-primary);
  color: var(--flavor-text-inv);
  font-weight: 600;
}
.skip-link:focus {
  inset-inline-start: 0;
}

/* Screen reader only */
.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;
}