/*
Theme Name:   Astra Child - Original Chews
Theme URI:    https://originalchews.com
Description:  Brand layer for Original Chews. Carries the Forest palette, self-hosted
              Outfit, and the scroll-reveal system from the migration plan. The ported
              landing pages are self-contained on Elementor Canvas, so this styles the
              parts Astra still renders - the Journal archive and single posts.
Author:       Original Chews
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* ---------------------------------------------------------------- Outfit, self-hosted
   Plan section 3: self-host the font, don't call Google's CDN - slower and a GDPR
   liability. These are the same files the ported pages use. functions.php dequeues
   Astra's Google Fonts request so nothing leaves the server. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/wp-content/uploads/oc-design/fonts/7b0b24f36b1a6d0b-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/wp-content/uploads/oc-design/fonts/98848575513c9742-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+2010-2027, U+2030-205E;
}

/* ---------------------------------------------------------------- Forest palette
   Plan section 3. Kept as variables so the blog templates can't drift off-brand. */
:root {
  --oc-charcoal:      #242b1e;
  --oc-charcoal-soft: #303827;
  --oc-cream:         #f2f3ec;
  --oc-cream-dark:    #e5e8dc;
  --oc-milk:          #fbfcf8;
  --oc-gold:          #dc9a2e;
  --oc-gold-dark:     #8a6215;
  --oc-amber-text:    #74530f;
  --oc-stone:         #75806f;
}

body { background-color: var(--oc-cream); color: var(--oc-charcoal); }

h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--oc-charcoal);
}

/* gold fails WCAG contrast on cream - accent *text* uses amber-text / gold-dark.
   Plan section 3; this was a deliberate accessibility fix, don't undo it. */
a { color: var(--oc-amber-text); }
a:hover, a:focus { color: var(--oc-gold-dark); }

.entry-content { color: var(--oc-charcoal); }
.entry-meta, .entry-meta a, .post-meta { color: var(--oc-stone); }

/* Cards and elevated surfaces - 2rem radius, milk, hairline border. Plan section 3. */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
  background-color: var(--oc-milk);
  border: 1px solid rgba(36, 43, 30, 0.05);
  border-radius: 2rem;
  border-bottom: 1px solid rgba(36, 43, 30, 0.05);
}
.ast-separate-container { background-color: var(--oc-cream); }

.ast-button, .button, button,
input[type="submit"], .wp-block-button__link {
  background-color: var(--oc-gold);
  border-color: var(--oc-gold);
  color: var(--oc-charcoal);
  border-radius: 999px;
  font-weight: 700;
}
.ast-button:hover, .button:hover, button:hover,
input[type="submit"]:hover, .wp-block-button__link:hover {
  background-color: var(--oc-gold-dark);
  border-color: var(--oc-gold-dark);
  color: var(--oc-cream);
}

blockquote { border-left: 3px solid var(--oc-gold); color: var(--oc-charcoal); }

/* ---------------------------------------------------------------- scroll reveal
   Plan section 6. Add `reveal` to an element's CSS Classes field to use it;
   `data-delay="1..3"` staggers. */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}