/*
Theme Name: KDU Texas
Theme URI: https://kduoftexas.org
Description: Child theme of Hello Elementor for the Krio Descendants Union of Texas. Locks the brand design system — cream paper, cotton green, Freetown blue, the Playfair / Fraunces / DM Sans / Caveat type pairing, warm shadows, the editorial voice. Every page inherits these tokens by default.
Author: KDU of Texas
Author URI: https://kduoftexas.org
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: All rights reserved
Text Domain: kdu-texas
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   KDU Texas — Design system tokens
   "Le we hep we sef"  ·  Let us help ourselves
   ============================================================
   Canonical reference: docs/07-DESIGN-SYSTEM-SPEC.md in this repo.
   Every visual decision on the site must obey what's below.
   ============================================================ */

:root {
  /* ---------- Brand primaries ---------- */
  --kdu-cotton-green:   #2E8F44;   /* deep, planted, anchor green */
  --kdu-cotton-green-2: #43AD53;   /* live foliage — sampled from logo */
  --kdu-cotton-green-3: #6BB17B;   /* canopy mid-tone */
  --kdu-cotton-green-4: #C8E3CB;   /* leaf wash, cards & tags */
  --kdu-cotton-green-5: #EAF4EB;   /* mist, page tints */

  --kdu-freetown-blue:   #2C4A78;  /* serif wordmark, deep */
  --kdu-freetown-blue-2: #4B6C99;  /* sampled from logo */
  --kdu-freetown-blue-3: #7E9AC0;  /* harbor */
  --kdu-freetown-blue-4: #D5DFEE;  /* sky wash */

  /* ---------- Earth & flag accents ---------- */
  --kdu-cream:  #F7F1E3;  /* aged paper, feature surfaces */
  --kdu-clay:   #C4633C;  /* Bod O roof, festival wraps */
  --kdu-clay-2: #E2A37A;
  --kdu-palm:   #1F3A2E;  /* deepest shadow / dark sections */
  --kdu-gold:   #D4A24A;  /* heritage trim, awards, proclamation */

  /* ---------- Neutrals (warm, paper-leaning) ---------- */
  --kdu-ink:    #1B2218;  /* body text, near-black with a green cast */
  --kdu-ink-2:  #3A4135;
  --kdu-ink-3:  #5C6356;
  --kdu-ink-4:  #8A8F84;
  --kdu-ink-5:  #BFC3B7;
  --kdu-paper:  #FBF8F1;  /* page background — never #ffffff */
  --kdu-paper-2:#F2EEE2;  /* alternate section background */
  --kdu-rule:   #DCD7C6;  /* hairlines, dividers, input borders */

  /* ---------- Semantic ---------- */
  --kdu-fg-link:        var(--kdu-freetown-blue);
  --kdu-fg-link-hover:  var(--kdu-cotton-green);
  --kdu-bg-feature:     var(--kdu-cream);
  --kdu-success: #2E8F44;
  --kdu-warning: #C48B1A;
  --kdu-danger:  #B0414A;

  /* ---------- Shadows (warm, paper-leaning) ---------- */
  --kdu-shadow-1: 0 1px 2px rgba(27, 34, 24, 0.06),
                  0 4px 12px rgba(27, 34, 24, 0.06);
  --kdu-shadow-2: 0 4px 8px rgba(27, 34, 24, 0.08),
                  0 12px 32px rgba(27, 34, 24, 0.10);
  --kdu-shadow-3: 0 10px 24px rgba(27, 34, 24, 0.14),
                  0 24px 60px rgba(27, 34, 24, 0.18);

  /* ---------- Radii ---------- */
  --kdu-radius-card:   8px;
  --kdu-radius-button: 6px;
  --kdu-radius-input:  6px;
  --kdu-radius-pill:   999px;
}

/* ============================================================
   Base — paper-not-white background
   ============================================================ */

body {
  background-color: var(--kdu-paper);
  color: var(--kdu-ink);
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--kdu-fg-link);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--kdu-fg-link-hover);
}

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, serif;
  color: var(--kdu-ink);
  letter-spacing: -0.01em;
}

h1 { font-size: 2rem; line-height: 1.15; font-weight: 600; }
h2 { font-size: 1.625rem; line-height: 1.2; font-weight: 600; }
h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }

@media (min-width: 1024px) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }
}

/* "Display" class for Playfair hero headlines */
.kdu-display,
.elementor-heading-title.kdu-display {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ============================================================
   Focus ring — launch-blocking accessibility requirement
   ============================================================ */

*:focus-visible {
  outline: 2px solid var(--kdu-cotton-green);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   Reduced motion — respect user preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Utility classes — reach for these in Elementor's custom-class slot
   ============================================================ */

/* Eyebrow / section label — cotton-green uppercase tag above headings */
.kdu-eyebrow {
  display: inline-block;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kdu-cotton-green);
  margin-bottom: 12px;
}

/* Krio phrase chip — used once per surface as a margin note */
.kdu-krio-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--kdu-cream);
  color: var(--kdu-cotton-green);
  font-family: "Caveat", cursive;
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: var(--kdu-radius-pill);
}

/* Editorial section spacing */
.kdu-section {
  padding-block: 64px;
}
@media (min-width: 1024px) {
  .kdu-section { padding-block: 96px; }
}

/* Feature section — cream-paper background for donation callouts, etc. */
.kdu-feature-section {
  background-color: var(--kdu-bg-feature);
}

/* Tinted alt section — warm paper-2 background */
.kdu-alt-section {
  background-color: var(--kdu-paper-2);
}

/* Dark / palm section — deep green with cream text */
.kdu-dark-section {
  background-color: var(--kdu-palm);
  color: var(--kdu-cream);
}
.kdu-dark-section h1,
.kdu-dark-section h2,
.kdu-dark-section h3 {
  color: var(--kdu-cream);
}

/* ============================================================
   Buttons — when used outside Elementor (e.g. plugin output)
   For Elementor-built buttons, use the Global Kit button styles instead.
   ============================================================ */

.kdu-button,
.kdu-button-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: var(--kdu-cotton-green);
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--kdu-radius-button);
  border: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.kdu-button:hover,
.kdu-button-primary:hover {
  background-color: var(--kdu-cotton-green-2);
  box-shadow: var(--kdu-shadow-1);
  color: #ffffff;
  text-decoration: none;
}

.kdu-button-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: transparent;
  color: var(--kdu-cotton-green);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--kdu-radius-button);
  border: 1.5px solid var(--kdu-cotton-green);
  text-decoration: none;
  transition: background-color 0.2s ease-out;
}

.kdu-button-secondary:hover {
  background-color: var(--kdu-cotton-green-5);
  color: var(--kdu-cotton-green);
  text-decoration: none;
}

/* ============================================================
   Forms — applies to plugin-rendered forms (Fluent, PMPro, GiveWP)
   that don't fully respect Elementor's Form Field globals
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  background-color: #ffffff;
  border: 1px solid var(--kdu-rule);
  border-radius: var(--kdu-radius-input);
  padding: 10px 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  color: var(--kdu-ink);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  border-color: var(--kdu-cotton-green);
  box-shadow: 0 0 0 2px var(--kdu-cotton-green-5);
}

label {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--kdu-ink-2);
}

/* ============================================================
   Plugin-specific brand alignment
   ============================================================ */

/* GiveWP — match donation buttons to brand */
.give-btn,
.give-submit {
  background-color: var(--kdu-cotton-green) !important;
  border-color: var(--kdu-cotton-green) !important;
  border-radius: var(--kdu-radius-button) !important;
}
.give-btn:hover,
.give-submit:hover {
  background-color: var(--kdu-cotton-green-2) !important;
  border-color: var(--kdu-cotton-green-2) !important;
}

/* The Events Calendar — accent color */
.tribe-common,
.tribe-events {
  --tec-color-accent-primary: var(--kdu-cotton-green);
  --tec-color-accent-primary-hover: var(--kdu-cotton-green-2);
  --tec-color-background-primary: var(--kdu-paper);
}

/* Paid Memberships Pro — form alignment */
.pmpro_form_field {
  margin-bottom: 16px;
}
.pmpro_btn {
  background-color: var(--kdu-cotton-green) !important;
  border-radius: var(--kdu-radius-button) !important;
}

/* Fluent Forms — submit button */
.frm-fluent-form .ff_submit_btn_wrapper button[type="submit"] {
  background-color: var(--kdu-cotton-green) !important;
  border-color: var(--kdu-cotton-green) !important;
  border-radius: var(--kdu-radius-button) !important;
}

/* ============================================================
   "No white background" rule
   Override any plugin that puts pure-white surfaces on the page.
   White is reserved for: cards inside paper-2 sections, modals, form inputs.
   ============================================================ */

.entry-content,
.site-main,
.elementor-section-stretched > .elementor-container {
  background-color: var(--kdu-paper);
}