/*
Theme Name: Zitco Group
Theme URI: https://zitcogroup.com
Author: Zitco Group
Author URI: https://zitcogroup.com
Description: A distinctive, colorful theme for Zitco Group Digital Marketing, built around a six-channel "mixer" concept — SEO, Social, Ads, Web, Branding and Email each get their own brand color, used consistently across the blog, the Portfolio custom post type, and the site chrome.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zitco-group
*/

/* ============================================================
   ZITCO GROUP — Design tokens
   Concept: a "channel mixer" — a digital marketing agency blends
   distinct channels (SEO / SOCIAL / ADS / WEB / BRAND / EMAIL) into
   one result. Six brand colors = six channels, used as literal
   channel tags throughout (nav marker, service labels, portfolio
   filters, footer). Bold color-blocked type, warm paper ground,
   ink-dark sections for contrast pauses.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Ground */
  --paper: #F1F6FC;
  --paper-dim: #E4EEFB;
  --ink: #0B1E3D;
  --ink-soft: #45608A;

  /* Channels */
  --seo: #0EA5E9;   /* teal   — SEO & Content */
  --soc: #3B82F6;   /* violet — Social */
  --ads: #4F46E5;   /* coral  — Paid Ads */
  --web: #0B1E3D;   /* ink    — Web Design & Dev */
  --brd: #38BDF8;   /* gold   — Branding */
  --eml: #1D4ED8;   /* green  — Email */

  --line: rgba(27,27,47,0.14);
  --line-soft: rgba(27,27,47,0.08);

  --radius: 18px;
  --radius-sm: 10px;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;

  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.05; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 28px; }

:focus-visible{ outline: 3px solid var(--soc); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- eyebrow / channel tag system ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--ink-soft);
}
.eyebrow::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background: var(--ads);
  display:inline-block;
}
.tag{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  display:inline-block;
  background: #fff;
}
.tag[data-ch="seo"]{ border-color: var(--seo); color: var(--seo); }
.tag[data-ch="soc"]{ border-color: var(--soc); color: var(--soc); }
.tag[data-ch="ads"]{ border-color: var(--ads); color: var(--ads); }
.tag[data-ch="web"]{ border-color: var(--web); color: var(--web); }
.tag[data-ch="brd"]{ border-color: var(--brd); color: #075985; }
.tag[data-ch="eml"]{ border-color: var(--eml); color: var(--eml); }

/* ---------- buttons ---------- */
.btn{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  display: inline-flex;
  align-items:center;
  gap:10px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--ads); border-color: var(--ads); color:#fff; transform: translateY(-2px); }
.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn-sm{ padding: 10px 18px; font-size: 13px; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(255,248,239,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
}
.logo{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:800; font-size: 22px; }
.logo .dots{ display:inline-flex; gap:3px; }
.logo .dots span{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.logo .dots span:nth-child(1){ background: var(--seo); }
.logo .dots span:nth-child(2){ background: var(--soc); }
.logo .dots span:nth-child(3){ background: var(--ads); }
.logo .dots span:nth-child(4){ background: var(--brd); }

.nav-links{ display:flex; gap: 34px; align-items:center; }
.nav-links a{ font-weight:600; font-size:15px; position:relative; padding: 6px 0; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0%;
  background: var(--ads); transition: width .2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color: var(--ads); }

.nav-cta{ display:flex; align-items:center; gap:22px; }
.nav-toggle{ display:none; background:none; border:none; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 900px){
  .nav-toggle{ display:block; }
  .nav-links{
    position: fixed; inset: 84px 0 0 0; background: var(--paper);
    flex-direction: column; padding: 40px 28px; gap: 26px;
    transform: translateX(100%); transition: transform .3s ease;
    align-items:flex-start;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ font-size: 20px; }
  body.menu-open{ overflow:hidden; }
}

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: var(--paper); padding: 72px 0 28px; margin-top: 140px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 48px; }
.footer-grid h4{ font-family: var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.06em; color: #7FA0C4; margin-bottom:18px; font-weight:700; }
.footer-grid a, .footer-grid p{ color: #C7D9EF; font-size: 14.5px; }
.footer-grid li{ margin-bottom: 10px; }
.footer-grid a:hover{ color: var(--brd); }
.footer-channels{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 6px; }
.footer-channels span{ font-family: var(--font-mono); font-size:11px; padding: 4px 9px; border-radius:999px; border:1px solid #1E3A5F; color:#B7CCE8; }
.footer-bottom{ margin-top: 56px; padding-top: 24px; border-top: 1px solid #15294A; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#7C97BE; }
.footer-logo{ font-family: var(--font-display); font-weight:800; font-size: 26px; color: var(--paper); margin-bottom: 14px; }
@media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------- hero (shared shell, content differs per page) ---------- */
.hero{ padding: 76px 0 40px; position:relative; overflow:hidden; }
.hero-inner{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items:center; }
.hero h1{ font-size: clamp(40px, 6vw, 74px); font-weight: 800; }
.hero .lede{ font-size: 19px; color: var(--ink-soft); max-width: 46ch; margin-top: 22px; }
.hero-cta{ display:flex; gap:16px; margin-top: 34px; flex-wrap:wrap; }
@media (max-width: 900px){ .hero-inner{ grid-template-columns: 1fr; } }

/* blob shapes (signature ambient motif, used sparingly) */
.blob{ position:absolute; border-radius:50%; filter: blur(2px); opacity:.55; z-index:-1; }
@keyframes floaty{ 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-16px) rotate(6deg);} }

/* ---------- channel mixer (signature homepage element) ---------- */
.mixer{ background:#fff; border:1.5px solid var(--line); border-radius: 22px; padding: 28px 22px 18px; box-shadow: 0 30px 60px -30px rgba(27,27,47,0.25); }
.mixer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 18px; }
.mixer-head span{ font-family: var(--font-mono); font-size:12px; color: var(--ink-soft); }
.mixer-channels{ display:flex; justify-content:space-between; gap: 10px; }
.mixer-ch{ display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; }
.mixer-track{ width: 10px; height: 150px; border-radius: 999px; background: var(--paper-dim); position:relative; overflow:hidden; }
.mixer-fill{ position:absolute; bottom:0; left:0; right:0; border-radius:999px; transition: height 1.1s cubic-bezier(.2,.9,.25,1); }
.mixer-ch label{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); text-align:center; }
.mixer-readout{ margin-top: 18px; padding-top:16px; border-top: 1px dashed var(--line); display:flex; justify-content:space-between; align-items:baseline; }
.mixer-readout .num{ font-family: var(--font-display); font-size: 30px; font-weight:800; }
.mixer-readout .lbl{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }

/* ---------- section shell ---------- */
.section{ padding: 100px 0; }
.section-tight{ padding: 60px 0; }
.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(30px, 4vw, 46px); margin-top: 14px; }
.section-alt{ background: var(--paper-dim); }
.section-dark{ background: var(--ink); color: var(--paper); }
.section-dark .eyebrow{ color: #A6BEDC; }
.section-dark .section-head p{ color: #B7CCE8; }

/* ---------- grids & cards ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: 1fr 1fr; } .grid-2{ grid-template-columns: 1fr; } }
@media (max-width: 620px){ .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{ background:#fff; border:1.5px solid var(--line); border-radius: var(--radius); padding: 30px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover{ transform: translateY(-5px); box-shadow: 0 24px 46px -28px rgba(27,27,47,.35); }
.card .icon{ width:46px; height:46px; border-radius: 13px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.card h3{ font-size: 20px; margin-bottom:10px; }
.card p{ color: var(--ink-soft); font-size: 14.5px; }

/* stat block */
.stats{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat .num{ font-family: var(--font-display); font-size: clamp(32px,4vw,52px); font-weight:800; }
.stat .lbl{ font-family: var(--font-mono); font-size:12px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-top:6px; }
.section-dark .stat .lbl{ color:#A6BEDC; }
@media (max-width: 700px){ .stats{ grid-template-columns: 1fr 1fr; } }

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* avatar (no external photos — initials on channel-colored ground) */
.avatar{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:800; color:#fff; font-size:20px; flex-shrink:0; }

/* marquee band */
.marquee{ border-top:1.5px solid var(--line); border-bottom:1.5px solid var(--line); overflow:hidden; padding: 18px 0; background:#fff; }
.marquee-track{ display:flex; gap: 46px; width:max-content; animation: scroll-left 26s linear infinite; }
.marquee span{ font-family: var(--font-display); font-weight:700; font-size:20px; color: var(--ink-soft); white-space:nowrap; display:flex; align-items:center; gap:14px; }
.marquee span::after{ content:"✦"; color: var(--ads); font-size:14px; }
@keyframes scroll-left{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* page header (interior pages) */
.page-hero{ padding: 62px 0 56px; }
.page-hero .eyebrow{ margin-bottom: 16px; }
.page-hero h1{ font-size: clamp(34px,5vw,58px); max-width: 16ch; }
.page-hero .lede{ color: var(--ink-soft); font-size:17px; max-width:60ch; margin-top:18px; }

/* forms */
.field{ margin-bottom: 20px; }
.field label{ display:block; font-family: var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  width:100%; padding: 14px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
  font-family: var(--font-body); font-size:15px; background:#fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--soc); }
.field textarea{ resize: vertical; min-height: 120px; }
.form-note{ font-size:13px; color: var(--ink-soft); margin-top:10px; }
.form-success{ display:none; background: #eafff4; border:1.5px solid var(--eml); color:#146c48; padding:16px 18px; border-radius: var(--radius-sm); font-size:14.5px; margin-top:18px; }
.form-success.show{ display:block; }

/* portfolio filters */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 40px; }
.filter-btn{ font-family: var(--font-mono); font-size:12.5px; padding:9px 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff; transition: all .18s ease; }
.filter-btn.active, .filter-btn:hover{ background: var(--ink); color:var(--paper); border-color: var(--ink); }
.portfolio-item{ display:block; }
.portfolio-item.hide{ display:none; }
.pf-thumb{ height:180px; border-radius: var(--radius-sm); margin-bottom:18px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:16px; }
.pf-thumb span{ font-family:var(--font-mono); font-size:11px; color:#fff; background:rgba(0,0,0,0.28); padding:4px 10px; border-radius:999px; }

/* blog */
.blog-card .pf-thumb{ height:150px; }
.blog-meta{ display:flex; gap:14px; font-family: var(--font-mono); font-size:11.5px; color: var(--ink-soft); margin-bottom:12px; }

/* quote / testimonial */
.quote-card{ background:#fff; border:1.5px solid var(--line); border-radius: var(--radius); padding:32px; }
.quote-card p.quote-text{ font-family: var(--font-display); font-size: 19px; line-height:1.4; }
.quote-who{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.quote-who .name{ font-weight:700; font-size:14.5px; }
.quote-who .role{ font-size:12.5px; color: var(--ink-soft); }

/* process timeline (real sequence = numbering justified) */
.timeline{ display:flex; flex-direction:column; gap:0; }
.tl-item{ display:grid; grid-template-columns: 90px 1fr; gap:24px; padding: 28px 0; border-top:1.5px solid var(--line); }
.tl-item:last-child{ border-bottom:1.5px solid var(--line); }
.tl-num{ font-family: var(--font-mono); font-size:14px; color: var(--ads); font-weight:700; }
.tl-item h3{ font-size:21px; margin-bottom:8px; }
.tl-item p{ color:var(--ink-soft); max-width:62ch; }

/* misc */
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-lg{ margin-top: 56px; }
.divider{ height:1px; background: var(--line); margin: 60px 0; border:none; }

/* ============================================================
   WordPress-specific integration styles
   ============================================================ */

/* Nav menu active/current states (WP adds these body/li classes) */
.nav-links li.current-menu-item > a,
.nav-links li.current_page_item > a { color: var(--ads); }
.nav-links li.current-menu-item > a::after,
.nav-links li.current_page_item > a::after { width: 100%; }
.nav-links li { list-style: none; }
.nav-links ul { list-style: none; margin: 0; padding: 0; }
.nav-links li.menu-item-has-children { position: relative; }

/* Footer nav lists reuse footer-grid link styling */
.footer-grid ul li a { display: inline-block; }
.footer-widget { margin-top: 20px; }
.footer-widget h4 { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #9a9ab0; margin-bottom: 12px; }

/* WP core blocks / editor content inside the_content() */
.entry-content, .wp-content-area { font-size: 16.5px; line-height: 1.75; }
.entry-content > * + *, .wp-content-area > * + * { margin-top: 20px; }
.entry-content h2 { font-size: 28px; margin-top: 46px; }
.entry-content h3 { font-size: 22px; margin-top: 34px; }
.entry-content a { color: var(--soc); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content ul, .entry-content ol { padding-left: 22px; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content blockquote { border-left: 3px solid var(--ads); padding-left: 20px; font-style: italic; color: var(--ink-soft); }
.entry-content figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }

/* WP core gallery / alignment helpers */
.alignwide { margin-left: -40px; margin-right: -40px; max-width: none; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: none; }
.aligncenter { margin-left: auto; margin-right: auto; }

/* WP admin bar offset for sticky header */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Screen-reader text (WP convention) */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* Pagination */
.pagination-nav { display: flex; justify-content: center; gap: 10px; margin-top: 50px; }
.pagination-nav a, .pagination-nav span.current { font-family: var(--font-mono); font-size: 13px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); }
.pagination-nav span.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }