/*
Theme Name: Azarco Electronics
Theme URI: https://azarco.net
Author: WebVue
Author URI: https://webvue.com.lb
Description: Quality-driven low-current systems integrator website for Azarco Electronics s.a.r.l. Photography-first Apple-style design. Auto-creates all site pages on activation and routes the contact form through wp_mail() — compatible with WP Mail SMTP and FluentSMTP.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
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: azarco
*/

/* ============================================================
   Design tokens (Apple design system — inlined)
   ============================================================ */
:root {
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --color-ink: #1d1d1f;
  --color-canvas: #ffffff;
  --color-canvas-parchment: #f5f5f7;
  --color-hairline: #e0e0e0;
  --color-border-translucent: rgba(0, 0, 0, 0.08);

  --az-accent: #e12338;
}

/* ============================================================
   Resets
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #ffffff; }
body {
  font-family: var(--font-text);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--az-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--az-accent); color: #fff; }

/* Keep the WP admin bar from covering the fixed header */
.admin-bar .az-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .az-header { top: 46px; } }

/* ============================================================
   Interactive states (ported from DC style-hover/focus/active)
   ============================================================ */
.az-cta { transition: opacity .2s ease, transform .2s ease; }
.az-cta:hover { opacity: .88; text-decoration: none; color: #fff; }
.az-cta:active { transform: scale(.96); }

.az-cta-ghost { transition: transform .2s ease, opacity .2s ease; }
.az-cta-ghost:hover { text-decoration: underline; }

.az-textlink { transition: color .16s ease; }
.az-textlink:hover { text-decoration: underline; }

.az-chip { transition: background .18s ease, color .18s ease; }
.az-chip:hover { background: var(--az-accent); color: #fff; }

.az-partner { transition: border-color .18s ease; }
.az-partner:hover { border-color: #c7c7cc; }

.az-navlink { transition: color .16s ease; }
.az-navlink:hover { color: #1d1d1f; text-decoration: none; }
.az-mobile-link { transition: color .16s ease; }
.az-mobile-link:hover { color: var(--az-accent); text-decoration: none; }

.az-input { transition: border-color .16s ease; }
.az-input:focus { border-color: var(--az-accent); }

.az-whatsapp { transition: transform .2s ease; }
.az-whatsapp:hover { transform: scale(1.06); }
.az-whatsapp:active { transform: scale(.95); }

/* ============================================================
   Header / nav
   ============================================================ */
.az-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 68px;
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border-translucent);
}
.az-nav-desktop { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 38px); }
.az-nav-toggle { display: none; }
@media (max-width: 979px) {
  .az-nav-desktop { display: none; }
  .az-nav-toggle {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 8px 2px;
  }
  .az-nav-toggle span { width: 22px; height: 1.5px; background: #1d1d1f; display: block; }
}

.az-mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: #fff;
  display: none; flex-direction: column; animation: azMenu .25s ease both;
}
body.az-menu-open { overflow: hidden; }
body.az-menu-open .az-mobile-menu { display: flex; }

/* ============================================================
   Services page helpers
   ============================================================ */
.az-rv { opacity: 0; transform: translateY(32px); transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.az-rv.in { opacity: 1; transform: none; }
.az-d1 { transition-delay: .12s; }
.az-d2 { transition-delay: .26s; }
.az-d3 { transition-delay: .4s; }
.az-ri { color: rgba(255,255,255,.5); transition: color .28s ease, transform .28s ease; text-decoration: none; }
.az-ri:hover { text-decoration: none; }
.az-ri.on { color: var(--az-accent); transform: scale(1.18); font-weight: 700; }
@media (max-width: 980px) { .az-rail { display: none !important; } }

/* ============================================================
   Home command-console responsive
   ============================================================ */
@media (max-width: 760px) {
  #az-console { grid-template-columns: 1fr !important; min-height: 0 !important; }
  #az-console > div { border-left: none !important; border-right: none !important; }
  #az-console > div + div { border-top: 1px solid rgba(255,255,255,.06) !important; }
}

/* ============================================================
   Preloader / page-transition overlay
   ============================================================ */
#az-pre {
  position: fixed; inset: 0; z-index: 99999; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; transition: opacity .55s ease;
}
#az-pre.az-hide { opacity: 0; pointer-events: none; }
#az-pre .az-logo-wrap { position: relative; overflow: hidden; }
#az-pre img { height: 40px; width: auto; display: block; }
#az-pre.az-anim img { animation: azLogoIn .8s cubic-bezier(.22,.61,.36,1) both; }
#az-pre .az-shine { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); }
#az-pre.az-anim .az-shine { animation: azShine 1.3s ease .45s both; }
#az-pre .az-track { width: 150px; height: 2px; border-radius: 2px; background: #e5e5e7; overflow: hidden; }
#az-pre .az-fill { height: 100%; width: 0; border-radius: 2px; background: var(--az-accent); }
#az-pre.az-anim .az-fill { animation: azFill 1.15s cubic-bezier(.4,0,.2,1) .1s both; }

main > section[data-az-r] { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
main > section[data-az-r].az-in { opacity: 1; transform: none; }

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes azReveal { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes azGlowA { 0% { transform:translate(0,0) scale(1); } 100% { transform:translate(22%,16%) scale(1.3); } }
@keyframes azGlowB { 0% { transform:translate(0,0) scale(1.08); } 100% { transform:translate(-20%,-14%) scale(1.32); } }
@keyframes azGrid { from { background-position:0 0; } to { background-position:0 60px; } }
@keyframes azScan { 0% { transform:translateY(-100%); opacity:0; } 8% { opacity:1; } 92% { opacity:1; } 100% { transform:translateY(1300%); opacity:0; } }
@keyframes azTick { 0%,100% { transform:scaleY(.35); } 50% { transform:scaleY(1); } }
@keyframes azRead { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@keyframes azSweep { to { transform:rotate(360deg); } }
@keyframes azFeed { 0%,100% { opacity:.55; } 50% { opacity:.9; } }
@keyframes azBlip { 0%,100% { transform:scale(.6); opacity:.5; } 50% { transform:scale(1); opacity:1; } }
@keyframes azMenu { from { opacity:0; } to { opacity:1; } }
@keyframes azKen { 0% { transform:scale(1.02); } 100% { transform:scale(1.14); } }
@keyframes azFloat { 0% { transform:translateY(-120%); opacity:0; } 25% { opacity:1; } 100% { transform:translateY(120%); opacity:0; } }
@keyframes azLogoIn { from { opacity:0; transform:scale(.9) translateY(6px); } to { opacity:1; transform:none; } }
@keyframes azShine { from { left:-40%; } to { left:120%; } }
@keyframes azFill { from { width:0; } to { width:100%; } }

@media (prefers-reduced-motion: reduce) {
  [data-az-motion] { animation: none !important; }
  .az-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  main > section[data-az-r] { opacity: 1 !important; transform: none !important; }
}