/*
 Theme Name:   Maren & Olin Child
 Theme URI:    https://marenandolin.com
 Description:  Astra child theme for Maren & Olin. All brand tokens, typography, and base overrides.
 Author:       Maren & Olin Studio
 Author URI:   https://marenandolin.com
 Template:     astra
 Version:      1.0.0
 Text Domain:  maren-olin-child
*/

/* ─────────────────────────────────────────────────────────────────
   MAREN & OLIN — BRAND TOKEN SYSTEM v1.0
   Source of truth: MO_ColorSystem_v1.0 + MO_TypographySystem_v1.0
   Never override these variables directly in page/post CSS.
   All design decisions flow from here.
───────────────────────────────────────────────────────────────── */

:root {

  /* ── CORE BRAND COLORS ─────────────────────────────────────── */
  --mo-warm-paper:    #FAF7F0;   /* Main background */
  --mo-oat-milk:      #F3EDE3;   /* Section backgrounds, large fields */
  --mo-cream-linen:   #EFE7D8;   /* Tertiary background, cards */
  --mo-sage-linen:    #A8B8A1;   /* Core brand accent — links, tags, CTAs */
  --mo-dusty-rose:    #D7A7A0;   /* Warm accent — Maren's watering can color */
  --mo-wheat-tan:     #D8C7AD;   /* Material support — borders, input rings */
  --mo-soft-brown:    #8A6F5A;   /* Body text secondary, wood, hair */
  --mo-soft-charcoal: #3F4642;   /* Primary text, logo, nav, headings */
  --mo-terracotta:    #B9826A;   /* Accent CTA, earth detail */
  --mo-mist-blue:     #B9C8C9;   /* Olin, weather, rain, sky support */
  --mo-moss-green:    #7F9277;   /* Deeper plant accent, hover states */
  --mo-pale-blush:    #EAC8C0;   /* Cheeks, very soft accents */
  --mo-basket-straw:  #C6AA7C;   /* Baskets, satchels, material props */
  --mo-rain-gray:     #B7B4AA;   /* Stones, shadows, muted neutrals */
  --mo-soil-brown:    #7A6652;   /* Deep earth accent — use sparingly */

  /* ── TYPOGRAPHY ────────────────────────────────────────────── */
  --mo-font-display:  'Cormorant Garamond', Georgia, serif;
  --mo-font-body:     'Andika', Arial, sans-serif;

  /* Rule: Cormorant is for emotion. Andika is for clarity. */

  /* ── FONT SIZE SCALE ───────────────────────────────────────── */
  --mo-h1:   clamp(2.6rem, 5vw, 4.2rem);
  --mo-h2:   clamp(1.9rem, 3.5vw, 2.8rem);
  --mo-h3:   1.4rem;
  --mo-h4:   1.15rem;
  --mo-body: 1rem;
  --mo-sm:   0.88rem;
  --mo-xs:   0.75rem;
  --mo-label: 0.72rem;   /* Uppercase eyebrow labels */

  /* ── LETTER SPACING ────────────────────────────────────────── */
  --mo-tracking-label:  0.14em;  /* Uppercase eyebrow / section labels */
  --mo-tracking-btn:    0.07em;  /* Buttons */
  --mo-tracking-nav:    0.06em;  /* Nav links */

  /* ── LINE HEIGHTS ──────────────────────────────────────────── */
  --mo-lh-display: 1.10;
  --mo-lh-body:    1.80;
  --mo-lh-tight:   1.30;

  /* ── SPACING ───────────────────────────────────────────────── */
  --mo-section-v:  5rem;
  --mo-container:  1120px;
  --mo-gap-sm:     1rem;
  --mo-gap-md:     2rem;
  --mo-gap-lg:     4rem;

  /* ── BORDER RADIUS ─────────────────────────────────────────── */
  --mo-radius-pill: 30px;
  --mo-radius-card: 12px;
  --mo-radius-lg:   20px;

  /* ── BORDERS ───────────────────────────────────────────────── */
  --mo-border-subtle:  1px solid rgba(168, 184, 161, 0.2);
  --mo-border-medium:  1px solid rgba(168, 184, 161, 0.4);
  --mo-border-input:   1.5px solid var(--mo-wheat-tan);

  /* ── SHADOWS ───────────────────────────────────────────────── */
  --mo-shadow-card:  0 8px 24px rgba(63, 70, 66, 0.08);
  --mo-shadow-float: 0 12px 32px rgba(63, 70, 66, 0.12);

  /* ── TRANSITIONS ───────────────────────────────────────────── */
  --mo-ease: 0.2s ease;
  --mo-ease-slow: 0.6s ease;

  /* ── COLOR RATIOS (reference only) ────────────────────────── */
  /*
    60%  Warm Paper / Oat Milk        → backgrounds
    25%  Sage / Cream / Wheat         → brand identity surfaces
    10%  Dusty Rose / Terracotta / Mist Blue → accents
     5%  Soft Charcoal / Soil Brown   → text, linework, logo
  */
}

/* ─────────────────────────────────────────────────────────────────
   GLOBAL BASE OVERRIDES
   Keeps Astra from fighting the brand system.
───────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--mo-font-body);
  background-color: var(--mo-warm-paper);
  color: var(--mo-soft-charcoal);
  font-size: var(--mo-body);
  line-height: var(--mo-lh-body);
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-woo-shop-link,
.page-title {
  font-family: var(--mo-font-display);
  font-weight: 400;
  color: var(--mo-soft-charcoal);
  line-height: var(--mo-lh-display);
}

h1 { font-size: var(--mo-h1); }
h2 { font-size: var(--mo-h2); }
h3 { font-size: var(--mo-h3); }
h4 { font-size: var(--mo-h4); }

p {
  font-family: var(--mo-font-body);
  font-size: var(--mo-body);
  line-height: var(--mo-lh-body);
  color: var(--mo-soft-charcoal);
}

a {
  color: var(--mo-soft-charcoal);
  text-decoration: none;
  transition: color var(--mo-ease);
}

a:hover {
  color: var(--mo-moss-green);
}

/* ─────────────────────────────────────────────────────────────────
   ASTRA HEADER OVERRIDES
───────────────────────────────────────────────────────────────── */

.site-header,
#masthead {
  background-color: rgba(250, 247, 240, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--mo-border-subtle) !important;
}

/* Nav links */
.main-header-menu .menu-item > a,
.ast-nav-menu > li > a {
  font-family: var(--mo-font-body) !important;
  font-size: var(--mo-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mo-tracking-nav) !important;
  color: var(--mo-soft-charcoal) !important;
  opacity: 0.72;
  transition: opacity var(--mo-ease) !important;
}

.main-header-menu .menu-item > a:hover,
.ast-nav-menu > li > a:hover {
  color: var(--mo-soft-charcoal) !important;
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────
   ASTRA FOOTER OVERRIDES
───────────────────────────────────────────────────────────────── */

.site-footer,
#colophon {
  background-color: var(--mo-oat-milk) !important;
  border-top: var(--mo-border-subtle) !important;
  color: var(--mo-soft-charcoal) !important;
}

.site-footer a,
#colophon a {
  color: var(--mo-soft-charcoal);
  opacity: 0.7;
}

.site-footer a:hover,
#colophon a:hover {
  opacity: 1;
  color: var(--mo-soft-charcoal);
}

/* ─────────────────────────────────────────────────────────────────
   BUTTONS — GLOBAL STYLE SYSTEM
───────────────────────────────────────────────────────────────── */

/* Primary button */
.ast-btn,
.button,
input[type="submit"],
.wp-block-button__link {
  font-family: var(--mo-font-body) !important;
  font-size: var(--mo-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mo-tracking-btn) !important;
  padding: 13px 26px !important;
  border-radius: var(--mo-radius-pill) !important;
  background: var(--mo-soft-charcoal) !important;
  color: var(--mo-warm-paper) !important;
  border: none !important;
  transition: background var(--mo-ease), transform var(--mo-ease) !important;
  cursor: pointer;
}

.ast-btn:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background: var(--mo-soft-brown) !important;
  color: var(--mo-warm-paper) !important;
  transform: translateY(-2px);
}

/* Ghost / outline button variant — add class .mo-btn-ghost */
.mo-btn-ghost {
  background: transparent !important;
  color: var(--mo-soft-charcoal) !important;
  border: 1.5px solid var(--mo-sage-linen) !important;
}

.mo-btn-ghost:hover {
  background: var(--mo-sage-linen) !important;
  color: var(--mo-soft-charcoal) !important;
}

/* Sage / accent button — add class .mo-btn-sage */
.mo-btn-sage {
  background: var(--mo-sage-linen) !important;
  color: var(--mo-soft-charcoal) !important;
}

.mo-btn-sage:hover {
  background: var(--mo-moss-green) !important;
  color: var(--mo-warm-paper) !important;
}

/* Terracotta CTA button — add class .mo-btn-terra */
.mo-btn-terra {
  background: var(--mo-terracotta) !important;
  color: var(--mo-warm-paper) !important;
}

.mo-btn-terra:hover {
  background: var(--mo-soft-brown) !important;
}

/* ─────────────────────────────────────────────────────────────────
   FORMS — INPUT FIELDS
───────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  font-family: var(--mo-font-body);
  font-size: var(--mo-sm);
  color: var(--mo-soft-charcoal);
  background: var(--mo-warm-paper);
  border: var(--mo-border-input);
  border-radius: var(--mo-radius-pill);
  padding: 12px 18px;
  outline: none;
  transition: border-color var(--mo-ease);
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--mo-sage-linen);
}

input::placeholder,
textarea::placeholder {
  color: var(--mo-rain-gray);
}

/* ─────────────────────────────────────────────────────────────────
   UTILITY CLASSES
   Use these in Custom HTML blocks or Elementor/Gutenberg classes
───────────────────────────────────────────────────────────────── */

/* Section spacing */
.mo-section        { padding: var(--mo-section-v) 0; }
.mo-section-sm     { padding: 3rem 0; }
.mo-section-lg     { padding: 7rem 0; }

/* Background surfaces */
.mo-bg-paper       { background-color: var(--mo-warm-paper); }
.mo-bg-oat         { background-color: var(--mo-oat-milk); }
.mo-bg-cream       { background-color: var(--mo-cream-linen); }
.mo-bg-charcoal    { background-color: var(--mo-soft-charcoal); color: var(--mo-warm-paper); }
.mo-bg-sage        { background-color: var(--mo-sage-linen); }

/* Text colors */
.mo-text-primary   { color: var(--mo-soft-charcoal); }
.mo-text-secondary { color: var(--mo-soft-brown); }
.mo-text-muted     { color: var(--mo-rain-gray); }
.mo-text-sage      { color: var(--mo-sage-linen); }
.mo-text-terra     { color: var(--mo-terracotta); }
.mo-text-white     { color: var(--mo-warm-paper); }

/* Display / editorial text */
.mo-display        { font-family: var(--mo-font-display); font-weight: 400; }
.mo-display-italic { font-family: var(--mo-font-display); font-style: italic; font-weight: 300; }

/* Section eyebrow label */
.mo-eyebrow {
  font-family: var(--mo-font-body);
  font-size: var(--mo-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--mo-tracking-label);
  color: var(--mo-sage-linen);
  display: block;
  margin-bottom: 0.8rem;
}

/* Card container */
.mo-card {
  border: var(--mo-border-subtle);
  border-radius: var(--mo-radius-card);
  background: var(--mo-warm-paper);
  transition: transform var(--mo-ease-slow), box-shadow var(--mo-ease-slow);
}

.mo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mo-shadow-card);
}

/* Container max-width */
.mo-container {
  max-width: var(--mo-container);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────────────────────────
   PAPER TEXTURE OVERLAY (subtle, 2.8% opacity)
   Applied to body — brand texture layer
───────────────────────────────────────────────────────────────── */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* Ensure all content sits above the texture */
.site-header,
main,
.site-footer,
#page {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   BLOG / POST OVERRIDES
───────────────────────────────────────────────────────────────── */

.entry-title a {
  font-family: var(--mo-font-display);
  font-weight: 400;
  color: var(--mo-soft-charcoal);
}

.entry-title a:hover {
  color: var(--mo-moss-green);
}

.entry-meta,
.entry-footer {
  font-size: var(--mo-xs);
  color: var(--mo-rain-gray);
}

.category-tags a,
.tags-links a {
  font-size: var(--mo-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--mo-oat-milk);
  color: var(--mo-soft-charcoal);
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  :root {
    --mo-section-v: 3rem;
    --mo-gap-lg: 2rem;
  }
}