/* ==================================================================
   GOLDEN WASL — style.css
   ==================================================================
   Brand colors:  cream #f3efe8 · gold #998039 · near-black #070807
   Fonts:         Cinzel (headings)  ·  Roboto Condensed (body)
   ================================================================== */


/* ---------- 1. CSS VARIABLES ----------
   Variables let us change the whole site's colors by editing one place.
   Use them with: color: var(--gold);
------------------------------------------ */
:root {
  --cream:     #f3efe8;
  --gold:      #998039;
  --gold-dark: #7a6630;
  --black:     #070807;
  --grey:      #6b6b6b;
  --border:    rgba(7, 8, 7, 0.08);

  --font-heading: 'Cinzel', serif;
  --font-body:    'Roboto Condensed', sans-serif;

  --max-width: 1200px;
  --gap:       1.25rem;   /* space between bento tiles */
  --radius:    4px;       /* rounded corner size */
}


/* ---------- 2. RESET & BASE ----------
   Remove default browser margins/padding for consistent look.
---------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;  /* padding counts inside the element's width */
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--black);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;   /* removes weird space under images */
}

a {
  color: inherit;
  text-decoration: none;
}


/* ---------- 3. HEADER ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.logo {
  height: 90px;
  width: auto;
  transition: height 0.2s ease;
}

/* Slightly bigger on mobile since the nav links are hidden behind the hamburger */
@media (max-width: 768px) {
  .logo {
    height: 80px;
  }
}

.main-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.main-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color 0.2s;
}

.main-nav a:hover {
  color: var(--gold);
}

.nav-cta {
  border: 1px solid var(--black);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  transition: all 0.2s;
}

.nav-cta:hover {
  background: var(--black);
  color: var(--cream);
}


/* ---------- 4. BENTO GRID ----------
   CSS Grid creates the bento layout.
   6 columns on desktop, tiles span different widths.
--------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* 6 equal columns */
  gap: var(--gap);
  max-width: var(--max-width);
  margin: 2rem auto 4rem;
  padding: 0 2rem;
}

/* Each tile is a box with padding, background, border */
.tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Now we assign each tile a size in the grid.
   "grid-column: span X" = take X of the 6 columns.
   "grid-row: span 2"    = take 2 rows of height. */

.tile-hero {
  grid-column: span 4;
  grid-row: span 2;
  background: var(--black);
  color: var(--cream);
  padding: 3.5rem;
}

.tile-proof {
  grid-column: span 2;
  grid-row: span 1;
  background: var(--gold);
  color: var(--cream);
  flex-direction: column;
  gap: 1.25rem;
}

.tile-services {
  grid-column: span 2;
  grid-row: span 1;
}

.tile-why {
  grid-column: span 3;
}

.tile-method {
  grid-column: span 3;
}

.tile-cta {
  grid-column: span 6;
  background: var(--black);
  color: var(--cream);
  text-align: center;
  padding: 4rem 2rem;
}


/* ---------- 5. TYPOGRAPHY INSIDE TILES ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.25rem);  /* responsive: small on mobile, big on desktop */
  line-height: 1.15;
  margin-bottom: 1.5rem;
  letter-spacing: -0.5px;
}

h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.75rem;
  margin-bottom: 1.25rem;
  letter-spacing: -0.3px;
}

h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
  color: var(--gold);
  letter-spacing: 0.5px;
}

.hero-text {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 560px;
  opacity: 0.9;
}


/* ---------- 6. BUTTONS ---------- */
.btn {
  display: inline-block;
  padding: 0.9rem 1.75rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all 0.25s;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--gold);
  color: var(--cream);
}

.btn-primary:hover {
  background: var(--gold-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}

.btn-secondary:hover {
  background: var(--cream);
  color: var(--black);
}

.btn-large {
  padding: 1.1rem 2.5rem;
  font-size: 16px;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}


/* ---------- 7. PROOF TILE ---------- */
.proof-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.proof-number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.proof-label {
  font-size: 14px;
  opacity: 0.9;
}


/* ---------- 8. SERVICES LIST ---------- */
.services-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.service p {
  font-size: 15px;
  color: var(--grey);
  line-height: 1.5;
}


/* ---------- 9. WHY TILE ---------- */
.tile-why p {
  margin-bottom: 1rem;
}

.highlight {
  font-weight: 700;
  color: var(--black);
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
  margin-top: 1.25rem;
}


/* ---------- 10. METHOD TILE ---------- */
.method-steps {
  list-style: none;
  counter-reset: step;
}

.method-steps li {
  counter-increment: step;
  padding: 0.75rem 0 0.75rem 3rem;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.method-steps li:last-child {
  border-bottom: none;
}

/* The numbered circles before each step */
.method-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 2rem;
  height: 2rem;
  background: var(--gold);
  color: var(--cream);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
}


/* ---------- 11. CTA TILE ---------- */
.tile-cta h2 {
  font-size: 2.5rem;
}

.tile-cta p {
  max-width: 600px;
  margin: 0 auto 2rem;
  opacity: 0.9;
}


/* ---------- 12. FAQ ACCORDION ---------- */
.faq-section {
  background: #fff;
  padding: 5rem 2rem;
  border-top: 1px solid var(--border);
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-container h2 {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 2.25rem;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
}

/* <summary> is the clickable part of a <details> element */
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.15rem;
  padding: 0.5rem 0;
  list-style: none;          /* hide default triangle */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s;
}

.faq-item summary::-webkit-details-marker {
  display: none;             /* hide default triangle in Safari */
}

.faq-item summary:hover {
  color: var(--gold);
}

/* Custom "+" icon on the right — rotates to "×" when open */
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--gold);
  transition: transform 0.3s;
  font-family: var(--font-body);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);  /* + becomes × */
}

.faq-answer {
  padding: 1rem 0 0.5rem;
  color: var(--grey);
  line-height: 1.7;
  max-width: 700px;
}


/* ---------- 13. FOOTER ---------- */
.site-footer {
  background: var(--black);
  color: var(--cream);
  padding: 3rem 2rem;
  text-align: center;
}

.footer-logo {
  height: 60px;
  margin: 0 auto 1rem;
  /* logo is black on black — invert to show it */
  filter: invert(1);
}

.footer-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--gold);
}

.footer-copy {
  font-size: 13px;
  opacity: 0.6;
  letter-spacing: 0.5px;
}


/* ==================================================================
   14. RESPONSIVE — phones & tablets
   @media rules change the layout at smaller screen sizes.
   ================================================================== */

/* Tablet: collapse some tiles */
@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);  /* only 2 columns now */
  }

  .tile-hero,
  .tile-proof,
  .tile-services,
  .tile-why,
  .tile-method,
  .tile-cta {
    grid-column: span 2;   /* every tile full width */
    grid-row: auto;
  }

  .tile-hero {
    padding: 2.5rem;
  }
}

/* Phone: hide desktop nav, show simpler header */
@media (max-width: 600px) {
  .site-header {
    padding: 1rem 1.25rem;
  }

  .main-nav {
    gap: 1rem;
  }

  .main-nav a:not(.nav-cta) {
    display: none;   /* hide nav links, keep only the "Book a call" button */
  }

  .bento {
    padding: 0 1.25rem;
    gap: 1rem;
  }

  .tile {
    padding: 1.75rem;
  }

  .tile-hero,
  .tile-cta {
    padding: 2.25rem 1.75rem;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .tile-cta h2 { font-size: 1.75rem; }

  .hero-buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  .faq-section {
    padding: 3rem 1.25rem;
  }

  .faq-item summary {
    font-size: 1rem;
  }
}

/* ==================================================================
   15. WHATSAPP BUTTON (floating + CTA tile)
   ================================================================== */

/* Floating button — bottom-right corner, follows scroll */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  transition: all 0.25s ease;
}

.whatsapp-float:hover {
  background: #1ea952;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: #ffffff;
}

/* Side-by-side CTA buttons inside the CTA tile */
.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .whatsapp-float {
    bottom: 16px;
    right: 16px;
    width: 54px;
    height: 54px;
  }

  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }

  .cta-buttons {
    flex-direction: column;
    width: 100%;
  }
}


/* ==================================================================
   GOLDEN WASL — additions for Business Setup page
   ==================================================================
   APPEND this block to the bottom of your existing style.css.
   Don't replace the file — just paste these rules at the end.

   Two new tile types are introduced:
     · .tile-process — full-width process timeline (4 numbered steps)
     · .tile-costs   — full-width cost breakdown table
   ================================================================== */


/* ---------- 16. PROCESS TIMELINE TILE ----------
   Full-width tile (spans all 6 columns).
   Reuses .method-steps from the homepage so the numbered circles
   look identical to "The Wasl method" tile.
------------------------------------------------- */
.tile-process {
  grid-column: span 6;
}

.tile-process .method-steps {
  margin-top: 0.5rem;
}

/* The closing note under the timeline ("Some freezones compress...") */
.process-note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--grey);
  font-size: 15px;
  line-height: 1.6;
}


/* ---------- 17. COST TABLE TILE ----------
   Full-width tile that holds the AED price table.
   The wrapper allows horizontal scrolling on small screens
   so the table never breaks the layout.
-------------------------------------------- */
.tile-costs {
  grid-column: span 6;
}

.cost-table-wrap {
  margin-top: 1rem;
  overflow-x: auto;       /* scroll sideways if the screen is narrow */
  -webkit-overflow-scrolling: touch;
}

.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 480px;       /* below this, the wrapper scrolls */
}

.cost-table thead th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--gold);
  background: transparent;
}

.cost-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

/* First column = label (left aligned).
   Second column = AED range (also left aligned, but slightly bolder). */
.cost-table tbody td:last-child {
  font-weight: 500;
  color: var(--black);
  white-space: nowrap;    /* keep "12,500 – 22,000" on one line */
}

/* Subtle hover so each row feels interactive */
.cost-table tbody tr:hover td {
  background: rgba(153, 128, 57, 0.04);   /* very faint gold tint */
}

/* Note line below the table */
.cost-note {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--grey);
  font-size: 15px;
  line-height: 1.6;
  font-style: italic;
}


/* ---------- 18. PAGE-SPECIFIC HERO EYEBROW ----------
   The eyebrow in the hero ("Business Setup · UAE") needs slightly
   different color treatment on the dark hero background.
------------------------------------------------------ */
.tile-hero .eyebrow {
  color: var(--gold);
  margin-bottom: 1rem;
}


/* ---------- 19. ACTIVE NAV LINK ----------
   When a user is on /business-setup, the matching nav link should
   look "active" — gold underline. Triggered by aria-current="page".
------------------------------------------- */
.main-nav a[aria-current="page"] {
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}


/* ---------- 20. SECOND FAQ SECTION SPACING ----------
   The page now has two FAQ sections back-to-back (page-specific +
   global). Remove the top border on the second one so they don't
   look like a doubled-up divider.
-------------------------------------------------------- */
.faq-section-global {
  border-top: none;
  padding-top: 1rem;
}


/* ---------- 21. RESPONSIVE — tablet & phone ---------- */

/* Tablet: full-width tiles already span 2 columns via the homepage's
   existing @media rule, but our new tile classes need explicit entries. */
@media (max-width: 900px) {
  .tile-process,
  .tile-costs {
    grid-column: span 2;
  }
}

/* Phone: tighten table padding so it fits comfortably */
@media (max-width: 600px) {
  .cost-table {
    font-size: 14px;
    min-width: 400px;
  }
  .cost-table thead th,
  .cost-table tbody td {
    padding: 0.65rem 0.75rem;
  }
}

/* ==================================================================
   GOLDEN WASL — additions for Golden Visa page
   ==================================================================
   APPEND this block to the bottom of your existing style.css.
   Just one new rule for the "What stays true for ten years" tile.
   ================================================================== */


/* ---------- 22. BENEFITS TILE (Golden Visa page) ----------
   Full-width prose tile. Two paragraphs of copy.
   Slight extra spacing between paragraphs for readability.
------------------------------------------------------------ */
.tile-benefits {
  grid-column: span 6;
}

.tile-benefits p + p {
  margin-top: 1rem;
}


/* ---------- 23. RESPONSIVE — tablet ---------- */
@media (max-width: 900px) {
  .tile-benefits {
    grid-column: span 2;
  }
}

/* ==================================================================
   24. MOBILE HAMBURGER MENU
   Append to bottom of style.css
   ================================================================== */

/* The hamburger button (3 lines) — hidden on desktop */
.menu-toggle {
  display: none;                  /* hidden by default; shown on mobile */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1100;                  /* sits above the overlay */
  position: relative;
}

/* The 3 bars of the hamburger */
.menu-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--black);
  margin: 6px 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

/* When menu is OPEN, transform the 3 bars into an X */
.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  background: var(--cream);       /* white X on the dark overlay */
}
.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;                     /* middle bar fades out */
}
.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  background: var(--cream);
}

/* The full-screen overlay menu — hidden by default */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--black);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* When .is-open class is added, overlay becomes visible */
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu a {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  color: var(--cream);
  padding: 0.5rem 1rem;
  transition: color 0.2s;
}

.mobile-menu a:hover,
.mobile-menu a[aria-current="page"] {
  color: var(--gold);
}

.mobile-menu .nav-cta {
  border: 1px solid var(--cream);
  border-radius: var(--radius);
  margin-top: 1rem;
  font-size: 1rem;
  font-family: var(--font-body);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
}

.mobile-menu .nav-cta:hover {
  background: var(--cream);
  color: var(--black);
  border-color: var(--cream);
}

/* Prevent body scroll while menu is open */
body.menu-open {
  overflow: hidden;
}

/* ===== SHOW HAMBURGER, HIDE DESKTOP NAV ON MOBILE ===== */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .main-nav {
    display: none;                /* hide the desktop nav entirely on mobile */
  }
}

/* On desktop, mobile menu must stay hidden even if JS adds .is-open */
@media (min-width: 769px) {
  .mobile-menu {
    display: none;
  }
}