/*
Theme Name: Artech Distribution
Theme URI: https://artech-ks.com
Author: Artech Distribution
Author URI: https://artech-ks.com
Description: Temë e personalizuar WordPress për Artech Distribution — distributor sistemesh CCTV, alarm, kontroll hyrjesh dhe rrjete në Kosovë. Përfshin kategori produktesh, partnerë dhe zgjidhje si lloje postimesh të personalizuara (custom post types), si dhe fusha të plota në Customizer për tekstin e ballinës, "rreth nesh" dhe kontaktin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: artech
Tags: e-commerce-partner, custom-menu, custom-logo, featured-images, translation-ready, one-column

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/* ============================================================
   ARTECH DISTRIBUTION — design tokens
   ============================================================ */
:root{
  --red:        #FF0303;
  --red-deep:   #A60000;
  --red-ink:    #4D0000;
  --ink:        #17140F;
  --ink-soft:   #2A241E;
  --paper:      #F6F3EE;
  --paper-2:    #ECE6DC;
  --steel:      #6E675F;
  --line:       #DBD2C4;
  --line-dark:  rgba(246,243,238,0.14);
  --white:      #FFFFFF;

  --display: "Big Shoulders Display", sans-serif;
  --body: "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;

  --wrap: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--display);
  margin:0;
  font-weight:700;
  letter-spacing:0.002em;
}
ul,ol{padding-left:1.2em;}
.screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 32px;
}
.eyebrow{
  font-family:var(--mono);
  font-size:13px;
  color:var(--red);
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--red);
  display:block;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:44px;
  border-bottom:1px solid var(--line);
  padding-bottom:28px;
}
.section-head h2{
  font-size:clamp(32px,4vw,46px);
  line-height:1.05;
}
.section-head p{
  max-width:360px;
  color:var(--steel);
  font-size:15px;
  margin:0;
}
.section-head--dark{border-bottom:1px solid var(--line-dark);}
.section-head--dark p{color:#C9C2B8;}
section{padding:96px 0;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

/* ---------- utility bar ---------- */
.utility-bar{
  background:var(--ink);
  color:#C9C2B8;
  font-family:var(--mono);
  font-size:12.5px;
}
.utility-bar .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:9px;
  padding-bottom:9px;
  gap:20px;
  flex-wrap:wrap;
}
.utility-bar .u-left{display:flex;align-items:center;gap:0;flex-wrap:wrap;}
.utility-bar .u-left a{padding:0 18px;position:relative;}
.utility-bar .u-left a:first-child{padding-left:0;}
.utility-bar .u-left a:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-1px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:12px;
  background:rgba(255,255,255,0.16);
}
.utility-bar a{text-decoration:none;}
.utility-bar a:hover{color:var(--white);}
.utility-bar .u-right{color:#8A8378;display:flex;align-items:center;gap:18px;}
.utility-bar .u-social{display:flex;align-items:center;gap:12px;}
.utility-bar .u-social a{
  color:#8A8378;
  width:15px;height:15px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.utility-bar .u-social svg{width:100%;height:100%;}
.utility-bar .u-social a:hover{color:var(--red);}

/* ---------- header ---------- */
.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:16px;
  padding-bottom:16px;
  gap:24px;
}
.brand img{height:34px;width:auto;}
.brand{display:flex;align-items:center;text-decoration:none;}
.brand .custom-logo-link{display:flex;align-items:center;}
nav.main-nav{display:flex;align-items:center;gap:2px;}
nav.main-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px;}
nav.main-nav a{
  font-size:14.5px;
  font-weight:500;
  text-decoration:none;
  color:var(--ink-soft);
  padding:10px 16px;
  position:relative;
  display:inline-block;
}
nav.main-nav a:hover{color:var(--red);}
.header-actions{display:flex;align-items:center;gap:12px;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--body);
  font-weight:600;
  font-size:14.5px;
  padding:12px 22px;
  white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--red);color:var(--white);}
.btn-primary:hover{background:var(--red-deep);color:var(--white);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-outline:hover{border-color:var(--red);color:var(--red);}
.btn-ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,0.4);}
.btn-ghost-light:hover{border-color:var(--white);}
.btn-sm{padding:9px 16px;font-size:13.5px;}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  width:42px;height:42px;
  align-items:center;justify-content:center;
  cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";
  display:block;
  width:18px;height:2px;
  background:var(--ink);
  position:relative;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{position:absolute;top:-6px;}
.nav-toggle span::after{position:absolute;top:6px;}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(135deg, var(--red-deep) 0%, var(--red-ink) 62%, var(--ink) 100%);
  color:var(--white);
  position:relative;
  overflow:hidden;
  padding:0;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  gap:40px;
  padding-top:104px;
  padding-bottom:96px;
  position:relative;
  z-index:2;
}
.hero-copy .eyebrow{color:#FFD9D9;}
.hero-copy .eyebrow::before{background:#FFD9D9;}
.hero-copy h1{
  font-size:clamp(40px,5.4vw,68px);
  line-height:0.98;
  font-weight:800;
  color:var(--white);
  max-width:15ch;
}
.hero-copy p.lead{
  margin:26px 0 34px;
  font-size:17px;
  max-width:46ch;
  color:#F0DEDA;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px;}
.hero-stats{
  display:flex;
  gap:0;
  border-top:1px solid var(--line-dark);
  padding-top:26px;
  flex-wrap:wrap;
}
.hero-stats .stat{
  padding-right:34px;
  margin-right:34px;
  border-right:1px solid var(--line-dark);
}
.hero-stats .stat:last-child{border-right:none;margin-right:0;padding-right:0;}
.hero-stats .stat b{
  display:block;
  font-family:var(--display);
  font-size:36px;
  font-weight:700;
  line-height:1;
  color:var(--white);
}
.hero-stats .stat span{
  font-size:12.5px;
  color:#D9B9B4;
  font-family:var(--mono);
}

.hero-graphic{position:relative;height:420px;display:flex;align-items:center;justify-content:center;}
.hero-graphic svg{width:100%;height:100%;max-width:440px;}
.radar-sweep{
  transform-origin:200px 200px;
  animation:sweep 6s linear infinite;
}
@keyframes sweep{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.hero-bg-grid{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0.5;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 64px);
}
@media (prefers-reduced-motion: reduce){
  .radar-sweep{animation:none;}
}

/* ---------- about ---------- */
.about .wrap{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:64px;
}
.about h2{font-size:clamp(30px,4vw,44px);line-height:1.05;margin-bottom:22px;max-width:11ch;}
.about-copy p{color:var(--ink-soft);font-size:16.5px;max-width:58ch;}
.about-copy p + p{margin-top:16px;}
.about-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:34px;
}
.about-facts .fact{
  background:var(--paper);
  padding:22px 22px;
}
.about-facts .fact b{
  display:block;
  font-family:var(--display);
  font-size:30px;
  color:var(--red);
  line-height:1;
  margin-bottom:6px;
}
.about-facts .fact span{font-size:13px;color:var(--steel);}

/* ---------- products ---------- */
.products{background:var(--paper-2);}
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.product-card{
  background:var(--paper-2);
  padding:30px 26px;
  min-height:168px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:background-color .15s ease;
}
.product-card:hover{background:var(--ink);}
.product-card:hover .p-icon,
.product-card:hover .p-label{color:var(--white);}
.product-card:hover .p-icon{color:var(--red);}
.p-icon{color:var(--red);width:30px;height:30px;}
.p-icon svg{width:100%;height:100%;}
.p-icon img{width:100%;height:100%;object-fit:contain;filter:invert(14%) sepia(97%) saturate(7471%) hue-rotate(2deg) brightness(97%) contrast(115%);}
.p-label{
  font-size:14.5px;
  font-weight:500;
  color:var(--ink);
  margin-top:20px;
  line-height:1.3;
}

/* ---------- solutions ---------- */
.solutions{background:var(--ink);color:var(--white);}
.solutions h2{color:var(--white);}
.chip-field{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.chip{
  border:1px solid var(--line-dark);
  padding:14px 20px;
  font-size:14.5px;
  color:#E7E1D6;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:border-color .15s ease, color .15s ease;
}
.chip::before{
  content:"";
  width:6px;height:6px;
  background:var(--red);
  display:block;
  flex:none;
}
.chip:hover{border-color:var(--red);color:var(--white);}

/* ---------- partners ---------- */
.partner-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.partner-cell{
  background:var(--paper);
  height:128px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.partner-cell img{
  max-height:44px;
  max-width:100%;
  width:auto;
  filter:grayscale(1) opacity(0.55);
  transition:filter .15s ease;
}
.partner-cell:hover img{filter:grayscale(0) opacity(1);}
.partner-cell a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}

/* ---------- contact ---------- */
.contact .wrap{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:64px;
}
.contact-info h2{font-size:clamp(30px,4vw,44px);margin-bottom:22px;max-width:11ch;}
.contact-info > p{color:var(--steel);max-width:40ch;margin-bottom:32px;}
.info-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.info-list li{
  border-bottom:1px solid var(--line);
  padding:18px 0;
  display:flex;
  gap:18px;
  align-items:flex-start;
}
.info-list .info-icon{
  color:var(--red);
  width:20px;height:20px;
  flex:none;
  margin-top:2px;
}
.info-list .info-icon svg{width:100%;height:100%;}
.info-list b{display:block;font-size:13px;color:var(--steel);font-weight:500;margin-bottom:3px;}
.info-list a{text-decoration:none;font-size:15.5px;font-weight:500;}
.info-list a:hover{color:var(--red);}

.contact-form{
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:40px;
}
.contact-form h3{font-size:20px;margin-bottom:6px;}
.contact-form .form-note{color:var(--steel);font-size:14px;margin:0 0 26px;}
.field{margin-bottom:18px;}
.field label{
  display:block;
  font-size:12.5px;
  font-family:var(--mono);
  color:var(--steel);
  margin-bottom:7px;
}
.field input, .field textarea{
  width:100%;
  border:1px solid var(--line);
  background:var(--paper);
  padding:13px 14px;
  font-family:var(--body);
  font-size:15px;
  color:var(--ink);
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--red);
}
.field textarea{resize:vertical;min-height:110px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

/* ---------- footer ---------- */
footer.site-footer{background:var(--ink);color:#C9C2B8;padding:80px 0 0;}
.footer-top{
  display:grid;
  grid-template-columns:1.3fr 0.8fr 0.8fr 1fr;
  gap:40px;
  padding-bottom:64px;
  border-bottom:1px solid var(--line-dark);
}
.footer-brand img{height:30px;margin-bottom:18px;}
.footer-brand p{font-size:14px;max-width:32ch;color:#A29C91;}
.footer-social{display:flex;align-items:center;gap:12px;margin-top:22px;}
.footer-social a{
  width:36px;height:36px;
  border:1px solid var(--line-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#C9C2B8;
  transition:border-color .15s ease, color .15s ease;
}
.footer-social a svg{width:16px;height:16px;}
.footer-social a:hover{border-color:var(--red);color:var(--red);}
footer h4{
  font-family:var(--body);
  font-size:13px;
  color:var(--white);
  font-weight:600;
  margin-bottom:18px;
}
footer ul{list-style:none;margin:0;padding:0;}
footer ul li{margin-bottom:11px;}
footer ul a{font-size:14.5px;text-decoration:none;color:#B7B0A5;}
footer ul a:hover{color:var(--red);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 0;
  font-size:13px;
  color:#8A8378;
  flex-wrap:wrap;
  gap:10px;
}
.footer-bottom .credit{font-family:var(--mono);font-size:12px;}

/* ---------- generic page/blog content (page.php, single.php, archive.php) ---------- */
.page-hero{
  background:var(--ink);
  color:var(--white);
  padding:72px 0;
}
.page-hero h1{font-size:clamp(32px,4.4vw,52px);color:var(--white);}
.content-wrap{padding:80px 0;}
.content-wrap .wrap{max-width:820px;}
.content-wrap article + article{margin-top:64px;padding-top:64px;border-top:1px solid var(--line);}
.content-wrap img{margin:20px 0;}
.content-wrap h2{font-size:28px;margin:36px 0 14px;}
.content-wrap h3{font-size:22px;margin:28px 0 12px;}
.content-wrap p{color:var(--ink-soft);margin:0 0 16px;}
.content-wrap a{color:var(--red);}
.entry-meta{font-family:var(--mono);font-size:12.5px;color:var(--steel);margin-bottom:10px;}
.pagination{display:flex;gap:10px;margin-top:40px;}
.pagination a, .pagination span{
  border:1px solid var(--line);
  padding:8px 14px;
  text-decoration:none;
  font-size:14px;
}
.pagination .current{background:var(--ink);color:var(--white);border-color:var(--ink);}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;padding-top:56px;}
  .hero-graphic{height:280px;order:-1;}
  .about .wrap, .contact .wrap{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .partner-grid{grid-template-columns:repeat(3,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;}
  .field-row{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .utility-bar .u-right{display:none;}
  .utility-bar .wrap{padding-top:10px;padding-bottom:10px;}
  .utility-bar .u-left{flex-direction:column;align-items:flex-start;gap:6px;}
  .utility-bar .u-left a{padding:0;}
  .utility-bar .u-left a:first-child{padding-left:0;}
  .utility-bar .u-left a::after{display:none;}
  nav.main-nav{
    position:fixed;
    top:0;right:0;
    height:100vh;
    width:78vw;
    max-width:320px;
    background:var(--paper);
    flex-direction:column;
    align-items:flex-start;
    padding:100px 28px 28px;
    gap:4px;
    transform:translateX(100%);
    transition:transform .25s ease;
    border-left:1px solid var(--line);
    z-index:60;
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav ul{flex-direction:column;align-items:flex-start;width:100%;gap:0;}
  nav.main-nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--line);}
  .nav-toggle{display:flex;}
  .header-actions .btn-outline{display:none;}
  .header-actions .btn-primary{padding:9px 14px;font-size:13px;}
  .header-actions{gap:8px;}
  .section-head{flex-direction:column;align-items:flex-start;gap:14px;}
  .product-grid{grid-template-columns:1fr 1fr;}
  .partner-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .hero .wrap{padding-top:36px;padding-bottom:64px;gap:20px;}
  .hero-graphic{height:190px;margin-bottom:4px;}
  .hero-graphic svg{max-width:220px;}
  .hero-stats{padding-top:20px;}
  .hero-stats .stat{padding-right:18px;margin-right:18px;}
  .hero-stats .stat b{font-size:28px;}
}