/* =================================================================
   base.css — shared foundation for every page in the Quran Tracing PWA
   -----------------------------------------------------------------
   - CSS variables (light + dark theme)
   - Body / typography baseline
   - Native-app feel: no text selection on chrome, no rubber-band
     overscroll, no horizontal scroll
   - Safe-area inset support for iOS notch / Dynamic Island
   - Hamburger navigation
   - Modal system (Terms, PDPA, Cookies, Disclaimer)
   - Toasts (SW update, audio status)
   - Hidden ownership watermark (CSS pseudo-element, invisible)
   ================================================================= */

:root{
  /* Brand palette — white + green + blue (per user brief) */
  --paper:        #FBF7EC;        /* warm cream paper */
  --paper-dark:   #ECE1C4;
  --paper-line:   #DED0A8;
  --surface:      #FFFFFF;        /* white surface */
  --ink:          #1F2A24;        /* near-black green tint */
  --ink-soft:     #514736;
  --green:        #0F5257;        /* deep emerald (primary brand) */
  --green-mid:    #1B7C6F;
  --green-soft:   #4CB6B8;
  --blue:         #1E5BA8;        /* title / accent text colour */
  --gold:         #B08D57;
  --gold-bright:  #C9A05E;
  --maroon:       #6B1E23;
  --teal:         #0F5257;
  --canvas-bg:    #FFFFFF;
  --shadow:       0 10px 30px rgba(15, 82, 87, 0.14);
  --overlay:      rgba(20, 15, 8, 0.55);
  --radius:       14px;
  color-scheme:   light;
  font-size:      16px;
  --safe-top:     env(safe-area-inset-top, 0px);
  --safe-bot:     env(safe-area-inset-bottom, 0px);
  --safe-left:    env(safe-area-inset-left, 0px);
  --safe-right:   env(safe-area-inset-right, 0px);
}

html[data-theme="dark"]{
  --paper:        #201A14;
  --paper-dark:   #17120D;
  --paper-line:   #3B3122;
  --surface:      #2A2219;
  --ink:          #EFE6D4;
  --ink-soft:     #B9AD97;
  --green:        #4CB6B8;
  --green-mid:    #1B7C6F;
  --green-soft:   #76D4D6;
  --blue:         #6EA4E8;
  --gold:         #C9A05E;
  --gold-bright:  #E2BE81;
  --maroon:       #C1555C;
  --teal:         #4CB6B8;
  --canvas-bg:    #241D15;
  --shadow:       0 10px 30px rgba(0, 0, 0, 0.5);
  --overlay:      rgba(0, 0, 0, 0.65);
  color-scheme:   dark;
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  background: var(--paper-dark);
  color: var(--ink);
  font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Native-app feel: lock horizontal scroll + kill rubber-band overscroll */
  overflow-x: hidden;
  overscroll-behavior: none;
  /* Disable text selection by default (re-enabled on inputs / .selectable
     below) — requested security measure. Touch clicks & form fields still
     work; this only stops casual text highlighting. */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;        /* iOS long-press menu off */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Disable browser pinch/double-tap zoom — viewport meta also sets
     maximum-scale=1, but this catches keyboard + gesture zoom on iOS. */
  touch-action: pan-y;
}

body{
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 10% 0%, rgba(15,82,87,0.10), transparent 40%),
    radial-gradient(circle at 90% 100%, rgba(30,91,168,0.06), transparent 45%),
    var(--paper-dark);
  transition: background-color .2s ease, color .2s ease;
}

h1,h2,h3,h4{ font-family: 'Cormorant Garamond', Georgia, serif; margin:0; line-height:1.2; }
p{ line-height: 1.6; }

a{ color: var(--blue); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Re-enable selection on form inputs + .selectable (so the user can still
   type license keys, names, copy from credit modals etc.) */
input, textarea, select, [contenteditable="true"], .selectable{
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Images can't be dragged (security requirement) */
img{ -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* ...except where the page actually needs image clicks (e.g. OG preview).
   Add class="draggable" to opt back in. */
img.draggable{ pointer-events: auto; }

/* ---- Hamburger navigation (shared) ---- */
.app-header{
  position: sticky; top:0; z-index: 30;
  display:flex; align-items:center; gap: 16px; flex-wrap: wrap;
  padding: 12px 24px;
  padding-top: calc(12px + var(--safe-top));
  padding-left: calc(24px + var(--safe-left));
  padding-right: calc(24px + var(--safe-right));
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--paper-line);
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
}

.brand{ display:flex; align-items:center; gap:11px; }
.brand-icon{ width:36px; height:36px; border-radius:8px; display:block; }
.brand-text h1{
  font-size: 20px; font-weight:700; color: var(--blue);
  letter-spacing:.2px; font-family: 'Cormorant Garamond', serif;
}
.brand-text p{ margin:2px 0 0; font-size:10.5px; letter-spacing:2.4px; text-transform:uppercase; color: var(--green); font-weight:600; }

.nav-spacer{ flex: 1 1 auto; }

.hamburger{
  width:44px; height:44px;     /* min 44x44 touch target (per device spec) */
  border-radius:10px; border:1px solid var(--paper-line);
  background: var(--surface); cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  padding: 0 10px;
}
.hamburger span{
  display:block; width:22px; height:2px; background: var(--green); border-radius:1px;
  transition: transform .25s, opacity .25s;
}
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Slide-in nav drawer */
.nav-drawer{
  position: fixed; top:0; right:0; bottom:0;
  width: min(320px, 88vw);
  z-index: 40;
  background: var(--paper);
  border-left: 1px solid var(--paper-line);
  box-shadow: -14px 0 40px rgba(0,0,0,0.25);
  transform: translateX(100%);
  transition: transform .25s ease;
  padding: calc(20px + var(--safe-top)) 22px calc(20px + var(--safe-bot));
  overflow-y: auto;
}
.nav-drawer.open{ transform: translateX(0); }
.nav-drawer h3{
  font-family:'Work Sans', sans-serif; font-size:11px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--green); font-weight:700;
  margin: 18px 0 10px;
}
.nav-drawer h3:first-child{ margin-top: 0; }
.nav-drawer a.nav-item{
  display:block; padding: 12px 14px; margin-bottom: 6px;
  border-radius: 8px; border: 1px solid transparent;
  color: var(--ink); font-weight: 600; font-size: 14.5px;
  transition: background .15s, border-color .15s;
}
.nav-drawer a.nav-item:hover{ background: var(--paper-dark); border-color: var(--paper-line); text-decoration: none; }
.nav-drawer a.nav-item.active{ background: var(--green); color: #fff; }
.nav-drawer a.nav-item .nav-item-icon{ display:inline-block; width:22px; margin-right:8px; }
.nav-drawer a.nav-item small{ display:block; font-weight:500; font-size:11.5px; opacity:.75; margin-top:2px; }

.nav-overlay{
  position: fixed; inset:0; background: var(--overlay); z-index: 35;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.nav-overlay.open{ opacity: 1; pointer-events: auto; }

/* ---- Buttons (shared) ---- */
.btn{
  font-family:'Work Sans', sans-serif; font-weight:600; font-size:14px; letter-spacing:.3px;
  border-radius: 10px; border: 1px solid var(--paper-line);
  background: var(--surface); color: var(--ink);
  padding: 11px 18px; cursor: pointer;
  min-height: 44px;     /* touch target */
  transition: background .15s, transform .1s, border-color .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:hover{ border-color: var(--green); }
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover{ background: #0a3e42; }
.btn-accent{ background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-ghost{ background: transparent; }
.btn-block{ width: 100%; }

/* ---- Modal system (Terms, PDPA, Cookies, Disclaimer) ---- */
.modal-overlay{
  position: fixed; inset:0; background: var(--overlay); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.modal-overlay.open{ opacity: 1; pointer-events: auto; }
.modal-card{
  background: var(--paper); border: 1px solid var(--paper-line);
  border-radius: 16px; box-shadow: var(--shadow);
  width: min(640px, 100%); max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(20px); transition: transform .25s ease;
}
.modal-overlay.open .modal-card{ transform: translateY(0); }
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--paper-line);
  background: var(--paper-dark);
}
.modal-head h3{ color: var(--green); font-size: 18px; font-family: 'Cormorant Garamond', serif; font-weight: 700; }
.modal-close{
  width:36px; height:36px; border-radius:50%;
  border: 1px solid var(--paper-line); background: var(--surface);
  cursor:pointer; font-size:18px; color: var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ color: var(--maroon); border-color: var(--maroon); }
.modal-body{
  padding: 22px; overflow-y: auto; font-size: 14px; line-height: 1.65; color: var(--ink);
}
.modal-body h4{ color: var(--green); margin: 16px 0 8px; font-size: 15px; font-family: 'Work Sans', sans-serif; font-weight: 700; }
.modal-body h4:first-child{ margin-top: 0; }
.modal-body p{ margin: 0 0 12px; }
.modal-body pre{
  background: var(--paper-dark); padding: 12px 14px; border-radius: 8px;
  white-space: pre-wrap; font-family: 'Sarasa Mono SC', 'Liberation Mono', monospace;
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.5;
}
.modal-body a{ color: var(--blue); }
.modal-foot{
  padding: 14px 22px; border-top: 1px solid var(--paper-line);
  background: var(--paper-dark);
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

/* Cookie banner (bottom, slide up) */
.cookie-banner{
  position: fixed; left: 16px; right: 16px;
  bottom: calc(16px + var(--safe-bot));
  z-index: 90;
  background: var(--paper); border: 1px solid var(--paper-line);
  border-radius: 14px; box-shadow: var(--shadow);
  padding: 16px 20px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  transform: translateY(160%); transition: transform .35s ease;
}
.cookie-banner.show{ transform: translateY(0); }
.cookie-banner .cookie-text{ flex: 1 1 280px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.cookie-banner .cookie-text strong{ color: var(--ink); }
.cookie-banner .cookie-actions{ display:flex; gap:8px; flex-wrap: wrap; }

/* Toast (SW update, audio status, etc.) */
.toast{
  position: fixed; left: 50%; bottom: calc(20px + var(--safe-bot));
  transform: translateX(-50%) translateY(120%); z-index: 80;
  background: var(--green); color: #fff; padding: 12px 18px;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  font-size: 13px; font-weight: 600;
  display: flex; gap: 14px; align-items: center;
  opacity: 0; transition: transform .25s ease, opacity .25s ease; max-width: 90vw;
}
.toast.show{ transform: translateX(-50%) translateY(0); opacity: 1; }
.toast button{
  font-family:'Work Sans', sans-serif; font-weight: 700; font-size: 12px;
  border: none; border-radius: 6px; padding: 6px 12px; cursor: pointer;
  background: #fff; color: var(--green);
}

/* ---- Footer (shared, with legal links) ---- */
.app-footer{
  max-width: 1280px; margin: 32px auto 0;
  padding: 24px 24px calc(28px + var(--safe-bot));
  font-size: 12.5px; color: var(--ink-soft);
  border-top: 1px solid var(--paper-line);
}
.app-footer .footer-grid{
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px;
}
@media (max-width: 760px){ .app-footer .footer-grid{ grid-template-columns: 1fr; gap: 16px; } }
.app-footer h4{
  font-family:'Work Sans', sans-serif; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color: var(--green); font-weight:700; margin: 0 0 10px;
}
.app-footer p{ margin: 0 0 8px; line-height: 1.55; }
.app-footer .footer-links a{
  display: inline-block; margin: 0 12px 6px 0;
  color: var(--blue); font-weight: 500;
}
.app-footer .footer-bottom{
  margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed var(--paper-line);
  font-size: 11.5px; opacity: .75; text-align: center;
}

/* Hidden ownership watermark (CSS pseudo-element layer of the
   ownership-marker defense — invisible but present in DOM/CSSOM).
   Anyone running getComputedStyle on .brand-text h1 will see the
   content string. Verified via: console.log(getComputedStyle(document.querySelector('.brand-text h1'), '::after').content) */
.brand-text h1::after{
  content: "Umniyah-community-nonprofit|TanzilProject";
  font-size: 0; line-height: 0;
  color: transparent;
  display: inline-block;
  width: 0; height: 0; overflow: hidden;
  opacity: 0; pointer-events: none;
}

/* Mobile responsiveness for header */
@media (max-width: 760px){
  .app-header{ padding: 10px 16px; padding-top: calc(10px + var(--safe-top)); gap: 10px; }
  .brand-text h1{ font-size: 17px; }
  .brand-text p{ font-size: 9.5px; letter-spacing: 1.8px; }
}

/* Focus indicator (accessibility) */
:focus-visible{
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =================================================================
   PWA Install Banner — sticky top banner with Install + Guide
   ================================================================= */
.install-banner{
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  color: #fff;
  padding: 12px 16px;
  padding-top: calc(12px + var(--safe-top));
  padding-left: calc(16px + var(--safe-left));
  padding-right: calc(16px + var(--safe-right));
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  font-family: 'Work Sans', system-ui, sans-serif;
}
.install-banner.show{ transform: translateY(0); }

.install-banner-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

.install-banner-icon{
  font-size: 28px; flex: 0 0 auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

.install-banner-text{
  flex: 1 1 240px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.install-banner-text strong{
  font-size: 14.5px; font-weight: 700; line-height: 1.3;
}
.install-banner-text span{
  font-size: 12px; line-height: 1.4;
  opacity: .9;
}

.install-banner-actions{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: 0 0 auto;
}

/* Override .btn colors inside the banner — banner has dark green bg */
.install-banner .btn{
  min-height: 38px; padding: 8px 14px; font-size: 13px;
}
.install-banner .btn-primary{
  background: #fff; color: var(--green); border-color: #fff;
}
.install-banner .btn-primary:hover{ background: #f5f5f5; }
.install-banner .btn-ghost{
  background: rgba(255,255,255,0.14);
  color: #fff; border-color: rgba(255,255,255,0.32);
}
.install-banner .btn-ghost:hover{
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.45);
}

.install-banner-close{
  width: 32px; height: 32px;
  border: none; background: transparent;
  color: #fff; opacity: .7;
  font-size: 22px; line-height: 1;
  cursor: pointer; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.install-banner-close:hover{ opacity: 1; background: rgba(255,255,255,0.14); }

/* When banner is visible, push the rest of the page down (sticky already
   does this naturally, but app-header is also sticky — we need to make
   sure the header sits BELOW the banner in z-order and offset.) */
body.has-install-banner .app-header{
  top: 0; /* banner is sticky above; header sits under it via document flow */
}
/* On scroll, the banner scrolls away (sticky top:0), then header sticks.
   This is the desired behavior. */

/* Mobile tweaks */
@media (max-width: 600px){
  .install-banner{ padding: 10px 12px; padding-top: calc(10px + var(--safe-top)); }
  .install-banner-icon{ font-size: 22px; }
  .install-banner-text strong{ font-size: 13px; }
  .install-banner-text span{ font-size: 11px; }
  .install-banner-actions{ width: 100%; justify-content: stretch; }
  .install-banner-actions .btn{ flex: 1 1 auto; }
  .install-banner-close{ position: absolute; top: 6px; right: 6px; }
  .install-banner-inner{ position: relative; }
}

/* ---- kbd styling (used in How-it-works modal for keyboard shortcuts) ---- */
kbd{
  display: inline-block;
  padding: 1px 6px;
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink, #1c1a17);
  background: var(--paper, #FBF7EC);
  border: 1px solid var(--paper-line, #DED0A8);
  border-bottom-width: 2px;
  border-radius: 4px;
  vertical-align: middle;
  margin: 0 1px;
  white-space: nowrap;
}