/* Al-Misbaah Portal public pages (sign in, reset, email link, job application). The website look, 2026-09-30. */
@import url(/assets/almisbaah/fonts/fonts.css?v=20260930);
/* Fonts are declared here too (2026-09-29 lesson): fonts.css has no Cache-Control, a stale copy made the heading fall back.
   web.css is stamped (?v=) by Frappe, so these always arrive; font-display block, so no fallback font flashes.
   2026-09-30, CEO: the Portal matches the website www.al-misbaah.org (docs/brand/al-misbaah-tokens.css): Geist text and
   headings, Instrument Serif italic for the accent words ("Sign in to" + "Al-Misbaah", like the website's
   "Catch up with Al-Misbaah"), Epilogue for buttons, square buttons, 12px cards. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:block;src:url(/assets/almisbaah/fonts/Geist-normal-latin.woff2?v=20260930) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:block;src:url(/assets/almisbaah/fonts/InstrumentSerif-italic-latin.woff2?v=20260930) format('woff2')}
@font-face{font-family:'Epilogue';font-style:normal;font-weight:400;font-display:block;src:url(/assets/almisbaah/fonts/Epilogue-variable.woff2?v=20260930) format('woff2')}
@font-face{font-family:'Epilogue';font-style:normal;font-weight:600;font-display:block;src:url(/assets/almisbaah/fonts/Epilogue-normal-600.woff2?v=20260930) format('woff2')}
@font-face{font-family:'Epilogue';font-style:normal;font-weight:700;font-display:block;src:url(/assets/almisbaah/fonts/Epilogue-normal-700.woff2?v=20260930) format('woff2')}
/* Sign in page: one product with auth.ops.al-misbaah.org. Website ground, one white card with the full logo and the
   heading "Sign in to Al-Misbaah" (Geist, "Al-Misbaah" in Instrument Serif italic), "Sign in with Al-Misbaah" as the main
   orange button, square and uppercase like the website's DONATE NOW; the email and password form folded behind
   "Sign in with a password" (for admins; the toggle is added by Website Script). Same buttons, fields and orange focus
   as the Al-Misbaah Sign In page. */
body[data-path="login"],body[data-path="update-password"],body[data-path="login"] .page-content,body[data-path="update-password"] .page-content{background:#F7F6F0!important;font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#4F4D4B}
body[data-path="login"] .navbar,body[data-path="login"] header.navbar,body[data-path="login"] .web-footer,body[data-path="login"] footer,body[data-path="update-password"] .navbar,body[data-path="update-password"] footer{display:none!important}
body[data-path="login"] main,body[data-path="login"] .container,body[data-path="login"] .page_content{padding:0!important;margin:0 auto!important;max-width:100%!important}
body[data-path="login"] section.for-login,body[data-path="login"] section.for-forgot,body[data-path="login"] section.for-email-login,body[data-path="update-password"] .page-card-head{--am-o:#E9582E;--am-od:#B83F1B;--am-s:#4F4D4B;--am-ss:#6E6B67;--am-l:#E0DED8;--am-c:#F7F6F0}
.for-login,.for-forgot,.for-email-login{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;box-sizing:border-box}
/* the card: the head (lantern, heading) and the form read as one white card */
.for-login .page-card-head,.for-forgot .page-card-head,.for-email-login .page-card-head{width:100%;max-width:480px;box-sizing:border-box;margin:0!important;padding:34px 40px 6px;background:#fff;border:1px solid #E0DED8;border-bottom:0;border-radius:12px 12px 0 0;text-align:center;box-shadow:none}
.for-login .page-card-head img.app-logo,.for-forgot .page-card-head img.app-logo,.for-email-login .page-card-head img.app-logo{display:none!important}
.for-login .page-card-head::before,.for-forgot .page-card-head::before,.for-email-login .page-card-head::before{content:"";display:block;width:62px;height:72px;margin:0 auto 14px;background:url(/assets/almisbaah/img/lantern.png) no-repeat center/contain}
.for-login .page-card-head h4,.for-forgot .page-card-head h4,.for-email-login .page-card-head h4,body[data-path="update-password"] .page-card-head h4{font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;font-weight:400!important;font-size:2rem;line-height:1.15;color:#0D0901;letter-spacing:-0.035em;margin:0}
.for-login .page-card,.for-forgot .page-card,.for-email-login .page-card{width:100%!important;max-width:480px!important;box-sizing:border-box;margin:-1px auto 0!important;background:#fff!important;border:1px solid #E0DED8!important;border-top:0!important;border-radius:0 0 12px 12px!important;box-shadow:none!important;padding:22px 40px 36px!important}
/* one soft shadow around the head and the form together */
.for-login,.for-forgot,.for-email-login{filter:drop-shadow(0 12px 22px rgba(79,77,75,.09))}
.for-login .page-card form,.for-login .page-card .page-card-body,.for-forgot .page-card form,.for-forgot .page-card .page-card-body,.for-email-login .page-card form,.for-email-login .page-card .page-card-body{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
/* order inside the card: Al-Misbaah button, then the password toggle, then the folded form */
.for-login form.form-login>.page-card-body{display:flex;flex-direction:column;gap:12px}
.for-login .social-logins{order:-2;margin:0!important;padding:0!important;width:100%}
.for-login .am-pw-toggle{order:-1}
.for-login .login-divider{display:none!important}
.for-login .social-login-buttons,.for-login .login-button-wrapper{width:100%;margin:0!important;padding:0!important}
.for-login form.form-login:not(.am-pw-open)>.page-card-body>.page-card-body,.for-login form.form-login:not(.am-pw-open)>.page-card-body>.page-card-actions{display:none!important}
.for-login form.form-login.am-pw-open>.page-card-body>.page-card-body{border-top:1px solid #E0DED8;padding-top:18px!important;margin-top:2px!important}
/* buttons: square like the website's DONATE NOW, 50px tall, Epilogue 600 uppercase, text centered both ways */
.for-login .btn,.for-forgot .btn,.for-email-login .btn,body[data-path="update-password"] .btn{display:flex!important;align-items:center;justify-content:center;width:100%!important;min-height:50px;height:auto!important;padding:0 20px!important;border-radius:0!important;font-family:'Epilogue',sans-serif!important;font-weight:600!important;font-size:15px!important;line-height:1.2!important;letter-spacing:.02em;text-transform:uppercase;box-sizing:border-box;box-shadow:none!important;text-align:center}
.for-login a.btn-authentik,.for-login .btn-primary,.for-forgot .btn-primary,.for-email-login .btn-primary,body[data-path="update-password"] .btn-primary{background:#E9582E!important;border:0!important;color:#fff!important}
.for-login a.btn-authentik:hover,.for-login .btn-primary:hover,.for-forgot .btn-primary:hover,body[data-path="update-password"] .btn-primary:hover{background:#B83F1B!important;color:#fff!important}
/* with the form open, its submit is the quiet secondary button (white, like BECOME A VOLUNTEER) so the Al-Misbaah button stays the main one */
.for-login .page-card-actions .btn-login{background:#fff!important;border:1.5px solid #0D0901!important;color:#0D0901!important}
.for-login .page-card-actions .btn-login:hover{background:#EEECE6!important}
.for-login .page-card-actions{margin-top:4px!important;padding:0!important;width:100%}
.for-login .am-pw-toggle{display:block;margin:2px auto 0;padding:8px 12px;background:none;border:0;border-radius:999px;color:#4F4D4B;font:600 15px/1.3 'Epilogue',sans-serif;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(79,77,75,.35);text-underline-offset:3px}
.for-login .am-pw-toggle:hover{color:#B83F1B}
.for-login form.am-pw-open .am-pw-toggle{text-decoration:none;color:#4F4D4B}
/* fields: 4px corners, a visible edge, brand focus (never the pink or browser blue) */
.for-login .form-control,.for-forgot .form-control,.for-email-login .form-control,body[data-path="update-password"] .form-control{background:#fff!important;border:1.5px solid #BBBAB8!important;border-radius:4px!important;color:#0D0901!important;font-family:'Geist',sans-serif;font-size:16px!important;height:50px!important;box-shadow:none!important;text-align:left}
.for-login .form-control::placeholder,.for-forgot .form-control::placeholder{color:#9A9690}
.for-login .form-control:focus,.for-forgot .form-control:focus,.for-email-login .form-control:focus,body[data-path="update-password"] .form-control:focus{outline:none!important;border-color:#B83F1B!important;box-shadow:0 0 0 3px rgba(233,88,46,.30)!important;background:#fff!important}
.for-login .email-field .field-icon,.for-login .password-field .field-icon{top:17px!important;color:#6E6B67}
.for-login .email-field .form-control,.for-login .password-field .form-control{padding-left:40px!important}
.for-login .toggle-password{top:15px!important;right:14px!important;color:#6E6B67!important;font-size:13px}
.for-login .form-group{margin-bottom:12px!important}
.for-login .forgot-password-message{margin:2px 0 0!important;text-align:right}
.for-login .forgot-password-message a,.for-forgot a,.for-email-login a{color:#B83F1B!important;font-weight:500;font-size:14px}
.for-login a:focus-visible,.for-login .btn:focus-visible,.for-login .am-pw-toggle:focus-visible,.for-forgot .btn:focus-visible,.for-forgot a:focus-visible{outline:3px solid #B83F1B!important;outline-offset:3px}
.for-forgot .page-card-body p,.for-forgot .text-muted{color:#6E6B67!important}
.for-login .page-card-head h4 .am-nb,.for-forgot .page-card-head h4 .am-nb,.for-email-login .page-card-head h4 .am-nb,body[data-path="update-password"] .page-card-head h4 .am-nb{white-space:nowrap;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.2em;letter-spacing:-0.01em}
@media (min-width:521px){.for-login .page-card-head h4,.for-forgot .page-card-head h4,.for-email-login .page-card-head h4{white-space:nowrap}}
.for-login .page-card-head h4,.for-forgot .page-card-head h4,.for-email-login .page-card-head h4{text-wrap:balance}
@media (max-width:520px){
 .for-login,.for-forgot,.for-email-login{justify-content:flex-start;padding:24px 16px}
 .for-login .page-card-head,.for-forgot .page-card-head,.for-email-login .page-card-head{padding:28px 22px 4px}
 .for-login .page-card,.for-forgot .page-card,.for-email-login .page-card{padding:20px 22px 30px!important}
 .for-login .page-card-head h4,.for-forgot .page-card-head h4,.for-email-login .page-card-head h4{font-size:1.75rem}
}
/* the job application form (careers, 2026-09-29): brand colors and fonts */
body[data-path^="job_application"]{background:#F7F6F0;font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#0D0901}
body[data-path^="job_application"] h1,body[data-path^="job_application"] .web-form-title h1{font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:500;letter-spacing:-0.035em}
body[data-path^="job_application"] .btn-primary{background:#E9582E!important;border-color:#E9582E!important;color:#fff!important;border-radius:0;font-family:'Epilogue',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
body[data-path^="job_application"] .btn-primary:hover{background:#B83F1B!important;border-color:#B83F1B!important}
body[data-path^="job_application"] .form-control{border:1px solid #BBBAB8;border-radius:4px;background:#fff}
body[data-path^="job_application"] .form-control:focus{border-color:#B83F1B;box-shadow:0 0 0 3px rgba(233,88,46,.30)}
/* CEO 2026-09-30: the sign in page keeps its artwork (as it was before the 9/29 polish): faint wings and star marks behind,
   the full lantern and AL-MISBAAH logo, an orange edged card with the flame yellow offset shadow */
body[data-path="login"]::before,body[data-path="update-password"]::before{content:"";position:fixed;left:-70px;top:-40px;width:380px;height:380px;background:url(/assets/almisbaah/img/mark-wings.png) no-repeat center/contain;opacity:.10;pointer-events:none;z-index:0}
body[data-path="login"]::after,body[data-path="update-password"]::after{content:"";position:fixed;right:-80px;bottom:-80px;width:420px;height:420px;background:url(/assets/almisbaah/img/mark-star.png) no-repeat center/contain;opacity:.12;pointer-events:none;z-index:0}
.for-login .page-card-head::before,.for-forgot .page-card-head::before,.for-email-login .page-card-head::before{width:100%;height:150px;margin:0 auto 16px;background:url(/assets/almisbaah/img/logo-full.png) no-repeat center/contain}
.for-login .page-card-head,.for-forgot .page-card-head,.for-email-login .page-card-head{border:2px solid #E9582E!important;border-bottom:0!important}
.for-login .page-card,.for-forgot .page-card,.for-email-login .page-card{border:2px solid #E9582E!important;border-top:0!important;margin-top:-2px!important}
.for-login,.for-forgot,.for-email-login{filter:drop-shadow(10px 10px 0 #F9D81D)}
@media (max-width:480px){
body[data-path="login"]::before{width:220px;height:220px;left:-60px;top:-40px}
body[data-path="login"]::after{width:240px;height:240px;right:-70px;bottom:-60px}
.for-login .page-card-head::before,.for-forgot .page-card-head::before,.for-email-login .page-card-head::before{height:112px}
.for-login,.for-forgot,.for-email-login{filter:drop-shadow(6px 6px 0 #F9D81D);padding-right:22px}
}