/*
 * gaballa.org — "Signature" site style (Site profile → Website style).
 *
 * A dark, cinematic take modelled on high-end specialist-practice sites:
 * teal-black base, teal accents, Syne display type over DM Sans, pill
 * buttons, hairline rules, soft radial glows behind each page hero, a
 * full-screen menu and a compact booking bar that appears on scroll.
 * Loaded after site.css and only for this style; everything here is an
 * override, so the Classic style is untouched.
 *
 * Contrast (WCAG AA): text #EDF1F7, muted #A3BDBD and accent #5EC9B8 all
 * exceed 8:1 on the #00191A base; buttons are dark-on-white.
 */
body.style-signature {
    --bg: #00191a;
    --surface: #04211f;
    --text: #edf1f7;
    --muted: #a3bdbd;
    --border: rgba(237, 241, 247, .12);
    --primary: #5ec9b8;
    --primary-contrast: #00191a;
    --accent: #5ec9b8;
    --accent-soft: rgba(94, 201, 184, .12);
    --input-bg: rgba(255, 255, 255, .04);
    --side-hover: rgba(255, 255, 255, .06);
    --gold: #5ec9b8;
    --gold-soft: rgba(94, 201, 184, .2);
    --teal-deep: #298e7d;
    --cyan: #67e8f9;
    --ink: #edf1f7;          /* headings */
    --base: #00191a;          /* dark surfaces */
    --base-2: #021f20;
    --font-display: "Syne", "Tajawal", system-ui, sans-serif;
    --font-body: "DM Sans", "Tajawal", system-ui, sans-serif;
    --shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .3);
    background: var(--base);
    color: var(--text);
    font-size: 1.125rem;
}
html[dir="rtl"] body.style-signature { --font-display: "Tajawal", system-ui, sans-serif; --font-body: "Tajawal", system-ui, sans-serif; }

.style-signature h1, .style-signature h2, .style-signature h3, .style-signature .display-font { color: #fff; font-weight: 700; letter-spacing: -.02em; }
.style-signature h1 { font-weight: 700; }
.style-signature .hl { font-style: normal; color: var(--accent); }
.style-signature a { color: var(--accent); }
.style-signature a:hover { color: #fff; }
.style-signature .eyebrow { color: var(--accent); }
.style-signature .eyebrow::before { background: var(--accent); }
.style-signature .lead-lg { color: var(--muted); }
.style-signature :focus-visible { outline-color: var(--cyan); }

/* ---------------------------------------------------------------- buttons */
.style-signature .btn-ink, .style-signature .btn-gold, .btn-pill-light {
    background: #fff; color: #00191a !important; border: 1px solid #fff; border-radius: 999px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem;
}
.style-signature .btn-ink:hover, .style-signature .btn-gold:hover, .btn-pill-light:hover { background: var(--accent); border-color: var(--accent); color: #00191a !important; }
.style-signature .btn-outline-ink, .style-signature .btn-outline-light-site { background: transparent; color: #fff !important; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.style-signature .btn-outline-ink:hover, .style-signature .btn-outline-light-site:hover { background: #fff; color: #00191a !important; border-color: #fff; }
.btn-sm-pill { --bs-btn-padding-x: 1.1rem; --bs-btn-padding-y: .5rem; font-size: .78rem !important; }
.style-signature .btn-sm.rounded-pill { text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------------------- header */
.sig-header { position: absolute; z-index: 1030; top: 0; left: 0; right: 0; padding-block: 1.25rem; }
.sig-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sig-logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1.05; }
.sig-logo__name { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: .06em; color: #fff; }
.sig-logo__place { font-size: .62rem; letter-spacing: .32em; color: var(--accent); font-weight: 600; margin-top: .25rem; }
.sig-header__actions { display: flex; align-items: center; gap: .75rem; }
.sig-icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); color: #fff !important; display: grid; place-items: center; background: transparent; }
.sig-icon-btn:hover { background: rgba(255, 255, 255, .1); }
.sig-burger { width: 46px; height: 42px; border: 0; background: transparent; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 0 6px; }
.sig-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.sig-burger span:last-child { width: 70%; margin-inline-start: auto; }
.style-signature .lang-switch a { color: rgba(255, 255, 255, .7); }
.style-signature .lang-switch a[aria-current="true"] { background: rgba(94, 201, 184, .15); color: var(--accent); }

.sig-menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 0; background: #050505; color: #fff; }
.sig-menu::backdrop { background: rgba(0, 0, 0, .7); }
.sig-menu[open] { animation: sig-fade .25s ease; }
@keyframes sig-fade { from { opacity: 0; } }
.sig-menu__inner { min-height: 100%; display: flex; flex-direction: column; padding-block: 1.5rem 2.5rem; }
.sig-menu__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.sig-menu__nav { flex: 1; }
.sig-menu__nav li { border-bottom: 1px solid rgba(237, 241, 247, .12); }
.sig-menu__nav a { display: flex; justify-content: space-between; align-items: center; padding: .8rem 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 5vw, 3.6rem); letter-spacing: -.02em; color: #fff; text-decoration: none; }
.sig-menu__nav a .bi { font-size: .5em; color: var(--accent); opacity: 0; transform: translate(-6px, 6px); transition: .2s; }
.sig-menu__nav a:hover, .sig-menu__nav a[aria-current="page"] { color: var(--accent); }
.sig-menu__nav a:hover .bi { opacity: 1; transform: none; }
.sig-menu__foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }
.sig-menu__address { color: rgba(255, 255, 255, .55); font-size: .9rem; }

.sig-sticky { position: fixed; z-index: 1035; top: 0; left: 0; right: 0; background: rgba(0, 20, 21, .82); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--border); transform: translateY(-100%); transition: transform .35s ease; font-size: .85rem; }
.sig-sticky.is-visible { transform: none; }
.sig-sticky__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .6rem; }
.sig-sticky__who strong { color: #fff; font-family: var(--font-display); }
.sig-sticky__who, .sig-sticky__tag { color: var(--muted); }
.sig-sticky__phone { color: #fff !important; text-decoration: none; }

/* ---------------------------------------------------------------- heroes */
.style-signature .page-hero, .style-signature .case-hero {
    background: radial-gradient(900px 480px at 85% -10%, rgba(94, 201, 184, .2), transparent 60%),
                radial-gradient(700px 420px at 0% 110%, rgba(103, 232, 249, .08), transparent 60%),
                var(--base);
    padding-top: clamp(8rem, 12vw, 10rem);
    color: var(--muted);
}
.style-signature.page-gallery .page-hero { background: radial-gradient(900px 480px at 80% -10%, rgba(176, 82, 160, .28), transparent 60%), radial-gradient(700px 420px at 0% 110%, rgba(94, 201, 184, .1), transparent 60%), var(--base); }
.style-signature.page-contact .page-hero { background: radial-gradient(900px 480px at 80% -10%, rgba(70, 104, 220, .3), transparent 60%), var(--base); }
.style-signature .page-hero::after { border-color: rgba(94, 201, 184, .25); }
.style-signature .page-hero h1::after, .style-signature .case-hero__name::after { content: ""; display: block; width: 64px; height: 2px; background: var(--accent); margin-top: 1.25rem; }
.style-signature .crumbs, .style-signature .case-hero .crumbs { color: rgba(255, 255, 255, .5); }
.style-signature .crumbs a { color: var(--accent); }
.style-signature .case-hero__headline { color: #fff; font-family: var(--font-body); font-style: normal; font-weight: 400; }

.style-signature .hero-video { background: var(--base); min-height: 100vh; min-height: 100svh; }
.style-signature .hero-video__shade { background:
    linear-gradient(180deg, rgba(0, 25, 26, .55) 0%, rgba(0, 25, 26, .2) 30%, rgba(0, 25, 26, .9) 100%),
    linear-gradient(90deg, rgba(0, 25, 26, .65) 0%, rgba(0, 25, 26, 0) 65%); }
.style-signature .hero-video h1 { font-size: clamp(3rem, 7.5vw, 6.5rem); letter-spacing: -.035em; max-width: 13ch; }
.style-signature .hero-video__title { letter-spacing: .02em; text-transform: none; font-size: 1.25rem; color: rgba(255, 255, 255, .85); }
.style-signature .hero-stats dd { font-family: var(--font-display); font-weight: 700; color: #fff; }
.style-signature .hero-stats dt { color: var(--accent); }
.style-signature .hero-doctor { background: radial-gradient(1000px 600px at 85% 0%, rgba(94, 201, 184, .16), transparent 60%), var(--base); }
.style-signature .hero-doctor__grid { padding-top: 7rem; }
.style-signature .hero-doctor__portrait::before { border-color: rgba(94, 201, 184, .5); }
.style-signature .hero-doctor__placeholder { background: linear-gradient(160deg, #063331, #00191a); color: var(--accent); }
.style-signature .hero-doctor__badge { background: #04211f; border: 1px solid var(--border); }
.style-signature .hero-doctor__badge strong { color: #fff; }
.style-signature .hero-doctor__title { color: var(--muted); }

/* ---------------------------------------------------------------- sections */
.style-signature .section--surface { background: var(--base-2); }
.style-signature .section--ink { background: #000f10; color: var(--muted); }
.style-signature .ticker { background: transparent; border-color: var(--border); }
.style-signature .ticker__list li { color: rgba(237, 241, 247, .75); }
.style-signature .pull-quote__text { color: #fff; font-weight: 600; }
.style-signature .cta-band { background: radial-gradient(700px 300px at 90% 0%, rgba(94, 201, 184, .25), transparent 60%), #032423; border: 1px solid var(--border); }

.style-signature .card-site, .style-signature .contact-card, .style-signature .filter-bar {
    background: rgba(255, 255, 255, .035); border: 1px solid var(--border); box-shadow: none; backdrop-filter: blur(8px);
}
.style-signature .card-site:hover { box-shadow: var(--shadow); border-color: rgba(94, 201, 184, .35); }
.style-signature .card-site__img { background: rgba(94, 201, 184, .08); }
.style-signature .card-site h3 a, .style-signature .case-card__name a, .style-signature .pub-item h3 a, .style-signature .ba-item__meta a { color: #fff; }
.style-signature .card-site__meta, .style-signature .case-card__headline, .style-signature .pub-item__authors { color: var(--muted); }
.style-signature .badge-soft { background: rgba(94, 201, 184, .12); color: var(--accent); }
.style-signature .pub-links a { background: transparent; color: #fff; border-color: var(--border); }
.style-signature .timeline { border-color: var(--border); }
.style-signature .timeline li::before { background: var(--base); border-color: var(--accent); }
.style-signature .cv-section__icon, .style-signature .contact-line .bi { background: rgba(94, 201, 184, .12); color: var(--accent); }
.style-signature .case-step { border-color: var(--border); }
.style-signature .case-step__index { color: var(--accent); font-family: var(--font-display); }
.style-signature .case-quote { background: rgba(94, 201, 184, .08); border: 1px solid rgba(94, 201, 184, .25); }
.style-signature .case-quote blockquote { color: #fff; font-family: var(--font-display); }
.style-signature .case-pager { border-color: var(--border); }
.style-signature .case-pager a { color: #fff; }
.style-signature .case-pager__all { border-color: rgba(255, 255, 255, .45); }
.style-signature .case-card__media { background: rgba(94, 201, 184, .08); }
.style-signature .before-after__handle { color: #00191a; }
.style-signature .creator-card__avatar { color: #00191a; }
.style-signature .prose-site blockquote { color: #fff; border-color: var(--accent); }
.style-signature .divider-gold { background: var(--accent); }

/* ---------------------------------------------------------------- forms */
.style-signature .form-control, .style-signature .form-select {
    background-color: rgba(255, 255, 255, .04); border-color: var(--border); color: #fff;
}
.style-signature .form-control::placeholder { color: rgba(237, 241, 247, .4); }
.style-signature .form-control:focus, .style-signature .form-select:focus { background-color: rgba(255, 255, 255, .06); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(94, 201, 184, .25); }
.style-signature .form-select option { color: #00191a; }
.style-signature .form-label, .style-signature .form-check-label { color: var(--muted); }
.style-signature .contact-card.text-body { color: var(--text) !important; }

/* ---------------------------------------------------------------- footer */
.sig-footer { background: #0a0a0a; color: rgba(255, 255, 255, .6); padding-top: 5rem; font-size: .95rem; }
.sig-footer h2 { font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; }
.sig-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.sig-footer a:hover { color: #fff; }
.sig-footer__tagline { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.4; color: #fff; max-width: 28rem; }
.sig-muted { color: rgba(255, 255, 255, .45); }
.sig-footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; border-top: 1px solid rgba(237, 241, 247, .12); margin-top: 4rem; padding-block: 1.5rem; font-size: .8rem; color: rgba(255, 255, 255, .45); }
.style-signature .social-links a { border-color: rgba(255, 255, 255, .22); color: #fff; }
.style-signature .social-links a:hover { background: var(--accent); border-color: var(--accent); color: #00191a; }
.style-signature .social-links--dark a { border-color: rgba(255, 255, 255, .22); color: #fff; }
.style-signature .wa-float { background: #128c5a; }

/* ---------------------------------------------------------------- block buttons & controls
   The generic link colour above must not repaint designer buttons. */
.style-signature .site-btn { border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; font-weight: 600; }
.style-signature .site-btn--primary { background: #fff; border-color: #fff; color: #00191a; box-shadow: none; }
.style-signature .site-btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #00191a; }
.style-signature .site-btn--outline { color: #fff; border-color: rgba(255, 255, 255, .45); }
.style-signature .site-btn--outline:hover { background: #fff; color: #00191a; }
.style-signature .creator-card__play { color: #00191a; }
.sig-logo__name { white-space: nowrap; }
@media (max-width: 575.98px) {
    .sig-logo__name { font-size: 1.05rem; }
    .sig-header__actions { gap: .5rem; }
    .sig-icon-btn { width: 38px; height: 38px; }
    .style-signature .hero-video h1 { font-size: clamp(2.6rem, 13vw, 3.6rem); }
    .hero-stats { gap: 1.5rem; }
}