/*
Theme Name:   The Fade Parlor
Theme URI:    https://thefadeparlor.example.com
Description:  Hello Elementor child theme for The Fade Parlor barbershop. Holds brand fonts and the visual-effect CSS layer; all content is edited in Elementor. Hours & contact are managed in the Fade Parlor Core plugin (Appearance → Customize → Salon — Hours & Contact).
Author:       The Fade Parlor
Template:     hello-elementor
Version:      1.0.0
Text Domain:  fade-parlor-child
*/

/* ============================================================
   Brand tokens — mirrored from the design. These also exist as
   Elementor Global Colors/Fonts (Site Settings); kept here so the
   helper classes below resolve even outside the editor.
   ============================================================ */
:root{
  --fp-cream:#f1e7d5;
  --fp-cream-2:#ebdfc8;
  --fp-paper:#f7efe0;
  --fp-ink:#1a1814;
  --fp-ink-2:#3a342b;
  --fp-brown:#5b3a24;
  --fp-brown-2:#46291a;
  --fp-brown-ink:#2c1810;
  --fp-navy:#1b2638;
  --fp-navy-2:#0f1626;
  --fp-blue:#3a6ea5;
  --fp-gold:#e9d6a8;
  --fp-red:#b23934;
  --fp-line:rgba(28,18,10,.14);
  --fp-line-light:rgba(243,235,217,.15);
  --fp-shadow:0 30px 60px -25px rgba(28,18,10,.35);
}

/* Page background to match the cream canvas */
body{background:var(--fp-cream);color:var(--fp-ink);}

/* Header brand: logo image + text beside it, never wrapping. */
.fp-brand .elementor-image img{border-radius:8px;}
.fp-brand .elementor-heading-title{margin:0;line-height:1.05;}

/* ============================================================
   Utility classes — add any of these to an Elementor element's
   Advanced → CSS Classes box to apply a design effect that the
   Elementor panel can't express on its own. Each is purely visual,
   so content stays fully editable in the panel.
   ============================================================ */

/* Soft brand drop shadow (hero card, booking card) */
.fp-shadow{box-shadow:var(--fp-shadow);}

/* Rounded "card" container radius used across the design */
.fp-radius-lg{border-radius:28px;overflow:hidden;}
.fp-radius-md{border-radius:18px;overflow:hidden;}

/* --- Hero readability layers (apply to the hero section) --- */
.fp-hero{position:relative;isolation:isolate;}
.fp-hero::before{ /* dark gradient from the left for legible copy */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(95deg,rgba(8,12,22,.86) 0%,rgba(8,12,22,.72) 38%,rgba(8,12,22,.28) 72%,rgba(8,12,22,0) 100%);
}
.fp-hero::after{ /* subtle film grain */
  content:"";position:absolute;inset:0;z-index:0;opacity:.08;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.fp-hero > .elementor-container,
.fp-hero > .e-con-inner{position:relative;z-index:1;}

/* Barber-pole accent bar (drop into an HTML/inner element) */
.fp-pole-bar{display:inline-block;width:8px;height:22px;border-radius:2px;vertical-align:middle;
  background:repeating-linear-gradient(135deg,#fff 0 6px,#b23934 6px 12px,#1f72d4 12px 18px);
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset;}

/* "Outline" text treatment used on the hero word "fades." */
.fp-text-outline{color:transparent;-webkit-text-stroke:1.6px var(--fp-gold);}

/* ============================================================
   Marquee — the scrolling services strip (Salon Marquee widget
   ships its own wrapper; this animates it).
   ============================================================ */
.fp-marquee{overflow:hidden;}
.fp-marquee__track{display:inline-flex;gap:48px;white-space:nowrap;padding:18px 0;
  animation:fp-marq var(--fp-marquee-speed,38s) linear infinite;}
.fp-marquee__track i{display:inline-block;width:10px;height:10px;border-radius:999px;background:var(--fp-blue);font-style:normal;}
@keyframes fp-marq{to{transform:translateX(-50%);}}

/* ============================================================
   Opening-hours table (Salon Opening Hours widget)
   ============================================================ */
.fp-hours{border-top:1px solid var(--fp-line-light);}
.fp-hours__row{display:grid;grid-template-columns:140px 1fr auto;padding:16px 0;
  border-bottom:1px solid var(--fp-line-light);align-items:center;}
.fp-hours__day{font-family:"Alfa Slab One",serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;}
.fp-hours__time{font-variant-numeric:tabular-nums;font-size:15px;opacity:.88;}
.fp-hours__row.is-today{background:linear-gradient(90deg,rgba(233,214,168,.12),transparent);}
.fp-hours__row.is-today .fp-hours__day{color:var(--fp-gold);}
.fp-hours__row.is-today .fp-hours__time{color:#fff;opacity:1;}
.fp-hours__flag{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:#9ae6b4;font-weight:700;}
@media (max-width:640px){.fp-hours__row{grid-template-columns:90px 1fr auto;}}

/* ============================================================
   Open-status badge (Salon Open Status widget) — the live
   "Open · until 6:00 PM" pill with a pulsing dot.
   ============================================================ */
.fp-status{display:inline-flex;align-items:center;gap:10px;font-weight:600;}
.fp-status__dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:#48bb78;
  box-shadow:0 0 0 3px rgba(72,187,120,.25);animation:fp-pulse 1.8s ease-out infinite;}
.fp-status.is-closed{color:var(--fp-red);}
.fp-status.is-closed .fp-status__dot{background:var(--fp-red);box-shadow:0 0 0 3px rgba(178,57,52,.22);animation:none;}
@keyframes fp-pulse{0%{box-shadow:0 0 0 0 rgba(72,187,120,.5);}70%{box-shadow:0 0 0 9px rgba(72,187,120,0);}100%{box-shadow:0 0 0 0 rgba(72,187,120,0);}}

/* ============================================================
   Section kicker / number label (sec-kicker in the design)
   ============================================================ */
.fp-kicker{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--fp-brown);font-weight:700;
  display:inline-flex;align-items:center;gap:10px;}
.fp-kicker .fp-num{font-family:"Alfa Slab One",serif;font-size:14px;color:var(--fp-brown-ink);}

/* ============================================================
   Contact form floating labels — when the form is built with the
   Elementor Form widget, these soften the fields to match.
   ============================================================ */
.fp-form .elementor-field-group input,
.fp-form .elementor-field-group textarea{
  background:var(--fp-paper);border:1px solid var(--fp-line);border-radius:14px;
  padding:18px;font-size:15px;color:var(--fp-ink);transition:border-color .15s ease,background .15s ease;}
.fp-form .elementor-field-group input:focus,
.fp-form .elementor-field-group textarea:focus{outline:0;border-color:var(--fp-brown);background:#fff;}
.fp-form .elementor-button{background:var(--fp-brown-ink);border-radius:14px;}
.fp-form .elementor-button:hover{background:var(--fp-brown-2);}

/* Marquee + responsive tweaks already handled by Elementor breakpoints;
   only the bits Elementor can't reach live here. */