/*
Theme Name: O'Cliff Brand
Theme URI: https://ocliffbrand.com
Description: Custom Flatsome child theme for O'Cliff Brand — Oak Cliff, Dallas streetwear. "Wear the view." Concrete + Slate palette, Bricolage Grotesque + Inter. All O'Cliff-specific styling and code live here; Flatsome is the parent engine underneath.
Author: O'Cliff Media
Template: flatsome
Version: 0.6.0
Requires PHP: 8.0
*/

/* ============================================================
   1. DESIGN TOKENS  — the locked O'Cliff system
   ============================================================ */
:root{
  --ocliff-paper:#E6E4DE;   /* concrete stone base   */
  --ocliff-paper-2:#F2F1EC; /* raised surface / cards */
  --ocliff-ink:#171613;     /* near-black text/UI    */
  --ocliff-ink-soft:#5c5a54;/* secondary text        */
  --ocliff-slate:#5B6E78;   /* accent — washed slate */
  --ocliff-slate-2:#8AA0A8; /* lighter slate         */
  --ocliff-dusk:#232320;    /* deep band / footer    */
  --ocliff-line:rgba(23,22,19,.13);
  --ocliff-radius:14px;
}

/* ============================================================
   2. TYPOGRAPHY
   Bricolage Grotesque = display/headings · Inter = body/UI
   ============================================================ */
body,
button, input, select, textarea,
.body-font{
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ocliff-ink);
}
body{ background-color:var(--ocliff-paper); }

h1,h2,h3,h4,h5,h6,
.heading-font,
.is-title{
  font-family:"Bricolage Grotesque", "Inter", sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ocliff-ink);
}

/* Big display utility for hero-type statements */
.ocliff-display{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; line-height:.94; letter-spacing:-.025em; text-transform:uppercase; }

/* Eyebrow / label — used above headings, on section intros */
.ocliff-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ocliff-slate);
}

/* ============================================================
   3. LINKS + SELECTION + FOCUS
   ============================================================ */
a{ color:var(--ocliff-ink); }
a:hover{ color:var(--ocliff-slate); }

::selection{ background:var(--ocliff-slate); color:#fff; }

a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--ocliff-slate);
  outline-offset:3px;
}

/* ============================================================
   4. BUTTONS  (Flatsome uses .button ; WooCommerce reuses it)
   Primary = solid ink pill · Accent = slate · keep them calm
   ============================================================ */
.button, .button.primary,
button.button, input[type="submit"].button,
.woocommerce a.button, .woocommerce button.button,
.single_add_to_cart_button{
  border-radius:100px;
  font-family:"Inter",sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  text-transform:none;
  transition:transform .15s ease, background-color .2s ease, color .2s ease;
}

.button.primary,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.single_add_to_cart_button{
  background-color:var(--ocliff-ink);
  border-color:var(--ocliff-ink);
  color:var(--ocliff-paper);
}
.button.primary:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover{
  background-color:#000;
  border-color:#000;
  color:#fff;
  transform:translateY(-2px);
}

/* Accent (slate) button — add class "slate" to any Flatsome button */
.button.slate{
  background-color:var(--ocliff-slate);
  border-color:var(--ocliff-slate);
  color:#fff;
}
.button.slate:hover{ background-color:#4c5e67; border-color:#4c5e67; color:#fff; transform:translateY(-2px); }

/* Outline button — class "outline-ink" */
.button.outline-ink{
  background:transparent; color:var(--ocliff-ink); border:1.5px solid var(--ocliff-ink);
}
.button.outline-ink:hover{ background:var(--ocliff-ink); color:var(--ocliff-paper); }

/* ============================================================
   5. WOOCOMMERCE — price, titles, badges, gallery
   ============================================================ */
.woocommerce .price,
.woocommerce-Price-amount,
.price{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;
  color:var(--ocliff-ink);
}

/* product titles in shop grid + single */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product-title, .product_title{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;
  letter-spacing:-.01em;
}

/* sale / custom badges → slate, squared-off streetwear feel */
.woocommerce span.onsale,
.badge-inner{
  background-color:var(--ocliff-slate);
  color:#fff;
  border-radius:100px;
  font-family:"Inter",sans-serif;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* "Limited stock" style pill — reusable */
.ocliff-live{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ocliff-slate);
  background:rgba(91,110,120,.12);
  padding:6px 12px; border-radius:100px;
}
.ocliff-live::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--ocliff-slate);
  animation:ocliff-pulse 2s infinite;
}
@keyframes ocliff-pulse{
  0%{ box-shadow:0 0 0 0 rgba(91,110,120,.55); }
  70%{ box-shadow:0 0 0 9px rgba(91,110,120,0); }
  100%{ box-shadow:0 0 0 0 rgba(91,110,120,0); }
}

/* product image frames on the light layout — soft card, no harsh box */
.product-gallery, .product-small.box .box-image{
  background:var(--ocliff-paper-2);
  border-radius:var(--ocliff-radius);
}

/* ============================================================
   6. O'CLIFF COMPONENTS  (paired with shortcodes in functions.php
      or applied to UX Builder rows via CSS class)
   ============================================================ */

/* --- golden-hour → now "slate hour" hero stage gradient panel --- */
.ocliff-stage{
  position:relative; border-radius:26px; overflow:hidden;
  background:linear-gradient(160deg,#C7CAC9 0%,#98A8AE 34%,#5B6E78 72%,#313E44 100%);
  padding:clamp(24px,3vw,40px);
}

/* --- marquee band --- */
.ocliff-marquee{ background:var(--ocliff-ink); color:var(--ocliff-paper); overflow:hidden; white-space:nowrap; }
.ocliff-marquee__track{ display:inline-flex; gap:26px; padding:14px 0; animation:ocliff-scroll 30s linear infinite; }
.ocliff-marquee__track span{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:15px; text-transform:uppercase; }
.ocliff-marquee__track .star{ color:var(--ocliff-slate-2); }
@keyframes ocliff-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* --- skyline horizon line --- */
.ocliff-skyline{ display:block; width:100%; }
.ocliff-skyline path{ fill:none; stroke:var(--ocliff-ink); stroke-width:2.5; stroke-linejoin:round; }
.ocliff-skyline__stem{ fill:var(--ocliff-ink); }
.ocliff-skyline__ball circle{ fill:var(--ocliff-ink); }
.ocliff-skyline--slate path{ stroke:var(--ocliff-slate); }
.ocliff-skyline--slate.ocliff-skyline__stem,
.ocliff-skyline--slate .ocliff-skyline__stem{ fill:var(--ocliff-slate); }
.ocliff-skyline__ball.ocliff-skyline--slate circle{ fill:var(--ocliff-slate); }

/* --- dusk band (detail / story sections) --- */
.ocliff-dusk{ background:var(--ocliff-dusk); color:var(--ocliff-paper); }
.ocliff-dusk .ocliff-eyebrow{ color:var(--ocliff-slate-2); }
.ocliff-dusk h1,.ocliff-dusk h2,.ocliff-dusk h3{ color:var(--ocliff-paper); }

/* --- pillar / culture card --- */
.ocliff-card{
  background:var(--ocliff-paper-2); border:1px solid var(--ocliff-line);
  border-radius:var(--ocliff-radius); padding:26px 24px 30px;
}
.ocliff-card .num{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:30px; color:var(--ocliff-slate); line-height:1; }

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  .ocliff-marquee__track{ animation:none; }
  .ocliff-live::before{ animation:none; }
  .button{ transition:none; }
}

/* ============================================================
   7. HEADER / FOOTER light touches
   (most header/footer config happens in Theme Options — see README)
   ============================================================ */
#header .header-main{ background-color:var(--ocliff-paper); }
.footer-wrapper .footer{ background-color:var(--ocliff-dusk); color:var(--ocliff-paper); }
.footer-wrapper .footer a{ color:rgba(230,228,222,.72); }
.footer-wrapper .footer a:hover{ color:#fff; }