/*
Theme Name: MacSanDiego
Theme URI: https://macsandiego.com
Author: MacSanDiego.com
Description: Custom theme for MacSanDiego.com — Apple/Mac consulting, support and training across Southern California.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: macsandiego
*/

:root{
  --ink: #0E2430;
  --panel: #12303F;
  --panel-2: #16394A;
  --paper: #F4F6F5;
  --paper-dim: #C7D3D6;
  --coral: #FF6A4D;
  --coral-dim: #C9502F;
  --aluminum: #AEC0C6;
  --trace: #4E7C8C;
  --line: rgba(244,246,245,0.14);
  --radius: 2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk', sans-serif;
  letter-spacing:-0.01em;
  font-weight:600;
}
.mono{ font-family:'JetBrains Mono', monospace; }
a{color:inherit; text-decoration:none;}
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
::selection{ background:var(--coral); color:var(--ink); }
:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; }

/* ---------- header ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,36,48,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  max-width:1180px; margin:0 auto;
}
.logo{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:1.15rem;
  display:flex; align-items:center; gap:10px;
}
.logo .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 4px rgba(255,106,77,0.15);
}
.logo .sub{ color:var(--paper-dim); font-weight:400; font-size:0.75rem; margin-left:4px; }
nav.links{ display:flex; gap:32px; font-size:0.92rem; color:var(--paper-dim); list-style:none; }
nav.links a:hover{ color:var(--paper); }
.cta-btn{
  background:var(--coral);
  color:var(--ink);
  font-weight:600;
  font-size:0.88rem;
  padding:11px 20px;
  border-radius:var(--radius);
  border:none;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
  display:inline-block;
}
.cta-btn:hover{ background:#ff7f65; transform:translateY(-1px); }
.cta-ghost{
  border:1px solid var(--line);
  color:var(--paper);
  padding:10px 19px;
  border-radius:var(--radius);
  font-size:0.88rem;
  font-weight:500;
  display:inline-block;
}
.cta-ghost:hover{ border-color:var(--aluminum); }
.menu-toggle{ display:none; background:none; border:none; color:var(--paper); font-size:1.4rem; cursor:pointer; }

/* ---------- hero ---------- */
.hero{ position:relative; padding:110px 0 90px; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.76rem; color:var(--coral);
  letter-spacing:0.06em; text-transform:uppercase; margin-bottom:22px;
}
.eyebrow::before{ content:""; width:16px; height:1px; background:var(--coral); }
.hero h1{ font-size:clamp(2.4rem, 4.4vw, 3.6rem); line-height:1.06; margin-bottom:22px; }
.hero h1 em{ font-style:normal; color:var(--coral); }
.hero p.lead{ font-size:1.08rem; color:var(--paper-dim); max-width:480px; margin-bottom:34px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:38px; }
.hero-meta{ display:flex; gap:28px; flex-wrap:wrap; font-family:'JetBrains Mono', monospace; font-size:0.76rem; color:var(--paper-dim); }
.hero-meta b{ color:var(--paper); font-weight:600; }

.device-panel{
  position:relative;
  background:linear-gradient(155deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:6px;
  padding:26px;
  min-height:360px;
}
.ticket-stub{
  font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--paper-dim);
  display:flex; justify-content:space-between; border-bottom:1px dashed var(--line);
  padding-bottom:14px; margin-bottom:18px;
}
.ticket-stub .status{
  color:var(--coral); border:1px solid var(--coral); padding:2px 8px;
  border-radius:20px; font-size:0.65rem; letter-spacing:0.05em;
}
.scanline{
  position:relative; height:180px; border-radius:4px;
  background:repeating-linear-gradient(180deg, rgba(174,192,198,0.05) 0px, rgba(174,192,198,0.05) 1px, transparent 1px, transparent 6px);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; margin-bottom:18px;
}
.scanline::after{
  content:""; position:absolute; left:0; right:0; height:2px;
  background:var(--coral); box-shadow:0 0 14px 2px rgba(255,106,77,0.6);
  animation:scan 2.6s ease-in-out infinite;
}
@keyframes scan{ 0%{ top:0%; opacity:0.9;} 50%{ top:96%; opacity:0.9;} 100%{ top:0%; opacity:0.9;} }
.device-svg{ width:64%; opacity:0.92; }
.diag-lines{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--aluminum); display:grid; gap:6px;}
.diag-lines span b{ color:var(--paper); }

.trace-divider{ position:relative; height:64px; overflow:hidden; }
.trace-divider svg{ width:100%; height:100%; display:block; }

section{ padding:88px 0; border-bottom:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head .eyebrow{ margin-bottom:14px; }
.section-head h2{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:16px; }
.section-head p{ color:var(--paper-dim); font-size:1.02rem; }

.tickets{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.ticket{ background:var(--ink); padding:34px; position:relative; }
.ticket .tnum{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--coral); display:block; margin-bottom:14px; letter-spacing:0.04em; }
.ticket h3{ font-size:1.28rem; margin-bottom:12px; }
.ticket p{ color:var(--paper-dim); font-size:0.94rem; margin-bottom:16px; }
.ticket ul{ list-style:none; display:grid; gap:8px; }
.ticket li{ font-size:0.86rem; color:var(--aluminum); padding-left:16px; position:relative; }
.ticket li::before{ content:"—"; position:absolute; left:0; color:var(--trace); }

.classes-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.class-card{ border:1px solid var(--line); padding:28px 26px; border-radius:4px; background:var(--panel); transition:border-color .15s ease, transform .15s ease; }
.class-card:hover{ border-color:var(--coral); transform:translateY(-3px); }
.class-card .level{ font-family:'JetBrains Mono', monospace; font-size:0.68rem; color:var(--aluminum); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px; display:block; }
.class-card h3{ font-size:1.1rem; margin-bottom:10px; }
.class-card p{ font-size:0.88rem; color:var(--paper-dim); }

.area-wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.area-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.area-list div{ font-family:'JetBrains Mono', monospace; font-size:0.86rem; color:var(--paper-dim); padding:10px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; }
.area-list div b{ color:var(--paper); font-weight:500; font-family:'Inter'; }
.area-list div span{ color:var(--coral); }

.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testi{ background:var(--panel); border:1px solid var(--line); padding:28px; border-radius:4px; position:relative; }
.testi .stamp{ position:absolute; top:20px; right:20px; font-family:'JetBrains Mono', monospace; font-size:0.62rem; color:var(--trace); border:1px solid var(--trace); padding:3px 8px; border-radius:20px; transform:rotate(6deg); }
.testi p.quote{ font-size:0.95rem; color:var(--paper); margin-bottom:18px; }
.testi .who{ font-size:0.8rem; color:var(--paper-dim); font-family:'JetBrains Mono', monospace; }

.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:0.78rem; color:var(--paper-dim); font-family:'JetBrains Mono', monospace; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.04em; }
.field input, .field select, .field textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--paper);
  padding:12px 14px; border-radius:3px; font-family:'Inter', sans-serif; font-size:0.94rem;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--coral); }
.field textarea{ resize:vertical; min-height:100px; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden; }
.g-recaptcha{ transform-origin:0 0; }
.contact-info{ display:grid; gap:26px; align-content:start; }
.contact-info .item{ border-left:2px solid var(--coral); padding-left:18px; }
.contact-info .item .k{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; color:var(--aluminum); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; display:block; }
.contact-info .item .v{ font-size:1.02rem; }
.form-status{ font-size:0.85rem; color:var(--coral); margin-top:14px; font-family:'JetBrains Mono', monospace; min-height:1em; }
.form-status.success{ color:#8FD19E; }

footer.site-footer{ padding:44px 0; }
.foot-wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.foot-wrap .logo{ font-size:1rem; }
footer p{ color:var(--paper-dim); font-size:0.82rem; }
footer p a{ color:var(--paper-dim); text-decoration:underline; text-underline-offset:2px; }
footer p a:hover{ color:var(--coral); }

.whatsapp-float{
  position:fixed;
  bottom:26px;
  right:26px;
  z-index:60;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 10px 22px rgba(0,0,0,0.4);
}
@media (max-width:900px){
  .whatsapp-float{ width:52px; height:52px; bottom:18px; right:18px; }
}

@media (max-width:900px){
  .hero-grid, .area-wrap, .contact-wrap{ grid-template-columns:1fr; }
  .tickets{ grid-template-columns:1fr; }
  .classes-grid, .testi-grid{ grid-template-columns:1fr; }
  nav.links{ display:none; }
  .menu-toggle{ display:block; }
  .area-list{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .scanline::after{ animation:none; top:50%; }
  html{ scroll-behavior:auto; }
}