/*
Theme Name: Parrot System
Theme URI: https://parrotsystem.com
Author: Parrot System
Author URI: https://parrotsystem.com
Description: Custom WordPress theme for Parrot System — a full service web design, development & digital marketing agency based in Lucknow. Built with an admin-editable section builder so new page sections can be added, reordered and removed without touching code. Includes custom post types for Services, Client Websites, Case Studies, Testimonials and Pricing Plans, plus reusable query-form blocks for the Home, About and Contact pages.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: parrot-system
Tags: custom-menu, featured-images, translation-ready, threaded-comments
*/

/* =========================================================
   0. DESIGN TOKENS
   Brand: Parrot System — teal + orange (from logo), IT/dev agency.
   Display: Space Grotesk / Body: Inter / Mono accent: JetBrains Mono
========================================================= */
:root{
  --ink:            #0B211F;
  --ink-soft:       #274744;
  --slate:          #5B6B69;
  --paper:          #FAFAF8;
  --paper-dim:      #F1F5F4;
  --mint:           #E3F3F0;
  --line:           #DCE8E6;

  --teal:           #0E8A7D;
  --teal-deep:      #0A5F58;
  --teal-ink:       #063C37;
  --orange:         #F0791A;
  --orange-deep:    #D5620A;
  --amber-tint:     #FDECD9;

  --white:          #FFFFFF;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;

  --shadow-card: 0 1px 2px rgba(11,33,31,.04), 0 12px 28px -12px rgba(11,33,31,.16);
  --shadow-pop:  0 20px 45px -18px rgba(11,33,31,.28);

  --wrap: 1180px;
}

/* =========================================================
   1. RESET / BASE
========================================================= */
*,*::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.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--teal-deep);text-decoration:none;}
a:hover{color:var(--orange);}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-.01em;
}
p{margin:0 0 1.1em;}
button, input, textarea, select{font-family:inherit;font-size:1rem;}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.container{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.screen-reader-text{position:absolute !important;left:-9999px;}

/* eyebrow / mono label — signature detail used throughout */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--teal-deep);
  background:var(--mint);
  border:1px solid var(--line);
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:16px;
}
.eyebrow::before{content:"//";color:var(--orange);font-weight:700;}

.section-head{max-width:640px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);}
.section-head p{color:var(--slate);font-size:1.05rem;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  padding:13px 26px;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn-primary{background:var(--orange);color:var(--white);}
.btn-primary:hover{background:var(--orange-deep);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-pop);}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-outline:hover{border-color:var(--teal-deep);color:var(--teal-deep);transform:translateY(-2px);}
.btn-ghost-light{border-color:rgba(255,255,255,.55);color:var(--white);}
.btn-ghost-light:hover{background:var(--white);color:var(--teal-ink);}

/* =========================================================
   2. HEADER / NAV — signature "beak" divider under the bar
========================================================= */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(250,250,248,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar{
  display:flex;justify-content:flex-end;gap:22px;
  font-family:var(--font-mono);font-size:.78rem;color:var(--slate);
  padding:7px 24px;background:var(--teal-ink);color:#CDEDE8;
}
.topbar a{color:#CDEDE8;}
.topbar a:hover{color:var(--orange);}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--wrap);margin:0 auto;}
.site-branding img{max-height:46px;width:auto;}
.site-branding .site-title{font-family:var(--font-display);font-size:1.4rem;font-weight:700;}
.primary-nav ul{display:flex;gap:6px;align-items:center;}
.primary-nav a{
  display:block;padding:10px 16px;border-radius:999px;
  color:var(--ink-soft);font-weight:600;font-size:.95rem;
  transition:background .15s ease, color .15s ease;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a{background:var(--mint);color:var(--teal-deep);}
.nav-cta{margin-left:8px;}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.menu-toggle span{display:block;width:26px;height:2px;background:var(--ink);margin:6px 0;transition:.2s;}

@media (max-width:900px){
  .menu-toggle{display:block;}
  .primary-nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,86vw);height:100vh;
    background:var(--white);box-shadow:var(--shadow-pop);
    transform:translateX(100%);transition:transform .28s ease;padding:90px 28px 28px;
  }
  .primary-nav.is-open{transform:translateX(0);}
  .primary-nav ul{flex-direction:column;align-items:stretch;gap:4px;}
  .primary-nav a{padding:14px 16px;}
  .nav-cta{margin:14px 0 0;}
  .topbar{justify-content:center;flex-wrap:wrap;gap:14px;}
}

/* =========================================================
   3. HERO
========================================================= */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--teal-ink) 0%, var(--teal-deep) 55%, var(--teal) 100%);
  color:var(--white);
  padding:96px 24px 130px;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;background:var(--paper);
  clip-path:polygon(0 100%,100% 100%,100% 40%,72% 100%,58% 20%,42% 100%,0 55%);
}
.hero-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;z-index:2;}
.hero .eyebrow{background:rgba(255,255,255,.1);color:#EAF7F4;border-color:rgba(255,255,255,.22);}
.hero .eyebrow::before{color:var(--orange);}
.hero h1{color:var(--white);font-size:clamp(2.2rem,4.4vw,3.6rem);}
.hero h1 em{font-style:normal;color:#FFD9A8;}
.hero p.lead{color:#D8ECE8;font-size:1.15rem;max-width:540px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.hero-stats{display:flex;gap:28px;margin-top:44px;flex-wrap:wrap;}
.hero-stats div strong{display:block;font-family:var(--font-display);font-size:1.8rem;color:var(--white);}
.hero-stats div span{font-family:var(--font-mono);font-size:.75rem;color:#B9DDD6;}
.hero-panel{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-lg);padding:28px;backdrop-filter:blur(6px);
}
.hero-panel .term-line{font-family:var(--font-mono);font-size:.85rem;color:#BEE7DF;margin-bottom:8px;}
.hero-panel .term-line b{color:var(--orange);}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}.hero{padding:70px 20px 110px;}}

/* =========================================================
   3b. INNER PAGE HERO (used by ps_page_header())
========================================================= */
.page-hero{
  background:linear-gradient(160deg,var(--teal-ink) 0%, var(--teal-deep) 100%);
  color:var(--white);
  padding:64px 24px 56px;
}
.page-hero h1{color:var(--white);font-size:clamp(1.9rem,3.6vw,2.8rem);}
.page-hero .eyebrow{background:rgba(255,255,255,.1);color:#EAF7F4;border-color:rgba(255,255,255,.22);}
.page-hero .eyebrow::before{color:var(--orange);}
.page-hero p.lead{color:#D8ECE8;}

/* =========================================================
   4. SERVICES GRID
========================================================= */
.section{padding:88px 0;}
.section.tint{background:var(--mint);}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.service-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:30px 26px;box-shadow:var(--shadow-card);transition:transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-pop);}
.service-card .num{font-family:var(--font-mono);color:var(--orange);font-size:.8rem;margin-bottom:14px;display:block;}
.service-card .icon-wrap{width:52px;height:52px;border-radius:14px;background:var(--mint);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.service-card .icon-wrap img{max-width:28px;max-height:28px;}
.service-card h3{font-size:1.18rem;margin-bottom:8px;}
.service-card p{color:var(--slate);font-size:.96rem;margin-bottom:0;}
.service-card a.card-more{font-family:var(--font-mono);font-size:.82rem;color:var(--teal-deep);display:inline-block;margin-top:14px;}
@media (max-width:900px){.services-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.services-grid{grid-template-columns:1fr;}}

/* =========================================================
   5. TEXT + IMAGE
========================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split.reverse .split-media{order:2;}
.split-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);}
.split ul.check-list li{position:relative;padding-left:30px;margin-bottom:10px;color:var(--ink-soft);}
.split ul.check-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--white);background:var(--teal);width:20px;height:20px;border-radius:50%;font-size:.7rem;display:flex;align-items:center;justify-content:center;}
@media (max-width:860px){.split, .split.reverse{grid-template-columns:1fr;}.split.reverse .split-media{order:0;}}

/* =========================================================
   6. STATS COUNTER
========================================================= */
.stats-strip{background:var(--teal-ink);color:var(--white);padding:56px 0;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.stats-row .stat strong{display:block;font-family:var(--font-display);font-size:2.4rem;color:var(--white);}
.stats-row .stat strong .suffix{color:var(--orange);}
.stats-row .stat span{font-family:var(--font-mono);font-size:.8rem;color:#B9DDD6;letter-spacing:.03em;}
@media (max-width:760px){.stats-row{grid-template-columns:1fr 1fr;}}

/* =========================================================
   7. TESTIMONIALS
========================================================= */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testi-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);padding:26px;box-shadow:var(--shadow-card);}
.testi-card .quote-mark{font-family:var(--font-display);font-size:2.4rem;color:var(--orange);line-height:1;display:block;margin-bottom:6px;}
.testi-card p{color:var(--ink-soft);font-size:.98rem;}
.testi-person{display:flex;align-items:center;gap:12px;margin-top:16px;}
.testi-person img{width:44px;height:44px;border-radius:50%;object-fit:cover;}
.testi-person strong{display:block;font-size:.92rem;}
.testi-person span{font-family:var(--font-mono);font-size:.75rem;color:var(--slate);}
@media (max-width:900px){.testi-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.testi-grid{grid-template-columns:1fr;}}

/* =========================================================
   8. CLIENT WEBSITES / PORTFOLIO GRID
========================================================= */
.clients-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.client-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-card);transition:transform .2s ease, box-shadow .2s ease;
  display:flex;flex-direction:column;
}
.client-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-pop);}
.client-card .shot{aspect-ratio:16/10;background:var(--mint);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.client-card .shot img{width:100%;height:100%;object-fit:cover;}
.client-card .shot .visit-tag{
  position:absolute;bottom:10px;right:10px;background:rgba(11,33,31,.82);color:#fff;
  font-family:var(--font-mono);font-size:.7rem;padding:5px 10px;border-radius:999px;
}
.client-card .body{padding:20px;flex:1;display:flex;flex-direction:column;}
.client-card h3{font-size:1.05rem;margin-bottom:6px;}
.client-card p{color:var(--slate);font-size:.9rem;flex:1;}
.client-card .tag{font-family:var(--font-mono);font-size:.7rem;color:var(--teal-deep);background:var(--mint);padding:3px 10px;border-radius:999px;display:inline-block;margin-bottom:10px;width:fit-content;}
.client-card a.visit-link{font-weight:600;font-size:.88rem;color:var(--orange-deep);margin-top:10px;display:inline-block;}
@media (max-width:1000px){.clients-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.clients-grid{grid-template-columns:1fr;}}

/* =========================================================
   9. CASE STUDY
========================================================= */
.case-study-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px;box-shadow:var(--shadow-card);
}
.case-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:26px 0;}
.metric-box{background:var(--mint);border-radius:var(--radius-md);padding:16px 10px;text-align:center;}
.metric-box strong{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--teal-deep);}
.metric-box .delta{color:var(--orange-deep);font-family:var(--font-mono);font-size:.72rem;}
.metric-box span.label{font-size:.72rem;color:var(--slate);}
.keyword-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:.92rem;}
.keyword-table th{text-align:left;font-family:var(--font-mono);font-size:.75rem;color:var(--slate);padding:10px;border-bottom:2px solid var(--line);}
.keyword-table td{padding:10px;border-bottom:1px solid var(--line);}
.keyword-table tr:nth-child(even){background:var(--paper-dim);}
@media (max-width:820px){.case-metrics{grid-template-columns:repeat(2,1fr);}}

/* =========================================================
   10. PRICING
========================================================= */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.price-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-card);position:relative;}
.price-card.featured{border-color:var(--orange);box-shadow:var(--shadow-pop);transform:translateY(-8px);}
.price-card.featured::before{content:"Most Popular";position:absolute;top:-14px;left:28px;background:var(--orange);color:#fff;font-family:var(--font-mono);font-size:.72rem;padding:5px 12px;border-radius:999px;}
.price-card h3{font-size:1.2rem;}
.price-card .amount{font-family:var(--font-display);font-size:2.3rem;color:var(--teal-deep);margin:8px 0 2px;}
.price-card .amount span{font-size:.9rem;color:var(--slate);font-family:var(--font-body);}
.price-card ul{margin:20px 0;}
.price-card ul li{padding:8px 0;border-bottom:1px dashed var(--line);font-size:.92rem;color:var(--ink-soft);}
@media (max-width:900px){.pricing-grid{grid-template-columns:1fr;}.price-card.featured{transform:none;}}

/* =========================================================
   11. CTA BANNER
========================================================= */
.cta-banner{
  background:linear-gradient(120deg,var(--orange) 0%, var(--orange-deep) 100%);
  color:#fff;border-radius:var(--radius-lg);padding:52px 44px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.cta-banner h2{color:#fff;font-size:1.8rem;margin-bottom:6px;}
.cta-banner p{color:#FFE9D2;margin:0;}
.cta-banner .btn-primary{background:#fff;color:var(--orange-deep);}
.cta-banner .btn-primary:hover{background:var(--ink);color:#fff;}

/* =========================================================
   12. QUERY / CONTACT FORM
========================================================= */
.query-form-wrap{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px;box-shadow:var(--shadow-card);
}
.query-form-wrap h3{font-size:1.3rem;}
.ps-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ps-form-group{margin-bottom:16px;}
.ps-form-group label{display:block;font-size:.82rem;font-family:var(--font-mono);color:var(--slate);margin-bottom:6px;}
.ps-form-group input, .ps-form-group textarea, .ps-form-group select{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper-dim);transition:border-color .15s ease, background .15s ease;
}
.ps-form-group input:focus, .ps-form-group textarea:focus, .ps-form-group select:focus{
  border-color:var(--teal);background:var(--white);outline:none;
}
.ps-form-hp{position:absolute;left:-9999px;}
.ps-form-msg{margin-top:14px;padding:12px 16px;border-radius:var(--radius-sm);font-size:.92rem;display:none;}
.ps-form-msg.success{display:block;background:var(--mint);color:var(--teal-deep);}
.ps-form-msg.error{display:block;background:var(--amber-tint);color:var(--orange-deep);}
.ps-form-wrap-submit{display:flex;justify-content:flex-end;}
@media (max-width:640px){.ps-form-row{grid-template-columns:1fr;}}

/* =========================================================
   13. FOOTER
========================================================= */
.site-footer{background:var(--teal-ink);color:#CFE9E4;padding:64px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-grid h4{color:#fff;font-size:1rem;font-family:var(--font-mono);letter-spacing:.03em;margin-bottom:16px;}
.footer-grid p, .footer-grid a{color:#B9DDD6;font-size:.92rem;}
.footer-grid a:hover{color:var(--orange);}
.footer-grid li{margin-bottom:10px;}
.footer-brand img{max-height:42px;margin-bottom:14px;}
.footer-social{display:flex;gap:10px;margin-top:16px;}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:.85rem;}
.footer-bottom{padding:22px 0;text-align:center;font-size:.82rem;color:#8FC2BB;font-family:var(--font-mono);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* utility */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.badge-soon{font-family:var(--font-mono);font-size:.7rem;background:var(--amber-tint);color:var(--orange-deep);padding:3px 8px;border-radius:6px;}