/*
Theme Name:  EssenceVale — Vale
Theme URI:   https://essencevale.com
Description: Natural/wellness child theme for Astra (Food Blog template).
             Cormorant Garamond editorial serif + Mulish body sans. Vale
             colour scheme: deep eucalyptus primary (buttons, nav, links),
             seaglass/sand washes, wine-depth anchors, warm stone neutrals.
             Block editor (Gutenberg) first — colours, typography, and layout
             are defined in theme.json; this file adds structural CSS overrides
             for Astra-specific selectors.
Author:      EssenceVale
Template:    astra
Version:     1.0.0
Text Domain: essencevale-vale
*/

/* =============================================================================
   Vale — Astra child theme
   Astra's design system is driven by CSS custom properties. We override the
   nine global colour slots and the semantic aliases here so every component
   Astra generates (header, nav, buttons, footer) picks up the Vale palette
   without needing selector hacks. Further blocks and structural overrides
   follow below.
   ============================================================================= */

/* -----------------------------------------------------------------------
   1. Vale design tokens + Astra global-colour slot mapping
   ----------------------------------------------------------------------- */
:root {
  /* --- Eucalyptus / seaglass family --- */
  --euca-200: #E0EEE8;
  --euca-300: #C6DDD4;
  --euca-400: #A4C6BA;
  --euca-500: #7FAB9E;
  --euca-600: #5E9183;
  --euca-700: #47766B;
  --euca-800: #35594F;

  /* --- Sand washes --- */
  --sand-200: #F2E9DB;
  --sand-300: #E8DAC4;
  --sand-400: #D9C3A4;

  /* --- Wine depths (anchors only) --- */
  --wine-700: #7A2630;
  --wine-900: #2A1416;

  /* --- Warm stone neutrals --- */
  --white:      #FFFFFF;
  --stone-50:   #F8F7F3;
  --stone-100:  #F0EFE9;
  --stone-200:  #E7E5DC;
  --stone-300:  #D8D5C9;
  --taupe-400:  #C2BCAD;

  /* --- Ink text --- */
  --ink-900: #221F1B;
  --ink-700: #423D37;
  --ink-500: #6A645B;
  --ink-400: #928B80;

  /* --- Typography --- */
  --ev-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ev-font-sans:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ev-tracking-kicker: 0.18em;

  /* --- Astra global colour slots (0–8) → Vale palette
       These are the variables Astra's own CSS references throughout the theme.
       Overriding them here remaps every Astra-generated colour at once.    --- */
  --ast-global-color-0: #47766B;  /* slot 0 — primary  → euca-700  */
  --ast-global-color-1: #5E9183;  /* slot 1 — accent   → euca-600  */
  --ast-global-color-2: #7A2630;  /* slot 2 — depth    → wine-700  */
  --ast-global-color-3: #221F1B;  /* slot 3 — text     → ink-900   */
  --ast-global-color-4: #221F1B;  /* slot 4 — headings → ink-900   */
  --ast-global-color-5: #D8D5C9;  /* slot 5 — border   → stone-300 */
  --ast-global-color-6: #F8F7F3;  /* slot 6 — bg       → stone-50  */
  --ast-global-color-7: #E0EEE8;  /* slot 7 — seaglass → euca-200  */
  --ast-global-color-8: #F2E9DB;  /* slot 8 — sand     → sand-200  */

  /* --- Astra semantic aliases --- */
  --ast-link-color:         var(--euca-700);
  --ast-link-h-color:       var(--euca-800);
  --ast-button-bg-color:    var(--euca-700);
  --ast-button-bg-h-color:  var(--euca-800);
  --ast-button-font-color:  var(--stone-50);
  --ast-font-color:         var(--ink-900);
  --ast-heading-color:      var(--ink-900);
  --ast-border-color:       var(--stone-300);
  --ast-header-bg-color:    rgba(255, 255, 255, 0.9);
  --ast-footer-bg-color:    var(--wine-900);
  --ast-body-bg-color:      var(--stone-100);
}

/* -----------------------------------------------------------------------
   2. Base
   ----------------------------------------------------------------------- */
body {
  font-family: var(--ev-font-sans);
  color: var(--ink-900);
  background-color: var(--stone-100);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--euca-200); color: var(--ink-900); }

/* -----------------------------------------------------------------------
   3. Typography
   ----------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.ast-blog-single-element .entry-title,
.entry-title,
.page-title,
.ast-archive-description .ast-archive-title {
  font-family: var(--ev-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.5rem); }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.3125rem; }

/* Kicker / eyebrow / category label */
.ast-post-categories a,
.entry-meta .category-style-simple a,
.ast-article-post .entry-meta a,
.blog-layout-1 .ast-article-inner-post .ast-post-categories a {
  font-family: var(--ev-font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--ev-tracking-kicker);
  color: var(--euca-600);
}

/* -----------------------------------------------------------------------
   4. Header
   ----------------------------------------------------------------------- */
.site-header,
.ast-primary-header-bar,
.main-header-bar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stone-300);
  box-shadow: none;
}

/* Sticky header */
.ast-header-sticked .site-header,
.ast-header-sticked .main-header-bar { background: rgba(255, 255, 255, 0.97); }

/* Site title / logo */
.site-title a,
.ast-site-identity .site-title a {
  font-family: var(--ev-font-display);
  font-weight: 500;
  color: var(--euca-700);
}

.site-description,
.ast-site-identity .site-description {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-500);
}

/* -----------------------------------------------------------------------
   5. Navigation
   ----------------------------------------------------------------------- */
.main-header-menu .menu-item > .menu-link,
.main-navigation .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-item > .menu-link {
  font-family: var(--ev-font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-700);
}

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .menu-item.current-menu-item > .menu-link,
.main-header-menu .menu-item.current-menu-parent > .menu-link,
.main-header-menu .menu-item.current-menu-ancestor > .menu-link {
  color: var(--euca-700);
}

/* Desktop active underline */
.ast-primary-navigation-enabled .main-header-menu .menu-item.current-menu-item > .menu-link {
  border-bottom: 2px solid var(--euca-700);
}

/* Dropdown */
.main-header-menu .sub-menu,
.main-navigation .sub-menu {
  background: var(--white);
  border: 1px solid var(--stone-300);
  border-top: 2px solid var(--euca-700);
  box-shadow: 0 8px 28px rgba(34, 31, 27, 0.08);
}
.main-header-menu .sub-menu .menu-item > .menu-link { color: var(--ink-700); }
.main-header-menu .sub-menu .menu-item:hover > .menu-link {
  color: var(--euca-700);
  background: var(--stone-50);
}

/* Mobile nav toggle */
.ast-button-wrap .menu-toggle,
.ast-mobile-menu-buttons .mobile-menu-toggle-btn {
  color: var(--euca-700);
}

/* -----------------------------------------------------------------------
   6. Blog / archive loop
   ----------------------------------------------------------------------- */
.ast-article-post,
.ast-article-inner-post,
.blog .type-post,
.archive .type-post {
  background: var(--white);
  border: 1px solid var(--stone-300);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(34, 31, 27, 0.06);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.ast-article-post:hover,
.ast-article-inner-post:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(34, 31, 27, 0.08);
}

.ast-article-post .entry-title a,
.ast-article-inner-post .entry-title a {
  color: var(--ink-900);
  transition: color 0.2s ease;
  text-decoration: none;
}
.ast-article-post .entry-title a:hover,
.ast-article-inner-post .entry-title a:hover { color: var(--euca-700); }

/* Post thumbnail */
.ast-blog-thumbnail-wrap img { border-radius: 4px 4px 0 0; }

/* Post meta */
.entry-meta,
.ast-article-post .entry-meta { color: var(--ink-500); font-size: 0.8rem; }
.entry-meta a { color: var(--euca-600); }
.entry-meta a:hover { color: var(--euca-700); }

/* Read more link */
.ast-read-more,
.read-more-link a {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--euca-700);
  border-bottom: 1px solid var(--euca-300);
  text-decoration: none;
  transition: border-color 0.2s;
}
.ast-read-more:hover,
.read-more-link a:hover { border-bottom-color: var(--euca-700); }

/* -----------------------------------------------------------------------
   7. Single post / article
   ----------------------------------------------------------------------- */
.single-post .ast-container,
.single .ast-container { max-width: 740px; }

.single .entry-title,
.single-post .entry-title { line-height: 1.1; }

.entry-content,
.ast-single-post-order .entry-content {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--ink-900);
}

.entry-content p { margin-bottom: 1.5rem; }

.entry-content h2 { margin: 3rem 0 1rem; }
.entry-content h3 { margin: 2.5rem 0 0.75rem; }

/* Standfirst / lede */
.entry-content .has-large-font-size:first-of-type,
.entry-content > p.lede:first-of-type {
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--ink-700);
}

/* Blockquote / pullquote */
.entry-content blockquote,
.wp-block-quote {
  font-family: var(--ev-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.875rem;
  line-height: 1.25;
  color: var(--euca-700);
  border-left: 2px solid var(--euca-700);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 3rem 0;
}

.wp-block-pullquote {
  border-top: 2px solid var(--euca-700);
  border-bottom: 2px solid var(--euca-700);
  text-align: center;
}
.wp-block-pullquote blockquote {
  border: none;
  padding: 0;
}

/* Affiliate / disclaimer notice */
.wp-block-group.is-style-notice,
.ev-notice {
  background: var(--stone-100);
  border: 1px solid var(--stone-300);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--ink-700);
}

/* -----------------------------------------------------------------------
   8. Buttons — blocks + Astra
   ----------------------------------------------------------------------- */
.wp-block-button__link,
.ast-button,
.button,
button,
input[type="submit"],
.comment-reply-link {
  font-family: var(--ev-font-sans);
  font-weight: 600;
  background: var(--euca-700);
  color: var(--stone-50) !important;
  border: 1px solid transparent;
  border-radius: 4px;
  letter-spacing: 0.02em;
  transition: background 0.14s ease;
}

.wp-block-button__link:hover,
.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.comment-reply-link:hover {
  background: var(--euca-800);
  color: var(--stone-50) !important;
}

/* Outline variant */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--euca-700) !important;
  border-color: var(--euca-700);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--euca-700);
  color: var(--stone-50) !important;
}

/* -----------------------------------------------------------------------
   9. Forms + inputs
   ----------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select {
  font-family: var(--ev-font-sans);
  color: var(--ink-900);
  background: var(--stone-50);
  border: 1px solid var(--taupe-400);
  border-radius: 4px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--euca-600);
  box-shadow: 0 0 0 3px var(--euca-200);
}

/* Search form */
.ast-search-menu-icon .search-field,
.ast-header-search .search-field {
  background: var(--stone-50);
  border-color: var(--stone-300);
}

/* -----------------------------------------------------------------------
   10. Newsletter / email opt-in
   ----------------------------------------------------------------------- */
.ast-newsletter-widget,
.wp-block-group.is-style-newsletter,
.ev-newsletter-band {
  background: var(--euca-700);
  color: var(--stone-50);
  border-radius: 4px;
}

/* Heading inside newsletter band */
.ev-newsletter-band h2,
.ev-newsletter-band h3,
.ast-newsletter-widget .widget-title {
  font-family: var(--ev-font-display);
  font-weight: 500;
  color: var(--stone-50);
  border: none;
}

.ev-newsletter-band p { color: var(--euca-200); }

.ev-newsletter-band input[type="email"] {
  background: var(--white);
  border-color: transparent;
  color: var(--ink-900);
}

.ev-newsletter-band input[type="submit"],
.ev-newsletter-band button {
  background: var(--sand-300);
  color: var(--ink-900);
  border-color: transparent;
}
.ev-newsletter-band input[type="submit"]:hover,
.ev-newsletter-band button:hover {
  background: var(--sand-200);
  color: var(--ink-900);
}

/* -----------------------------------------------------------------------
   11. Sidebar
   ----------------------------------------------------------------------- */
.widget-area .widget-title {
  font-family: var(--ev-font-sans);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-500);
  border-bottom: 2px solid var(--euca-700);
  padding-bottom: 0.5rem;
}

.widget-area a { color: var(--euca-700); }
.widget-area a:hover { color: var(--euca-800); }

/* -----------------------------------------------------------------------
   12. Footer
   ----------------------------------------------------------------------- */
.site-footer,
#colophon,
.footer-widget-area,
.ast-footer-copyright {
  background: var(--wine-900);
  color: var(--euca-300);
  font-family: var(--ev-font-sans);
  font-size: 0.875rem;
}

.site-footer a,
#colophon a { color: var(--stone-100); }
.site-footer a:hover,
#colophon a:hover { color: var(--white); text-decoration: none; }

.footer-widget-area .widget-title,
.ast-footer-widget-area .widget-title {
  color: var(--euca-400);
  border-bottom-color: var(--euca-700);
}

/* -----------------------------------------------------------------------
   13. Gutenberg block overrides
   ----------------------------------------------------------------------- */

/* Cover block */
.wp-block-cover { min-height: 480px; }

/* Separator */
.wp-block-separator:not(.is-style-dots) {
  border-color: var(--stone-300);
}
.wp-block-separator.is-style-wide {
  border-color: var(--euca-700);
  border-top-width: 2px;
}

/* Table */
.wp-block-table td,
.wp-block-table th { border-color: var(--stone-300); }
.wp-block-table thead { background: var(--euca-700); color: var(--stone-50); }
.wp-block-table.is-style-stripes tr:nth-child(odd) { background: var(--stone-50); }

/* Code / preformatted */
.wp-block-code,
.wp-block-preformatted {
  background: var(--stone-100);
  border: 1px solid var(--stone-300);
  border-radius: 4px;
  color: var(--ink-900);
}

/* Tag cloud */
.wp-block-tag-cloud a,
.tagcloud a {
  background: var(--euca-200);
  color: var(--euca-800);
  border-radius: 2px;
  padding: 2px 8px;
  font-size: 0.8rem !important;
}
.wp-block-tag-cloud a:hover,
.tagcloud a:hover { background: var(--euca-300); }

/* -----------------------------------------------------------------------
   14. Food Blog helpers — category bands + washes
   ----------------------------------------------------------------------- */

/* Section wash — apply `is-style-sand` or `is-style-seaglass` on a Group block */
.wp-block-group.is-style-sand   { background: var(--sand-200); padding: 4rem 0; }
.wp-block-group.is-style-seaglass { background: var(--euca-200); padding: 4rem 0; }

/* Recipe intro / category strip heading */
.ev-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px solid var(--euca-700);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}
.ev-section-head .ev-section-title {
  font-family: var(--ev-font-display);
  font-size: 2rem;
  font-weight: 500;
  margin: 0;
}
.ev-section-head .ev-see-all {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--euca-600);
}

/* -----------------------------------------------------------------------
   15. Comments
   ----------------------------------------------------------------------- */
#comments .comments-title,
#comments .comment-reply-title {
  font-family: var(--ev-font-display);
  color: var(--ink-900);
}

.comment-meta .comment-author b a { color: var(--euca-700); }