/* ==========================================================================
   CAREMED — bespoke faithful skin for colorlib "CareMed" (data-template="caremed").
   Rubik, royal-blue (#2f56a6) + deep-navy (#223a66) with a red emergency accent.
   A CLEAN split hero (bold navy headline + small-radius blue button + doctor photo)
   with the signature royal-blue FEATURE BAND straddling its foot. Its unique card
   identity: a coloured HEADER STRIP inside every service card — the icon + title
   sit on a brand gradient across the top, the copy + learn-more on white below.
   Loaded after site-themes.css for this slug only.
   ========================================================================== */

/* Token fallbacks so the theme reads correctly even before TemplateTheme injects
   the inline vars (inline tokens, when present, win over these). */
[data-template="caremed"]{
    --brand-50:  236 241 250;
    --brand-100: 214 224 244;
    --brand-200: 176 194 228;
    --brand-300: 132 158 210;
    --brand-400: 79 116 196;
    --brand-500: 47 86 166;   /* #2f56a6 royal blue */
    --brand-600: 39 74 145;
    --brand-700: 31 60 120;
    --brand-800: 24 47 96;
    --brand-900: 18 36 74;
    --tpl-accent2: 230 57 70;  /* #e63946 emergency red — used only as a decorative accent */
    --tpl-ink: 34 58 102;      /* #223a66 deep navy */
    --tpl-surface: 242 245 251;
    --tpl-font: 'Rubik';
    --tpl-radius: 8px;
    --rvl-anim: rvl-cm;
}

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

/* -------- Header: white bar, brand-blue promo, small-radius blue CTA -------- */
[data-template="caremed"] .site-hdr__promo{ background:linear-gradient(90deg, rgb(var(--brand-600,39 74 145)), rgb(var(--brand-800,24 47 96))); color:#fff; font-size:.76rem; }
[data-template="caremed"] .site-hdr__promo a{ color:#fff; }
[data-template="caremed"] .site-hdr__link{ font-weight:600; }
[data-template="caremed"] .site-hdr__link:hover,
[data-template="caremed"] .site-hdr__link.is-active{ color:rgb(var(--brand-500,47 86 166)); }
[data-template="caremed"] .site-hdr__cta{ border-radius:6px; background:rgb(var(--brand-500,47 86 166)); }

/* ================================ BUTTONS ================================ */
.cm-btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; padding:.95rem 2rem; border-radius:6px; color:#fff; background:rgb(var(--brand-500,47 86 166)); box-shadow:0 12px 26px -14px rgb(var(--brand-700,31 60 120) / .7); transition:background .2s, filter .2s, transform .2s; }
.cm-btn:hover{ background:rgb(var(--brand-700,31 60 120)); color:#fff; transform:translateY(-2px); }
.cm-btn--ghost{ background:transparent; color:rgb(var(--brand-600,39 74 145)); border:2px solid rgb(var(--brand-500,47 86 166) / .35); box-shadow:none; padding-block:calc(.95rem - 2px); }
.cm-btn--ghost:hover{ background:rgb(var(--brand-500,47 86 166) / .08); color:rgb(var(--brand-700,31 60 120)); }

/* re-skin the shared mc buttons/inputs to CareMed's small radius */
[data-template="caremed"] .mc-btn,
[data-template="caremed"] .mc-btn-ghost{ border-radius:6px; }
[data-template="caremed"] .mc-btn{ background:rgb(var(--brand-500,47 86 166)); }
[data-template="caremed"] .mc-btn:hover{ background:rgb(var(--brand-700,31 60 120)); }
[data-template="caremed"] .mc-field{ border-radius:6px; }

/* ================================ HERO ================================ */
.cm-hero{ position:relative; overflow:hidden; background:linear-gradient(180deg, #fff 0%, var(--mc-soft,#f2f5fb) 100%); }
.cm-hero__glow{ position:absolute; z-index:0; top:-14rem; inset-inline-end:-10rem; width:38rem; height:38rem; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgb(var(--brand-500,47 86 166) / .16) 0%, transparent 62%); }
.cm-hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr; align-items:center; gap:2rem; padding-block:3rem 4.5rem; }
@media(min-width:1024px){ .cm-hero__grid{ grid-template-columns:1.05fr .95fr; gap:3rem; padding-block:4.5rem 6rem; } }
.cm-hero__text{ max-width:36rem; }
.cm-hero__text h1{ font-family:var(--tpl-font,'Rubik'),'Tajawal',sans-serif; margin:0; line-height:1.1; color:rgb(var(--tpl-ink,34 58 102)); }
.cm-hero__text h1 .cm-hero__thin{ display:block; font-weight:400; font-size:clamp(1.7rem,3.6vw,2.6rem); color:rgb(var(--brand-600,39 74 145)); }
.cm-hero__text h1 strong{ display:block; font-weight:800; font-size:clamp(2.3rem,5.4vw,4rem); letter-spacing:-.02em; }
.cm-hero__lead{ color:var(--mc-muted,#6b7793); font-size:1.05rem; line-height:1.85; margin:1.35rem 0 2rem; max-width:32rem; }
.cm-hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; }
.cm-hero__media{ position:relative; }
.cm-hero__media img{ width:100%; height:100%; max-height:30rem; object-fit:cover; object-position:top center; display:block; border-radius:10px; box-shadow:0 30px 60px -30px rgb(var(--tpl-ink,34 58 102) / .55); }
@media(max-width:1023px){ .cm-hero__media img{ max-height:20rem; } }

/* Signature royal-blue feature band straddling the hero foot */
.cm-feats{ position:relative; z-index:2; background:linear-gradient(120deg, rgb(var(--brand-500,47 86 166)), rgb(var(--brand-700,31 60 120))); color:#fff; }
.cm-feats__grid{ display:grid; grid-template-columns:1fr; }
@media(min-width:768px){ .cm-feats__grid{ grid-template-columns:repeat(3,1fr); } }
.cm-feat{ display:flex; align-items:center; gap:1.1rem; padding:1.9rem 1.6rem; }
@media(min-width:768px){ .cm-feat + .cm-feat{ border-inline-start:1px solid rgb(255 255 255 / .16); } }
.cm-feat__ico{ flex:none; width:3.2rem; height:3.2rem; border-radius:50%; background:rgb(255 255 255 / .14); display:flex; align-items:center; justify-content:center; color:#fff; }
.cm-feat h3{ font-family:var(--tpl-font,'Rubik'),'Tajawal',sans-serif; font-weight:700; font-size:1.12rem; margin:0 0 .2rem; color:#fff; }
.cm-feat p{ margin:0; font-size:.86rem; line-height:1.55; color:rgb(255 255 255 / .82); }

/* ==========================================================================
   COMPONENT SKIN + MOTION on EVERY page (inner pages reuse the mc-* blocks).
   Signature card entrance: a horizontal slide-in (mirrored for RTL).
   ========================================================================== */
@keyframes rvl-cm{ from{ opacity:0; transform:translateX(var(--rvl-x,-30px)); } to{ opacity:1; transform:none; } }

/* Shared card treatment: small radius, clean brand-tinted shadow, crisp hover */
[data-template="caremed"] .mc-svc,
[data-template="caremed"] .mc-doc,
[data-template="caremed"] .mc-post,
[data-template="caremed"] .mc-tcard{ border-radius:8px; border-color:transparent; box-shadow:0 16px 40px -26px rgb(var(--brand-700,31 60 120) / .5); overflow:hidden; }
[data-template="caremed"] .mc-svc:hover,
[data-template="caremed"] .mc-doc:hover,
[data-template="caremed"] .mc-post:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -28px rgb(var(--brand-600,39 74 145) / .55); }

/* ---- CARD IDENTITY: coloured HEADER STRIP (icon + title on brand gradient) ----
   The whole card top is a brand gradient (behind the icon + title); the copy and
   learn-more get a white background below. Robust to title length + image icons. */
[data-template="caremed"] .mc-svc{ padding:0; display:flex; flex-direction:column; background:linear-gradient(125deg, rgb(var(--brand-500,47 86 166)), rgb(var(--brand-700,31 60 120))); }
[data-template="caremed"] .mc-svc__ico{ width:3rem; height:3rem; border-radius:12px; background:rgb(255 255 255 / .2); color:#fff; margin:1.6rem 1.7rem .85rem; overflow:hidden; }
[data-template="caremed"] .mc-svc__ico img{ width:100%; height:100%; object-fit:cover; }
[data-template="caremed"] .mc-svc h3{ color:#fff; margin:0; padding:0 1.7rem 1.5rem; font-size:1.24rem; }
[data-template="caremed"] .mc-svc__rule{ display:none; }
[data-template="caremed"] .mc-svc p{ background:#fff; margin:0; padding:1.5rem 1.7rem .5rem; flex:1; color:var(--mc-muted,#6b7793); }
[data-template="caremed"] .mc-svc .mc-learn{ background:#fff; margin:0; padding:.2rem 1.7rem 1.7rem; border-bottom:0; color:rgb(var(--brand-600,39 74 145)); }
[data-template="caremed"] .mc-svc .mc-learn:hover{ color:rgb(var(--brand-700,31 60 120)); }

/* ---- Doctors: navy name + a slim brand top-rule on the body ---- */
[data-template="caremed"] .mc-doc__body{ border-top:3px solid rgb(var(--brand-500,47 86 166)); }
[data-template="caremed"] .mc-doc__name{ color:rgb(var(--tpl-ink,34 58 102)); }
[data-template="caremed"] .mc-doc__role{ color:rgb(var(--brand-600,39 74 145)); }

/* ---- Testimonials: white card with a brand accent bar on the leading edge ---- */
[data-template="caremed"] .mc-tcard{ background:#fff; border-inline-start:4px solid rgb(var(--brand-500,47 86 166)); }
[data-template="caremed"] .mc-tcard__av{ background:rgb(var(--brand-500,47 86 166)); }

/* ---- Blog: brand category eyebrow (already tinted) + navy heading ---- */
[data-template="caremed"] .mc-post h3{ color:rgb(var(--tpl-ink,34 58 102)); }

/* ---- Section headings: navy title with a short centred brand underline ---- */
[data-template="caremed"] .mc-shead__t{ color:rgb(var(--tpl-ink,34 58 102)); }
[data-template="caremed"] .mc-shead--center .mc-shead__t{ position:relative; padding-bottom:1rem; }
[data-template="caremed"] .mc-shead--center .mc-shead__t::after{ content:""; position:absolute; inset-inline-start:50%; transform:translateX(-50%); bottom:0; width:3.4rem; height:3px; border-radius:2px; background:rgb(var(--brand-500,47 86 166)); }
[dir="rtl"] [data-template="caremed"] .mc-shead--center .mc-shead__t::after{ transform:translateX(50%); }

/* ---- About: brand sub-label + small-radius framed photo ---- */
[data-template="caremed"] .mc-about__sub{ color:rgb(var(--brand-600,39 74 145)); font-family:var(--tpl-font,'Rubik'),'Tajawal',sans-serif; }
[data-template="caremed"] .mc-about__img img{ border-radius:10px; }

/* ---- Inner-page banner: brand gradient with white title + breadcrumb ---- */
[data-template="caremed"] .mc-banner{ background:linear-gradient(120deg, rgb(var(--brand-600,39 74 145)), rgb(var(--brand-800,24 47 96))); }
[data-template="caremed"] .mc-banner__bg{ opacity:.16; }
[data-template="caremed"] .mc-banner::after{ background:linear-gradient(90deg, rgb(var(--brand-700,31 60 120) / .78), rgb(var(--brand-900,18 36 74) / .55)) !important; }
[dir="rtl"] [data-template="caremed"] .mc-banner::after{ background:linear-gradient(270deg, rgb(var(--brand-700,31 60 120) / .78), rgb(var(--brand-900,18 36 74) / .55)) !important; }
[data-template="caremed"] .mc-banner__t{ color:#fff; }
[data-template="caremed"] .mc-banner__d{ color:rgb(255 255 255 / .85); }
[data-template="caremed"] .mc-banner__crumb{ color:rgb(255 255 255 / .82); }
[data-template="caremed"] .mc-banner__crumb a{ color:#fff; }
[data-template="caremed"] .mc-banner__crumb a:hover{ color:rgb(var(--brand-200,176 194 228)); }