/*
Theme Name: Khat1 Print
Theme URI: https://print.khat1-studio.ir
Author: Studio Khat1
Description: قالب سفارشی چاپ خط ۱ — فروشگاه چاپ دیجیتال فارسی/RTL با ماشین‌حساب قیمت. Custom RTL WordPress+WooCommerce theme for Khat1 Print, built pixel-faithful to the design handoff.
Version: 0.1.0
Text Domain: khat1print
Requires at least: 6.4
Requires PHP: 8.1
*/

/* ============ Design tokens (from 08-style-guide) ============ */
:root{
  --orange:#F97316; --orange-hover:#E8630B; --orange-disabled:#F6C7A6;
  --navy:#14203A; --petrol:#0F2A4A;
  --lorange:#FFB877; --warm:#FFF1E6; --cool:#EAF0F7;
  --cream:#FBF7F1; --border:#EFE7DA; --muted:#5B6B82;
  --success:#1F8A5B; --whatsapp:#25D366; --error:#EF4444;
  --ink:#14203A;
  --r-chip:10px; --r-btn:16px; --r-card:22px; --r-pill:100px;
  --shadow-float:0 12px 26px -10px rgba(15,30,55,.35);
  --shadow-soft:0 8px 20px -12px rgba(15,30,55,.22);
  --maxw:1120px;
  --fa:'Vazirmatn','Space Grotesk',system-ui,sans-serif;
}

/* ============ Reset / base ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fa);background:var(--cream);color:var(--navy);
  line-height:1.7;font-size:15px;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.35;letter-spacing:-.5px}
h1{font-size:32px;font-weight:900;letter-spacing:-1px}
h2{font-size:22px;font-weight:800}
p{margin:0 0 1em}
button{font-family:inherit}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
.section{padding-block:44px}
.en{font-family:'Space Grotesk',var(--fa)}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;font-weight:800;font-size:15px;
  padding:13px 22px;border-radius:var(--r-btn);transition:.2s}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 8px 18px -8px rgba(249,115,22,.55)}
.btn-primary:hover{background:var(--orange-hover);box-shadow:0 10px 22px -8px rgba(232,99,11,.6)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--petrol)}
.btn-white{background:#fff;color:var(--navy);border:1.5px solid var(--border)}
.btn-white:hover{border-color:var(--orange);color:var(--orange)}
.btn-block{width:100%}

/* ============ Header ============ */
.site-header{position:absolute;inset-block-start:0;inset-inline:0;z-index:40}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-block:18px}
.site-header .logo img{height:34px}
.hdr-actions{display:flex;align-items:center;gap:10px}
.icon-sq{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
.icon-sq.solid{background:#fff;color:var(--navy)}
.nav-desktop{display:none;gap:26px;font-weight:700;font-size:14.5px;color:#fff}
.nav-desktop a:hover{color:var(--lorange)}

/* ============ Hero ============ */
.hero{position:relative;background:var(--orange);color:#fff;overflow:hidden;
  padding-block:104px 56px;border-end-start-radius:34px;border-end-end-radius:34px}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;
  background:rgba(255,255,255,.12)}
.hero::before{width:260px;height:260px;inset-block-start:-90px;inset-inline-end:-60px}
.hero::after{width:180px;height:180px;inset-block-end:-70px;inset-inline-start:-40px;background:rgba(255,255,255,.09)}
.hero .container{position:relative;z-index:2}
.badge-pill{display:inline-block;background:var(--navy);color:#fff;font-weight:700;
  font-size:12.5px;padding:7px 15px;border-radius:var(--r-pill);margin-bottom:16px}
.hero h1{font-size:42px;margin-bottom:14px;text-wrap:balance}
.hero p{font-size:16px;max-width:34em;opacity:.95}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* ============ Ticker ============ */
.ticker{background:var(--navy);color:#fff;font-size:12px;overflow:hidden;white-space:nowrap;padding-block:10px}
.ticker__track{display:inline-block;animation:tick 18s linear infinite}
.ticker__track span{margin-inline:26px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* ============ Trust chips ============ */
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:-22px;position:relative;z-index:5}
.chip{background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);
  padding:9px 16px;font-weight:700;font-size:13px;box-shadow:var(--shadow-soft)}

/* ============ Section head ============ */
.sec-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:20px;gap:12px}
.sec-head h2{font-size:24px}
.sec-head a{color:var(--orange);font-weight:800;font-size:14px}

/* ============ Services grid ============ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc{border-radius:var(--r-card);padding:20px;min-height:150px;display:flex;flex-direction:column;gap:8px;border:1px solid transparent}
.svc .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:6px}
.svc h3{font-size:16px;font-weight:800}
.svc p{font-size:13px;margin:0;opacity:.85}
.svc.navy{background:var(--navy);color:#fff}
.svc.navy .ic{background:rgba(255,255,255,.14);color:#fff}
.svc.orange{background:var(--orange);color:#fff}
.svc.orange .ic{background:rgba(255,255,255,.2);color:#fff}
.svc.white{background:#fff;border-color:var(--border)}
.svc.white .ic{background:var(--warm);color:var(--orange)}

/* ============ Why-us ============ */
.whyus{background:var(--navy);color:#fff;border-radius:26px;padding:26px}
.whyus h2{margin-bottom:18px;font-size:22px}
.whyrow{display:flex;gap:14px;align-items:flex-start;padding-block:12px;border-top:1px solid rgba(255,255,255,.08)}
.whyrow:first-of-type{border-top:0}
.whyrow .sq{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:18px;flex:none}
.whyrow .sq.o{background:var(--orange)}
.whyrow .sq.t{background:rgba(255,255,255,.12)}
.whyrow h4{font-size:15px;font-weight:800;margin:0 0 2px}
.whyrow p{font-size:13px;margin:0;color:#c9d2e0}

/* ============ Stats ============ */
.stats{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding:22px 10px}
.stat b{display:block;font-size:25px;font-weight:900}
.stat:nth-child(odd) b{color:var(--orange)}
.stat:nth-child(even) b{color:var(--navy)}
.stat span{font-size:12px;color:var(--muted)}

/* ============ Portfolio ============ */
.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filter button{border:1px solid var(--border);background:#fff;border-radius:var(--r-pill);
  padding:8px 16px;font-weight:700;font-size:13px;cursor:pointer}
.filter button.active{background:var(--orange);color:#fff;border-color:var(--orange)}
.pf-tile{border-radius:18px;overflow:hidden;position:relative;aspect-ratio:1/1;
  background:repeating-linear-gradient(45deg,var(--cool),var(--cool) 10px,#dfe8f2 10px,#dfe8f2 20px)}
.pf-tile .cap{position:absolute;inset-block-end:10px;inset-inline-start:10px;background:#fff;
  border-radius:var(--r-pill);padding:5px 12px;font-size:12px;font-weight:700}

/* ============ Testimonial ============ */
.quote{background:var(--navy);color:#fff;border-radius:var(--r-card);padding:26px;position:relative}
.quote .mark{font-size:56px;line-height:.5;color:var(--lorange);font-family:Georgia,serif}
.quote p{font-size:16px;margin:14px 0 18px}
.quote .who{display:flex;align-items:center;gap:10px}
.quote .av{width:38px;height:38px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-weight:800}

/* ============ CTA ============ */
.cta{background:var(--orange);color:#fff;border-radius:28px;padding:34px 24px;text-align:center}
.cta h2{font-size:26px;margin-bottom:8px}
.cta p{opacity:.95;margin-bottom:18px}

/* ============ Footer ============ */
.site-footer{background:var(--navy);color:#fff;padding-block:40px 26px;margin-top:20px}
.site-footer .logo img{height:32px;margin-bottom:12px}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.foot-cols h5{font-size:14px;font-weight:800;margin:0 0 12px}
.foot-cols a{display:block;color:#c9d2e0;font-size:13.5px;padding-block:5px}
.foot-cols a:hover{color:#fff}
.foot-desc{color:#c9d2e0;font-size:13.5px;max-width:26em}
.foot-social{display:flex;gap:8px;margin-top:14px}
.foot-social span{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:26px;padding-top:16px;
  font-size:12px;color:#9fb0c6;text-align:center}

/* ============ Floating WhatsApp ============ */
.wa-float{position:fixed;inset-block-end:18px;inset-inline-start:18px;z-index:60;
  width:54px;height:54px;border-radius:50%;background:var(--whatsapp);color:#fff;
  display:grid;place-items:center;box-shadow:var(--shadow-float);animation:floaty 3s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ============ Responsive ============ */
@media(min-width:820px){
  .nav-desktop{display:flex}
  .hero{padding-block:130px 70px}
  .hero h1{font-size:56px}
  .grid-2{grid-template-columns:repeat(4,1fr)}
  .whyus{padding:34px 40px}
  .section{padding-block:60px}
}

/* ============ Content pages (shared) ============ */
.page-hero{background:var(--orange);color:#fff;border-end-start-radius:30px;border-end-end-radius:30px;padding:70px 0 34px;text-align:center;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.1);inset-block-start:-70px;inset-inline-start:-50px}
.page-hero h1{font-size:30px;position:relative}
.page-hero p{opacity:.95;margin:8px 0 0;position:relative}
.page-hero.navy{background:var(--navy)}
.entry{font-size:15px;line-height:2}
.entry h2{font-size:22px;margin:24px 0 10px}
.entry h3{font-size:17px;margin:18px 0 8px}
.entry ul{padding-inline-start:20px}
.entry img{border-radius:16px;margin:14px 0}
.card-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.card-grid{grid-template-columns:1fr 1fr}}
.info-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px}
.info-card .ic{width:44px;height:44px;border-radius:12px;background:var(--warm);color:var(--orange);display:grid;place-items:center;margin-bottom:10px}
.info-card h3{font-size:16px;font-weight:800;margin:0 0 6px}
.info-card p{font-size:13.5px;color:var(--muted);margin:0}
/* bleed diagram */
.bleed{max-width:320px;margin:20px auto;aspect-ratio:1.6/1;border:2px dashed var(--error);border-radius:8px;position:relative;background:var(--warm)}
.bleed .safe{position:absolute;inset:16px;border:2px dashed var(--navy);border-radius:4px;display:grid;place-items:center;color:var(--navy);font-size:12px;font-weight:700}
.bleed .lbl{position:absolute;inset-block-start:-11px;inset-inline-end:10px;background:#fff;color:var(--error);font-size:11px;font-weight:700;padding:0 6px}
/* accordion (FAQ) */
.acc{background:#fff;border:1px solid var(--border);border-radius:14px;margin-bottom:10px;overflow:hidden}
.acc summary{list-style:none;cursor:pointer;padding:16px;font-weight:800;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--orange);font-size:22px;font-weight:800}
.acc[open] summary::after{content:"−"}
.acc .body{padding:0 16px 16px;color:var(--muted);font-size:14px}
.acc[open]{border-color:var(--orange)}
/* forms */
.k1-form{display:grid;gap:12px;max-width:520px}
.k1-form label{font-weight:700;font-size:13.5px;display:block;margin-bottom:5px}
.k1-form input,.k1-form textarea,.k1-form select{width:100%;border:1.5px solid var(--border);border-radius:12px;padding:12px;font-family:var(--fa);font-size:14px;background:#fff}
.k1-form input:focus,.k1-form textarea:focus{outline:0;border-color:var(--orange)}
/* contact trio */
.contact-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.contact-trio a{border-radius:16px;padding:18px 10px;text-align:center;color:#fff;font-weight:800;font-size:13.5px}
.contact-trio .c-call{background:var(--navy)}.contact-trio .c-wa{background:var(--whatsapp)}.contact-trio .c-tg{background:var(--orange)}
.contact-trio svg{margin:0 auto 8px}
/* 404 misprint */
.err404{text-align:center;padding:50px 0}
.err404 .big{font-size:110px;font-weight:900;color:var(--orange);line-height:1;letter-spacing:-4px;position:relative;display:inline-block}
.err404 .big::after{content:"";position:absolute;inset-inline:0;inset-block-start:52%;height:10px;background:repeating-linear-gradient(90deg,var(--navy),var(--navy) 8px,transparent 8px,transparent 16px);opacity:.5}
.err404 .tag{display:inline-block;background:var(--navy);color:#fff;border-radius:100px;padding:5px 14px;font-size:12px;font-weight:700;margin-top:8px}
.err404 h1{font-size:22px;margin:16px 0 6px}
.err404 .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
/* portfolio masonry */
.masonry{columns:2;column-gap:12px}
.masonry .pf-tile{aspect-ratio:auto;margin-bottom:12px;break-inside:avoid}
.masonry .pf-tile.tall{height:240px}.masonry .pf-tile.short{height:150px}

/* ============ WooCommerce (brand restyle) ============ */
.woocommerce-wrap{min-height:50vh}
.woocommerce .page-title,.woocommerce-products-header__title{font-size:26px;font-weight:900;margin-bottom:18px}
.woocommerce ul.products{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0;padding:0;list-style:none}
@media(min-width:820px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}}
.woocommerce ul.products li.product{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:14px;margin:0;text-align:center}
.woocommerce ul.products li.product img{border-radius:14px;margin-bottom:10px;background:var(--cool)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15px;font-weight:800;padding:0;color:var(--navy)}
.woocommerce ul.products li.product .price{color:var(--muted);font-size:13px;display:block;margin:6px 0 10px}
.woocommerce ul.products li.product .price .amount{color:var(--orange);font-weight:800}
.woocommerce a.button,.woocommerce button.button,.woocommerce .button{background:var(--orange);color:#fff;border-radius:var(--r-btn);font-weight:800;font-family:var(--fa);padding:11px 18px;border:0;transition:.2s}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover{background:var(--orange-hover)}
.woocommerce .button.btn-navy{background:var(--navy)}
/* single product */
.single-product div.product{display:grid;gap:22px}
@media(min-width:820px){.single-product div.product{grid-template-columns:1fr 1fr;align-items:start}}
.single-product .product_title{font-size:26px;font-weight:900}
.single-product .woocommerce-product-details__short-description{color:var(--muted);line-height:2}
.calc-cta-box{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;margin-top:14px}
.calc-cta-box .from{font-size:15px;margin-bottom:12px}
.calc-cta-box .from b{color:var(--orange);font-size:22px;font-weight:900}
.calc-cta-box .fileguide-link{display:block;text-align:center;margin-top:12px;color:var(--orange);font-weight:700;font-size:13.5px}
/* cart + checkout */
.woocommerce table.shop_table{border:1px solid var(--border);border-radius:16px;overflow:hidden;border-collapse:collapse}
.woocommerce table.shop_table th{background:var(--cool);color:var(--navy);font-weight:800}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{font-size:18px;font-weight:800}
.woocommerce #payment,.woocommerce-cart .cart-collaterals .cart_totals{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px}
.woocommerce form .form-row input,.woocommerce form .form-row textarea,.woocommerce form .form-row select{border:1.5px solid var(--border);border-radius:12px;padding:11px;font-family:var(--fa)}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info{border-top-color:var(--orange)}
.woocommerce-message{background:var(--warm)}
.woocommerce .quantity input.qty{border:1.5px solid var(--border);border-radius:10px;padding:8px}

/* ============ Faithful mockup pages (mobile-first, exact design) ============ */
body.k1-faithful{background:#DED9D2}
.k1-app{max-width:440px;margin:0 auto;background:#FBF7F1;min-height:100vh;
  box-shadow:0 0 80px -24px rgba(15,30,55,.35);overflow:hidden;position:relative}
.k1-app .screen{background:#FBF7F1;overflow:hidden;position:relative}
.k1-faithful .statusbar{display:none}          /* fake phone status bar — not real content */
.k1-faithful .svcicon{width:26px;height:26px;display:block}
.k1-faithful .en{font-family:'Space Grotesk',var(--fa);direction:ltr;unicode-bidi:isolate}
.k1-faithful img{display:inline-block}
@media(max-width:480px){
  .k1-app{max-width:100%;box-shadow:none;min-height:auto}
}

/* ============ Faithful pages — DESKTOP-WIDE layer (≥900px) ============ */
@media(min-width:900px){
  .k1-app{max-width:1120px;border-radius:28px;margin-block:24px}
  .k1-app .screen{border-radius:28px}
  /* hero: larger, centered content */
  .sec-hero{padding-bottom:64px!important}
  .sec-hero h1{font-size:66px!important;line-height:1.05!important}
  .sec-hero > div[style*="padding:24px 22px"]{padding:48px 56px 0!important;max-width:1000px;margin-inline:auto}
  .sec-hero p{font-size:18px!important;max-width:560px!important}
  .sec-hero > div[style*="justify-content:space-between"][style*="padding:6px 20px"]{padding:14px 56px 0!important;max-width:1000px;margin-inline:auto}
  /* services & portfolio → 4 columns; wider gutters */
  .sec-services [style*="grid-template-columns:1fr 1fr"],
  .sec-portfolio [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:repeat(4,1fr)!important;gap:16px!important}
  .sec-services,.sec-why,.sec-stats,.sec-portfolio,.sec-testimonial,.sec-cta{padding-left:56px!important;padding-right:56px!important}
  /* center single-card sections at a comfy width */
  .sec-why > div,.sec-cta > div,.sec-testimonial > div{max-width:900px;margin-inline:auto}
  /* section headings a touch larger */
  .sec-services h2,.sec-portfolio h2{font-size:28px!important}
  /* footer columns wider */
  .sec-footer [style*="grid"]{max-width:1000px;margin-inline:auto}
  .sec-ticker{font-size:13px!important}
}
@media(min-width:1180px){ .k1-app{max-width:1160px} }