/* Manhal Medical Center — main stylesheet
Premium, clean, medical: generous whitespace, strong typography,
restrained colour, no heavy gradients, no card-overload.
FONT SOURCING NOTE (see QA-REPORT.md): this build environment has no
network access to download Cairo's woff2 files, and no cached copies
were found in the old Next.js prototype's build output. Cairo is
therefore loaded via Google Fonts' hosted CDN (see the tags in
every page's : fonts.googleapis.com/css2?family=Cairo...), which
is the documented, standard way to use Cairo without self-hosting. If
the clinic requires a fully self-hosted, no-third-party-request site,
download the Cairo woff2 files from https://fonts.google.com/specimen/Cairo
and drop them into assets/fonts/cairo/, then add matching @font-face
rules here (mirroring the Thmanyah Sans block in rtl.css) and remove
the Google Fonts tags from the HTML head. The "Cairo" family
name in font stacks below works identically either way. */
:root {
--color-bg: #fbfaf8;
--color-surface: #ffffff;
--color-ink: #16241f;
--color-ink-soft: #4a5850;
--color-primary: #0f5c4c;
--color-primary-dark: #0a3f34;
--color-primary-soft: #e4efe9;
--color-accent: #c79a4b;
--color-border: #e4e0d8;
--color-whatsapp: #21a35a;
--radius: 14px;
--radius-sm: 8px;
--shadow: 0 8px 30px rgba(15, 30, 25, 0.07);
--max-width: 1180px;
--header-h: 76px;
--sticky-h: 62px;
font-size: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--color-bg);
color: var(--color-ink);
font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
padding-bottom: var(--sticky-h);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; margin: 0 0 .5em; color: var(--color-primary-dark); }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--color-ink-soft); }
ul { padding-inline-start: 1.25em; color: var(--color-ink-soft); }
.container { max-width: var(--max-width); margin-inline: auto; padding-inline: 24px; }
section { padding-block: 64px; }
.section-alt { background: var(--color-surface); }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--color-accent); margin-bottom: 10px; display: block; }
.lede { font-size: 1.15rem; max-width: 62ch; }
/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: .95rem; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.btn-outline { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.btn-outline:hover { background: var(--color-primary-soft); }
.btn-whatsapp { background: var(--color-whatsapp); color: #fff; }
.btn-whatsapp:hover { filter: brightness(0.95); }
.btn-sm { padding: 9px 18px; font-size: .85rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
/* Header */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(251,250,248,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: var(--color-primary-dark); }
.brand img { height: 44px; width: auto; }
.main-nav { display: flex; gap: 28px; align-items: center; }
.main-nav a { font-weight: 600; font-size: .95rem; color: var(--color-ink); padding: 6px 2px; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--color-primary); border-color: var(--color-primary); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.lang-switch { font-size: .85rem; font-weight: 700; border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 14px; }
.nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--color-primary-dark); }
/* Hero */
.hero { padding-block: 56px 72px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; background: linear-gradient(135deg, var(--color-primary-soft), #f1ede3); display: flex; align-items: center; justify-content: center; color: var(--color-ink-soft); font-size: .9rem; text-align: center; padding: 20px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.trust-strip { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 28px; }
.trust-item { font-size: .85rem; font-weight: 700; color: var(--color-ink-soft); }
/* Cards / grids */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; transition: box-shadow .15s ease, transform .15s ease; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: .93rem; margin-bottom: 12px; }
.card-link { font-weight: 700; color: var(--color-primary); font-size: .88rem; }
.doctor-card { text-align: center; }
.doctor-photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; border: 3px solid var(--color-primary-soft); }
.doctor-photo.placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; font-size: 1.6rem; }
.doctor-title { font-size: .85rem; color: var(--color-accent); font-weight: 700; margin-bottom: 10px; }
.service-card .tag { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--color-primary); background: var(--color-primary-soft); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
/* Section headers */
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head.center { margin-inline: auto; text-align: center; }
/* Breadcrumbs */
.breadcrumbs { font-size: .82rem; color: var(--color-ink-soft); margin-bottom: 18px; }
.breadcrumbs a { color: var(--color-primary); font-weight: 600; }
.breadcrumbs .sep { margin-inline: 6px; opacity: .5; }
/* Doctor / Service detail layout */
.detail-hero { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; padding-block: 40px 20px; }
.detail-photo { width: 220px; height: 220px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--color-border); }
.detail-photo.placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; text-align: center; font-size: .85rem; padding: 12px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.pill { background: var(--color-primary-soft); color: var(--color-primary-dark); font-size: .8rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.flag-note { background: #fdf3e3; border: 1px solid #eccf8f; color: #6b5017; padding: 14px 18px; border-radius: var(--radius-sm); font-size: .88rem; margin: 24px 0; }
.content-block { max-width: 78ch; }
.content-block h2 { margin-top: 1.6em; }
.faq-item { border-bottom: 1px solid var(--color-border); padding: 18px 0; }
.faq-item h3 { margin-bottom: 6px; font-size: 1.05rem; }
/* Testimonials */
.testimonial { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; }
.testimonial p { font-style: italic; color: var(--color-ink); }
.testimonial .author { font-weight: 700; color: var(--color-primary); font-style: normal; font-size: .85rem; }
/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.info-list { list-style: none; padding: 0; }
.info-list li { display: flex; gap: 12px; margin-bottom: 18px; font-weight: 600; }
.info-list li span.k { color: var(--color-accent); font-weight: 700; }
form.contact-form { display: grid; gap: 14px; }
.contact-form label { font-size: .85rem; font-weight: 700; margin-bottom: 4px; display: block; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-family: inherit; font-size: .95rem; background: var(--color-surface); }
.contact-form textarea { min-height: 120px; resize: vertical; }
.form-status { font-size: .9rem; padding: 10px 14px; border-radius: var(--radius-sm); display: none; }
.form-status.success { background: #e5f4ea; color: #1c6b3c; display: block; }
.form-status.error { background: #fbeaea; color: #a3312b; display: block; }
.hp-field { position: absolute; left: -9999px; opacity: 0; }
/* Footer */
.site-footer { background: var(--color-primary-dark); color: #eef4f1; margin-top: 40px; }
.site-footer .container { padding-block: 48px 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.footer-grid a, .footer-grid p { color: #cfe0d8; font-size: .88rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 34px; padding-top: 18px; font-size: .8rem; color: #a9c2b8; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
/* Mobile sticky CTA bar */
.sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: none; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.sticky-cta-inner { display: grid; grid-template-columns: repeat(3, 1fr); height: var(--sticky-h); }
.sticky-cta a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .72rem; font-weight: 700; color: var(--color-ink); border-inline-end: 1px solid var(--color-border); }
.sticky-cta a:last-child { border-inline-end: none; }
.sticky-cta a.whatsapp { color: var(--color-whatsapp); }
.sticky-cta a.call { color: var(--color-primary); }
.sticky-cta a.book { color: var(--color-accent); }
.sticky-cta svg { width: 20px; height: 20px; }
/* 404 */
.error-page { text-align: center; padding-block: 120px; }
.error-page h1 { font-size: 4rem; }