/* PT Serif */
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap');

/* ================= TOKENS ================= */
:root{
  --bg:#f6fbf8; --bg-soft:#ffffff; --card:#ffffff;
  --text:#0f291f; --muted:#46695a;
  --brand:#12873D; /*previous brand failed contrast 4.5 normal - #16a34a;*/ --brand-ink:#15803d; --ring:#22c55e33;
  --border:#0f291f1a;
  --logo-color:#15803d;          /* logo in LIGHT theme */
  --radius:16px; --shadow:0 10px 30px #00000014;
  --space:clamp(14px,2.4vw,22px);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:'PT Serif', serif;
  --rule: color-mix(in srgb, var(--brand) 22%, transparent);
}

html[data-theme="dark"]{
  --bg:#07130f; --bg-soft:#0a1b15; --card:#0e221a;
  --text:#e8f3ec; --muted:#a8c7b7; --border:#e8f3ec1a;
  --logo-color:#86efac;          /* logo in DARK theme */
  --rule: color-mix(in srgb, var(--brand) 25%, transparent);
}

/* fallback to system if no explicit data-theme */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --bg:#07130f; --bg-soft:#0a1b15; --card:#0e221a;
    --text:#e8f3ec; --muted:#a8c7b7; --border:#e8f3ec1a;
    --logo-color:#86efac; --rule: color-mix(in srgb, var(--brand) 25%, transparent);
  }
}

/* ================= BASE ================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--serif)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{
  width: min(1440px, calc(100% - 2*var(--space)));  /* iOS-safe calc() */
  margin-inline:auto;
  padding:calc(var(--space) * 1.25) 0;
}

/* Prevent horizontal page scroll on small devices */
html, body { max-width:100%; overflow-x:hidden; }
img, svg, video { max-width:100%; height:auto; }

/* ================= NAV ================= */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.2) blur(6px);
  background:color-mix(in srgb,var(--bg) 86%, transparent);
  border-bottom:1px solid var(--border)
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{
  display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;
  color:var(--text); text-decoration:none; /* keep text matching theme, not link blue */
}
.logo-icon{width:24px;height:24px;display:inline-block;color:var(--logo-color);flex-shrink:0}
.menu{display:flex;align-items:center;gap:14px}
.menu a{color:inherit}
.menu-toggle{display:none;background:none;border:1px solid var(--border);padding:8px 10px;border-radius:12px;color:inherit}
@media (max-width:720px){
  .menu{display:none}
  .menu.open{
    display:flex;position:absolute;right:var(--space);top:58px;background:var(--bg-soft);
    border:1px solid var(--border);border-radius:12px;padding:10px 12px;flex-direction:column;gap:10px;box-shadow:var(--shadow);
    max-width: calc(100vw - (var(--space) * 2)); overflow-x:hidden; /* avoid tiny overflow */
  }
  .menu-toggle{display:inline-flex}
}

/* Swap logo files by theme when using <img> */
.logo-dark { display: none; }
html[data-theme="dark"] .logo-light { display: none; }
html[data-theme="dark"] .logo-dark  { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo-light { display: none; }
  :root:not([data-theme]) .logo-dark  { display: inline-block; }
}

/* ================= MAIN ================= */
.main{display:grid;gap:clamp(18px,2.6vw,28px)}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(16px,2.2vw,26px);
  box-shadow:var(--shadow);
  overflow:hidden; /* keep children inside rounded corners */
}
h1{font-size:clamp(28px,3.6vw,40px);margin:0 0 2px}
h2{font-size:clamp(20px,2.2vw,26px);margin:0 0 8px}
p,li{color:var(--muted);line-height:1.7}
.subtitle{font-size:14px;color:var(--muted);margin:2px 0 12px 0}
.note{font-size:13px;color:var(--muted)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:6px;
  background:var(--brand);color:#fff;border:none;font-weight:700;cursor:pointer;box-shadow:0 6px 20px var(--ring)
}
.btn:hover{background:var(--brand-ink)}

/* Footer */
.footer{color:var(--muted);font-size:13px;padding:18px 0 40px}
.footer a{color:inherit}

/* ====== GENERIC TABLES (faint green rules) ====== */
.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{width:100%;border-collapse:collapse;min-width:360px} /* 320–360px phones */
.table th,.table td{padding:10px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.table tr:first-child th,.table tr:first-child td{border-top:1px solid var(--rule)}
@media (min-width:481px){ .table{min-width:480px} }

/* Allow long URLs/words to wrap in normal content & table cells */
td, th, p, li, .card, .table td, .table th{
  word-break:break-word;
  overflow-wrap:break-word;
  white-space:normal;
}

/* ====== PRAYER TABLE ====== */
.prayertable{width:100%;border-collapse:collapse}
.prayertable th,.prayertable td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left}
.prayertable thead th{font-size:14px;color:var(--muted)}
.prayertable .label{font-weight:700}
.prayertable tr.now{background-color:color-mix(in srgb,var(--brand) 22%, transparent);font-weight:bold}
.prayertable tr.sunrise-past{background-color:color-mix(in srgb,var(--brand) 10%, transparent);font-style:italic}

/* ====== BADGES ====== */
.badge-green{
  font-size:16px;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--brand) 18%, transparent);
  border:1px solid var(--border);color:var(--text)
}

/* ====== ACCESSIBILITY ====== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ====== BISMILLAH ====== */
.bismillah{ text-align:left; font-style:italic; margin-top:0; color:var(--muted) }

/* ====== THEME TOGGLE ====== */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;border:1px solid var(--border);padding:8px 10px;border-radius:12px;
  cursor:pointer;color:inherit
}
.theme-toggle .icon{font-size:16px;line-height:1}

/* ====== FORMS GLOBAL ====== */
input, textarea, select { font-family:var(--serif); font-size:16px; color:var(--text); }

/* ====== CODE BLOCKS ====== */
pre{ max-width:100%; overflow-x:auto; margin:0; }
pre code{ display:block; white-space:pre; word-break:normal; }
/* Keep code inside the card’s rounded corners and avoid right-edge clipping */
.card pre{
  width:100%; max-width:100%; box-sizing:border-box;
  border-radius:inherit; background:inherit; padding-right:8px; overflow-x:auto;
}
.card pre code{ display:block; max-width:100%; white-space:pre; }
@media (max-width:420px){
  /* On very small phones, wrap long URLs/tokens instead of forcing page scroll */
  .card pre code{ white-space:pre-wrap; word-break:break-all; overflow-wrap:anywhere; }
}

/* ====== DIALOG / MODAL ====== */
/* Hide dialog when not open (prevents it sitting at the bottom) */
dialog.card:not([open]){ display:none; }

/* Apply the visual layout only when open */
dialog.card[open]{
  box-sizing:border-box;
  max-width:560px;
  width:calc(100% - 2*var(--space));
  margin:0 auto;
  padding:clamp(16px, 3.5vw, 26px);
  z-index:1000;
  border:none;
  background:var(--card);
  color:var(--text);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
dialog::backdrop{ background:rgba(0,0,0,0.45); }

/* Mobile full-height sheet */
@media (max-width:600px){
  dialog.card[open]{
    margin:0;border-radius:0;width:100vw;max-width:100vw;
    height:100dvh;max-height:100dvh;display:flex;flex-direction:column;padding:var(--space);
    left:0; right:0; /* guard against sub-pixel offsets */
  }
  dialog.card[open] form{display:flex !important;flex-direction:column;gap:14px;min-height:0;max-height:100%;overflow:hidden}
  .dialog-body{overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0}
  .dialog-actions{
    position:sticky;bottom:0;padding-top:10px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--card) 85%, transparent) 0%, var(--card) 35%)
  }
  dialog.card[open] input, dialog.card[open] textarea{padding:14px !important;font-size:16px}
}

/* Fallback body lock class when emulating modal */
html.modal-open, body.modal-open{ overflow:hidden; }

/* Allow long URLs in API example <pre><code> to wrap on narrow screens */
@media (max-width: 480px) {
  .card pre code {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: anywhere;
  }
}
/* --- Fix "border-radius clipping" for Sample call code blocks on mobile --- */
.card pre{
  /* keep it inside the card visually */
  border-radius: calc(var(--radius) - 8px); /* smaller than the card’s radius */
  background: inherit;
  max-width: 100%;
  margin: 6px 0;              /* breathing room from card edge */
  padding: 14px 16px;         /* extra right/left padding to avoid edge touch */
  box-sizing: border-box;
  overflow-x: auto;           /* allow internal scroll if needed */
}

/* keep previous small-screen wrapping for long URLs */
@media (max-width: 480px) {
  .card pre code{
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: anywhere;
  }
}

/* ====== COOKIE BANNER ====== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 14px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
  z-index: 2000;
  display: none; /* Hidden until JS shows it */
}
.cookie-banner p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}
.cookie-banner .btn {
  margin-left: 12px;
  padding: 6px 12px;
  font-size: 14px;
}