/* =========================================================================
   NUSUK HAJJ — SITE STYLESHEET
   -------------------------------------------------------------------------
   Organised as:
     1. Design tokens (EDIT COLOURS/FONTS HERE — nowhere else)
     2. Base / typography
     3. Header & navigation
     4. Buttons
     5. Hero
     6. Reusable section patterns (trust strip, split, cards, quote, CTA)
     7. Page-specific: About / Packages / Gallery / FAQ / Contact
     8. Footer
     9. Responsive tweaks
   ========================================================================= */

/* ---------- 1. DESIGN TOKENS ------------------------------------------- */
:root{
  /* Colour palette — change these 6 values to re-theme the whole site */
  --green-950:#0B2A20;   /* deepest green — header on scroll, footer, dark bands */
  --green-800:#123D2C;   /* primary green — headings on light bg, panels */
  --green-600:#1F6E4C;   /* mid green — hover states, links */
  --gold-500:#C6A15B;    /* primary gold accent — rules, buttons, prices */
  --gold-300:#E4D3A6;    /* light gold — on dark backgrounds */
  --cream-50:#FAF6EC;    /* page background */
  --ink-900:#211E16;     /* body text (warm near-black, not pure black) */
  --white:#FFFFFF;

  /* Type */
  --font-display:'Cormorant', Georgia, serif;
  --font-body:'Work Sans', -apple-system, Segoe UI, sans-serif;

  /* Layout */
  --radius:3px;               /* small, editorial — not a rounded SaaS card */
  --container-pad:1.25rem;
}

/* ---------- 2. BASE / TYPOGRAPHY --------------------------------------- */
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--cream-50);
  line-height:1.65;
}
h1,h2,h3,h4,.font-display{
  font-family:var(--font-display);
  color:var(--green-800);
  font-weight:600;
  line-height:1.15;
}
h1{font-size:clamp(2.5rem,5vw,4rem);}
h2{font-size:clamp(1.9rem,3.2vw,2.6rem);}
h3{font-size:clamp(1.4rem,2.2vw,1.8rem);}
p{max-width:62ch;}
a{color:var(--green-600); text-decoration:none;}
a:hover{color:var(--gold-500);}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--green-950); color:var(--white);
  padding:.75rem 1.25rem; z-index:2000;
}
.skip-link:focus{left:0;}
.section{padding:5rem 0;}
.section-tight{padding:3rem 0;}
.rule-gold{
  width:64px; height:2px; background:var(--gold-500); border:0; margin:1.25rem 0;
}
.text-gold{color:var(--gold-500) !important;}
.lede{font-size:1.15rem; color:#4B4737;}

/* ---------- 3. HEADER & NAV --------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:transparent;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:.75rem 0;
}
.site-header.is-scrolled{
  background:var(--green-950);
  box-shadow:0 2px 12px rgba(0,0,0,.15);
  padding:.4rem 0;
}
.navbar-brand{display:flex; align-items:center; gap:.65rem;}
.navbar-brand img{display:block;}
.navbar-brand .brand-text{display:flex; flex-direction:column; line-height:1.15;}
.navbar-brand .brand-text strong{
  font-family:var(--font-display); color:var(--gold-300); font-size:1.35rem; font-weight:700;
}
.navbar-brand .brand-text small{color:#CFC9B4; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;}
.navbar-nav .nav-link{
  color:var(--white);
  font-weight:500;
  letter-spacing:.02em;
  padding:.5rem 1rem !important;
  border-bottom:2px solid transparent;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  color:var(--gold-300);
  border-bottom-color:var(--gold-500);
}
.navbar-toggler{border-color:rgba(255,255,255,.4);}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* On a page without a full-bleed hero, header needs a solid bg from the start */
body:not(.has-hero) .site-header{background:var(--green-950); padding:.4rem 0;}
@media (max-width:991.98px){
  .site-header{background:var(--green-950); padding:.5rem 0;}
  .navbar-collapse{background:var(--green-950); margin-top:.75rem; padding:1rem; border-radius:var(--radius);}
}

/* Top utility bar: phone + callback, sits above the main nav.
   Solid dark background always (not translucent) so it reads clearly
   over any hero video frame, not just darker ones. */
.topbar{
  background:var(--green-950);
  border-bottom:1px solid rgba(228,211,166,.18);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.45rem 0; font-size:.82rem;
}
.topbar-phone{
  display:inline-flex; align-items:center; gap:.4rem; color:var(--gold-300); font-weight:600;
}
.topbar-phone:hover{color:var(--white);}
.topbar-callback{
  background:var(--gold-500); border:1px solid var(--gold-500); border-radius:20px;
  color:var(--green-950); font-weight:700; padding:.3rem 1rem;
  font-size:.78rem; letter-spacing:.02em; cursor:pointer;
}
.topbar-callback:hover{background:var(--gold-300); border-color:var(--gold-300); color:var(--green-950);}
@media (max-width:575.98px){
  .topbar-inner{font-size:.72rem;}
  .topbar-callback{white-space:nowrap; padding:.25rem .8rem; font-size:.7rem;}
}

/* Request-a-Callback popup */
.callback-modal-content{background:var(--cream-50); border-radius:var(--radius); border-top:3px solid var(--gold-500);}
.callback-modal-content .modal-header{border-bottom:1px solid #E4DCC4;}
.callback-modal-content .modal-title{font-size:1.4rem; color:var(--green-800);}

/* Floating WhatsApp button — fixed on every page */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:1500;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .2s ease;
}
.whatsapp-float:hover{transform:scale(1.08); color:#fff;}
.whatsapp-float svg{width:28px; height:28px;}

/* ---------- 4. BUTTONS --------------------------------------------------- */
.btn{border-radius:var(--radius); font-weight:600; padding:.7rem 1.6rem; letter-spacing:.01em;}
.btn-inquire{
  background:var(--gold-500); color:var(--green-950); border:1px solid var(--gold-500);
}
.btn-inquire:hover{background:var(--gold-300); color:var(--green-950);}
.btn-gold{background:var(--gold-500); color:var(--green-950); border:1px solid var(--gold-500);}
.btn-gold:hover{background:var(--gold-300); color:var(--green-950);}
.btn-gold-outline{background:transparent; color:var(--gold-300); border:1px solid var(--gold-500);}
.btn-gold-outline:hover{background:var(--gold-500); color:var(--green-950);}
.btn-green{background:var(--green-800); color:var(--white); border:1px solid var(--green-800);}
.btn-green:hover{background:var(--green-600); color:var(--white);}
.btn-outline-green{background:transparent; color:var(--green-800); border:1px solid var(--green-800);}
.btn-outline-green:hover{background:var(--green-800); color:var(--white);}

/* ---------- 5. HERO ------------------------------------------------------- */
.hero{
  /* padding-top guarantees a minimum gap below the fixed header regardless
     of viewport height — flex-centering alone doesn't, which is what
     caused the overlap with the hero eyebrow text on wider screens. */
  position:relative; min-height:92vh; padding-top:170px; padding-bottom:50px;
  display:flex; align-items:center;
  color:var(--white); overflow:hidden;
}
.hero video, .hero .hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,42,32,.75) 0%, rgba(11,42,32,.55) 45%, rgba(11,42,32,.9) 100%);
}
.hero .container{position:relative; z-index:2;}
.hero-eyebrow{color:var(--gold-300); font-family:var(--font-display); font-style:italic; font-size:1.25rem;}
.hero h1{color:var(--white); max-width:16ch;}
.hero p.lede{color:#EFEAD9; max-width:46ch;}
.hero-cta{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem;}

/* Hero inquiry card (compact inquiry form floated on the hero image).
   Explicit solid white + isolated stacking context so it never visually
   blends with the video behind it. */
.hero-inquiry-card{
  position:relative; z-index:5; isolation:isolate;
  background-color:var(--white);
  border-top:3px solid var(--gold-500); border-radius:var(--radius);
  padding:1.75rem; box-shadow:0 20px 45px rgba(0,0,0,.35);
}
.hero-inquiry-card h3{font-size:1.3rem; margin-bottom:.2rem; color:var(--green-800);}
.hero-inquiry-card p{color:#4B4737; font-size:.9rem; margin-bottom:1rem;}
.hero-inquiry-card .form-label{font-size:.85rem; color:var(--green-800); font-weight:600;}
.hero-inquiry-card input,
.hero-inquiry-card textarea{font-size:.92rem;}

/* Trust badges row in the hero, under the CTA buttons */
.hero-badges{display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.75rem;}
.hero-badge{display:flex; align-items:center; gap:.5rem;}
.hero-badge strong{font-family:var(--font-display); font-size:1.4rem; color:var(--gold-300); line-height:1;}
.hero-badge span{display:block; font-size:.72rem; color:#EFEAD9; letter-spacing:.03em; max-width:9ch;}

/* Page header for interior pages (no video) */
.page-header{
  background:var(--green-950); color:var(--white);
  padding:12.5rem 0 4rem;
  background-image:linear-gradient(180deg, rgba(11,42,32,.85), rgba(11,42,32,.85)), var(--page-header-img, none);
  background-size:cover; background-position:center;
}
.page-header h1{color:var(--white);}
.page-header p{color:#EFEAD9;}

/* ---------- 6. REUSABLE SECTION PATTERNS ---------------------------------- */

/* Trust strip: flat bordered panels, no shadow, no rounded corners */
.trust-strip{background:var(--green-950); color:var(--white);}
.trust-item{
  border-top:2px solid var(--gold-500);
  padding:1.75rem 1.25rem 0;
  height:100%;
}
.trust-item h3{color:var(--white); font-size:1.15rem; margin-bottom:.5rem;}
.trust-item p{color:#CFC9B4; margin-bottom:0;}

/* Split section: image + text, alternating */
.split{display:flex; align-items:center; gap:3.5rem; flex-wrap:wrap;}
.split.reverse{flex-direction:row-reverse;}
.split-media{flex:0 1 340px; max-width:340px;}
.split-media img{width:100%; height:260px; object-fit:cover; display:block; border-radius:var(--radius);}
.split-copy{flex:1 1 460px;}

/* Flat card (packages / values / gallery captions) — bordered, not rounded */
.card-flat{
  background:var(--white); border:1px solid #E4DCC4; border-top:3px solid var(--gold-500);
  border-radius:var(--radius); padding:2rem; height:100%;
}
.card-flat h3{margin-bottom:.5rem;}

/* Package price */
.price{font-family:var(--font-display); font-size:2.4rem; color:var(--green-800); font-weight:600;}
.price small{font-family:var(--font-body); font-size:.9rem; color:#6B664F; font-weight:500;}
.package-eligibility{
  background:var(--cream-50); border-left:2px solid var(--gold-500); font-size:.85rem;
  color:var(--green-800); font-weight:600; padding:.5rem .75rem; margin:.75rem 0 0;
}
.package-note{font-size:.82rem; color:#6B664F; font-style:italic; margin:.5rem 0 0;}
.package-list{list-style:none; padding:0; margin:1.25rem 0;}
.package-list li{padding:.4rem 0 .4rem 1.6rem; position:relative; border-bottom:1px dashed #E4DCC4;}
.package-list li:last-child{border-bottom:0;}
.package-list li::before{
  content:'✓'; position:absolute; left:0; color:var(--gold-500); font-weight:700;
}
.card-featured{border-top-color:var(--green-800); box-shadow:0 12px 30px rgba(11,42,32,.12);}
.card-featured .badge-popular{
  display:inline-block; background:var(--green-800); color:var(--white); font-size:.75rem;
  padding:.25rem .75rem; border-radius:20px; margin-bottom:.75rem; letter-spacing:.03em;
}

/* Testimonial / quote */
.quote-block{
  background:var(--green-950); color:var(--white); padding:4rem 0; position:relative;
}
.quote-mark{font-family:var(--font-display); font-size:5rem; color:var(--gold-500); line-height:.5; display:block; margin-bottom:1rem;}
.quote-text{font-family:var(--font-display); font-size:1.6rem; font-style:italic; max-width:52ch; color:var(--white);}
.quote-stars{color:var(--gold-500); letter-spacing:.15em; margin-top:1.25rem;}
.quote-author{color:var(--gold-300); margin-top:.5rem;}

/* CTA band before footer */
.cta-band{
  background:var(--green-800); color:var(--white); padding:3.5rem 0;
}
.cta-band h2{color:var(--white);}
.cta-band p{color:#DDE7DF; margin:0 auto 1.5rem; max-width:52ch;}

/* ---------- 7. PAGE-SPECIFIC ---------------------------------------------- */

/* Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem;}
.gallery-grid a{display:block; overflow:hidden; border-radius:var(--radius);}
.gallery-grid img{
  width:100%; height:260px; object-fit:cover; display:block; transition:transform .4s ease;
}
.gallery-grid a:hover img{transform:scale(1.06);}
.gallery-grid .tall{grid-row:span 2;}
.gallery-grid .tall img{height:100%;}

/* Blog cards */
.blog-card-link{color:inherit; display:block; height:100%;}
.blog-card-link:hover{color:inherit;}
.blog-card{padding:0; overflow:hidden;}
.blog-card img{width:100%; height:150px; object-fit:cover; display:block;}
.blog-card h3, .blog-card p{padding-left:1.5rem; padding-right:1.5rem;}
.blog-card h3{margin-top:1rem; font-size:1.15rem;}
.blog-card p{margin-bottom:1.5rem;}
.blog-card-date{color:var(--gold-500); font-size:.8rem; font-weight:600; letter-spacing:.03em; margin:1rem 1.5rem 0; text-transform:uppercase;}
.blog-card-link:hover .blog-card{border-top-color:var(--green-800);}

/* FAQ (Bootstrap accordion, restyled) */
.accordion-item{border:1px solid #E4DCC4; border-radius:var(--radius) !important; margin-bottom:.75rem; overflow:hidden;}
.accordion-button{
  font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:var(--green-800);
  background:var(--white);
}
.accordion-button:not(.collapsed){background:var(--cream-50); color:var(--green-800); box-shadow:none;}
.accordion-button:focus{box-shadow:0 0 0 .2rem rgba(198,161,91,.35);}
.accordion-button::after{filter:sepia(1) saturate(3) hue-rotate(5deg);}

/* Contact page */
.contact-panel{background:var(--white); border:1px solid #E4DCC4; border-radius:var(--radius); padding:2.5rem;}
.form-label{font-weight:600; color:var(--green-800);}
.form-control, .form-select{
  border-radius:var(--radius); border:1px solid #D8CFAF; padding:.65rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--gold-500); box-shadow:0 0 0 .2rem rgba(198,161,91,.25);
}
.form-note{font-size:.85rem; color:#6B664F;}
.form-status{display:none; padding:.9rem 1.1rem; border-radius:var(--radius); margin-top:1rem;}
.form-status.success{display:block; background:#E7F3EA; color:#1F6E4C; border:1px solid #BFE0C9;}
.form-status.error{display:block; background:#FBEAEA; color:#A33A3A; border:1px solid #F0C7C7;}
.office-item{border-left:2px solid var(--gold-500); padding-left:1rem; margin-bottom:1.25rem;}
.office-item strong{color:var(--green-800);}
/* honeypot field — hidden from real visitors, catches simple bots */
.hp-field{position:absolute; left:-9999px; top:-9999px;}

/* ---------- 8. FOOTER ------------------------------------------------------ */
.site-footer{background:var(--green-950); color:#CFC9B4; padding:4.5rem 0 0;}
.footer-brand{display:flex; align-items:center; gap:.65rem; text-decoration:none;}
.footer-brand .brand-text{display:flex; flex-direction:column; line-height:1.15;}
.footer-brand .brand-text strong{font-family:var(--font-display); color:var(--gold-300); font-size:1.3rem; font-weight:700;}
.footer-brand .brand-text small{color:#B9B49E; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;}
.footer-heading{font-family:var(--font-display); color:var(--gold-300); font-size:1.05rem; margin-bottom:1rem;}
.footer-about{color:#B9B49E; font-size:.95rem;}
.footer-links{list-style:none; padding:0; margin:0;}
.footer-links li{margin-bottom:.6rem; font-size:.95rem;}
.footer-links li a{white-space:nowrap;} /* phone numbers never break mid-number */
.tel-link{white-space:nowrap;}
.footer-offices li{margin-bottom:1rem;}
.footer-offices strong{color:var(--gold-300); font-size:.9rem;}
.footer-links a{color:#CFC9B4;}
.footer-links a:hover{color:var(--gold-300);}
.footer-socials a{
  display:inline-block; color:var(--gold-300); border:1px solid rgba(228,211,166,.4);
  border-radius:var(--radius); padding:.35rem .8rem; margin:0 .4rem .4rem 0; font-size:.85rem;
}
.footer-socials a:hover{background:var(--gold-500); color:var(--green-950); border-color:var(--gold-500);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:3rem; padding:1.5rem 0; text-align:center; font-size:.85rem;
}

/* Duas page */
.dua-card{
  background:var(--white); border:1px solid #E4DCC4; border-top:3px solid var(--gold-500);
  border-radius:var(--radius); padding:2rem; margin-bottom:1.75rem;
}
.dua-card h3{margin-bottom:.35rem;}
.dua-context{color:#6B664F; font-size:.92rem; margin-bottom:1.25rem;}
.dua-arabic{
  font-family:'Amiri', serif; font-size:1.75rem; line-height:2.1; direction:rtl; text-align:right;
  color:var(--green-950); margin-bottom:1rem; padding:1rem 1.25rem;
  background:var(--cream-50); border-radius:var(--radius);
}
.dua-translit{font-style:italic; color:var(--green-800); margin-bottom:.5rem; font-size:1.02rem;}
.dua-translation{color:var(--ink-900); margin-bottom:0;}
.dua-label{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-500); display:block; margin-bottom:.2rem;
}

/* Photo tool */
.photo-tool-card{background:var(--white); border:1px solid #E4DCC4; border-top:3px solid var(--gold-500); border-radius:var(--radius); padding:2rem;}
.photo-tool-upload{text-align:center; padding:2.5rem 1rem;}
.photo-tool-editor{text-align:center;}
#cropCanvas{
  width:400px; height:400px; max-width:100%; touch-action:none; cursor:move;
  border:1px solid #E4DCC4; border-radius:var(--radius); background:repeating-conic-gradient(#f0ede4 0% 25%, #fff 0% 50%) 50% / 20px 20px;
}
.photo-tool-controls{max-width:400px; margin:1.25rem auto 0; text-align:left;}
.photo-tool-controls input[type="range"]{width:100%; accent-color:var(--gold-500);}

/* ---------- 9. RESPONSIVE --------------------------------------------------- */
@media (max-width:767.98px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid .tall{grid-row:span 1;}
  .gallery-grid img{height:200px;}
  .split, .split.reverse{flex-direction:column; gap:1.5rem;}
  /* .split-media's flex-basis (340px) is a WIDTH limit in the normal
     row layout — once flex-direction flips to column above, flex-basis
     controls HEIGHT instead, leaving a ~80px empty gap since the image
     itself is only 260px tall. Reset it to size from content only. */
  .split-media{flex:0 0 auto; max-width:100%;}
  .split-media img{height:220px;}
  .page-header{padding:8rem 0 3rem;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .gallery-grid a:hover img{transform:none;}
  *{transition-duration:0.001ms !important;}
}