/* Learn Urdu Free: shared site header (one implementation for every page).
   Markup is generated by build.py (SITE_HEADER); behaviour lives in js/site-header.js.
   Everything is namespaced .luf-* so it cannot be disturbed by style.css / studio.css. */
.luf-header{--lh-bg:rgba(250,247,240,.92);--lh-fg:#1F2937;--lh-muted:#5A6A80;--lh-accent:#C9A227;--lh-active:#0F5132;--lh-surface:#fff;--lh-line:rgba(15,81,50,.14);--lh-hover:rgba(15,81,50,.08);--lh-shadow:0 16px 36px -6px rgba(15,81,50,.2);
position:sticky;top:0;z-index:1000;display:block;width:100%;margin:0;padding:0;box-sizing:border-box;background:var(--lh-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:0;border-bottom:1px solid var(--lh-line);box-shadow:none;color:var(--lh-fg);font:400 16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-align:left;direction:ltr}
html[data-theme="dark"] .luf-header{--lh-bg:rgba(11,22,18,.92);--lh-fg:#F3F4F6;--lh-muted:#9CA3AF;--lh-active:#C9A227;--lh-surface:#12241C;--lh-line:rgba(201,162,39,.2);--lh-hover:rgba(201,162,39,.12);--lh-shadow:0 16px 36px rgba(0,0,0,.65)}
.luf-header *,.luf-header *::before,.luf-header *::after{box-sizing:border-box}
.luf-header [hidden]{display:none!important}
.luf-header ul{list-style:none;margin:0;padding:0}
.luf-header a{text-decoration:none;color:inherit}
.luf-header :focus-visible{outline:3px solid var(--lh-accent);outline-offset:3px;border-radius:6px}
html{scroll-padding-top:88px}
.luf-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 1.25rem}
.luf-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:76px}
.luf-brand{display:flex;align-items:center;gap:.6rem;min-width:0;white-space:nowrap;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--lh-fg)}
.luf-mark{display:block;flex:0 0 48px;width:48px;height:48px}
.luf-free{color:var(--lh-accent);font-weight:800}
.luf-nav{display:none;min-width:0}
.luf-list{display:flex;align-items:center;gap:1.1rem}
.luf-link{position:relative;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem 0;margin:0;background:none;border:0;border-radius:0;font:inherit;font-size:.85rem;font-weight:500;line-height:1.6;color:var(--lh-muted);cursor:pointer;white-space:nowrap}
.luf-link::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--lh-accent);transition:width .25s ease}
.luf-link:hover,.luf-link.is-active,.luf-tools-btn[aria-expanded="true"]{color:var(--lh-active)}
.luf-link:hover::after,.luf-link.is-active::after{width:100%}
.luf-caret{width:.7rem;height:.7rem;flex:none;transition:transform .15s}
.luf-tools-btn[aria-expanded="true"] .luf-caret{transform:rotate(180deg)}
.luf-tools{position:relative}
.luf-tools-menu{position:absolute;top:calc(100% + .9rem);left:50%;transform:translateX(-50%);min-width:12rem;padding:.4rem;background:var(--lh-surface);border:1px solid var(--lh-line);border-radius:12px;box-shadow:var(--lh-shadow);z-index:1001}
.luf-tools-menu a{display:block;padding:.6rem .85rem;border-radius:8px;white-space:nowrap;font-size:.9rem;font-weight:500;color:var(--lh-fg)}
.luf-tools-menu a:hover,.luf-tools-menu a[aria-current]{background:var(--lh-hover);color:var(--lh-active)}
.luf-actions{display:flex;align-items:center;gap:.6rem;flex:none}
.luf-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;margin:0;padding:0;background:var(--lh-surface);border:1px solid var(--lh-line);border-radius:12px;color:var(--lh-fg);font:inherit;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
.luf-btn:hover{border-color:var(--lh-accent);color:var(--lh-accent)}
.luf-btn svg{display:block;width:20px;height:20px}
.luf-moon,.luf-ico-close{display:none!important}
html[data-theme="dark"] .luf-sun{display:none!important}
html[data-theme="dark"] .luf-moon{display:block!important}
.luf-burger[aria-expanded="true"] .luf-ico-open{display:none!important}
.luf-burger[aria-expanded="true"] .luf-ico-close{display:block!important}
.luf-drawer{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;background:var(--lh-surface);border-bottom:2px solid var(--lh-accent);box-shadow:var(--lh-shadow);padding:.5rem 0 1rem}
.luf-drawer a{display:flex;align-items:center;min-height:48px;padding:.5rem .25rem;border-bottom:1px solid var(--lh-line);font-size:1.05rem;font-weight:600;color:var(--lh-fg)}
.luf-drawer a:hover{color:var(--lh-active)}
.luf-drawer a.is-active,.luf-drawer a[aria-current]{color:var(--lh-active);box-shadow:inset 3px 0 0 var(--lh-accent);padding-left:.8rem}
.luf-group-label{display:block;padding:.9rem .25rem .2rem;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--lh-muted)}
.luf-sub a{padding-left:1.25rem;font-weight:500}
.luf-sub a.is-active,.luf-sub a[aria-current]{padding-left:1.25rem}
@media (min-width:1024px){.luf-nav{display:block}.luf-burger{display:none}.luf-drawer{display:none!important}}
@media (max-width:767px){.luf-brand{font-size:1rem}.luf-mark{width:40px;height:40px;flex-basis:40px}.luf-bar{gap:.5rem}.luf-actions{gap:.4rem}}
@media (max-width:480px){.luf-wrap{padding:0 1rem}.luf-brand{font-size:.9rem;gap:.4rem}.luf-mark{width:36px;height:36px;flex-basis:36px}.luf-btn{width:38px;height:38px}}
@media (max-width:340px){.luf-brand{font-size:.8rem}.luf-mark{width:32px;height:32px;flex-basis:32px}}
@media (prefers-reduced-motion:reduce){.luf-header *{transition:none!important}}

/* Tool pages: the page title lives in the content, not the header */
.luf-tool-intro{width:min(100% - 2rem,1400px);margin:1.5rem auto 0;display:flex;align-items:center;justify-content:space-between;gap:.75rem 1rem;flex-wrap:wrap}
.luf-tool-intro h1{font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.25;color:var(--primary,#0f5132);margin:0 0 .3rem}
.luf-tool-intro p{margin:0;color:var(--text-muted,#64748b);line-height:1.6}
@media (max-width:600px){.luf-tool-intro{width:calc(100% - 1.5rem);margin-top:1.2rem}}

/* Tool pages (keyboard, text to image) follow the theme toggle too */
html[data-theme="dark"] body.tool-page{--bg-page:#0B1612;--card-bg:#12241C;--border-color:rgba(201,162,39,.24);--text-main:#F3F4F6;--text-muted:#A7B0BC;--primary:#198754;--primary-hover:#20a065;--primary-light:rgba(52,211,153,.14)}
html[data-theme="dark"] body.tool-page :is(textarea,select,input[type="text"]){background:#0e1d17;color:#F3F4F6}
html[data-theme="dark"] body.tool-page .btn-preset{background:#0e1d17;color:#F3F4F6}
html[data-theme="dark"] body.tool-page .btn-preset.active{background:#198754;color:#fff}
html[data-theme="dark"] body.tool-page .btn-secondary{background:#1a3226;color:#F3F4F6}
html[data-theme="dark"] body.tool-page .btn-secondary:hover{background:#22402f}
html[data-theme="dark"] body.tool-page .btn-danger-outline{color:#fca5a5;border-color:rgba(252,165,165,.4)}
html[data-theme="dark"] body.tool-page .btn-danger-outline:hover{background:rgba(220,38,38,.18)}
html[data-theme="dark"] body.tool-page footer{background:#0e1d17}
html[data-theme="dark"] body.tool-page footer a,html[data-theme="dark"] body.tool-page .status-badge,html[data-theme="dark"] body.tool-page .uk-map summary,html[data-theme="dark"] body.tool-page .ur-reader-title,html[data-theme="dark"] body.tool-page .keyboard-notice{color:#6ee7b7}
html[data-theme="dark"] body.tool-page .intro h1,html[data-theme="dark"] body.tool-page .luf-tool-intro h1{color:#F3F4F6}
html[data-theme="dark"] body.tool-page .intro p,html[data-theme="dark"] body.tool-page .editor-meta,html[data-theme="dark"] body.tool-page .uk-help,html[data-theme="dark"] body.tool-page .uk-status,html[data-theme="dark"] body.tool-page .ur-reader-privacy{color:#A7B0BC}
html[data-theme="dark"] body.tool-page .uk-key{background:#0e1d17;border-color:rgba(201,162,39,.24);color:#6ee7b7}
html[data-theme="dark"] body.tool-page .uk-key small{color:#9CA3AF}
html[data-theme="dark"] body.tool-page .uk-key:hover,html[data-theme="dark"] body.tool-page .uk-action:hover{background:#1a3226;border-color:#C9A227}
html[data-theme="dark"] body.tool-page .uk-key:active{background:#22402f}
html[data-theme="dark"] body.tool-page .uk-action{background:#0e1d17;border-color:rgba(201,162,39,.24);color:#E5E7EB}
html[data-theme="dark"] body.tool-page .uk-map{border-color:rgba(201,162,39,.24)}
html[data-theme="dark"] body.tool-page .uk-map-list>div{background:#0e1d17}
html[data-theme="dark"] body.tool-page .ur-reader{background:#0e1d17;border-color:rgba(201,162,39,.24)}
html[data-theme="dark"] body.tool-page .ur-reader-options select{background:#12241C;color:#F3F4F6;border-color:rgba(201,162,39,.3)}
html[data-theme="dark"] body.tool-page .note-box{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.35);color:#bfdbfe}
html[data-theme="dark"] body.tool-page #statusAlert.success{background:rgba(52,211,153,.14);color:#a7f3d0;border-color:rgba(52,211,153,.35)}
html[data-theme="dark"] body.tool-page #statusAlert.error{background:rgba(248,113,113,.14);color:#fecaca;border-color:rgba(248,113,113,.4)}
html[data-theme="dark"] body.tool-page .canvas-viewport{background-color:#0e1d17;border-color:rgba(201,162,39,.3);background-image:linear-gradient(45deg,#1a3226 25%,transparent 25%),linear-gradient(-45deg,#1a3226 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1a3226 75%),linear-gradient(-45deg,transparent 75%,#1a3226 75%)}