/*
Theme Name: Copywriting Services SA
Theme URI: https://copywritingservices.co.za
Author: Allquill Solutions
Author URI: https://copywritingservices.co.za
Description: A premium block-based (FSE) theme for Copywriting Services South Africa. Forest-green palette, animated hero, blog, and matching page templates. Built for the WordPress block editor.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: copywriting-services-sa
Tags: full-site-editing, block-patterns, blog, business, custom-colors, block-styles, wide-blocks, editor-style
*/

/* ============================================================
   These styles layer on top of theme.json. FSE handles most
   layout/color; this file adds motion + signature elements.
   ============================================================ */

:root{
  --forest:#0b2a1f; --pine:#12402e; --moss:#1f6b47; --leaf:#2f9e6a;
  --spring:#5fd39a; --mint:#a8ecc9; --wash:#eef7f1; --paper:#f6faf7;
  --ink:#0a1f17; --grey:#5c7268; --line:rgba(15,60,42,.12);
  --shadow:0 22px 60px -28px rgba(6,40,26,.5);
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}

/* ---------- eyebrow / mono label ---------- */
.cs-eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--moss)}

/* ---------- sticky header ---------- */
.wp-block-template-part.cs-header,.cs-header{position:sticky;top:0;z-index:50;transition:background .4s ease,box-shadow .4s ease,backdrop-filter .4s ease}
.cs-header.scrolled{background:rgba(246,250,247,.85);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.cs-logo-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 4px rgba(47,158,106,.2);animation:cs-pulse 2.6s ease-in-out infinite;margin-right:8px;vertical-align:middle}
@keyframes cs-pulse{0%,100%{box-shadow:0 0 0 4px rgba(47,158,106,.2)}50%{box-shadow:0 0 0 9px rgba(47,158,106,.05)}}

/* nav underline */
.cs-header .wp-block-navigation-item__content{position:relative}
.cs-header .wp-block-navigation-item__content:after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--leaf);transition:width .3s}
.cs-header .wp-block-navigation-item__content:hover:after{width:100%}

/* ---------- HERO ---------- */
.cs-hero{position:relative;overflow:hidden;padding:170px 0 90px}
.cs-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.cs-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.cs-b1{width:520px;height:520px;background:radial-gradient(circle,var(--spring),transparent 70%);top:-120px;right:-120px;animation:cs-float1 14s ease-in-out infinite}
.cs-b2{width:440px;height:440px;background:radial-gradient(circle,var(--mint),transparent 70%);bottom:-160px;left:-120px;animation:cs-float2 17s ease-in-out infinite}
.cs-b3{width:300px;height:300px;background:radial-gradient(circle,rgba(47,158,106,.5),transparent 70%);top:40%;left:45%;animation:cs-float1 20s ease-in-out infinite}
@keyframes cs-float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,40px) scale(1.08)}}
@keyframes cs-float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-30px) scale(1.05)}}
.cs-hero > .wp-block-group{position:relative;z-index:2}

.cs-hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.7);border:1px solid var(--line);padding:8px 16px;border-radius:100px}
.cs-hero-badge .cs-mini-dot{width:7px;height:7px;border-radius:50%;background:var(--leaf);animation:cs-pulse 2s infinite}

.cs-underline{position:relative;color:var(--moss);white-space:nowrap;display:inline-block}
.cs-underline svg{position:absolute;left:0;bottom:-10px;width:100%;height:14px}
.cs-underline path{stroke-dasharray:340;stroke-dashoffset:340;animation:cs-draw 1.4s ease .8s forwards}
@keyframes cs-draw{to{stroke-dashoffset:0}}

/* stat counters */
.cs-stat .cs-num{font-family:'Fraunces',serif;font-size:2.6rem;font-weight:600;color:var(--forest);line-height:1}
.cs-stat .cs-lbl{font-size:.85rem;color:var(--grey);margin-top:4px}

/* ---------- MARQUEE ---------- */
.cs-marquee{background:var(--forest);color:var(--wash);padding:18px 0;overflow:hidden;white-space:nowrap}
.cs-marquee-track{display:inline-flex;gap:44px;animation:cs-scroll 32s linear infinite;will-change:transform}
.cs-marquee:hover .cs-marquee-track{animation-play-state:paused}
.cs-marquee-track span{font-family:'Fraunces',serif;font-size:1.15rem;display:inline-flex;align-items:center;gap:44px;opacity:.9}
.cs-marquee-track span:before{content:"\2726";color:var(--spring);font-size:.8rem}
@keyframes cs-scroll{to{transform:translateX(-50%)}}

/* ---------- CARDS ---------- */
.cs-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;position:relative;overflow:hidden;height:100%}
.cs-card:before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--leaf),var(--spring));transition:width .5s}
.cs-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.cs-card:hover:before{width:100%}
.cs-card-ic{width:52px;height:52px;border-radius:14px;background:var(--wash);display:flex;align-items:center;justify-content:center;color:var(--moss);margin-bottom:20px;transition:background .4s,transform .4s}
.cs-card:hover .cs-card-ic{background:var(--leaf);color:#fff;transform:rotate(-6deg) scale(1.05)}

/* pricing card */
.cs-price-card{background:#fff;border-radius:22px;padding:36px;box-shadow:var(--shadow);border:1px solid var(--line);position:relative;overflow:hidden}
.cs-price-card:before{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;background:radial-gradient(circle,var(--mint),transparent 70%);opacity:.6}
.cs-tick{list-style:none;margin:20px 0 0;padding:0}
.cs-tick li{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:.96rem}
.cs-tick li:first-child{border-top:none}
.cs-tick li:before{content:"\2714";color:var(--leaf);flex-shrink:0}

/* dark why-items */
.cs-why-item{padding:28px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.03);transition:background .4s,transform .4s;height:100%}
.cs-why-item:hover{background:rgba(95,211,154,.1);transform:translateY(-6px)}
.cs-why-num{font-family:'JetBrains Mono',monospace;color:var(--spring);font-size:.8rem;margin-bottom:14px}

/* trait rows */
.cs-trait{display:flex;gap:20px;background:#fff;border-radius:18px;padding:28px;border:1px solid var(--line);transition:transform .35s,box-shadow .35s;height:100%}
.cs-trait:hover{transform:translateX(6px);box-shadow:var(--shadow)}
.cs-trait-ic{width:46px;height:46px;flex-shrink:0;border-radius:12px;background:var(--wash);display:flex;align-items:center;justify-content:center;color:var(--leaf)}

/* ---------- CTA band dots ---------- */
.cs-cta-band{position:relative;overflow:hidden}
.cs-cta-band:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.25) 1.4px,transparent 1.4px);background-size:60px 60px;animation:cs-drift 24s linear infinite}
@keyframes cs-drift{to{background-position:200px 200px}}
.cs-cta-band > *{position:relative;z-index:2}

/* ---------- BLOG ---------- */
.cs-post-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .4s,box-shadow .4s;height:100%}
.cs-post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.cs-post-card .wp-block-post-featured-image img{border-radius:0;aspect-ratio:16/10;object-fit:cover;transition:transform .6s}
.cs-post-card:hover .wp-block-post-featured-image img{transform:scale(1.05)}
.cs-post-meta{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--moss)}

/* pill categories / read-more */
.cs-pill{display:inline-block;background:var(--wash);color:var(--moss);padding:5px 14px;border-radius:100px;font-size:.78rem;font-weight:600}

/* single post typography */
.cs-single .wp-block-post-content{font-size:1.08rem;line-height:1.8;color:var(--grey)}
.cs-single .wp-block-post-content p{margin-bottom:1.3rem}
.cs-single .wp-block-post-content strong{color:var(--forest)}

/* footer link hover */
.cs-footer a:hover{color:var(--spring)!important}

/* utility rounded images */
.cs-round img{border-radius:22px}

/* focus visibility */
:where(a,button,.wp-block-button__link):focus-visible{outline:3px solid var(--leaf);outline-offset:3px}