/* ===== aziqdev theme — Telegram palette =====
   Light values follow Telegram's light theme, dark values follow Telegram's
   "night blue" theme (the same colours Telegram gives Mini Apps).
   The theme follows the visitor's OS / browser setting: a tiny inline script
   in every page's <head> sets <html data-theme="light|dark"> from
   prefers-color-scheme before first paint and updates it live when the
   setting changes. The media query below is the no-JavaScript fallback. */

:root {
  color-scheme: light;
  --tg-bg: #efeff4;             /* page background (one colour, every section) */
  --tg-surface: #ffffff;        /* cards and panels: lighter than the page */
  --tg-surface-2: #f4f4f7;      /* subtle fills inside cards */
  --tg-field: #ffffff;          /* form fields */
  --tg-text: #0b0b0d;
  --tg-hint: #707579;
  --tg-accent: #2481cc;         /* links, icons, highlighted text */
  --tg-button: #2481cc;         /* filled buttons */
  --tg-button-hover: #1d6fb0;
  --tg-button-text: #ffffff;
  --tg-brand: #2aabee;          /* Telegram logo blue, decorative only */
  --tg-border: #e1e1e6;
  --tg-field-border: #cfd3da;
  --tg-success: #1e9e4a;
  --tg-warning: #c98300;
  --tg-destructive: #e53935;
  --tg-star: #ffb800;           /* Telegram Stars gold */
  --tg-wa: #25d366;
  --tg-header-bg: rgba(255, 255, 255, .92);
  --tg-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .06);
  --tg-shadow-lg: 0 24px 60px rgba(0, 0, 0, .16);
  --tg-accent-soft: color-mix(in srgb, var(--tg-accent) 11%, transparent);
  --tg-success-soft: color-mix(in srgb, var(--tg-success) 13%, transparent);
  --tg-hover: color-mix(in srgb, var(--tg-text) 4%, transparent);
  --tg-radius: 16px;
  --tg-btn-h: 52px;
  --tg-btn-r: 12px;
  --tg-max: 1160px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --tg-bg: #17212b;
  --tg-surface: #232e3c;
  --tg-surface-2: #2b3949;
  --tg-field: #17212b;
  --tg-text: #f5f5f5;
  --tg-hint: #8b9cad;
  --tg-accent: #6ab3f3;
  --tg-button: #5288c1;
  --tg-button-hover: #5f96d0;
  --tg-button-text: #ffffff;
  --tg-border: #2f3d4c;
  --tg-field-border: #3a4b5d;
  --tg-success: #5fc96b;
  --tg-warning: #f0b429;
  --tg-destructive: #ec3942;
  --tg-star: #ffc532;
  --tg-header-bg: rgba(23, 33, 43, .92);
  --tg-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .22);
  --tg-shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tg-bg: #17212b;
    --tg-surface: #232e3c;
    --tg-surface-2: #2b3949;
    --tg-field: #17212b;
    --tg-text: #f5f5f5;
    --tg-hint: #8b9cad;
    --tg-accent: #6ab3f3;
    --tg-button: #5288c1;
    --tg-button-hover: #5f96d0;
    --tg-button-text: #ffffff;
    --tg-border: #2f3d4c;
    --tg-field-border: #3a4b5d;
    --tg-success: #5fc96b;
    --tg-warning: #f0b429;
    --tg-destructive: #ec3942;
    --tg-star: #ffc532;
    --tg-header-bg: rgba(23, 33, 43, .92);
    --tg-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .22);
    --tg-shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);
  }
}

/* ---------- Base ---------- */
html, body { background: var(--tg-bg); }
body { color: var(--tg-text); line-height: 1.6; }

/* style.css used to capitalize every word sitewide */
* { text-transform: none; }

::selection { background: color-mix(in srgb, var(--tg-accent) 25%, transparent); }
::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--tg-hint) 60%, transparent); }

/* Leftovers from the old dark design: glow blobs, loader, click ripple */
.shadow, .loader, .ripple { display: none !important; }

/* ---------- Header ---------- */
.header {
  background: var(--tg-header-bg);
  border-bottom: 1px solid var(--tg-border);
  justify-content: space-between;
  padding: 14px max(20px, calc((100% - var(--tg-max)) / 2 + 20px));
}
.logo i { color: var(--tg-brand); filter: none; }
.logo:hover i { filter: none; }
.logo span, .logo:hover span {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--tg-text);
}
.nav { margin-left: auto; }
.nav-links a { color: var(--tg-hint); font-weight: 600; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--tg-accent); }
.hamburger span { background: var(--tg-text); }

#header-cta-btn {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--tg-btn-r);
  background: var(--tg-button);
  color: var(--tg-button-text) !important;
  font-size: .92rem;
}
#header-cta-btn:hover { background: var(--tg-button-hover); }

.side-menu { background: var(--tg-surface); border-right: 1px solid var(--tg-border); }
.side-menu ul li a, .side-menu-close, .side-menu p { color: var(--tg-text); }
.side-menu ul li:hover { background: var(--tg-accent-soft); }

/* ---------- Footer ---------- */
.footer { background: var(--tg-bg); border-top: 1px solid var(--tg-border); color: var(--tg-hint); padding: 36px 20px 40px; }
.footer p { color: var(--tg-hint); }
.footer .social-icons a { color: var(--tg-hint); }
.footer .social-icons a:hover, .footer a.footer-link, .footer-link { color: var(--tg-accent); }
.site-footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 14px 0; }
.site-footer-nav a { color: var(--tg-hint); text-decoration: none; }
.site-footer-nav a:hover { color: var(--tg-accent); }

/* ---------- Blog articles: baseline card (page styles can refine it) ---------- */
.blog-post {
  max-width: 880px;
  margin: 16px auto 40px;
  padding: 32px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  box-shadow: var(--tg-shadow);
  color: var(--tg-text);
}
@media (max-width: 640px) {
  .blog-post { padding: 20px 16px; margin: 8px 8px 32px; }
}

/* ---------- Article sponsor sidebar (sponsors.js) ---------- */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px 40px;
  align-items: start;
}
.post-layout > .blog-post { margin: 0; max-width: none; width: 100%; }
.post-sidebar { min-width: 0; }
.sp-sticky { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 10px; }
.sp-label {
  margin: 0 0 2px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tg-hint);
}
.sp-offer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--tg-accent) 55%, transparent);
  background: var(--tg-accent-soft);
  color: var(--tg-accent);
  text-decoration: none;
  transition: background .2s;
}
.sp-offer:hover { background: color-mix(in srgb, var(--tg-accent) 18%, transparent); text-decoration: none; }
.sp-offer strong { font-size: 1.02rem; }
.sp-offer span { font-size: .9rem; color: var(--tg-text); opacity: .85; }
.sp-offer .sp-price { font-weight: 800; color: var(--tg-accent); opacity: 1; }
.sp-list { display: flex; flex-direction: column; gap: 10px; }
.sp-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
  color: var(--tg-text);
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.sp-card:hover { border-color: color-mix(in srgb, var(--tg-accent) 45%, var(--tg-border)); transform: translateY(-1px); text-decoration: none; }
.sp-card img, .sp-initial {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--tg-surface-2);
}
.sp-initial { display: grid; place-items: center; font-weight: 800; color: var(--tg-accent); }
.sp-initial--empty { background: transparent; border: 1.5px dashed var(--tg-field-border); color: var(--tg-hint); font-size: .8rem; }
.sp-card strong { display: block; font-size: .95rem; line-height: 1.25; }
.sp-card small { display: block; color: var(--tg-hint); font-size: .8rem; line-height: 1.3; }
.sp-card--empty { border-style: dashed; background: transparent; }
.sp-card--empty strong { color: var(--tg-hint); }
.sp-house {
  margin-top: 6px;
  padding: 16px;
  border-radius: 14px;
  background: var(--tg-surface);
  border: 1px solid var(--tg-border);
}
.sp-house p { margin: 0 0 10px; color: var(--tg-hint); font-size: .88rem; line-height: 1.45; }
.sp-house .sp-house-title { color: var(--tg-text); font-weight: 800; font-size: .98rem; margin-bottom: 4px; }
.sp-house-title i { color: var(--tg-brand); margin-right: 4px; }
.sp-house-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: var(--tg-btn-r);
  background: var(--tg-button);
  color: var(--tg-button-text) !important;
  font-weight: 800;
  font-size: .92rem;
  text-decoration: none !important;
}
.sp-house-btn:hover { background: var(--tg-button-hover); }

@media (max-width: 1100px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .sp-sticky { position: static; }
  .post-sidebar { max-width: 880px; width: 100%; margin: 0 auto; }
  .sp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 640px) {
  .post-layout { padding: 8px 8px 32px; gap: 20px; }
  .post-layout > .blog-post { padding: 20px 16px; }
}

/* ---------- Call-to-action callouts on blog / inner pages ----------
   One consistent look (soft Telegram-blue tint) for the CTA boxes that each
   page used to style differently, readable in both themes. */
.cta-box, .blog-cta, .cta-block, .projects-hero {
  background: color-mix(in srgb, var(--tg-accent) 10%, var(--tg-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--tg-accent) 28%, var(--tg-border)) !important;
  color: var(--tg-text) !important;
}
:is(.cta-box, .blog-cta, .cta-block, .projects-hero) :is(h1, h2, h3, h4, strong) { color: var(--tg-text) !important; }
:is(.cta-box, .blog-cta, .cta-block, .projects-hero) p { color: var(--tg-hint) !important; }
:is(.cta-box, .blog-cta, .cta-block, .projects-hero) p strong { color: var(--tg-text) !important; }
:is(.cta-box, .blog-cta, .cta-block, .projects-hero) a:not([class*="btn"]) { color: var(--tg-accent) !important; }

/* Filled buttons inside articles: generic ".blog-post a" link colours used to
   override them (green text on the green WhatsApp button) */
a.cta-btn-primary, .blog-post a.cta-btn-primary, a.cta-btn-primary:hover { color: #fff !important; }
.cta-box a.btn, .blog-post .cta-box a.btn { background: var(--tg-button) !important; color: var(--tg-button-text) !important; }

/* ---------- Generic form controls (pages without their own styles) ---------- */
input, textarea, select {
  color: var(--tg-text);
  background-color: var(--tg-field);
  border-color: var(--tg-field-border);
}
input::placeholder, textarea::placeholder { color: var(--tg-hint); opacity: .8; }

/* ---------- Contact launcher (injected sitewide by script.js) ---------- */
#wa-float-btn { display: none !important; }

.tg-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10001;
  width: 64px;
  height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tg-button);
  color: var(--tg-button-text);
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25), 0 0 0 10px var(--tg-accent-soft);
  transition: transform .2s, background .2s;
}
.tg-launcher:hover { transform: scale(1.05); background: var(--tg-button-hover); }
.tg-launcher:focus-visible { outline: 3px solid var(--tg-accent); outline-offset: 3px; }
.tg-launcher .fa-xmark { display: none; }
.tg-launcher[aria-expanded="true"] .fa-xmark { display: block; }
.tg-launcher[aria-expanded="true"] .fa-comment { display: none; }

.tg-pop {
  position: fixed;
  right: 24px;
  bottom: 102px;
  z-index: 10000;
  width: min(360px, calc(100vw - 32px));
  padding: 22px 14px 14px;
  background: var(--tg-surface);
  color: var(--tg-text);
  border: 1px solid var(--tg-border);
  border-radius: 22px;
  box-shadow: var(--tg-shadow-lg);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.97);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.tg-pop.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s ease, transform .18s ease;
}
.tg-pop-title { font-size: 1.15rem; font-weight: 800; padding: 0 10px 12px; margin: 0; color: var(--tg-text); }
.tg-pop-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  border-radius: 14px;
  color: var(--tg-text);
  text-decoration: none;
  transition: background .15s;
}
.tg-pop-item + .tg-pop-item { border-top: 1px solid var(--tg-border); }
.tg-pop-item:hover, .tg-pop-item:focus-visible { background: var(--tg-hover); outline: none; text-decoration: none; }
.tg-pop-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 1.35rem;
}
.tg-pop-icon--wa { background: var(--tg-wa); }
.tg-pop-icon--tg { background: var(--tg-brand); }
.tg-pop-icon--form { background: var(--tg-surface-2); color: var(--tg-accent); font-size: 1.15rem; }
.tg-pop-item strong { display: block; font-size: 1rem; line-height: 1.3; }
.tg-pop-item small { color: var(--tg-hint); font-size: .88rem; }

@media (max-width: 640px) {
  .header { padding: 12px 16px; }
  #header-cta-btn { height: 38px; padding: 0 12px; font-size: .82rem; margin-left: auto; margin-right: 12px; }
  .tg-launcher { right: 16px; bottom: 16px; width: 58px; height: 58px; }
  .tg-pop { right: 16px; bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}