/*
Theme Name: RadioCare
Theme URI: https://example.com/radiocare
Author: RadioCare
Description: Bilingual (Persian RTL / English LTR) theme for a radiology and ultrasound imaging center. Services, doctors, a facility photo slideshow, articles, insurers, a feedback form, Telegram contact, Polylang and WPML ready. Colors follow the center's logo and can be changed from the Customizer.
Version: 1.14.0
Requires at least: 6.6
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: radiocare
*/

/* Colors come from theme.json (Logo yellow / Logo gray). The hex values here are only fallbacks. */
:root{
	--yellow:var(--wp--preset--color--yellow,#fccc00);
	--gray:var(--wp--preset--color--gray,#706c6c);
	--ink:var(--wp--preset--color--ink,#262223);
	--film:var(--wp--preset--color--charcoal,#2a2627);
	--box:var(--wp--preset--color--box,#f7f5f2);
	--line:var(--wp--preset--color--line,#e3dfdb);
	--paper:#fff;
	--film-2:#3a3536;
	--link:#4a4646;
	--muted:#625e5e;
	/* Hover/active shades of the accent are computed from --yellow itself (whatever color
	   it's set to from Appearance > Customize > Colors), not hardcoded, so a hover always
	   matches the current theme color instead of a fixed yellow. */
	--yellow-hover:color-mix(in srgb,var(--yellow) 85%,#fff);
	--yellow-active:color-mix(in srgb,var(--yellow) 85%,#000);
	--font:var(--wp--preset--font-family--vazirmatn,"Vazirmatn","IRANSansX",Tahoma,"Segoe UI",system-ui,sans-serif);
	--wrap:1160px;--r:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;font-family:var(--font);font-size:1rem;line-height:1.85;color:var(--ink);background:var(--paper);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.2em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--yellow)}

/* Full-page loading screen, shown the instant the page starts rendering and faded out by
   assets/js/main.js once the whole page (images included) has finished loading. */
#rc-preloader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--paper);transition:opacity .4s ease,visibility 0s linear .4s}
#rc-preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.rc-spinner{width:2.75rem;height:2.75rem;border:4px solid var(--line);border-block-start-color:var(--yellow);border-radius:50%;animation:rc-spin .75s linear infinite}
@keyframes rc-spin{to{transform:rotate(360deg)}}
h1,h2,h3,h4{font-weight:800;line-height:1.25;letter-spacing:-.01em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.5rem,2.6vw,2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.screen-reader-text,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:100;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:var(--r)}
.hp{position:absolute;inset-inline-start:-9999px}

/* Buttons: yellow is the one call-to-action color */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.75rem;border-radius:999px;border:1px solid transparent;font:inherit;font-weight:700;letter-spacing:.01em;line-height:1.4;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s,box-shadow .2s,scale .15s}
/* Hover lifts the button slightly with a soft shadow in the button's own color; pressing it
   (:active) settles back down with a darker shade — the same "action" on every button,
   driven entirely by each button's own color so it still matches after a theme-color change. */
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);scale:.98}
.btn--brand,.btn--amber{background:linear-gradient(135deg,color-mix(in srgb,var(--yellow) 85%,#fff),var(--yellow));color:var(--ink);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--yellow) 70%,transparent)}
.btn--brand:hover,.btn--amber:hover{background:linear-gradient(135deg,var(--yellow-hover),color-mix(in srgb,var(--yellow) 90%,#000));color:var(--ink);box-shadow:0 12px 26px -8px color-mix(in srgb,var(--yellow) 70%,transparent)}
.btn--brand:active,.btn--amber:active{background:var(--yellow-active);box-shadow:0 4px 10px -6px color-mix(in srgb,var(--yellow) 60%,transparent)}
.btn--ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.04)}
.btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
.btn--ghost:active{background:rgba(255,255,255,.22)}
.btn--line{border-color:var(--line);color:var(--ink);background:#fff;box-shadow:0 2px 10px -6px rgba(0,0,0,.15)}
.btn--line:hover{background:var(--box);border-color:var(--ink);color:var(--ink);box-shadow:0 10px 22px -10px rgba(0,0,0,.2)}
.btn--line:active{background:var(--line)}
.btn--sm{padding:.5rem 1rem;font-size:.85rem;white-space:nowrap}
.tg-ico{flex:none}
.tg{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--yellow);color:var(--ink);transition:background .2s,transform .15s,box-shadow .2s}
.tg:hover{background:var(--yellow-hover);color:var(--ink);transform:translateY(-2px) scale(1.05);box-shadow:0 8px 20px -6px color-mix(in srgb,var(--yellow) 65%,transparent)}
.tg:active{background:var(--yellow-active);transform:translateY(0) scale(1)}

/* Header: a thin language strip (only shown with 2+ languages set up), then the dark main bar
   (logo, dropdown menu, header buttons). */
.site-head{position:sticky;top:0;z-index:50}

.lang-bar{background:var(--yellow)}
.lang-bar__in{display:flex;justify-content:flex-end;min-height:2.25rem}
.lang{display:flex;gap:.3rem}
.lang a{display:flex;align-items:center;gap:.3rem;padding:.2rem .7rem;border-radius:999px;color:var(--ink);text-decoration:none;font-size:.8rem;font-weight:700;opacity:.75}
.lang a:hover{opacity:1}
.lang a[aria-current]{background:var(--ink);color:#fff;opacity:1}

/* A plain white header bar, always solid (same on every page): logo on one side, the primary
   menu centered in the space between it and the phone/CTA buttons on the other side, instead
   of the menu hugging the logo and leaving a big gap before the buttons. */
.navbar{background:#fff;border-block-end:1px solid var(--line);box-shadow:0 2px 16px -12px rgba(20,18,18,.3)}
.navbar__in{display:flex;align-items:center;gap:.9rem;min-height:4rem}

.brand{display:flex;align-items:center;gap:.6rem;min-width:0;color:var(--ink);text-decoration:none;font-weight:800;font-size:1rem}
.brand:hover{color:var(--ink)}
.brand__logo{flex:none;height:auto;max-height:2.9rem;width:auto;max-width:13rem;object-fit:contain}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:18rem}
.custom-logo{max-height:2.5rem;width:auto}

/* Primary menu: a row of top-level links, each opening a dropdown (and, from the second
   level on, a side flyout) on hover, focus or tap of its toggle button. Takes up the space
   between the logo and the phone/buttons and centers its links within it, rather than
   bunching up against the logo. */
.nav{flex:1;min-width:0}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.nav ul ul{list-style:none;margin:0;padding:0}
.nav li{position:relative}
.nav a{display:block;padding:.5rem .65rem;border-radius:var(--r);color:var(--ink);font-weight:600;font-size:.92rem;text-decoration:none;white-space:nowrap}
.nav>ul>li>a:hover{background:var(--box)}
.nav .current-menu-item>a{box-shadow:inset 0 -3px 0 var(--yellow)}

.submenu-toggle{display:inline-flex;align-items:center;justify-content:center;position:absolute;inset-block-start:0;inset-inline-end:0;width:2.4rem;height:100%;border:0;background:transparent;color:inherit;cursor:pointer}
.submenu-toggle__arrow{width:.5rem;height:.5rem;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.has-dropdown>.submenu-toggle[aria-expanded="true"] .submenu-toggle__arrow{transform:rotate(225deg)}
.has-dropdown>a{padding-inline-end:2.1rem}

.sub-menu{position:absolute;inset-inline-start:0;inset-block-start:100%;z-index:10;display:none;min-width:14rem;margin:.25rem 0 0;padding:.4rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.sub-menu .sub-menu--flyout{inset-inline-start:100%;inset-block-start:0;margin:0 0 0 .25rem}
.sub-menu a{color:var(--ink);padding:.55rem .8rem}
.sub-menu a:hover{background:var(--box)}
.sub-menu li.has-dropdown>a{padding-inline-end:2.1rem}
.sub-menu .submenu-toggle{color:var(--ink)}

/* Desktop: hover or keyboard focus reveals a dropdown; touch devices rely on the toggle
   button instead (see main.js), since a lingering :hover has no equivalent "close" on touch. */
@media (hover:hover) and (pointer:fine){
	.nav li:hover>.sub-menu,
	.nav li:focus-within>.sub-menu{display:block}
}
/* Hovering (or tabbing to) the link already reveals its dropdown on the expanded desktop
   menu, so the little arrow/toggle button — needed on touch screens, which have no hover,
   and on the collapsed/mobile panel below, which opens its own dropdowns by tapping it —
   is just visual clutter next to the link here. min-width keeps this from also hiding the
   one thing that opens a submenu on the collapsed panel (a narrow, mouse-driven window). */
@media (hover:hover) and (pointer:fine) and (min-width:1301px){
	.submenu-toggle{display:none}
	.has-dropdown>a{padding-inline-end:.9rem}
}
.nav li.is-open>.sub-menu{display:block}

.head-tools{display:flex;align-items:center;gap:.6rem;flex:none}
.topbar__ctas{display:flex;flex-wrap:nowrap;gap:.5rem}
.nav-toggle{display:none;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex:none;border:1px solid var(--line);border-radius:var(--r);background:transparent;color:var(--ink);cursor:pointer}
.bars{display:block;width:1.2rem;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}

/* Hero: charcoal by default, or your own image(s) (Appearance > Customize > Homepage text).
   With 2+ images it's a crossfading slideshow; .is-active is toggled by main.js. The site
   header is a plain light bar above it (see .navbar), not an overlay, so no extra top padding
   is needed here to clear it. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--film);color:#f4f1ee}
.hero__slides{position:absolute;inset:0;z-index:-2}
.hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.hero__bg.is-active{opacity:1}
.hero--img::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(38,34,35,var(--hero-overlay,.55))}
.hero--plain::after{content:"";position:absolute;z-index:-1;inset-inline-end:8%;inset-block-end:0;width:clamp(14rem,26vw,26rem);aspect-ratio:2/1;border:clamp(1.2rem,2.4vw,2.2rem) solid var(--yellow);border-block-end:0;border-radius:999px 999px 0 0}
.hero__in{padding-block:clamp(3.5rem,7vw,5.5rem) clamp(4.5rem,10vw,8rem)}
/* A true glass card behind the headline: mostly see-through (light tint, not a dark fill),
   with a blurred backdrop and a thin bright edge, so whatever busy detail or baked-in text a
   background photo carries still shows through, while the title on top stays legible. */
.hero__text{max-width:38rem;position:relative;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--r);background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid rgba(255,255,255,.22);border-inline-start:3px solid var(--yellow);box-shadow:0 18px 40px -20px rgba(0,0,0,.45)}
/* A livelier display face for the headline only (Vazirmatn stays the body/UI font
   everywhere else) — self-hosted the same way as Vazirmatn, for the same reason
   (Google Fonts is often blocked or slow in Iran). */
.hero h1{margin:0 0 .6rem;color:#fff;font-family:var(--wp--preset--font-family--lalezar,"Lalezar",Vazirmatn,sans-serif);font-weight:400;letter-spacing:0;line-height:1.3;font-size:clamp(1.7rem,3.6vw,2.6rem);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero p{margin:0 0 1.5rem;color:#f1ece7;font-size:1.05rem;max-width:52ch;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}

.hero__arrow{position:absolute;z-index:2;top:50%;translate:0 -50%;width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(20,18,18,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s,scale .2s}
.hero__arrow:hover{background:rgba(20,18,18,.5);scale:1.06}
.hero__arrow--prev{inset-inline-start:1.25rem}
.hero__arrow--next{inset-inline-end:1.25rem}
.hero__dots{position:absolute;z-index:2;inset-inline:0;inset-block-end:1.4rem;display:flex;justify-content:center;gap:.45rem}
.hero__dots button{width:.55rem;height:.55rem;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:background .2s,width .2s}
.hero__dots button[aria-current="true"]{background:var(--yellow);width:1.6rem;border-radius:999px}

/* Contact bar: address and phone, shown after the facility photos */
.contactbar{background:var(--film);color:#f4f1ee}
.contactbar__in{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;justify-content:center;padding-block:1.1rem}
.contactbar__item{display:flex;align-items:center;gap:.6rem;font-weight:600}
.contactbar__item svg{flex:none;color:var(--yellow)}
.contactbar__item a{color:inherit;text-decoration:none}
.contactbar__item a:hover{text-decoration:underline}

/* Sections */
.sec{padding-block:clamp(3rem,6vw,5rem)}
.sec--box{background:var(--box)}
.sec--tight{padding-block:clamp(2rem,4vw,3rem) 0}

/* Site-visits counter, where the homepage "Articles" list used to be: a soft gradient banner
   card with the icon badge on one side, the number in the middle, and a muted trending-up
   flourish on the other side (hidden on phones, where there's no room for it). */
.stat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:clamp(2rem,5vw,2.75rem) clamp(1.5rem,5vw,3rem);border-radius:1.25rem;background:linear-gradient(135deg,var(--box),#fff 65%,var(--box));border:1px solid var(--line);text-align:center}
.stat__icon{position:relative;flex:none;display:grid;place-items:center;width:4.5rem;height:4.5rem;border-radius:50%;background:#fff;color:var(--yellow);box-shadow:0 10px 30px -14px rgba(20,18,18,.35)}
.stat__icon::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid rgba(252,204,0,.4);border-inline-start-color:transparent;border-block-end-color:transparent}
.stat__icon svg{width:2rem;height:2rem}
.stat__title{margin:0;font-size:1.05rem;font-weight:800}
.stat__num{display:block;margin-block-start:.3rem;font-size:clamp(2rem,5vw,2.75rem);font-weight:900;line-height:1.1;color:var(--ink)}
.stat__sub{margin:.35rem 0 0;color:var(--muted);font-size:.92rem}
.stat__chart{display:none}
@media (min-width:640px){
	.stat{flex-direction:row;justify-content:space-between;text-align:start}
	.stat__chart{display:block;flex:none;color:var(--yellow);opacity:.55}
}
.sec__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-block-end:2rem}
.sec__head h2{margin:0}
.sec__head p{margin:.4rem 0 0;max-width:56ch;color:var(--muted)}
.wrap.narrow{--wrap:46rem}

.svc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);column-gap:3rem;border-block-end:1px solid var(--line)}
.svc{position:relative;display:flex;justify-content:space-between;gap:1rem;padding-block:1.25rem;border-block-start:1px solid var(--line)}
.svc h3{margin:0 0 .2rem}
.svc h3 a{color:inherit;text-decoration:none}
.svc h3 a::after{content:"";position:absolute;inset:0}
.svc:hover h3 a{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:.25em}
.svc p{margin:0;color:var(--muted);font-size:.95rem}
.svc__meta{flex:none;color:var(--muted);font-size:.88rem;white-space:nowrap}

/* Services archive: a 6-up photo card grid (see rc_service_card_current()), in the same family
   as the doctor cards below but landscape, with the title/excerpt under the photo. */
.svc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.svc-card a:not(.rc-pencil){display:block;height:100%;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;transition:box-shadow .2s,transform .15s}
.svc-card a:not(.rc-pencil):hover{box-shadow:0 16px 32px -20px rgba(20,18,18,.3);transform:translateY(-2px)}
.svc-card__ph{display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:var(--film-2);color:var(--yellow);font-size:2rem;font-weight:800}
.svc-card__ph img{width:100%;height:100%;object-fit:cover}
.svc-card__body{display:block;padding:1.1rem 1.25rem 1.4rem}
.svc-card h3{margin:0 0 .4rem;font-size:1.08rem;font-weight:900;letter-spacing:-.01em}
.svc-card a:hover h3{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:.25em}
.svc-card p{margin:0;color:var(--muted);font-size:.9rem}

.about{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.points{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
.points li{padding-inline-start:1.25rem;border-inline-start:4px solid var(--yellow)}
.points strong{display:block}
.points span{color:var(--muted)}

/* A modern staff card: a smaller, centered portrait inside a bordered white card (instead of
   the photo filling the whole cell edge-to-edge), a bold name under it, and the specialty
   (Doctor details > Specialty, in the admin) under that. */
.docs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.doc a:not(.rc-pencil){display:flex;flex-direction:column;align-items:center;color:inherit;text-decoration:none;text-align:center;padding:1.25rem 1rem 1.5rem;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:box-shadow .2s,transform .15s}
.doc a:not(.rc-pencil):hover{box-shadow:0 16px 32px -20px rgba(20,18,18,.3);transform:translateY(-2px)}
.doc__ph{display:grid;place-items:center;width:70%;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--film-2);color:var(--yellow);font-size:2rem;font-weight:800;margin-block-end:1rem}
.doc--empty .doc__ph{color:rgba(252,204,0,.45)}
.doc__ph img{width:100%;height:100%;object-fit:cover}
.doc h3{margin:0;font-size:1.08rem;font-weight:900;letter-spacing:-.01em}
.doc a:hover h3{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:.25em}
.doc p{margin:.35rem 0 0;color:var(--muted);font-size:.88rem}
.doc--empty h3,.doc--empty p{color:var(--muted)}
.admin-hint{margin:1.5rem 0 0;padding:.8rem 1rem;border-inline-start:4px solid var(--yellow);background:var(--box);font-size:.92rem}

.posts{list-style:none;margin:0;padding:0;border-block-end:1px solid var(--line)}
.post-row{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding-block:1.1rem;border-block-start:1px solid var(--line)}
.post-row time{color:var(--muted);font-size:.9rem}
.post-row h3{margin:0 0 .2rem}
.post-row h3 a{color:inherit;text-decoration:none}
.post-row h3 a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:.25em}
.post-row p{margin:0;color:var(--muted)}

/* Facility photo slideshow */
.slider{position:relative}
/* Paging is driven entirely from JS (see main.js): native scroll-snap fought with
   programmatic smooth-scroll in testing (Chromium would revert the scroll the instant
   snapping was toggled back on), so there's no scroll-snap-type here — main.js re-aligns
   the track to the nearest slide itself once a manual drag/swipe/wheel scroll settles. */
.slider__track{list-style:none;margin:0;padding-block:clamp(1.5rem,3vw,2rem);padding-inline:max(2.5rem,calc((100% - var(--wrap)) / 2 + 2.5rem));display:flex;gap:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.slider__slide{position:relative;flex:0 0 min(78vw,34rem);border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--box)}
.slider__slide img{width:100%;height:100%;object-fit:cover}
.slider__cap{position:absolute;inset-inline:0;inset-block-end:0;padding:.9rem 1.1rem;background:linear-gradient(to top,rgba(20,18,18,.75),transparent);color:#fff;font-weight:600;font-size:.95rem}
.slider__arrow{position:absolute;top:calc(50% + 1rem);translate:0 -50%;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.slider__arrow:hover{background:var(--box)}
.slider__arrow--prev{inset-inline-start:1rem}
.slider__arrow--next{inset-inline-end:1rem}
.slider__dots{display:flex;justify-content:center;gap:.4rem;padding-block:0 .25rem}
.slider__dots button{width:.55rem;height:.55rem;padding:0;border:0;border-radius:50%;background:var(--line);cursor:pointer}
.slider__dots button[aria-current="true"]{background:var(--yellow);width:1.4rem;border-radius:999px}

/* Insurers and partner centers: same slider mechanics as the facility-photo gallery
   (.slider/.slider__track/.slider__arrow, driven by the generic [data-rc-slider] JS),
   but narrow fixed-width slides so several logos show in one row at once, and no dots
   (a logo list can run to dozens of slides, which would make a dot per slide unusable). */
.slider--insurers .slider__track{padding-block:clamp(1.25rem,2.5vw,1.75rem)}
.insurer-slide{flex:0 0 9rem;aspect-ratio:auto;border-radius:0;background:none;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.insurer-slide__logo{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/10;padding:1rem;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.insurer-slide__logo img{max-height:2.75rem;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s}
.insurer-slide:hover .insurer-slide__logo img{filter:none;opacity:1}
.insurer-slide__name{font-weight:600;font-size:.85rem;color:var(--muted);text-align:center}

/* The [rc_insurers] shortcode: same insurer cards as above, but flowing in a wrapped grid
   (every insurer visible at once, no scrolling) under a "Primary"/"Supplementary" heading. */
.insurers-group{margin-block-end:2.5rem}
.insurers-group:last-child{margin-block-end:0}
.insurers-group h2{margin:0 0 1.25rem;font-size:1.2rem}
.insurers-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1.5rem}

/* Home page doctors row and services row: the same slider mechanics again, with the existing
   doctor/service photo cards (.doc / .svc-card, otherwise unchanged from the doctors/services
   listing pages) as slides, sized so about 4 doctors / 3 services show at once on a wide screen. */
.slider--doctors .doc{flex:0 0 clamp(12rem,22vw,16.5rem)}
.slider--services .svc-card{flex:0 0 clamp(16rem,30vw,21rem)}

/* Social icon row */
.social{display:flex;gap:.5rem}
.social__i{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:50%;background:rgba(255,255,255,.12);color:#fff}
.social__i:hover{background:var(--yellow);color:var(--ink)}

/* Appointment and feedback forms ([rc_appointment] and [rc_feedback] shortcodes) */
.appt-form{--f-bg:#fff;--f-bd:#b9b3ae;--f-fg:var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.3rem}
.field--full{grid-column:1/-1}
.appt-form label{font-weight:600;font-size:.92rem}
.appt-form input,.appt-form select,.appt-form textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--f-bd);border-radius:var(--r);background:var(--f-bg);color:var(--f-fg);font:inherit}
.appt-form textarea{min-height:5.5rem;resize:vertical}
.appt-form small{grid-column:1/-1;color:var(--muted)}
.notice{grid-column:1/-1;margin:0 0 1rem;padding:.8rem 1rem;border-radius:var(--r);font-weight:600}
.notice--ok{background:#e3f5ea;color:#12482c}
.notice--err{background:#fbe6e4;color:#7a1a14}

/* Logged-in-editor-only pencil links (rc_edit_pencil() and friends in inc/helpers.php): a
   small round button next to a heading (opens the Customizer, focused on that field and
   previewing this page) or in a card's corner (opens that item's own edit screen). Invisible
   to everyone else because the server never prints the tag for them in the first place. */
.rc-pencil{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.6rem;height:1.6rem;margin-inline-start:.5rem;border-radius:50%;background:var(--yellow);color:var(--ink);vertical-align:middle;box-shadow:0 2px 8px rgba(20,18,18,.25);opacity:.9;transition:opacity .15s,transform .15s}
.rc-pencil:hover{opacity:1;transform:scale(1.08);color:var(--ink)}
.has-edit{position:relative}
.has-edit>.rc-pencil{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;z-index:3;margin:0}

/* Inner pages */
.page-head{padding-block:2.5rem;background:var(--box);border-block-end:1px solid var(--line)}
.page-head h1{margin:0;font-family:var(--wp--preset--font-family--lalezar,"Lalezar",Vazirmatn,sans-serif);font-weight:400;letter-spacing:0;line-height:1.25;font-size:clamp(1.9rem,3.6vw,2.75rem)}
.page-head p{margin:.6rem 0 0;color:var(--muted);font-size:1.05rem}
.page-head--hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(16rem,32vw,24rem);background-size:cover;background-position:center;border-block-end:0;isolation:isolate;padding-block:2.5rem}
.page-head--hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,18,18,.35) 0%,rgba(20,18,18,.75) 100%)}
.page-head--hero h1{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.page-head--hero p{color:#f1ece7;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.entry{padding-block:2.5rem 4rem}
.prose{max-width:70ch}
.prose h2,.prose h3{margin-block:1.8em .5em}
.prose ul,.prose ol{padding-inline-start:1.4rem}
.prose img{border-radius:var(--r)}
.prose table{width:100%;border-collapse:collapse}
.prose th,.prose td{padding:.5rem .7rem;border:1px solid var(--line);text-align:start}
.lead-img{margin-block-end:1.5rem;border-radius:var(--r);overflow:hidden}
.split{display:grid;grid-template-columns:1fr 20rem;gap:3rem;align-items:start}
.aside{position:sticky;top:6rem;padding:1.25rem;border:1px solid var(--line);border-inline-start:4px solid var(--yellow);border-radius:var(--r);background:var(--box)}
.aside h2{margin:0 0 .3rem;font-size:1rem}
.aside p{margin:0 0 1rem;white-space:pre-line}
.aside .btn{width:100%}
.related{margin-block-start:1.5rem;padding-block-start:1.25rem;border-block-start:1px solid var(--line)}
.related h2{margin:0 0 .75rem;font-size:1rem}
.related__list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.related__item a{display:flex;align-items:center;gap:.75rem;color:inherit;text-decoration:none}
.related__ph{flex:none;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:var(--r);overflow:hidden;background:var(--film-2);color:var(--yellow);font-weight:800}
.related__ph img{width:100%;height:100%;object-fit:cover}
.related__title{font-weight:700;font-size:.92rem;line-height:1.4}
.related__item a:hover .related__title{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:.2em}

/* Blog sidebar (Appearance > Widgets > Sidebar); only rendered once it holds something */
.widget-area{position:sticky;top:6rem;display:grid;gap:2rem;font-size:.95rem;color:var(--muted)}
.widget-title{margin:0 0 .75rem;font-size:1.05rem;color:var(--ink)}
.widget ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.widget li{padding-block-end:.5rem;border-block-end:1px solid var(--line)}
.widget a{color:inherit}
.widget a:hover{color:var(--ink)}
.widget select,.widget input[type="text"],.widget input[type="search"],.widget input[type="email"]{width:100%;padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--r);font:inherit;background:#fff;color:var(--ink)}
.widget table{width:100%;border-collapse:collapse;font-size:.9rem}
.widget caption{font-weight:700;margin-block-end:.5rem;text-align:start;color:var(--ink)}
.widget th,.widget td{padding:.35rem;text-align:center;border:1px solid var(--line)}
.widget img{border-radius:var(--r)}
.foot-grid .widget li{border-block-end-color:rgba(255,255,255,.14)}
.nav-links{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-start:2rem}
.page-numbers{padding:.35rem .8rem;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);text-decoration:none}
.page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.alignleft{float:left;margin:0 1rem 1rem 0}.alignright{float:right;margin:0 0 1rem 1rem}.aligncenter{margin-inline:auto}
.wp-caption-text{font-size:.9rem;color:var(--muted)}

/* Footer */
.site-foot{position:relative;isolation:isolate;padding-block:3rem 5.5rem;background:var(--film);color:#d3cdc8}
.site-foot a{color:#f4f1ee}
.site-foot .tg{color:var(--ink)}
/* Optional footer background photo (Appearance > Customize > Footer) — darkened underneath
   so the contact details and links on top stay readable regardless of the photo. */
.site-foot--img{background-image:var(--footer-bg-image);background-size:cover;background-position:center}
.site-foot--img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(20,18,18,.86),rgba(20,18,18,.86))}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.foot-t{margin:0 0 .6rem;font-size:1rem;color:#fff}
.foot-grid p{margin:0 0 .5rem;white-space:pre-line}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-block-start:2rem;padding-block-start:1rem;border-block-start:1px solid rgba(255,255,255,.14);font-size:.88rem}
.admin-hint--dark{border-inline-start-color:var(--yellow);background:rgba(255,255,255,.06);color:#e7e2dd}
.callbar{display:none}

/* Header collapses early so brand, menu and buttons never crowd each other. Below this width,
   dropdowns stop being floating panels/flyouts and become plain indented lists, since a
   side flyout has nowhere to go on a narrow screen. */
/* Collapses to the hamburger well before the menu would crowd the logo/phone/buttons —
   raised from the usual ~1024px breakpoint because this menu can run to 5-6 items plus a
   phone number and two buttons, which wrap untidily onto a second line if left to the
   default desktop row for too long. */
@media (max-width:1300px){
	.nav-toggle{display:inline-flex}
	.head-tools{margin-inline-start:auto}
	/* A modern dropdown panel: a clean white sheet with one centered, generously-sized link
	   per row, divided by hairlines, that drops down and fades in under the header — not a
	   plain cramped list. Sub-items (when a top-level item has them) stay indented and start-
	   aligned underneath their parent, so nesting is still easy to scan once expanded. */
	.nav{position:absolute;inset-inline:0;inset-block-start:100%;display:none;max-height:calc(100vh - 4.5rem);overflow-y:auto;margin:0;padding:.4rem 0;background:#fff;border-block-end:1px solid var(--line);box-shadow:0 20px 40px -22px rgba(20,18,18,.3)}
	.nav.is-open{display:block;animation:rc-nav-in .18s ease}
	@keyframes rc-nav-in{from{opacity:0;translate:0 -.5rem}to{opacity:1;translate:0 0}}
	.nav>ul{flex-direction:column}
	.nav>ul>li{border-block-end:1px solid var(--line)}
	.nav>ul>li:last-child{border-block-end:0}
	.nav>ul>li>a{padding:1rem 1.25rem;font-size:1.05rem;text-align:center}
	.nav>ul>li.has-dropdown>a{padding-inline-end:2.75rem}
	.nav .current-menu-item>a{box-shadow:none;color:var(--yellow-active);font-weight:800}
	.sub-menu,.sub-menu .sub-menu--flyout{position:static;inset:auto;display:none;margin:0;padding:.25rem 0 .5rem;background:var(--box);border:0;box-shadow:none}
	.nav li.is-open>.sub-menu{display:block}
	.sub-menu a{color:var(--ink);padding:.6rem 1.25rem 1rem 2.25rem;font-size:.92rem;text-align:start}
	.sub-menu a:hover{background:rgba(0,0,0,.04)}
	/* On desktop the toggle covers its whole (single-row) li; on mobile that li now also
	   contains its expanded sub-menu as a normal child, so a height:100% toggle would
	   stretch down and sit on top of the sub-menu's own links. Fix its height to one row. */
	.submenu-toggle{height:3.6rem;color:var(--ink)}
	.hero--plain::after{display:none}
	.brand span{max-width:15rem}
	.brand__logo{max-height:2.6rem;max-width:10rem}
}
@media (max-width:900px){
	.about,.split,.foot-grid{grid-template-columns:1fr}
	.svc-list{grid-template-columns:1fr}
	.svc-grid,.docs{grid-template-columns:repeat(2,1fr)}
	.aside,.widget-area{position:static}
}
@media (max-width:560px){
	.svc-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
	/* These same two buttons already reappear in .callbar, fixed to the bottom of the screen
	   right below — no need for both on a narrow header. */
	.topbar__ctas{display:none}
	.brand span{max-width:9rem}
	.brand__logo{max-height:2.4rem;max-width:8rem}
	.appt-form{grid-template-columns:1fr}
	.post-row{grid-template-columns:1fr;gap:.2rem}
	.insurer-slide{flex-basis:7rem}
	.contactbar__in{justify-content:flex-start}
	.callbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:60;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem;padding:.6rem;background:#fff;border-block-start:1px solid var(--line)}
	/* Two buttons sharing half the screen width each, so they need noticeably smaller text
	   and padding than a normal button to keep their label on one line on a narrow phone. */
	.callbar .btn{padding:.6rem .5rem;font-size:.82rem;gap:.35rem;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation:none!important;transition:none!important}
}


/* استایل محتوای قالب اختصاصی پارسیان */
.custom-page {
    direction: rtl;
    padding: 40px 20px 60px;
    min-height: 60vh;
    background: #f4f9fd;
}

.custom-page__container {
    max-width: 1200px;
    margin: 0 auto;
}

/* تصاویر هم‌اندازه در محتوای برگه */
.custom-page .wp-block-gallery img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 14px;
}

/* نمایش در موبایل */
@media (max-width: 600px) {
    .custom-page {
        padding: 24px 14px 40px;
    }

    .custom-page .wp-block-gallery img {
        height: 170px;
    }
}

.rc-insurers-fix .prose{
	max-width: none;
	text-align: center;
}
.rc-insurers-fix .prose h2{
	text-align: center;
	margin-block: 2rem 1.5rem;
}
.rc-insurers-fix .prose figure.wp-block-image,
.rc-insurers-fix .prose .wp-block-image,
.rc-insurers-fix .prose .wp-block-gallery .wp-block-image{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 100px;
	margin: .6rem;
	padding: 1rem;
	border: 1px solid #e5e2df;
	border-radius: 10px;
	background: #fff;
	vertical-align: top;
}
.rc-insurers-fix .prose figure.wp-block-image img,
.rc-insurers-fix .prose .wp-block-image img{
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: contain;
}