/* ==========================================================================
   DENTIST — bespoke faithful skin for colorlib "Dentist" (data-template="dentist").
   Sora headings, a lime-GREEN accent over a DARK charcoal ink, a full-bleed dark
   PHOTO hero with a centred white headline + a green appointment button, and PILL
   buttons. UNIQUE signature: floating medical PLUS / cross symbols drifting in the
   hero, and every service icon set inside a rotated DIAMOND (a brand square turned
   45deg with the glyph un-rotated inside). Loaded after site-themes.css for this
   slug only, so it re-skins every page (home + inner pages reuse the mc-* blocks).
   Colours come from the active template tokens (--brand-* / --tpl-accent2 /
   --tpl-ink / --tpl-surface / --tpl-font); fallbacks match the dentist tokens.
   ========================================================================== */

/* ---- Sora headings ---- */
[data-template="dentist"] .mc-serif{ font-family:var(--tpl-font,'Sora'),'Tajawal',sans-serif; font-weight:700; letter-spacing:-.01em; }

/* ---- Header skin: dark topbar, green links, pill CTA ---- */
[data-template="dentist"] .site-hdr__promo{ background:rgb(var(--tpl-ink,27 34 51)); color:rgb(255 255 255 / .9); font-size:.76rem; }
[data-template="dentist"] .site-hdr__promo a{ color:rgb(var(--brand-400,95 206 138)); }
[data-template="dentist"] .site-hdr__link{ font-weight:600; }
[data-template="dentist"] .site-hdr__link:hover,
[data-template="dentist"] .site-hdr__link.is-active{ color:rgb(var(--brand-600,37 154 88)); }
[data-template="dentist"] .site-hdr__cta{ border-radius:50px; }
/* higher-specificity twin so the pill + solid green win over the universal button rules */
[data-template="dentist"] .site-hdr__cta.btn-primary{ border-radius:50px; background-color:rgb(var(--brand-500,47 185 106)); background-image:none; }

/* ---- Pill buttons (.dt-btn) ---- */
.dt-btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; padding:1rem 2.2rem; border-radius:50px; transition:filter .2s, background .2s, color .2s, transform .2s, box-shadow .2s; }
.dt-btn:hover{ transform:translateY(-2px); }
.dt-btn--sm{ padding:.72rem 1.6rem; font-size:.76rem; }
.dt-btn--solid{ background:rgb(var(--brand-500,47 185 106)); color:#fff; box-shadow:0 14px 30px rgb(var(--brand-500,47 185 106) / .34); }
.dt-btn--solid:hover{ filter:brightness(1.07); }
.dt-btn--ghost{ background:transparent; color:#fff; border:2px solid rgb(255 255 255 / .55); }
.dt-btn--ghost:hover{ background:#fff; color:rgb(var(--tpl-ink,27 34 51)); border-color:#fff; }

/* ---- HERO — full-bleed dark photo, centred white headline + green CTA ---- */
.dt-hero{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; background:rgb(var(--tpl-ink,27 34 51)); }
.dt-hero__photo{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.dt-hero__tint{ position:absolute; inset:0; z-index:1;
    background:
        linear-gradient(180deg, rgb(var(--tpl-ink,27 34 51) / .72) 0%, rgb(var(--tpl-ink,27 34 51) / .88) 100%),
        linear-gradient(115deg, rgb(var(--brand-700,31 122 71) / .55) 0%, transparent 62%); }
.dt-hero__inner{ position:relative; z-index:3; text-align:center; max-width:54rem; margin-inline:auto; color:#fff; padding-block:6.5rem; }
.dt-hero__eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.18em; font-size:.76rem; font-weight:700; color:rgb(var(--brand-400,95 206 138)); margin:0 0 1.1rem; }
.dt-hero__inner h1{ color:#fff; font-family:var(--tpl-font,'Sora'),'Tajawal',sans-serif; font-weight:800; font-size:clamp(2.3rem,5.4vw,4.1rem); line-height:1.1; letter-spacing:-.02em; margin:0; }
.dt-em{ color:rgb(var(--brand-400,95 206 138)); }
.dt-hero__lead{ margin:1.4rem auto 2.2rem; max-width:40rem; color:rgb(255 255 255 / .9); font-size:1.05rem; line-height:1.9; }
.dt-hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
@media(max-width:640px){ .dt-hero{ min-height:auto; } .dt-hero__inner{ padding-block:4rem; } }

/* ---- UNIQUE decoration: floating medical plus / cross symbols (dentist only) ---- */
.dt-plus{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
.dt-plus span{ position:absolute; display:block; color:rgb(var(--brand-400,95 206 138)); opacity:.22; will-change:transform;
    background:
        linear-gradient(currentColor 0 0) center / 100% 24% no-repeat,
        linear-gradient(currentColor 0 0) center / 24% 100% no-repeat;
    animation:dt-drift 14s ease-in-out infinite; }
.dt-plus span:nth-child(1){ width:34px; height:34px; inset-block-start:16%; inset-inline-start:8%;  animation-duration:15s; }
.dt-plus span:nth-child(2){ width:20px; height:20px; inset-block-start:64%; inset-inline-start:14%; animation-duration:11s; animation-delay:-3s;   opacity:.16; }
.dt-plus span:nth-child(3){ width:46px; height:46px; inset-block-start:24%; inset-inline-end:12%;   animation-duration:17s; animation-delay:-2s; }
.dt-plus span:nth-child(4){ width:16px; height:16px; inset-block-start:12%; inset-inline-start:46%; animation-duration:9s;  animation-delay:-1s;   opacity:.3; }
.dt-plus span:nth-child(5){ width:28px; height:28px; inset-block-start:72%; inset-inline-end:24%;   animation-duration:13s; animation-delay:-5s; }
.dt-plus span:nth-child(6){ width:22px; height:22px; inset-block-start:44%; inset-inline-start:4%;  animation-duration:12s; animation-delay:-6s;   opacity:.18; }
.dt-plus span:nth-child(7){ width:38px; height:38px; inset-block-start:80%; inset-inline-start:52%; animation-duration:16s; animation-delay:-4s;   opacity:.14; }
.dt-plus span:nth-child(8){ width:18px; height:18px; inset-block-start:34%; inset-inline-end:40%;   animation-duration:10s; animation-delay:-2.5s; opacity:.24; }
@keyframes dt-drift{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-30px) rotate(45deg); } }
@media (prefers-reduced-motion: reduce){ .dt-plus span{ animation:none; } }

/* ==========================================================================
   COMPONENT SKIN + MOTION ON EVERY PAGE (inner pages reuse mc-*).
   Signature: diamond service icons, pill buttons/inputs, a dark plus-flecked
   banner, and a scale+rotate "pop" entrance.
   ========================================================================== */
[data-template="dentist"]{ --rvl-anim: rvl-dt; }
@keyframes rvl-dt{ from{ opacity:0; transform:scale(.9) rotate(-2deg); } to{ opacity:1; transform:none; } }

/* Soft rounded cards + green-tinted shadow */
[data-template="dentist"] .mc-svc,
[data-template="dentist"] .mc-doc,
[data-template="dentist"] .mc-post,
[data-template="dentist"] .mc-tcard{ border-radius:12px; border-color:transparent; box-shadow:0 16px 40px rgb(var(--brand-700,31 122 71) / .12); overflow:hidden; }
.dt-card{ transition:transform .3s ease, box-shadow .3s ease; }
[data-template="dentist"] .mc-svc:hover,
[data-template="dentist"] .mc-doc:hover,
[data-template="dentist"] .mc-post:hover{ transform:translateY(-7px); box-shadow:0 28px 56px rgb(var(--brand-700,31 122 71) / .22); }

/* Card identity: the service icon sits inside a rotated DIAMOND, glyph un-rotated */
[data-template="dentist"] .mc-svc{ padding-top:2.8rem; }
[data-template="dentist"] .mc-svc__ico{
    width:3.9rem; height:3.9rem; border-radius:13px; overflow:visible; color:#fff;
    background:linear-gradient(135deg, rgb(var(--brand-400,95 206 138)), rgb(var(--brand-600,37 154 88)));
    box-shadow:0 12px 26px rgb(var(--brand-500,47 185 106) / .34);
    transform:rotate(45deg); margin-bottom:1.8rem; }
[data-template="dentist"] .mc-svc__ico > svg,
[data-template="dentist"] .mc-svc__ico > img{ transform:rotate(-45deg); }
[data-template="dentist"] .mc-svc__ico img{ width:2.1rem; height:2.1rem; object-fit:contain; border-radius:4px; }

/* Pill buttons + inputs + green learn-more on inner pages */
[data-template="dentist"] .mc-btn,
[data-template="dentist"] .mc-btn-ghost{ border-radius:50px; }
[data-template="dentist"] .mc-field{ border-radius:50px; }

/* Banner: dark, faint plus decoration, white title + breadcrumb */
[data-template="dentist"] .mc-banner{ background:rgb(var(--tpl-ink,27 34 51)); min-height:22rem; }
[data-template="dentist"] .mc-banner__bg{ opacity:.2; }
[data-template="dentist"] .mc-banner::after{
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M21 14h2v6h6v2h-6v6h-2v-6h-6v-2h6z' fill='%23ffffff' fill-opacity='0.07'/%3E%3C/svg%3E") repeat,
        linear-gradient(180deg, rgb(var(--tpl-ink,27 34 51) / .9) 0%, rgb(var(--brand-900,16 61 33) / .72) 100%) !important; }
[data-template="dentist"] .mc-banner__t{ color:#fff; }
[data-template="dentist"] .mc-banner__d{ color:rgb(255 255 255 / .82); }
[data-template="dentist"] .mc-banner__crumb{ color:rgb(255 255 255 / .8); }
[data-template="dentist"] .mc-banner__crumb a{ color:#fff; }
[data-template="dentist"] .mc-banner__crumb a:hover{ color:rgb(var(--brand-400,95 206 138)); }

/* Inner-page icon badge matches dentist's diamond home icons */
[data-template="dentist"] .icon-badge-leaf{ border-radius:12px !important; transform:rotate(45deg); }
[data-template="dentist"] .icon-badge-leaf > svg{ transform:rotate(-45deg); }