/*
Theme Name: Orbit Glass
Theme URI: https://example.com
Author: Orbit
Description: An Apple/tech news theme styled after iOS 26's Liquid Glass design language — translucent frosted panels, concentric rounded corners and a soft ambient mesh background.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: orbit-glass
*/

:root{
  --bg:#F0F1F5;
  --bg-elev:#FAFAFC;
  --mesh-1:#CFE4FF;
  --mesh-2:#E6D8FF;
  --mesh-3:#FFE0EE;
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.85);
  --glass-shadow:0 8px 32px rgba(30,30,60,.10), 0 1px 0 rgba(255,255,255,.6) inset;
  --text-1:#1D1D1F;
  --text-2:#6E6E73;
  --text-3:#8E8E93;
  --hair:rgba(60,60,67,.12);
  --blue:#0A84FF; --blue-tint:#E7F2FF; --blue-ink:#0A5DC2;
  --purple:#BF5AF2; --purple-tint:#F4E9FE; --purple-ink:#8A2FCB;
  --teal:#20C4B8; --teal-tint:#E1F9F6; --teal-ink:#0F8A7E;
  --orange:#FF9F0A; --orange-tint:#FFF1DE; --orange-ink:#C8760A;
  --pink:#FF3B8D; --pink-tint:#FFE7F1; --pink-ink:#D62466;
  --r-outer:28px; --r-mid:20px; --r-inner:12px;
  --font-display:-apple-system,"SF Pro Display",Inter,"Helvetica Neue",sans-serif;
  --font-text:-apple-system,"SF Pro Text",Inter,"Helvetica Neue",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000; --bg-elev:#0A0A0C;
    --mesh-1:#122447; --mesh-2:#241238; --mesh-3:#3A0F26;
    --glass:rgba(28,28,32,.55); --glass-strong:rgba(30,30,34,.72);
    --glass-border:rgba(255,255,255,.14);
    --glass-shadow:0 8px 32px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset;
    --text-1:#F5F5F7; --text-2:#98989D; --text-3:#6E6E73;
    --hair:rgba(255,255,255,.12);
    --blue-tint:#0E2340; --blue-ink:#6FB2FF;
    --purple-tint:#2A1240; --purple-ink:#D6A6FA;
    --teal-tint:#0C2A26; --teal-ink:#6BE0D3;
    --orange-tint:#2E1F0A; --orange-ink:#FFC069;
    --pink-tint:#341122; --pink-ink:#FF8FBD;
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--text-1);font-family:var(--font-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;border-radius:var(--r-mid);}
ul{list-style:none;margin:0;padding:0;}

.mesh{position:relative;overflow:hidden;min-height:100vh;
  background:
    radial-gradient(circle at 15% 20%, var(--mesh-1) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, var(--mesh-2) 0%, transparent 50%),
    radial-gradient(circle at 60% 80%, var(--mesh-3) 0%, transparent 45%),
    var(--bg);
  background-size:180% 180%;
  animation:meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift{0%{background-position:0% 0%,100% 0%,50% 100%;}100%{background-position:20% 30%,80% 20%,40% 70%;}}
@media (prefers-reduced-motion: reduce){.mesh{animation:none;}}

.glass{background:var(--glass);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-border);border-radius:var(--r-outer);box-shadow:var(--glass-shadow);position:relative;overflow:hidden;}
.glass::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 48%, transparent 56%);
  transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none;}
.glass:hover::after{transform:translateX(120%);}
@media (prefers-color-scheme: dark){.glass::after{background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.10) 48%, transparent 56%);}}

.wrap{max-width:1100px;margin:0 auto;padding:0 20px;}

.nav-wrap{position:sticky;top:16px;z-index:50;padding:0 20px;}
.nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 10px 10px 22px;border-radius:999px;}
.brand{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));display:inline-block;}
.nav-links{display:flex;gap:4px;background:rgba(120,120,128,.12);padding:4px;border-radius:999px;}
.nav-links a{padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--text-2);transition:background .2s,color .2s;display:inline-block;}
.nav-links a.current-menu-item,.nav-links li.current-menu-item a,.nav-links a:hover{background:var(--glass-strong);color:var(--text-1);}
.nav-links li{display:inline;}
.nav-cta{padding:9px 18px;border-radius:999px;background:var(--text-1);color:var(--bg);font-size:14px;font-weight:600;white-space:nowrap;}

.hero{padding:64px 20px 40px;text-align:center;}
.hero-inner{max-width:760px;margin:0 auto;}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--blue-ink);background:var(--blue-tint);padding:6px 14px;border-radius:999px;}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:52px;line-height:1.08;letter-spacing:-.03em;margin:20px 0 16px;}
.hero p{font-size:19px;color:var(--text-2);max-width:560px;margin:0 auto;}

.rail{display:flex;gap:10px;overflow-x:auto;padding:28px 20px 8px;max-width:1100px;margin:0 auto;scrollbar-width:none;}
.rail::-webkit-scrollbar{display:none;}
.pill{flex:0 0 auto;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;border:1px solid var(--glass-border);white-space:nowrap;}
.pill.blue{background:var(--blue-tint);color:var(--blue-ink);}
.pill.purple{background:var(--purple-tint);color:var(--purple-ink);}
.pill.teal{background:var(--teal-tint);color:var(--teal-ink);}
.pill.orange{background:var(--orange-tint);color:var(--orange-ink);}
.pill.pink{background:var(--pink-tint);color:var(--pink-ink);}
.pill.active{background:var(--text-1);color:var(--bg);border-color:transparent;}

.grid{max-width:1100px;margin:0 auto;padding:24px 20px 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.card{padding:22px;border-radius:var(--r-outer);display:flex;flex-direction:column;gap:14px;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.card:hover{transform:translateY(-4px);}
.card .tag{align-self:flex-start;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;}
.card h2,.card h3{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0;line-height:1.25;}
.card p{font-size:14.5px;color:var(--text-2);margin:0;flex:1;}
.card .meta{font-size:13px;color:var(--text-3);display:flex;gap:10px;border-top:1px solid var(--hair);padding-top:12px;}

.single-wrap{max-width:760px;margin:0 auto;padding:20px 20px 100px;}
.single-head{padding:36px;margin-bottom:28px;}
.single-head .tag{display:inline-block;font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px;background:var(--blue-tint);color:var(--blue-ink);margin-bottom:14px;}
.single-head h1{font-family:var(--font-display);font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 14px;}
.single-head .meta{font-size:14px;color:var(--text-2);}
.entry-content{padding:36px;font-size:18px;line-height:1.7;}
.entry-content p{margin:0 0 20px;}
.entry-content p:first-of-type:first-letter{font-family:var(--font-display);font-size:64px;font-weight:800;float:left;line-height:.85;margin:6px 10px 0 0;color:var(--blue);}
.entry-content h2{font-family:var(--font-display);font-size:26px;font-weight:700;margin:32px 0 14px;letter-spacing:-.01em;}
.entry-content blockquote{margin:24px 0;padding:20px 24px;border-radius:var(--r-mid);background:var(--purple-tint);color:var(--purple-ink);font-weight:600;font-style:normal;}

.foot-wrap{padding:0 20px 20px;}
.foot{max-width:1100px;margin:0 auto;padding:36px 40px;border-radius:32px 32px var(--r-outer) var(--r-outer);background:var(--text-1);color:var(--bg-elev);display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;}
.foot .brand{color:var(--bg-elev);}
.foot-cols{display:flex;gap:48px;flex-wrap:wrap;}
.foot-col h4{font-size:13px;color:rgba(255,255,255,.5);margin:0 0 10px;font-weight:600;}
.foot-col a{display:block;font-size:14px;color:rgba(255,255,255,.85);margin-bottom:8px;}
.foot-col ul li{margin-bottom:8px;}

.archive-head{padding:48px 20px 8px;text-align:center;}
.archive-head h1{font-family:var(--font-display);font-size:38px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;}
.archive-head p{color:var(--text-2);}

@media (max-width:900px){
  .hero h1{font-size:34px;}
  .grid{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .entry-content{padding:24px;font-size:17px;}
  .single-head{padding:24px;}
}