/*
Theme Name:   Hello Elementor Child — Freshly Cut Stems
Theme URI:    https://freshlycutstems.com/
Description:  Child theme of Hello Elementor carrying the Freshly Cut Stems "Market Editorial" design system: brand tokens, accent classes, button variants, and motion (bloom ticker, 24/7 pulse). Pair with the FCS Elementor Website Kit for global colors and fonts.
Author:       Freshly Cut Stems
Author URI:   https://freshlycutstems.com/
Template:     hello-elementor
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  hello-elementor-child-fcs
*/

/* ============================================================
   1. BRAND TOKENS
   Fallback custom properties. When the FCS Website Kit is
   active, Elementor also exposes the same palette as
   --e-global-color-{id}; these are kept in sync below.
   ============================================================ */
:root{
  --fcs-green:       var(--e-global-color-secondary, #3a5240);
  --fcs-green-deep:  var(--e-global-color-primary,   #2b3e30);
  --fcs-cream:       var(--e-global-color-fcscream,  #faf7f0);
  --fcs-blush:       var(--e-global-color-fcsblush,  #ecd3cd);
  --fcs-petal:       var(--e-global-color-accent,    #c98a8a);
  --fcs-ink:         var(--e-global-color-fcsink,    #26302a);
  --fcs-line:        var(--e-global-color-fcsline,   #d9d2c4);
  --fcs-paper:       var(--e-global-color-fcspaper,  #f4efe4);
  --fcs-body:        var(--e-global-color-text,      #4d564f);
  --fcs-mist:        var(--e-global-color-fcsmist,   #cfd6cb);
  --fcs-sage:        var(--e-global-color-fcssage,   #7a8278);
  --fcs-night:       var(--e-global-color-fcsnight,  #243528);
}

body{
  background: var(--fcs-cream);
  -webkit-font-smoothing: antialiased;
}

::selection{
  background: var(--fcs-blush);
  color: var(--fcs-ink);
}

/* ============================================================
   2. ACCENT TYPOGRAPHY
   Italic petal words inside headings, e.g.
   Grown with love, <span class="fcs-accent">picked by hand.</span>
   ============================================================ */
.fcs-accent{
  font-style: italic;
  color: var(--fcs-petal);
}
.fcs-accent--light{
  color: var(--fcs-blush);
}

/* Editorial text links (door cards, visit cards) */
.fcs-textlink,
a.fcs-textlink{
  color: var(--fcs-petal);
  text-decoration: none;
  border-bottom: 1px solid var(--fcs-petal);
  padding-bottom: 2px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  transition: color .2s, border-color .2s;
}
.fcs-textlink:hover{
  color: var(--fcs-green-deep);
  border-color: var(--fcs-green-deep);
}

/* Detail line under quiet bands (sympathy deck) */
.fcs-deck{
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--fcs-green);
  text-align: center;
}
.fcs-deck-em{
  font-style: italic;
  color: var(--fcs-petal);
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
}

/* Footer links */
.fcs-footlink,
a.fcs-footlink{
  color: var(--fcs-blush);
  text-decoration: none;
}
.fcs-footlink:hover{ color: var(--fcs-cream); }

/* ============================================================
   3. BUTTON VARIANTS
   Solid is the kit's theme-style default. Add these classes
   to an Elementor Button widget (Advanced → CSS Classes).
   ============================================================ */
.fcs-btn-ghost .elementor-button{
  background: transparent;
  color: var(--fcs-green);
  border: 1px solid var(--fcs-green);
}
.fcs-btn-ghost .elementor-button:hover,
.fcs-btn-ghost .elementor-button:focus{
  background: var(--fcs-blush);
  border-color: var(--fcs-blush);
  color: var(--fcs-ink);
}

.fcs-btn-light .elementor-button{
  background: transparent;
  color: var(--fcs-cream);
  border: 1px solid var(--fcs-cream);
}
.fcs-btn-light .elementor-button:hover,
.fcs-btn-light .elementor-button:focus{
  background: var(--fcs-cream);
  color: var(--fcs-green-deep);
}

/* ============================================================
   4. MOTION — bloom ticker & 24/7 pulse
   Ticker markup (HTML widget or Theme Builder header):
   <div class="fcs-ticker"><div class="fcs-ticker__inner">
     ...content... ...content duplicated...
   </div></div>
   ============================================================ */
.fcs-ticker{
  overflow: hidden;
  white-space: nowrap;
  background: var(--fcs-paper);
  border-bottom: 1px solid var(--fcs-line);
  padding: .5rem 0;
}
.fcs-ticker__inner{
  display: inline-block;
  animation: fcs-scroll 30s linear infinite;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fcs-green);
}
.fcs-ticker__inner i,
.fcs-ticker__inner em{
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  text-transform: none;
  font-size: .95rem;
  color: var(--fcs-petal);
  letter-spacing: .02em;
}
@keyframes fcs-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* Open 24/7 pill — add class fcs-pill to a Text Editor paragraph */
.fcs-pill{
  display: inline-block;
  border: 1px solid rgba(236,211,205,.45);
  border-radius: 999px;
  padding: 8px 18px;
  color: var(--fcs-blush);
  letter-spacing: .26em;
  text-transform: uppercase;
  font-size: 12px;
}
.fcs-pill::before{
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fcs-blush);
  margin-right: 10px;
  vertical-align: 1px;
  animation: fcs-glow 2.2s ease-in-out infinite;
}
@keyframes fcs-glow{
  0%,100%{ opacity: 1;   box-shadow: 0 0 0 0 rgba(236,211,205,.5); }
  50%    { opacity: .55; box-shadow: 0 0 0 6px rgba(236,211,205,0); }
}

@media (prefers-reduced-motion: reduce){
  .fcs-ticker__inner{ animation: none; }
  .fcs-pill::before{ animation: none; }
}

/* ============================================================
   5. REFINEMENTS
   ============================================================ */
/* Image-placeholder label chips (delete once real photos are set) */
.fcs-img-label .elementor-heading-title{
  background: rgba(250,247,240,.85);
  padding: 6px 12px;
  display: inline-block;
}

/* Accordion: replace default caret with serif +/– */
.elementor-accordion .elementor-tab-title{
  border-color: var(--fcs-line);
}

/* Form focus ring in brand petal */
.elementor-field-group .elementor-field:focus{
  outline: 2px solid var(--fcs-petal);
  outline-offset: 1px;
}

/* Keep WP admin bar from fighting sticky headers */
body.admin-bar .elementor-sticky--active{ top: 32px; }