/* Noor-e-Jahan · Signature package. Theme-scoped, mobile-first and bilingual.
   Based on the approved V10 artwork; never impacts other Bulawa templates. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Nastaliq+Urdu:wght@400;500;600&display=swap');

/* Royal entrance: one 9:16 artboard used by the illustration and BOTH door halves. */
.opening-overlay.op-noor{--nj-gold:#c9a969;position:fixed;inset:0;display:block;padding:0;overflow:hidden;overscroll-behavior:contain;background:#0b3027;color:#f3d9a1;isolation:isolate}
.op-noor .nj-gateway{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;isolation:isolate}
.op-noor .nj-artboard{position:absolute;top:50%;left:50%;width:max(100%,56.25dvh);height:100%;transform:translate(-50%,-50%);overflow:visible;isolation:isolate}
.op-noor .nj-courtyard{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;filter:saturate(.97) brightness(.94);transform:scale(1.035);transition:transform 4s cubic-bezier(.16,.68,.2,1)}
.op-noor .nj-gates{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.op-noor .nj-gate{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;will-change:transform;transition:transform 2.35s cubic-bezier(.27,.72,.19,1),filter 2.3s ease}
.op-noor .nj-gate.nj-left{left:0}.op-noor .nj-gate.nj-right{right:0}
.op-noor .nj-gate img{position:absolute;top:0;width:200%;max-width:none;height:100%;object-fit:cover;object-position:center}
.op-noor .nj-gate.nj-left img{left:0}.op-noor .nj-gate.nj-right img{right:0}
/* Transform must move a FULL panel-width; 52% left the old gate stuck halfway. */
.op-noor.is-opening .nj-gate.nj-left{transform:translateX(-108%);filter:brightness(.88)}
.op-noor.is-opening .nj-gate.nj-right{transform:translateX(108%);filter:brightness(.88)}
.op-noor.is-opening .nj-courtyard{transform:scale(1)}
.op-noor .nj-opening-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,21,13,.44),transparent 18%,transparent 65%,rgba(0,22,16,.41))}
.op-noor .nj-gate-brand{position:absolute;top:max(24px,env(safe-area-inset-top));left:10%;right:10%;z-index:4;text-align:center;pointer-events:none;font:700 10px/1.6 'DM Sans',sans-serif;letter-spacing:1.8px;text-shadow:0 2px 9px #052319}
.op-noor .nj-gate-brand[lang=ur]{font:500 17px/2 'Noto Nastaliq Urdu',serif;letter-spacing:0}
/* The gold medallion is part of the artwork. Only dynamic initials overlay it:
   no second green badge, outline, shadow frame, or "tap to open" caption. */
.op-noor .nj-open-monogram{
  position:absolute;
  z-index:5;
  top:46.1%;
  left:50%;
  transform:translate(-50%,-50%);
  width:15%;
  min-width:64px;
  height:8%;
  min-height:58px;
  display:grid;
  place-items:center;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#f4d48f;
  font:400 clamp(24px,3.15dvh,29px)/1.1 'Cormorant Garamond',Georgia,serif;
  text-shadow:0 1px 4px #061b0f;
  cursor:pointer;
}
.op-noor .nj-open-monogram span{display:block;white-space:nowrap;pointer-events:none}

.op-noor .nj-open-plaque{position:absolute;z-index:5;top:78.1%;left:24%;width:52%;min-height:6.5%;display:flex;align-items:center;justify-content:center;padding:9px 7px;background:#07392e;color:#ffe1a2;border:1px solid #c8a360;border-radius:14px;box-shadow:0 0 0 3px #07392ed8,0 5px 10px #0005;font:700 10px/1.35 'DM Sans',sans-serif;letter-spacing:.6px;text-align:center;cursor:pointer}
.op-noor .nj-open-plaque[lang=ur]{font:500 13px/1.8 'Noto Nastaliq Urdu',serif;letter-spacing:0}
.op-noor .nj-open-plaque:hover,.op-noor .nj-open-monogram:hover{filter:brightness(1.14)}
.op-noor .nj-open-plaque:focus-visible,.op-noor .nj-open-monogram:focus-visible{outline:3px solid #ffe4aa;outline-offset:7px}
.op-noor .nj-gate-skip{position:absolute;z-index:6;top:max(14px,env(safe-area-inset-top));right:12px;min-height:40px;border:1px solid #e5c8876b;border-radius:99px;padding:6px 14px;background:#0b3027c8;color:#ffe6ba;font:11px/1.4 'DM Sans',sans-serif}
.op-noor .nj-gate-reveal{position:absolute;left:11%;right:11%;bottom:24%;z-index:4;text-align:center;pointer-events:none;opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s ease;color:#fff3cf;text-shadow:0 3px 13px #06291e,0 1px 24px #06291e}
.op-noor .nj-gate-reveal small{display:block;font:700 10px/1.7 'DM Sans',sans-serif;letter-spacing:1.6px}
.op-noor .nj-gate-reveal strong{display:block;font:500 clamp(38px,9vw,69px)/1.05 'Cormorant Garamond',Georgia,serif;overflow-wrap:anywhere}
.op-noor .nj-gate-reveal strong em{font-style:normal;color:#f8d48f}
.op-noor .nj-gate-reveal p{margin:12px 0 0;font-size:15px}
.op-noor .nj-gate-reveal[lang=ur] small,.op-noor .nj-gate-reveal[lang=ur] p{font:500 15px/2 'Noto Nastaliq Urdu',serif;letter-spacing:0}
.op-noor.nj-gate-opened .nj-gate-reveal{opacity:1;transform:none}
.op-noor.is-opening .nj-open-monogram,.op-noor.is-opening .nj-open-plaque{opacity:0;pointer-events:none;transition:opacity .3s ease}
.op-noor .op-skip{display:none}

/* The invitation itself: full backgrounds, no accidental side-image fragments. */
body[data-theme=noor]{--nj-forest:#0b3027;--nj-gold:#c9a969;--nj-ivory:#fbf6ec;--nj-ink:#193b32;background:var(--nj-ivory);color:var(--nj-ink)}
body[data-theme=noor] #invitation{width:100%;overflow-x:clip;background:var(--nj-ivory)}
body[data-theme=noor] .topbar{position:relative;z-index:3;height:auto;min-height:67px;padding:13px 20px;background:#0d352b;color:#edd6a4;border-bottom:1px solid #c9a96970}
body[data-theme=noor] .topbar .monogram{font-size:24px;color:#f6db9d}
body[data-theme=noor] .topbar a,body[data-theme=noor] .topbar button{color:#ffecbf;border-color:#d0b272a6}
body[data-theme=noor] .topbar .mini-nav{flex-wrap:wrap}
body[data-theme=noor] .hero.nj-hero{min-height:0;max-width:none;margin:0;padding:40px 18px 65px;border:0;border-radius:0;outline:0;box-shadow:none;background:radial-gradient(circle at 50% 15%,#fffcf5,#f7eedf);text-align:center}
body[data-theme=noor] .hero.nj-hero::before,body[data-theme=noor] .hero.nj-hero::after{content:none}
.nj-topline,.nj-kicker,.nj-date,.nj-hero-figure figcaption,.nj-event-eyebrow{font:700 10px/1.6 'DM Sans',sans-serif;letter-spacing:2px;text-transform:uppercase;color:#997943}
.nj-rule{color:var(--nj-gold);margin:18px auto;font-size:15px;letter-spacing:5px}
.nj-bismillah{color:#274538;font:27px/2 'Noto Naskh Arabic','Noto Nastaliq Urdu',serif;margin:15px auto 22px}
.nj-hero-figure{position:relative;width:min(100%,370px);height:clamp(320px,calc(99 * 1cqw),480px);margin:0 auto 40px;border:5px solid #fffaf1;outline:1px solid #c6a66b;overflow:hidden;border-radius:47% 47% 4px 4px / 18% 18% 4px 4px;box-shadow:0 12px 26px #4b312a26}
.nj-hero-photo{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.nj-hero-figure figcaption{position:absolute;bottom:0;left:0;right:0;padding:29px 12px 11px;color:#ffedbe;background:linear-gradient(transparent,rgba(4,37,28,.88))}
.nj-hero-copy{max-width:450px;margin:0 auto}.nj-kicker{margin:0 auto 12px}.nj-family{font-size:20px;color:#766b56;margin:14px 0}
body[data-theme=noor] .hero .nj-names{margin:20px auto 20px;font:500 clamp(60px,calc(15 * 1cqw),90px)/.98 'Cormorant Garamond',Georgia,serif;color:#4b3522;overflow-wrap:anywhere}
.nj-names span,.nj-names em{display:block}.nj-names em{font-size:.57em;color:var(--nj-gold);font-style:normal;line-height:1.2}
.nj-welcome{font-size:23px;line-height:1.4;max-width:370px;margin:20px auto;color:#5d5c4d}.nj-date{margin:28px auto 12px;color:#977140}.nj-guest{font-size:18px;color:#9b793f}.nj-guest strong{font-weight:600;display:block}
.nj-personal-portrait img{width:142px;height:165px;object-fit:cover;margin:16px auto;border:3px double #bd995d;border-radius:70px 70px 3px 3px}
.nj-explore{display:inline-flex;justify-content:center;align-items:center;gap:10px;margin-top:39px;font:600 13px 'DM Sans',sans-serif;letter-spacing:.3px;text-decoration:none;color:#886838}
body[data-theme=noor] .section{padding:70px 20px;max-width:100%;margin:0;position:relative;overflow:hidden}
body[data-theme=noor] .section h2{font:500 clamp(34px,calc(8.6 * 1cqw),52px)/1.13 'Cormorant Garamond',Georgia,serif;margin:13px auto 24px;max-width:500px}
body[data-theme=noor] .section>.small{font:700 10px/1.8 'DM Sans',sans-serif;letter-spacing:1.7px;color:#9e7c47}
body[data-theme=noor] .section .ornament{margin:14px auto 30px;color:#bfa26f}
body[data-theme=noor] #family{background:#f8f0e2;color:#4b4c3f}
body[data-theme=noor] #family .quote{color:#5f594b;font-size:26px}
body[data-theme=noor] #events{background:#f8f0e4;color:#193b32;border-top:1px solid #dac69f}
body[data-theme=noor] #events h2{color:#203c32}
body[data-theme=noor] #events>.small{color:#93713c}
body[data-theme=noor] #events>.ornament{color:#b99759}
body[data-theme=noor] .events.nj-event-list{display:grid;grid-template-columns:minmax(0,1fr);max-width:520px;width:100%;gap:24px;margin:35px auto 0}
body[data-theme=noor] .nj-event-card,body[data-theme=noor] .nj-event-card:last-child{display:block;width:100%;padding:0;margin:0;outline:none;background:#fffbf4;color:#193b32;text-align:start;border:1px solid #ccb181;box-shadow:0 9px 22px #553b2918;overflow:hidden}
.nj-event-photo{height:clamp(150px,calc(40 * 1cqw),220px);width:100%;position:relative;overflow:hidden;background:#7c6a4d}
.nj-event-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 54%,#041d1844)}
.nj-event-art{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}.nj-event-card:hover .nj-event-art{transform:scale(1.035)}
.nj-event-number{position:absolute;top:13px;left:15px;z-index:1;display:grid;place-items:center;width:34px;height:34px;border:1px solid #e1c58b;border-radius:100%;background:#0b3027e8;color:#f8db9d;font:600 11px 'DM Sans',sans-serif}
.nj-event-copy{padding:21px 24px 24px}.nj-event-eyebrow{font-size:9px;color:#a1804c;margin:0!important}
body[data-theme=noor] .nj-event-copy h3{color:#193b32;font-size:40px;margin:10px 0 8px;font-weight:500}
body[data-theme=noor] .nj-event-copy p{color:#66685f;line-height:1.48;margin:5px 0;font-size:17px}
body[data-theme=noor] .nj-event-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
body[data-theme=noor] .nj-event-actions .nj-event-action{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin:0;padding:8px 10px;background:#114537;border:1px solid #cdb076;border-radius:2px;text-decoration:none;color:#ffeac1;font:600 11px/1.5 'DM Sans',sans-serif;letter-spacing:.3px;cursor:pointer}
body[data-theme=noor] #countdown{background:radial-gradient(ellipse at 50% 4%,#1b5343,#092f26 80%);color:#f7e5be}
body[data-theme=noor] #countdown>.small{color:#e1bd82}
body[data-theme=noor] #countdown h2{color:#f9e9cd}
body[data-theme=noor] #countdown .counter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:30px auto 10px;max-width:500px}
body[data-theme=noor] #countdown .counter>div{border:1px solid #c5a76f7a;padding:17px 3px}
body[data-theme=noor] #countdown .counter strong{display:block;font-size:clamp(25px,calc(7 * 1cqw),43px);color:#fce6ba;font-variant-numeric:tabular-nums}
body[data-theme=noor] #countdown .counter span{font:600 9px 'DM Sans',sans-serif;letter-spacing:.3px;color:#fce6ba}
.nj-section-photo{height:210px;margin:-70px -20px 35px;position:relative;overflow:hidden}
.nj-countdown-photo:after,.nj-rsvp-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 25%,#103c31 100%)}
.nj-section-image{width:100%;height:100%;object-fit:cover}
body[data-theme=noor] #venue{background:#fffaf1;color:#193b32}
body[data-theme=noor] #venue .venue-frame{max-width:520px;padding:30px 18px;border:1px solid #c9a76e;background:linear-gradient(#fffaf2,#f7f0e4);outline:0}
body[data-theme=noor] #venue .venue-frame h3{font:500 34px 'Cormorant Garamond',serif;margin-top:14px;color:#214536}
body[data-theme=noor] #venue .venue-frame p{color:#5e6358}
.nj-venue-photo{width:min(100%,370px);height:clamp(270px,calc(90 * 1cqw),465px);overflow:hidden;border:5px solid #fffdf6;outline:1px solid #c3a66e;border-radius:45% 45% 3px 3px / 18% 18% 3px 3px;margin:30px auto 15px;box-shadow:0 10px 27px #44372522}
.nj-venue-photo img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
body[data-theme=noor] #venue img.venue-image{max-width:520px;height:auto;max-height:450px;object-fit:cover;border:5px solid #fffdf6;outline:1px solid #c3a66e;border-radius:44% 44% 3px 3px / 17% 17% 3px 3px}
body[data-theme=noor] #venue .button{min-height:46px;background:#154837;color:#fff0cd;text-decoration:none}
body[data-theme=noor] #rsvp{background:#f6edde;color:#1e392f}
.nj-rsvp-photo{height:205px;margin:-70px -20px 35px;position:relative;overflow:hidden}
.nj-rsvp-photo:after{background:linear-gradient(transparent 35%,#f6edde 100%)}
body[data-theme=noor] #rsvp .form-box{max-width:500px;margin:26px auto;text-align:start}
body[data-theme=noor] #rsvp .form-box label{display:block;font:600 12px/1.8 'DM Sans',sans-serif;letter-spacing:.5px;margin:14px 0 5px;color:#5f5035}
body[data-theme=noor] #rsvp .form-box input,body[data-theme=noor] #rsvp .form-box textarea,body[data-theme=noor] #rsvp .form-box select{width:100%;max-width:100%;min-height:50px;border:1px solid #d0b88e;border-radius:2px;background:#fffdf8;color:#193b32;padding:14px;font:15px/1.5 'DM Sans',sans-serif}
body[data-theme=noor] #rsvp .form-box .button{width:100%;min-height:50px;margin-top:14px;background:#144837;color:#ffedc7;border:1px solid #c9a969;font:600 11px 'DM Sans',sans-serif;letter-spacing:1px}
body[data-theme=noor] #story,body[data-theme=noor] #gallery,body[data-theme=noor] #blessings,body[data-theme=noor] #wishes,body[data-theme=noor] #uploads,body[data-theme=noor] #keepsake,body[data-theme=noor] #contacts,body[data-theme=noor] #dress-code,body[data-theme=noor] #faq{background:linear-gradient(#fffaf0,#f6eddf);color:#203b31}
body[data-theme=noor] .section .button{border-color:#c4a268}
.nj-story-photo{height:160px;max-width:500px;margin:0 auto 30px;overflow:hidden;border-radius:45% 45% 2px 2px / 35% 35% 2px 2px}
body[data-theme=noor] #invitation footer.dark{position:relative;overflow:hidden;background:linear-gradient(180deg,#0b382d,#092c23);color:#f7e4bc;padding:0 24px 58px}
body[data-theme=noor] #invitation footer.dark:before{content:'';display:block;height:245px;margin:0 -24px 40px;background:linear-gradient(180deg,transparent 45%,#0b382d 100%),url('/themes/noor-jahan/event-barat.webp') center/cover no-repeat}
body[data-theme=noor] #invitation footer .script{font:500 clamp(48px,calc(12 * min(1vw, 4.4px)),80px)/1.13 'Cormorant Garamond',Georgia,serif;color:#f1d39a}
body[data-theme=noor] #invitation footer p{color:#f5e1b9}
body[data-theme=noor] #invitation footer .invitation-company p{color:#e4c9a0}
body[data-theme=noor] #invitation footer .company-name{color:#e5c48b}
body[data-theme=noor] #invitation footer .ornament{color:#d7ba7e}
/* Urdu: mirroring/typography for the invitation and its interactive form. */
body[data-theme=noor][dir=rtl] .nj-hero,body[data-theme=noor][dir=rtl] .nj-hero-copy,body[data-theme=noor][dir=rtl] .nj-event-copy,body[data-theme=noor][dir=rtl] .section,body[data-theme=noor][dir=rtl] #invitation footer{font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',serif}
body[data-theme=noor][dir=rtl] .nj-kicker,body[data-theme=noor][dir=rtl] .nj-topline,body[data-theme=noor][dir=rtl] .nj-date,body[data-theme=noor][dir=rtl] .nj-hero-figure figcaption,body[data-theme=noor][dir=rtl] .nj-event-eyebrow,body[data-theme=noor][dir=rtl] .nj-explore{font:500 15px/2 'Noto Nastaliq Urdu',serif;letter-spacing:0;text-transform:none}
body[data-theme=noor][dir=rtl] .nj-family,body[data-theme=noor][dir=rtl] .nj-welcome{line-height:2.2}
body[data-theme=noor][dir=rtl] .nj-names,body[data-theme=noor][dir=rtl] .nj-names span,body[data-theme=noor][dir=rtl] #invitation footer .script{font-family:'Noto Nastaliq Urdu',serif;line-height:1.95;font-size:clamp(38px,calc(10 * min(1vw, 4.4px)),60px)}
body[data-theme=noor][dir=rtl] .nj-names em{font-family:Georgia,serif;line-height:.9}
body[data-theme=noor][dir=rtl] .section h2{font:500 clamp(27px,calc(7 * 1cqw),39px)/2 'Noto Nastaliq Urdu',serif}
body[data-theme=noor][dir=rtl] .nj-event-copy h3{font:500 30px/2 'Noto Nastaliq Urdu',serif}
body[data-theme=noor][dir=rtl] .nj-event-copy p{line-height:2.1}
body[data-theme=noor][dir=rtl] .nj-event-number{left:auto;right:15px}
body[data-theme=noor][dir=rtl] .nj-event-actions .nj-event-action,body[data-theme=noor][dir=rtl] #rsvp .form-box label,body[data-theme=noor][dir=rtl] #rsvp .form-box .button{font:500 14px/1.8 'Noto Nastaliq Urdu',serif;letter-spacing:0}
body[data-theme=noor][dir=rtl] .section .form-box,body[data-theme=noor][dir=rtl] .section .message{text-align:right}
body[data-theme=noor][dir=rtl] .section .form-box input,body[data-theme=noor][dir=rtl] .section .form-box textarea{direction:rtl;text-align:right}
body[data-theme=noor][dir=rtl] .section .counter{direction:ltr}
@container invitation (max-width:380px){.nj-event-copy{padding:18px}}

@media(max-width:380px){.op-noor .nj-open-monogram{font-size:24px}.op-noor .nj-open-plaque{font-size:9px}}
@media(prefers-reduced-motion:reduce){.op-noor .nj-gate,.op-noor .nj-courtyard,.op-noor .nj-gate-reveal{transition:none!important}.op-noor.is-opening .nj-gate{opacity:0}.nj-event-art{transition:none}}

/* Reveal the couple only after the doors have fully parted; avoid hiding it during the exit fade. */
.op-noor.is-opening .nj-gate-reveal{opacity:1;transform:translateY(0);transition-delay:2.45s}

/* Only the HTML buttons act as controls. Hide them as the gates start moving. */
.op-noor.is-opening .nj-open-plaque,.op-noor.is-opening .nj-open-monogram{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.op-noor .nj-sound-toggle{position:absolute;z-index:6;top:max(14px,env(safe-area-inset-top));left:14px;display:grid;place-items:center;width:42px;height:42px;border:1px solid #e5c887c4;border-radius:50%;background:#07382ccc;color:#ffe6ba;font:600 23px/1 Georgia,serif;cursor:pointer;box-shadow:0 2px 9px #0005}
.op-noor .nj-sound-toggle:focus-visible{outline:3px solid #ffdc94;outline-offset:3px}

/* Mobile-first photo scale: fill the invitation instead of leaving broad
   paper margins; use the same premium framing for owner-uploaded venues. */
body[data-theme="noor"] #invitation .hero.nj-hero{padding-inline:12px}
body[data-theme="noor"] #invitation .nj-hero-figure{
  width:100%;max-width:540px;height:clamp(415px,calc(130 * 1cqw),640px);
  margin:8px auto 32px;border-width:4px;
}
body[data-theme="noor"] #invitation .nj-hero-figure .nj-hero-photo{
  width:100%;height:100%;object-fit:cover;object-position:center 45%;
}
body[data-theme="noor"] #invitation #venue .nj-venue-photo{
  width:min(100%,520px);height:clamp(360px,calc(126 * 1cqw),610px);
  margin:24px auto 28px;
}
body[data-theme="noor"] #invitation #venue .nj-venue-photo.has-upload{
  height:auto;min-height:0;background:#f7e8d2;
}
body[data-theme="noor"] #invitation #venue .nj-venue-photo.has-upload img{
  width:100%;height:auto;max-height:630px;object-fit:contain;
}
@container invitation (max-width:380px){
 body[data-theme="noor"] #invitation .nj-hero-figure{height:clamp(390px,calc(131 * 1cqw),510px)}}

@media(max-width:380px){
}

/*
 * Noor-e-Jahan readability + isolated semantic colors.
 * The shared palette supplies accessible defaults; these selectors explicitly
 * own all royal surfaces and actions, outranking general #invitation rules.
 */
body[data-theme="noor"] #invitation header.topbar{
  background:#10382c;
  color:#f8e8c5;
  border-bottom:1px solid #c9a96980;
}
body[data-theme="noor"] #invitation header.topbar .monogram,
body[data-theme="noor"] #invitation header.topbar .mini-nav a,
body[data-theme="noor"] #invitation header.topbar .mini-nav a :is(span,svg){
  color:#f7e3b4;
}
body[data-theme="noor"] #invitation header.topbar .mini-nav button{
  color:#173b33;
  background:#f7efda;
  border:1px solid #d1b783;
}
body[data-theme="noor"] #invitation header.topbar .mini-nav button:hover,
body[data-theme="noor"] #invitation header.topbar .mini-nav button:focus-visible{
  color:#092c24;
  background:#fff9e9;
}
body[data-theme="noor"] #invitation header.topbar .mini-nav a:hover,
body[data-theme="noor"] #invitation header.topbar .mini-nav a:focus-visible{
  color:#fff8e6;
}

/* Readable body copy on ivory: gold remains decorative, never small-text ink. */
body[data-theme="noor"] #invitation .hero.nj-hero :is(.nj-topline,.nj-kicker,.nj-date){
  color:#735125;
}
body[data-theme="noor"] #invitation .hero.nj-hero .nj-family,
body[data-theme="noor"] #invitation .hero.nj-hero .nj-welcome{
  color:#4b5347;
}
body[data-theme="noor"] #invitation .hero.nj-hero .nj-explore{
  color:#224c3d;
}
body[data-theme="noor"] #invitation .hero.nj-hero .nj-names,
body[data-theme="noor"] #invitation .hero.nj-hero .nj-names span{
  color:#193b32;
}
body[data-theme="noor"] #invitation .nj-hero-figure figcaption{
  color:#fff3d7;
}
body[data-theme="noor"] #invitation .section > .small{
  color:#735125;
}

/* A button inside a card must not inherit the dark link ink from the shared
   #invitation .event a rule. This fixes invisible "Get directions" text. */
body[data-theme="noor"] #invitation .nj-event-card{
  background:#fffbf4;
  color:#193b32;
  border-color:#ccb181;
}
body[data-theme="noor"] #invitation .nj-event-card .nj-event-copy h3{
  color:#193b32;
}
body[data-theme="noor"] #invitation .nj-event-card .nj-event-copy p{
  color:#49564b;
}
body[data-theme="noor"] #invitation .nj-event-card .nj-event-copy p.nj-event-eyebrow{
  color:#735125;
}
body[data-theme="noor"] #invitation .nj-event-card .nj-event-actions :is(a.nj-event-action,button.nj-event-action){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  min-height:44px;
  padding:10px 13px;
  border:1px solid #cdb076;
  border-radius:2px;
  background:#114537;
  color:#fff3d8;
  font:700 12px/1.4 'DM Sans',sans-serif;
  letter-spacing:.15px;
  text-align:center;
  text-decoration:none;
  -webkit-text-fill-color:#fff3d8;
}
body[data-theme="noor"] #invitation .nj-event-card .nj-event-actions :is(a.nj-event-action,button.nj-event-action):is(:hover,:focus-visible){
  background:#1c5c49;
  color:#ffffff;
  -webkit-text-fill-color:#ffffff;
}
body[data-theme="noor"] #invitation .nj-event-card .nj-event-actions :is(a.nj-event-action,button.nj-event-action):focus-visible{
  outline:3px solid #8e631f;
  outline-offset:2px;
}
body[data-theme="noor"][dir=rtl] #invitation .nj-event-card .nj-event-actions :is(a.nj-event-action,button.nj-event-action){
  font:600 14px/1.9 'Noto Nastaliq Urdu',serif;
  letter-spacing:0;
}

/* The couple's uploaded portrait: exactly 80% of its frame, maximum 250px
   tall. Use object-fit so large uploads aren't distorted. */
body[data-theme="noor"] #invitation .nj-personal-portrait{
  display:block;
  width:min(100%,420px);
  margin:18px auto 28px;
  text-align:center;
}
body[data-theme="noor"] #invitation .nj-personal-portrait img{
  display:block;
  width:80%;
  max-width:100%;
  height:min(250px,calc(65 * 1cqw));
  max-height:250px;
  object-fit:cover;
  object-position:center;
  margin:16px auto;
  border:3px double #bd995d;
  border-radius:70px 70px 3px 3px;
}

/* V11 readability: the reflective palace water varies from bright gold to
   near white; typography needs an opaque-enough surface behind it. */
.op-noor .nj-gate-reveal{
  left:12%;
  right:12%;
  bottom:17.5%;
  padding:20px 15px 19px;
  border:1px solid rgba(237,199,128,.9);
  border-radius:18px 18px 11px 11px;
  background:linear-gradient(150deg,rgba(6,43,33,.97),rgba(10,57,45,.96));
  color:#fff8e8;
  text-shadow:0 1px 3px #001b15;
  box-shadow:0 14px 38px rgba(3,21,16,.52),inset 0 0 0 3px rgba(231,193,118,.12);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}
.op-noor .nj-gate-reveal small{
  color:#fce8c4;
  font:700 10px/1.65 'DM Sans',sans-serif;
  letter-spacing:1.2px;
}
.op-noor .nj-gate-reveal strong{
  color:#fff9e9;
  font:500 clamp(30px,8vw,54px)/1.12 'Cormorant Garamond',Georgia,serif;
  text-shadow:0 2px 5px #001b15;
}
.op-noor .nj-gate-reveal strong em{color:#f1cd8c}
.op-noor .nj-gate-reveal p{
  color:#fbe9cf;
  font-size:16px;
  line-height:1.4;
  margin:10px 0 0;
}
@media(max-width:370px){
  .op-noor .nj-gate-reveal{left:11.5%;right:11.5%;padding:16px 10px}
  .op-noor .nj-gate-reveal strong{font-size:clamp(28px,7.6vw,42px)}
}
@media (prefers-reduced-motion:reduce){
  .op-noor .nj-gate-reveal{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* The notice is not an interactive control. Clear its collapsed margins to
   prevent a dark stripe being exposed immediately below the top bar. */
body[data-theme="noor"] #invitation main{display:flow-root}
body[data-theme="noor"] #invitation main > p.nj-guest-notice{
  display:block;
  width:100%;
  margin:0;
  padding:18px 18px 15px;
  border:0;
  outline:0;
  box-shadow:none;
  background:#fbf6ec;
  color:#2d4a3f;
  font:500 12px/1.7 'DM Sans',Arial,sans-serif;
  text-align:center;
}
body[data-theme="noor"][dir=rtl] #invitation main > p.nj-guest-notice{
  font:500 14px/2 'Noto Nastaliq Urdu',serif;
}

/* Venue fallback should look intentional even when no location has been set. */
body[data-theme="noor"] #invitation #venue .venue-frame .venue-placeholder{
  margin:15px auto 10px;
  color:#294536;
  font:500 clamp(21px,calc(5.5 * 1cqw),28px)/1.35 'Cormorant Garamond',Georgia,serif;
  text-align:center;
}
body[data-theme="noor"][dir=rtl] #invitation #venue .venue-frame .venue-placeholder{
  font:500 18px/2.1 'Noto Nastaliq Urdu',serif;
}

/* Bulawa branding stays English and LTR even when the invitation is Urdu. */
.op-noor .nj-gate-brand[lang="en"],
body[data-theme="noor"] #invitation .nj-topline.nj-brand-lockup,
body[data-theme="noor"][dir="rtl"] #invitation .nj-topline.nj-brand-lockup{
  direction:ltr;unicode-bidi:isolate;text-align:center;
  font:700 10px/1.65 'DM Sans',Arial,sans-serif;
  letter-spacing:1.6px;text-transform:uppercase;
}
.op-noor .nj-gate-brand[lang="en"]{color:#fce8bc;text-shadow:0 2px 9px #052319}
body[data-theme="noor"] #invitation .nj-topline.nj-brand-lockup{color:#735125}

/* Opening labels must stay readable on richly detailed golden gate imagery. */
.op-noor .nj-open-monogram small{
  color:#fff1cb;
  font:700 11px/1.4 'DM Sans',Arial,sans-serif;
  letter-spacing:.25px;
  text-shadow:0 1px 3px #00180f;
}
.op-noor .nj-open-plaque{
  background:#083d30;
  color:#fff4d5;
  border-color:#dfba73;
  font:700 13px/1.35 'DM Sans',Arial,sans-serif;
  letter-spacing:.2px;
  text-shadow:0 1px 3px #00190e;
}
.op-noor .nj-gate-skip{
  background:#092f27eb;
  color:#fff3d2;
  font:600 12px/1.45 'DM Sans',Arial,sans-serif;
}
.op-noor .nj-gate-brand[lang="en"]{
  color:#fff1c5;
  font:700 11px/1.5 'DM Sans',Arial,sans-serif;
  text-shadow:0 2px 5px #001a0f,0 0 9px #001a0f;
}
.op-noor .nj-gate-reveal strong{
  color:#fff9e9;
  font-size:clamp(29px,7.6vw,38px);
  line-height:1.16;
}
.op-noor .nj-gate-reveal small{
  color:#fff3da;
  font-size:11px;
}
.op-noor .nj-gate-reveal p{
  color:#fff3da;
  font-size:17px;
  line-height:1.45;
}
@media(max-width:360px){
  .op-noor .nj-open-plaque{font-size:12px}
  .op-noor .nj-gate-reveal strong{font-size:29px}
}