/* Shared by every page: floating WhatsApp button, phone menu, contact block, footer */

/* Header divider (Amr, option A, 2026-09-27): header and page share the light beige, so a thin camel line marks where the header ends.
   Same camel line as the Connect page's channel rows. box-sizing keeps the header height unchanged. */
header { border-bottom:1px solid var(--camel); }

/* Header menu never wraps; below 1200 px (small laptops, tablets) it folds into the MENU button, like on phones (2026-09-28) */
header nav a { white-space:nowrap; }
@media (max-width:1200px) {
  header nav { display:none !important; }
  .menu-btn { display:block !important; }
}

/* Logo always in the middle column (2026-09-29 fix): when the nav links are hidden (below 1200 px, e.g. a phone turned
   sideways or a tablet) the logo used to slide into the empty left column. */
header .logo { grid-column:2; justify-self:center; }
/* (2026-09-30, Amr: the emblem shifted left for a moment when a page opened on his phone) the logo is pinned to the exact centre of the
   header, independent of the grid columns, the MENU button or font loading; the two nav groups keep their own columns */
header .logo { position:absolute !important; grid-column:auto !important; left:50%; top:50%; transform:translate(-50%, -50%); margin:0 !important; }   /* grid-column auto: otherwise 50% is measured inside the grid column, not the header */
/* (2026-10-01) the emblem / wordmark images have no size until they download, so on a phone the logo box started 0 px wide and
   jumped when the image landed. Their real proportions (emblem 44x96, wordmark 461x110) reserve the right width from the first paint. */
header .logo img[src*="emblem"], .mo-logo img { aspect-ratio:44 / 96; width:auto; }
header .logo img[src*="wordmark"] { aspect-ratio:461 / 110; width:auto; }
header nav:not(.right) { grid-column:1; }
/* other-language link in the header on phones/tablets (when the nav links are folded into MENU) */
.lang-quick { display:none; grid-column:1; justify-self:start; color:var(--ink); text-decoration:none; font-size:14px; padding:12px 12px 12px 0; }
.lang-quick:lang(en) { font-size:12px; letter-spacing:.2em; }
[dir="rtl"] .lang-quick { padding:12px 0 12px 12px; }
@media (max-width:1200px) { .lang-quick { display:block; } }
header nav.right { grid-column:3; }

/* Phone turned sideways / short screens: compact 64 px header everywhere (the home page's 120 px header took a third of the screen) */
@media (max-height:500px) and (orientation:landscape) {
  header { height:64px !important; }
  header .logo { height:44px !important; }
}

/* Very small phones (320-360 px): let the logo column shrink so MENU keeps its side margin (2026-09-28) */
@media (max-width:360px) {
  header { grid-template-columns:1fr 130px 1fr !important; }
  #hdr .logo { width:130px !important; }   /* home only (its wordmark box). On other pages this 130 px box left the emblem at its left edge, ~56 px off-centre on 360 px Samsung phones (2026-10-05, from Amr's screen recording) */
}

/* Floating WhatsApp button (bottom-right, always visible) */
.wa-float { position:fixed; right:24px; bottom:24px; z-index:30; display:flex; align-items:center; gap:10px;
            background:var(--brick); color:#fff; text-decoration:none; border-radius:999px; padding:14px 20px 14px 16px;
            box-shadow:0 6px 20px rgba(0,0,0,.25); font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.wa-float svg { width:24px; height:24px; flex:none; }
.wa-float:hover { filter:brightness(1.1); }

/* Phone menu: button in the header + full-screen overlay */
.menu-btn { display:none; grid-column:3; justify-self:end; background:none; border:0; padding:12px 0 12px 12px;
            font:inherit; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); cursor:pointer; }
.menu-overlay { position:fixed; inset:0; z-index:40; background:var(--bg); display:flex; flex-direction:column; overflow-y:auto;
                opacity:0; pointer-events:none; transition:opacity .35s; }
.menu-overlay.is-open { opacity:1; pointer-events:auto; }
/* Phone menu, option A "editorial list" (Amr, 2026-09-29): top bar like the header, numbered links with camel lines, extras at the bottom */
.mo-top { flex:none; height:64px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 16px; border-bottom:1px solid var(--camel); }
.mo-logo { grid-column:2; } .mo-logo img { height:40px; display:block; }
.menu-overlay .close { grid-column:3; justify-self:end; background:none; border:0; font:inherit; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
                       padding:12px 0 12px 12px; cursor:pointer; color:var(--ink); }
[dir="rtl"] .menu-overlay .close { padding:12px 12px 12px 0; letter-spacing:0; font-size:14px; }
@media (min-width:761px) { .mo-top { padding:0 40px; } }
.mo-links { list-style:none; margin:0; padding:28px 24px 0; }
.mo-links li { border-top:1px solid var(--camel); }
.mo-links li:last-child { border-bottom:1px solid var(--camel); }
.mo-links a { display:flex; align-items:baseline; gap:14px; padding:18px 0; color:var(--ink); text-decoration:none; white-space:nowrap;
              font-family:var(--serif); font-size:min(32px, calc((100vw - 48px) / 14)); line-height:1.1; }   /* sized so "02 Concept → Reality" always fits the width */
.mo-links a:lang(ar), [dir="rtl"] .mo-links a { font-family:var(--arabic); }
.mo-links a.on { color:var(--brown); }
.mo-links .n { font-family:var(--sans); font-size:12px; letter-spacing:.25em; min-width:26px; opacity:.7; }
.mo-foot { margin-top:auto; padding:28px 24px calc(28px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.mo-foot a { color:var(--ink); text-decoration:none; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.mo-foot .lang-switch { font-size:16px; letter-spacing:0; border-bottom:1px solid var(--camel); padding-bottom:3px; }
.mo-foot .wa { align-self:stretch; text-align:center; background:var(--brick); color:#fff; padding:16px 28px; font-size:13px; }
.mo-foot .mail { opacity:.8; }
[dir="rtl"] .mo-foot a { letter-spacing:0; font-size:14px; }
[dir="rtl"] .mo-foot .mail { letter-spacing:.1em; font-size:12px; }
/* phone turned sideways: tighter list, the whole menu scrolls */
@media (max-height:500px) { .mo-links { padding-top:8px; } .mo-links a { padding:10px 0; font-size:22px; } .mo-foot { margin-top:16px; padding-top:16px; } }

/* Contact block ("Planning a similar project?") */
.cta { text-align:center; padding:120px 24px; }
.cta h2 { font-family:var(--serif); font-weight:400; font-size:44px; margin-bottom:16px; }
.cta p { opacity:.75; margin-bottom:28px; line-height:1.6; }
.btn { display:inline-block; padding:16px 28px; margin:6px; text-decoration:none; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.btn.solid { background:var(--brick); color:#fff; }
.btn.line { border:1px solid var(--ink); color:var(--ink); }

/* Footer */
/* Cream band with the hand-drawn bilingual logo (manual p8), in the black it was supplied in */
.site-footer { background:var(--cream); color:var(--ink); padding:64px 40px 96px; display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:end; }
.site-footer img { height:120px; display:block; }
.site-footer .links { display:flex; gap:28px; flex-wrap:wrap; justify-content:center; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.site-footer .social { display:flex; gap:28px; flex-wrap:wrap; justify-content:center; font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin-top:18px; }
.site-footer .social svg { display:none; }
.site-footer a { color:var(--ink); text-decoration:none; }
.site-footer a:hover { color:var(--brick); }
.site-footer small { font-size:12px; opacity:.6; }

@media (max-width:760px) {
  .menu-btn { display:block; }
  .wa-float { right:16px; bottom:16px; padding:14px; }
  .wa-float span { display:none; }             /* icon only on phones */
  .cta { padding:80px 16px; } .cta h2 { font-size:32px; }
  .btn { display:block; margin:10px auto; max-width:320px; padding:18px; }
  .site-footer { grid-template-columns:1fr; text-align:center; padding:48px 16px 104px; }
  .site-footer img { height:96px; }
  .site-footer img { margin:0 auto; }
  .site-footer .social { gap:26px; margin-top:22px; }
  .site-footer .social svg { display:block; }
  .site-footer .social span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }   /* phones: icons only (label kept for screen readers) */
  .site-footer .social a { padding:6px; }
}

/* Building-type icon chip: Amanda's black icon on a cream chip (icons supplied in black only, no recolours) */
.chip { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--cream); flex:none; }
.chip img { width:30px; height:30px; object-fit:contain; display:block; }

/* "Projects" hover legend (desktop only; on touch, Projects just goes to the projects area) */
.nav-projects { position:relative; }
.nav-projects .legend { display:none; position:absolute; top:100%; left:-16px; padding:16px 16px 14px; margin-top:14px; gap:20px;
                        background:var(--cream); box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:20; }
.nav-projects .legend::before { content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }  /* hover bridge */
.nav-projects .legend a { display:flex; flex-direction:column; align-items:center; gap:8px; opacity:1; white-space:nowrap;
                          font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
.nav-projects .legend a:hover { color:var(--brick); }
@media (hover:hover) { .nav-projects:hover .legend, .nav-projects:focus-within .legend { display:flex; } }
.nav-projects.closed .legend { display:none !important; }   /* closes right after a category is picked */