/*
 Theme Name:   Nurtured By Nature
 Theme URI:    https://nurturedbynature.org/
 Description:  Child theme for the Astra framework, custom-built for Nurtured By Nature — a 501(c)(3) nature inspiration center in Pauma Valley, CA. Premium, editorial, photography-driven brand styling, modeled in structure on wildcoast.org. Ivory base with brass and clay accents.
 Author:       Erick Magnuson
 Author URI:   https://erickmagnuson.com/
 Template:     astra
 Version:      0.2.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  nurtured-by-nature
*/

/* ============================================================
   BRAND TOKENS  (premium/editorial system — teal-led, June 2026)
   Bright teal/white lead with gold, coral & brown as ancillary
   accents. Editorial layout + fonts kept; palette rebalanced
   brighter and away from orange.
   ============================================================ */
:root {
  --nbn-ivory:      #e7f4f5;  /* light section bg (fresh aqua tint) */
  --nbn-cream:      #fafdfd;  /* lightest section bg (crisp cool white) */
  --nbn-paper:      #ffffff;  /* cards */

  --nbn-teal:       #15b4d7;  /* bright brand teal — accents */
  --nbn-teal-deep:  #007e9b;  /* primary CTA / links / headings accent */
  --nbn-teal-mid:   #109bba;  /* band gradient mid */
  --nbn-teal-ink:   #06414f;  /* footer / topbar / darkest */

  --nbn-gold:       #c89a3f;  /* brass — luxury accent (eyebrows, rules, stars) */
  --nbn-gold-soft:  #e6c684;  /* brass on dark */
  --nbn-coral:      #ff6a44;  /* warm accent — nav hover, "new" tag, donate */
  --nbn-coral-deep: #ed5530;  /* coral hover */
  --nbn-brown:      #5e4636;  /* logo brown — subtle captions */

  --nbn-ink:        #14272d;  /* text (cool near-black) */
  --nbn-muted:      #56676d;  /* secondary text */
  --nbn-line:       #d4e6e6;  /* hairlines / borders (cool) */

  --nbn-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --nbn-font-script:  'Sacramento', 'Brush Script MT', cursive;
  --nbn-font-body:    'Mulish', system-ui, -apple-system, sans-serif;

  --nbn-radius: 2px;
  --nbn-radius-lg: 4px;
  --nbn-shadow:    0 22px 60px -28px rgba(10, 61, 73, .38);
  --nbn-shadow-sm: 0 10px 30px -18px rgba(10, 61, 73, .30);
}

/* ============================================================
   GLOBAL TYPOGRAPHY
   ============================================================ */
body,
.ast-container { font-family: var(--nbn-font-body); color: var(--nbn-ink); }

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--nbn-font-display) !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1.04;
  color: var(--nbn-ink);
}

a { color: var(--nbn-teal-deep); }
a:hover { color: var(--nbn-teal); }

/* ============================================================
   BUTTONS  (Astra + WP blocks)
   Pill-flat: 2px radius, uppercase, brass-spaced. Teal is primary.
   ============================================================ */
.ast-button,
.button,
button,
input[type="submit"],
.wp-block-button__link,
.wp-block-search__button {
  font-family: var(--nbn-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-size: .82rem;
  padding: 16px 32px;
  border-radius: var(--nbn-radius) !important;
  background: var(--nbn-teal-deep);
  border: 1px solid var(--nbn-teal-deep);
  color: #fff;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background: var(--nbn-teal-ink);
  border-color: var(--nbn-teal-ink);
  color: #fff;
  transform: translateY(-2px);
}

/* Coral solid (warm accent — donations) — block style "nbn-coral" / .btn-coral */
.is-style-nbn-coral .wp-block-button__link,
.btn-coral .wp-block-button__link,
.btn-coral {
  background: var(--nbn-coral);
  border-color: var(--nbn-coral);
  color: #fff;
}
.is-style-nbn-coral .wp-block-button__link:hover,
.btn-coral .wp-block-button__link:hover,
.btn-coral:hover {
  background: var(--nbn-coral-deep);
  border-color: var(--nbn-coral-deep);
}

/* Gold outline on light — block style "nbn-gold" / .is-style-outline / .btn-gold */
.is-style-nbn-gold .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.btn-gold .wp-block-button__link,
.btn-gold {
  background: transparent;
  color: var(--nbn-ink);
  border: 1px solid var(--nbn-gold);
}
.is-style-nbn-gold .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.btn-gold .wp-block-button__link:hover,
.btn-gold:hover {
  background: var(--nbn-gold);
  border-color: var(--nbn-gold);
  color: #fff;
}

/* White outline on photos — block style "nbn-light" / .btn-light */
.is-style-nbn-light .wp-block-button__link,
.btn-light .wp-block-button__link,
.btn-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .85);
}
.is-style-nbn-light .wp-block-button__link:hover,
.btn-light .wp-block-button__link:hover,
.btn-light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--nbn-ink);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header,
.ast-primary-header-bar { background: rgba(255, 255, 255, .94); }

.main-header-menu .menu-link {
  font-family: var(--nbn-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: .82rem;
  color: var(--nbn-ink);
}
.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link { color: var(--nbn-teal-deep); }

.site-logo-img img,
.custom-logo-link img { max-height: 60px; width: auto; }

/* ============================================================
   SECTION HELPERS  (use as block group classes)
   ------------------------------------------------------------
   Add these as "Additional CSS class(es)" on Group blocks
   ============================================================ */
.nbn-ivory  { background: var(--nbn-ivory); }
.nbn-cream  { background: var(--nbn-cream); }
.nbn-teal-band {
  background: linear-gradient(120deg, var(--nbn-teal-deep), var(--nbn-teal-mid));
  color: #fff;
}
.nbn-teal-band :is(h1,h2,h3,h4,p) { color: #fff; }

/* Eyebrow — brass, spaced, with a short rule before it */
.nbn-eyebrow {
  font-family: var(--nbn-font-body);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--nbn-gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.nbn-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--nbn-gold);
}

/* Gold hairline divider */
.nbn-rule {
  border: 0;
  height: 1px;
  background: var(--nbn-line);
  margin: 0;
}

/* Cards — white, hairline border, hover lifts + gold border */
.nbn-card {
  background: var(--nbn-paper);
  border: 1px solid var(--nbn-line);
  border-radius: var(--nbn-radius-lg);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nbn-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--nbn-shadow);
  border-color: var(--nbn-gold);
}

/* Stat number styling */
.nbn-stat {
  font-family: var(--nbn-font-display) !important;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
  line-height: 1;
  color: var(--nbn-teal-deep);
}

/* ============================================================
   COVER / HERO readability
   ============================================================ */
.wp-block-cover { border-radius: 0; }
.nbn-hero .wp-block-cover__inner-container { max-width: 760px; }
.wp-block-cover.nbn-hero h1 { color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.35); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
.ast-small-footer,
.footer-sml-layout { background: var(--nbn-teal-ink); color: #cfe6ec; }
.site-footer a, .ast-small-footer a { color: #cfe6ec; }
.site-footer a:hover { color: #fff; }
.site-footer h2, .site-footer h3, .site-footer h4 { color: #fff; }

/* ============================================================
   MISC
   ============================================================ */
::selection { background: var(--nbn-gold); color: #fff; }