/* ======================================
   Abdalah.co.uk • style1.css (Deluxe)
   Clean, modern, responsive + dark mode
   ====================================== */

/* -------- Theme Tokens -------- */
:root{
  /* Light */
  --paper:#ffffff;
  --ink:#0b1220;
  --muted:#5b6b85;
  --border:#e7ebf3;
  --card:#ffffff;
  --link:#135cf1;
  --accent:#10b981;        /* emerald-500 */
  --accent-ink:#053b2f;
  --bg-soft:#f7f9fe;
  --shadow:0 10px 30px rgba(18, 38, 63, .08);
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:22px;
  --maxw:1100px;

  /* Motion */
  --t:180ms;
  --t2:320ms;

  /* Gradients */
  --grad-1:linear-gradient(135deg,#f5f9ff 0%,#ffffff 60%);
  --grad-2:linear-gradient(135deg,#e8f0ff 0%,#fff 50%,#f6fff8 100%);
}

/* Auto dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0b1220;
    --ink:#eaf0ff;
    --muted:#a8b3c7;
    --border:#1e293b;
    --card:#0f172a;
    --link:#8ab4ff;
    --accent:#22c55e;
    --accent-ink:#eafff6;
    --bg-soft:#0a1222;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --grad-1:linear-gradient(135deg,#0d1526 0%,#0b1220 60%);
    --grad-2:linear-gradient(135deg,#0e1a33 0%,#0b1220 50%,#0f1f18 100%);
  }
}

/* -------- Base -------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

a{
  color:var(--link);
  text-decoration:none;
  background:
    linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;
  transition:background-size var(--t) ease, color var(--t);
}
a:hover{ background-size:100% 2px }

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:20px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* -------- Header (glassy) -------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background:color-mix(in oklab, var(--paper) 78%, transparent);
  border-bottom:1px solid var(--border);
}
.site-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:20px;
}
.brand .dot{
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #9affd9, var(--accent));
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent);
}
.site-nav{ display:flex; flex-wrap:wrap; gap:8px }
.site-nav a{
  color:inherit; opacity:.88;
  border-radius:12px; padding:8px 12px;
  transition:transform var(--t), background var(--t);
}
.site-nav a:hover{ transform:translateY(-1px); background:color-mix(in oklab, var(--link) 10%, transparent) }
.site-nav a.active{
  background:color-mix(in oklab, var(--link) 14%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--link) 30%, transparent);
}

/* -------- Main grid (content + sidebar) -------- */
main.container.grid-2{ display:block }
@media (min-width: 920px){
  main.container.grid-2{
    display:grid;
    grid-template-columns: 1fr 320px;
    gap:24px;
    align-items:start;
  }
}

/* -------- Sidebar -------- */
.sidebar .widget{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:16px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}
.sidebar .widget h3{
  margin:0 0 .6rem; font-size:1.05rem; letter-spacing:.2px;
}
.sidebar .list{ list-style:none; padding:0; margin:0 }
.sidebar .list li{
  padding:8px 0;
  border-bottom:1px dashed color-mix(in oklab, var(--border) 70%, transparent);
}
.sidebar .list li:last-child{ border-bottom:0 }
.sidebar .list a{ display:inline-block; padding:2px 0 }

/* -------- Article / Prose -------- */
article{
  background: var(--grad-1);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding: clamp(16px, 2.5vw, 28px);
}

article :where(h1,h2,h3,h4){ line-height:1.25 }
article h1{
  font-size: clamp(1.9rem, 2.8vw, 2.35rem);
  margin: .2rem 0 1rem;
  letter-spacing:.2px;
}
article h2{
  font-size: clamp(1.25rem, 2.1vw, 1.45rem);
  margin: 1.6rem 0 .7rem;
}
article h3{
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
  margin: 1.1rem 0 .45rem;
}
article p{ margin:.7rem 0 }
article ul, article ol{ padding-left:1.15rem; margin:.6rem 0 }
article img{
  max-width:100%; height:auto; border-radius:14px;
  box-shadow:0 10px 20px rgba(0,0,0,.06);
}

/* Lead notice / tips */
.notice{
  background: color-mix(in oklab, var(--accent) 8%, #f6fff9);
  border:1px solid color-mix(in oklab, var(--accent) 28%, white);
  border-radius:14px; padding:12px 14px;
}

/* Inline badges / tags */
.badge{
  display:inline-block;
  background: color-mix(in oklab, var(--link) 10%, transparent);
  color: var(--link);
  border:1px solid color-mix(in oklab, var(--link) 35%, transparent);
  padding:3px 10px; border-radius:999px; font-size:.78rem;
}

/* Buttons (utility) */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--link); color:white; border:0;
  padding:10px 14px; border-radius:12px;
  box-shadow:0 6px 16px rgba(19,92,241,.18);
  transition:transform var(--t), box-shadow var(--t);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(19,92,241,.25) }
.btn.outline{
  background:transparent; color:var(--link);
  border:1px solid color-mix(in oklab, var(--link) 40%, transparent);
  box-shadow:none;
}

/* Tables (if you add any later) */
table{
  width:100%; border-collapse:separate; border-spacing:0; margin:1rem 0;
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
}
thead th{
  background:var(--bg-soft); text-align:left; padding:10px 12px; font-weight:600;
}
tbody td{ padding:10px 12px; border-top:1px solid var(--border) }

/* Code blocks (optional) */
pre, code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
pre{
  background: #0f1525;
  color:#e2e8f0;
  padding:12px 14px; border-radius:12px; overflow:auto;
}

/* -------- Footer -------- */
.site-footer{
  margin-top:36px;
  border-top:1px solid var(--border);
  background:var(--grad-2);
  color: color-mix(in oklab, var(--ink) 80%, #334155);
  font-size:.96rem;
}
.site-footer .cols{
  display:grid; gap:16px; padding:22px 0;
}
@media (min-width: 760px){
  .site-footer .cols{ grid-template-columns: 1.2fr 1fr 1fr }
}
.site-footer a{ color:var(--link) }

/* -------- Accessibility & Focus -------- */
:where(a,button,input,select,textarea):focus-visible{
  outline: 3px solid color-mix(in oklab, var(--link) 40%, transparent);
  outline-offset:2px;
  border-radius:10px;
  transition:outline-color var(--t2);
}

/* -------- Utilities -------- */
.flow > * + *{ margin-top: .75rem }
.hr{ height:1px; background:var(--border); margin:1rem 0; border:0 }
.maxw{ max-width:var(--maxw) }
.center{ text-align:center }

/* -------- Print (tidy) -------- */
@media print{
  .site-header, .site-footer, nav, .sidebar{ display:none !important }
  article{ box-shadow:none; border:0; padding:0; background:#fff }
  a{ text-decoration:underline }
}

/* ============================= */
/* 📱 MOBILE ENHANCEMENTS (ONLY) */
/* ============================= */

/* Smooth scroll + stable text sizing + touch polish */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html,body{height:100%}
*{-webkit-tap-highlight-color:rgba(16,185,129,.25)} /* emerald-ish */
:focus-visible{outline:3px solid color-mix(in oklab, var(--link) 40%, transparent); outline-offset:2px}

/* Make top nav gracefully overflow on phones */
@media (max-width:900px){
  .site-top{ gap:12px }
  .site-nav{
    overflow:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .site-nav::-webkit-scrollbar{ display:none }
}

/* Comfortable spacing & rounded cards on small screens */
@media (max-width:900px){
  .container{ padding:16px }
  .card{ border-radius:14px }
  .grid{ gap:10px }
}

/* iOS input zoom fix + friendly focus ring */
input, select, textarea{
  font:inherit; font-size:16px;  /* prevent iOS zoom */
  background: var(--bg-soft);
  color: var(--ink);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.7rem .9rem;
  outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
input::placeholder, textarea::placeholder{ color: color-mix(in oklab, var(--ink) 35%, transparent) }
input:focus, select:focus, textarea:focus{
  border-color: color-mix(in oklab, var(--link) 40%, transparent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--link) 22%, transparent);
}

/* Keep sticky header position stable with dynamic viewport units */
@supports (height:100dvh){
  .site-header{ top:0 }
}