/*
Theme Name: CloudHomeNet
Theme URI: https://wp.adamhomenet.com
Description: Dark, modern theme for Adam's HA WordPress — inspired by claudeonbinarylane.com
Author: Claude by Anthropic
Version: 1.2
License: MIT
*/

/* === RESET & BASE === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{background:#0a0a0a !important}

body,
body.single,
body.home,
body.page,
body.archive{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  min-height:100vh;
  background:#0a0a0a !important;
  color:#e5e5e5 !important;
  overflow-x:hidden;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

a{color:#f59e0b;text-decoration:none;transition:color .2s}
a:hover{color:#fbbf24}

/* === BACKGROUND GLOWS === */
body::before,body::after{
  content:'';position:fixed;width:600px;height:600px;border-radius:50%;
  filter:blur(120px);opacity:.12;z-index:0;pointer-events:none
}
body::before{top:-200px;right:-100px;background:#d97706}
body::after{bottom:-200px;left:-100px;background:#7c3aed}

/* === SITE HEADER === */
.site-header{
  position:relative;z-index:1;padding:2.5rem 1rem 1.5rem;text-align:center;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:transparent
}
.header-container{max-width:780px;margin:0 auto}

.site-brand{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:.5rem}
.site-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  background:rgba(217,119,6,.1);border:1px solid rgba(217,119,6,.3);
  border-radius:50%;font-size:.75rem;font-weight:700;color:#f59e0b;
  letter-spacing:.05em
}
.site-title-link{text-decoration:none !important}
h1.site-title,
.site-title{
  font-size:1.8rem !important;font-weight:700 !important;
  background:linear-gradient(135deg,#fff 0%,#a3a3a3 100%) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;
  background-clip:text !important;line-height:1.3 !important;
  margin:0 !important;padding:0 !important;border:none !important
}
.site-tagline{color:#737373;font-size:.85rem;margin-top:.25rem}

/* === NAVIGATION === */
.site-nav{
  margin-top:1rem;display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap
}
.nav-link{
  color:#737373 !important;font-size:.85rem;font-weight:500;
  transition:color .2s;text-decoration:none
}
.nav-link:hover,.nav-link.active{color:#f59e0b !important}

/* === MAIN CONTENT === */
.site-main{position:relative;z-index:1;max-width:780px;margin:0 auto;padding:3rem 2rem}

/* === HOME HERO === */
.home-hero{text-align:center;padding:2rem 0 2.5rem;margin-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.06)}
.hero-title{
  font-size:2rem !important;font-weight:700 !important;
  background:linear-gradient(135deg,#fff 0%,#d4d4d4 100%) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;
  background-clip:text !important;margin-bottom:.5rem !important
}
.hero-subtitle{color:#737373;font-size:1rem;max-width:500px;margin:0 auto 2rem;font-weight:300}
.hero-stats{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap}
.stat-item{text-align:center}
.stat-number{display:block;font-size:2rem;font-weight:700;color:#f59e0b;line-height:1.2}
.stat-label{font-size:.75rem;color:#525252;text-transform:uppercase;letter-spacing:.06em;font-weight:500}

/* === POST CARDS (HOME) === */
.posts-container{position:relative;z-index:1}
.posts-grid{display:grid;gap:1.5rem}
article.post-card,
.post-card{
  background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:12px;padding:2rem;
  transition:all .2s
}
.post-card:hover{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.12) !important;
  transform:translateY(-2px)
}
.post-card-content{position:relative}
h2.post-card-title,
.post-card-title{
  font-size:1.4rem !important;font-weight:700 !important;margin-bottom:.5rem !important;
  background:linear-gradient(135deg,#fff 0%,#d4d4d4 100%) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;
  background-clip:text !important
}
.post-card-title a{
  -webkit-text-fill-color:transparent !important;
  background:linear-gradient(135deg,#fff 0%,#d4d4d4 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  text-decoration:none !important
}
.post-meta{font-size:.8rem;color:#525252 !important;margin-bottom:1rem}
.post-meta time,.post-meta .reading-time,.post-meta .post-author{color:#525252}
.post-excerpt,.post-excerpt p{color:#a3a3a3 !important;font-size:.95rem;font-weight:300}
.read-more{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  color:#f59e0b !important;font-size:.85rem;font-weight:500
}

/* === SINGLE POST === */
article.single-post,
.single-post{
  background:rgba(255,255,255,.02) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:16px;padding:3rem;margin-bottom:2rem
}
.post-header{margin-bottom:2rem}
h1.post-title,
.post-title{
  font-size:2.2rem !important;font-weight:700 !important;line-height:1.2 !important;
  margin-bottom:1rem !important;
  background:linear-gradient(135deg,#fff 0%,#a3a3a3 100%) !important;
  -webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;
  background-clip:text !important
}
.single-post .post-meta{
  margin-bottom:2rem;padding-bottom:1.5rem;
  border-bottom:1px solid rgba(255,255,255,.06)
}

/* === ENTRY CONTENT === */
.entry-content{font-size:1rem;line-height:1.8;color:#d4d4d4 !important;font-weight:300}
.entry-content p{color:#d4d4d4 !important;margin-bottom:1.2rem}
.entry-content .lead-text{font-size:1.1rem;color:#e5e5e5 !important;font-weight:300;line-height:1.9}

.entry-content h2{
  font-size:1.5rem !important;font-weight:600 !important;color:#fff !important;
  margin:2.5rem 0 1rem !important;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.06);
  -webkit-text-fill-color:#fff !important
}
.entry-content h3{
  font-size:1.15rem !important;font-weight:600 !important;color:#e5e5e5 !important;
  margin:1.5rem 0 .75rem !important;
  -webkit-text-fill-color:#e5e5e5 !important
}
.entry-content strong,.entry-content b{color:#fff !important;font-weight:500}
.entry-content em{color:#a78bfa !important;font-style:italic}
.entry-content ul,.entry-content ol{margin:1rem 0 1.5rem 1.5rem;color:#a3a3a3 !important}
.entry-content li{margin-bottom:.5rem;color:#a3a3a3 !important}

.entry-content code{
  font-family:'JetBrains Mono',monospace !important;font-size:.85em;
  padding:.15em .4em;background:rgba(245,158,11,.1) !important;
  border:1px solid rgba(245,158,11,.2) !important;border-radius:4px;
  color:#f59e0b !important
}
.entry-content pre{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;border-radius:8px;
  padding:1.25rem;overflow-x:auto;margin:1.5rem 0;
  font-family:'JetBrains Mono',monospace;font-size:.85rem;line-height:1.6;
  color:#a3a3a3 !important
}
.entry-content pre code{
  background:none !important;border:none !important;padding:0;
  color:#a3a3a3 !important;font-size:inherit
}
.entry-content blockquote{
  border-left:3px solid #d97706;padding:1rem 1.5rem;margin:1.5rem 0;
  background:rgba(217,119,6,.05) !important;border-radius:0 8px 8px 0;
  color:#a3a3a3 !important;font-style:italic
}
.entry-content blockquote p{color:#a3a3a3 !important}

/* Tables */
.entry-content table{
  width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem;
  border:1px solid rgba(255,255,255,.08)
}
.entry-content thead{background:rgba(255,255,255,.04) !important}
.entry-content th{
  text-align:left;padding:.6rem .75rem;
  color:#a3a3a3 !important;font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em;
  background:rgba(255,255,255,.04) !important;
  border-bottom:1px solid rgba(255,255,255,.1) !important
}
.entry-content td{
  padding:.55rem .75rem;color:#a3a3a3 !important;
  border-bottom:1px solid rgba(255,255,255,.04) !important
}
.entry-content tr:hover td{background:rgba(255,255,255,.02)}

.entry-content img{max-width:100%;height:auto;border-radius:8px;margin:1.5rem 0}
.entry-content hr,
.entry-content .wp-block-separator{
  border:none !important;border-top:1px solid rgba(255,255,255,.08) !important;margin:2rem 0
}

/* === HA FEATURE BOXES === */
.ha-feature{
  background:rgba(74,222,128,.05) !important;
  border:1px solid rgba(74,222,128,.15) !important;
  border-radius:10px;padding:1.5rem;margin:1.5rem 0
}
.ha-feature h3{
  border-top:none !important;margin-top:0 !important;padding-top:0 !important;
  color:#4ade80 !important;-webkit-text-fill-color:#4ade80 !important;
  font-size:1.1rem !important
}
.ha-feature p{color:#a3a3a3 !important}
.ha-feature strong{color:#4ade80 !important}
.ha-feature table{margin-top:1rem}

/* Warning box */
.warning-box{
  background:rgba(248,113,113,.05) !important;
  border:1px solid rgba(248,113,113,.15) !important;
  border-radius:10px;padding:1.5rem;margin:1.5rem 0
}
.warning-box p{color:#a3a3a3 !important}
.warning-box strong{color:#f87171 !important}

/* === POST FOOTER === */
.post-footer{
  margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.06)
}
.post-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.post-navigation{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* === SITE FOOTER === */
.site-footer{
  position:relative;z-index:1;text-align:center;padding:2.5rem 1.5rem;
  border-top:1px solid rgba(255,255,255,.06);
  background:transparent !important
}
.footer-container{max-width:780px;margin:0 auto}
.footer-info{margin:1rem 0}
.footer-text{color:#525252 !important;font-size:.8rem;margin-bottom:.3rem}
.footer-text a{color:#737373;border-bottom:1px solid rgba(115,115,115,.3)}
.footer-text a:hover{color:#e5e5e5}
.footer-serving{color:#404040 !important;font-size:.75rem;margin-top:.75rem;font-family:'JetBrains Mono',monospace}
.footer-serving code{
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.15);
  padding:.1em .4em;border-radius:3px;color:#d97706;font-size:.75rem
}
.footer-copy{color:#404040 !important;font-size:.75rem;margin-top:1rem}

/* Tech badges */
.tech-stack{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.tech-badge{
  display:inline-block;padding:.2rem .6rem;font-size:.7rem;font-weight:500;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:999px;color:#737373 !important;
  letter-spacing:.02em
}

/* === RESPONSIVE === */
@media(max-width:768px){
  .site-main{padding:2rem 1.25rem}
  .single-post{padding:1.5rem}
  h1.post-title,.post-title{font-size:1.6rem !important}
  .entry-content h2{font-size:1.2rem !important}
  .hero-stats{gap:1.5rem}
  .stat-number{font-size:1.5rem}
  .entry-content table{font-size:.8rem}
  .entry-content th,.entry-content td{padding:.4rem .5rem}
}

@media(max-width:480px){
  .site-header{padding:1.5rem 1rem 1rem}
  h1.site-title,.site-title{font-size:1.3rem !important}
  .hero-title{font-size:1.5rem !important}
  .hero-stats{gap:1rem}
}

/* === WORDPRESS OVERRIDES === */
.wp-element-button{cursor:pointer}
.aligncenter{clear:both;display:block;margin:0 auto}
figure{margin:0 0 1em}

/* ==================== ANIMATED DIAGRAMS ==================== */

/* Container */
.anim-container{
  position:relative;background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);border-radius:16px;
  padding:24px;overflow:hidden;margin:2rem 0
}
.anim-title{
  text-align:center;font-size:11px;font-weight:600;color:#525252;
  text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px
}
.anim-svg{width:100%;height:auto}

/* Keyframes */
@keyframes serverPulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes dataFlow{0%{stroke-dashoffset:20}100%{stroke-dashoffset:0}}

.server-active{animation:serverPulse 2s ease-in-out infinite}
.traffic-arrow{stroke-dasharray:4 3;animation:dataFlow .6s linear infinite}
.flow-line{stroke-dasharray:6 4;animation:dataFlow .8s linear infinite}

/* === FAILURE SIMULATION === */
.bne-group{animation:bneFailRecover 10s ease-in-out infinite}
@keyframes bneFailRecover{
  0%,25%{opacity:1;filter:none}
  35%,65%{opacity:.12;filter:grayscale(1)}
  75%,100%{opacity:1;filter:none}
}
.bne-status{animation:bneStatusAnim 10s ease-in-out infinite}
@keyframes bneStatusAnim{0%,25%{fill:#4ade80}30%,70%{fill:#ef4444}75%,100%{fill:#4ade80}}
.syd-status{fill:#4ade80;animation:serverPulse 2s ease-in-out infinite}
.traffic-bne{animation:trafficBneFade 10s ease-in-out infinite}
@keyframes trafficBneFade{
  0%,25%{opacity:.6;stroke:#f59e0b}
  30%,70%{opacity:.05;stroke:#ef4444}
  75%,100%{opacity:.6;stroke:#f59e0b}
}
.traffic-syd{animation:trafficSydBoost 10s ease-in-out infinite}
@keyframes trafficSydBoost{
  0%,25%{opacity:.6;stroke-width:1.5}
  35%,65%{opacity:1;stroke-width:2.5}
  75%,100%{opacity:.6;stroke-width:1.5}
}
.repl-line-anim{animation:replFade 10s ease-in-out infinite}
@keyframes replFade{0%,25%{opacity:.5}30%,70%{opacity:.05}75%,100%{opacity:.5}}
.phase-label{animation:phaseLabelAnim 10s ease-in-out infinite}
@keyframes phaseLabelAnim{0%,25%{opacity:0}30%,70%{opacity:1}75%,100%{opacity:0}}
.restored-label{animation:restoredAnim 10s ease-in-out infinite}
@keyframes restoredAnim{0%,70%{opacity:0}80%,95%{opacity:1}100%{opacity:0}}
.user-connected{animation:serverPulse 2s ease-in-out infinite}

/* === LIVE MIGRATION === */
.moving-server{animation:serverMove 8s ease-in-out infinite}
@keyframes serverMove{0%,20%{transform:translate(0,0)}50%,70%{transform:translate(340px,0)}100%{transform:translate(0,0)}}
.backbone-flow{stroke-dasharray:8 4;animation:backboneAnim 8s ease-in-out infinite}
@keyframes backboneAnim{
  0%,15%{stroke-dashoffset:0;opacity:0}
  25%,70%{stroke-dashoffset:-200;opacity:.7}
  80%,100%{opacity:0}
}
.anycast-label{animation:anycastPulse 8s ease-in-out infinite}
@keyframes anycastPulse{0%,15%{opacity:0}25%,70%{opacity:1}80%,100%{opacity:0}}
.pkt-counter{animation:pktCount 8s ease-in-out infinite}
@keyframes pktCount{0%,40%{opacity:0}45%,55%{opacity:1}65%,100%{opacity:0}}
.city-from{animation:cityFromAnim 8s ease-in-out infinite}
@keyframes cityFromAnim{0%,20%{fill:#f59e0b}40%,70%{fill:#525252}85%,100%{fill:#f59e0b}}
.city-to{animation:cityToAnim 8s ease-in-out infinite}
@keyframes cityToAnim{0%,20%{fill:#525252}40%,70%{fill:#a78bfa}85%,100%{fill:#525252}}
.mig-status{animation:migStatusAnim 8s ease-in-out infinite;font-size:12px;font-weight:600}
@keyframes migStatusAnim{
  0%,15%{opacity:0}
  20%,25%{opacity:1;fill:#f59e0b}
  45%,55%{opacity:1;fill:#4ade80}
  70%,75%{opacity:1;fill:#4ade80}
  85%,100%{opacity:0}
}