/* drpashmforoosh.com — Phase 1 components
   Header · mobile drawer · mobile action bar · footer · article template.
   Every class is prefixed `pf-` so nothing collides with Elementor or Hello Elementor.
   Logical properties throughout (inline-start = right in RTL). Depends on tokens.css. */

/* ───────────────────────── Base ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--c-surface); color: var(--c-text);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-ui);
  letter-spacing: 0; text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; }
a { color: var(--c-link); }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; }
button:focus, button:hover { background-color: transparent; color: inherit; } /* neutralise Hello's pink */
.pf-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.pf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.pf-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; }
.pf-icon--fill { fill: currentColor; stroke: none; }
.pf-skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; background: var(--c-navy-700);
  color: #fff; padding: 10px 16px; border-radius: var(--r-sm); }
.pf-skip:focus { top: 8px; }

/* ───────────────────────── Buttons ───────────────────────── */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.4; text-decoration: none;
  cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pf-btn .pf-icon { width: 20px; height: 20px; }
.pf-btn--cta { background: var(--cta); color: #fff; }
.pf-btn--cta:hover, .pf-btn--cta:focus { background: var(--cta-strong); color: #fff; }
.pf-btn--primary { background: var(--brand); color: #fff; }
.pf-btn--primary:hover, .pf-btn--primary:focus { background: var(--brand-strong); color: #fff; }
.pf-btn--ghost { background: #fff; color: var(--brand); border-color: var(--c-navy-200); }
.pf-btn--ghost:hover, .pf-btn--ghost:focus { background: var(--c-navy-50); color: var(--brand); border-color: var(--c-navy-400); }
.pf-btn--light { background: #fff; color: var(--c-navy-800); }
.pf-btn--light:hover, .pf-btn--light:focus { background: var(--c-navy-50); color: var(--c-navy-800); }
.pf-btn--onDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.pf-btn--onDark:hover, .pf-btn--onDark:focus { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.pf-btn--block { width: 100%; }
.pf-iconbtn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm);
  border: 1px solid var(--c-line); background: #fff; color: var(--c-navy-700); cursor: pointer; text-decoration: none;
}
.pf-iconbtn:hover, .pf-iconbtn:focus { background: var(--c-navy-50); color: var(--c-navy-700); }
.pf-iconbtn.is-done { background: var(--c-green-50); color: var(--c-green-700); border-color: var(--c-green-100); }
.pf-menubtn { min-height: 44px; padding-inline: 12px; }

/* ───────────────────────── Top bar (desktop) ───────────────────────── */
.pf-topbar { display: none; background: var(--c-navy-900); color: var(--c-navy-100); font-size: var(--fs-caption); line-height: 1.6; }
.pf-topbar a { color: #fff; text-decoration: none; }
.pf-topbar a:hover, .pf-topbar a:focus { color: var(--c-green-400); }
.pf-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 40px; }
.pf-topbar__item { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.pf-topbar__item .pf-icon { width: 16px; height: 16px; color: var(--c-green-400); }
.pf-topbar__tel { font-weight: var(--fw-bold); }
.pf-topbar__muted { color: var(--c-navy-200); padding-inline-start: 12px; margin-inline-start: 4px; border-inline-start: 1px solid rgba(255,255,255,.2); }
.pf-topbar__end { display: flex; align-items: center; gap: var(--s-3); }
.pf-topbar__icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); }
.pf-topbar__icon:hover, .pf-topbar__icon:focus { background: rgba(255,255,255,.1); }
.pf-topbar__icon .pf-icon { width: 18px; height: 18px; }

/* ───────────────────────── Header ─────────────────────────
   Inline menu from 1200px; below that the drawer. The header row is wider than the content (1320px). */
.pf-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--c-line); backdrop-filter: saturate(1.4) blur(8px);
}
.pf-header.is-scrolled { box-shadow: var(--e-2); }
.pf-header .pf-container, .pf-topbar .pf-container { max-width: 1320px; }
.pf-header__inner { position: relative; display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); }
.pf-brand { display: flex; flex: none; align-items: center; gap: 10px; text-decoration: none; color: var(--c-ink); min-width: 0; }
.pf-brand__mark { width: 38px; height: 39px; flex: none; transition: transform var(--t-med) var(--ease); }
.pf-brand:hover .pf-brand__mark { transform: rotate(-6deg) scale(1.05); }
.pf-brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.pf-brand__name { font-size: 1.0625rem; font-weight: var(--fw-bold); white-space: nowrap; }
.pf-brand__tag { font-size: var(--fs-caption); color: var(--c-green-700); font-weight: var(--fw-medium); white-space: nowrap; }
.pf-brand__tag-long { display: none; }
.pf-header__actions { margin-inline-start: auto; display: flex; flex: none; align-items: center; gap: var(--s-2); }
.pf-header__cta { display: none; }
.pf-nav { display: none; }

@media (min-width: 1024px) {
  .pf-topbar { display: block; }
  .pf-header__cta { display: inline-flex; }
  .pf-brand__mark { width: 46px; height: 47px; }
  .pf-brand__name { font-size: 1.1875rem; }
}
@media (min-width: 1360px) {
  .pf-brand__tag-short { display: none; }
  .pf-brand__tag-long { display: inline; }
}
@media (min-width: 1200px) {
  .pf-menubtn { display: none; }
  .pf-header__actions { margin-inline-start: 0; }
  .pf-nav { display: flex; flex: 1 1 auto; align-self: stretch; justify-content: center; min-width: 0; }
  .pf-nav__list { display: flex; align-items: stretch; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
  .pf-nav__item { position: relative; display: flex; align-items: center; }
  .pf-nav__item--mega { position: static; }
  .pf-nav__link {
    display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: var(--r-sm);
    color: var(--c-ink); text-decoration: none; font-size: 1rem; font-weight: var(--fw-medium);
    background: none; border: 0; cursor: pointer; white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .pf-nav__link .pf-icon { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
  .pf-nav__link:hover, .pf-nav__link:focus, .pf-nav__item:focus-within > .pf-nav__link { background: var(--c-navy-50); color: var(--c-navy-700); }
  .pf-nav__link[aria-current="page"] { color: var(--c-navy-700); position: relative; }
  .pf-nav__link[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 16px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--accent); }
  .pf-nav__panel {
    position: absolute; top: 100%; inset-inline-start: 0; min-width: 260px; padding: var(--s-3);
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--e-3);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
  }
  .pf-nav__item:hover > .pf-nav__panel, .pf-nav__item:focus-within > .pf-nav__panel,
  .pf-nav__item.is-open > .pf-nav__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .pf-nav__item:hover > .pf-nav__link .pf-icon, .pf-nav__item.is-open > .pf-nav__link .pf-icon { transform: rotate(180deg); }
  .pf-nav__panel a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--c-text); text-decoration: none; font-size: var(--fs-small); line-height: 1.6; }
  .pf-nav__panel a:hover, .pf-nav__panel a:focus { background: var(--c-navy-50); color: var(--c-navy-700); }
  .pf-nav__panel .pf-nav__all { color: var(--c-navy-700); font-weight: var(--fw-medium); border-top: 1px solid var(--c-line); margin-top: 6px; padding-top: 10px; }
  /* the diseases mega panel: centred under the whole header row */
  .pf-nav__panel--mega { inset-inline: 0; margin-inline: auto; width: min(1040px, 100%); padding: var(--s-5) var(--s-6); }
  .pf-mega__cols { columns: 4; column-gap: var(--s-6); }
  .pf-mega__group { break-inside: avoid; margin-bottom: var(--s-4); }
  .pf-mega__title { margin: 0 0 6px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
  .pf-mega__title a { padding: 0; font-size: inherit; font-weight: inherit; color: inherit; }
  .pf-mega__group ul { list-style: none; margin: 0; padding: 0; }
  .pf-mega__group li a { padding: 5px 8px; margin-inline: -8px; font-size: var(--fs-caption); }
  .pf-mega__group li li a { padding-inline-start: 20px; color: var(--c-muted); }
  .pf-mega__foot { border-top: 1px solid var(--c-line); padding-top: var(--s-3); display: flex; gap: var(--s-5); }
  .pf-mega__foot a { padding: 0; color: var(--c-navy-700); font-weight: var(--fw-medium); }
}

/* ───────────────────────── Drawer (mobile menu) ───────────────────────── */
.pf-drawer {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgba(13, 33, 64, .5); color: var(--c-text);
}
.pf-drawer::backdrop { background: transparent; }
.pf-drawer__panel {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: min(88vw, 400px);
  display: flex; flex-direction: column; background: #fff; box-shadow: var(--e-3);
  animation: pf-slide var(--t-med) var(--ease);
}
@keyframes pf-slide { from { transform: translateX(100%); } to { transform: none; } }
.pf-drawer__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); }
.pf-drawer__head .pf-iconbtn { margin-inline-start: auto; }
.pf-drawer__body { flex: 1; overflow-y: auto; padding: var(--s-2) var(--s-4) var(--s-5); overscroll-behavior: contain; }
.pf-drawer__search { display: flex; margin: var(--s-3) 0; border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; }
.pf-drawer__search input { flex: 1; min-width: 0; border: 0; padding: 12px 14px; font: inherit; font-size: var(--fs-body); }
.pf-drawer__search button { border: 0; background: var(--c-navy-50); color: var(--c-navy-700); width: 48px; cursor: pointer; }
.pf-mlist { list-style: none; margin: 0; padding: 0; }
.pf-mlist > li { border-bottom: 1px solid var(--c-line); }
.pf-mlist a, .pf-acc > summary {
  display: flex; align-items: center; min-height: 52px; padding: 8px 4px; gap: 10px;
  color: var(--c-ink); text-decoration: none; font-weight: var(--fw-medium); cursor: pointer;
}
.pf-acc > summary { list-style: none; }
.pf-acc > summary::-webkit-details-marker { display: none; }
.pf-acc > summary .pf-icon { margin-inline-start: auto; width: 20px; height: 20px; color: var(--c-muted); transition: transform var(--t-fast) var(--ease); }
.pf-acc[open] > summary .pf-icon { transform: rotate(180deg); }
.pf-acc .pf-mlist { padding-inline-start: 12px; margin-bottom: 8px; border-inline-start: 2px solid var(--c-navy-100); }
.pf-acc .pf-mlist > li { border: 0; }
.pf-acc .pf-mlist a, .pf-acc .pf-acc > summary { min-height: 44px; font-weight: var(--fw-regular); font-size: var(--fs-small); color: var(--c-text); }
.pf-acc .pf-mlist .pf-mlist__all { color: var(--c-navy-700); font-weight: var(--fw-medium); }
.pf-drawer__foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line); background: var(--c-surface-2); }
.pf-drawer__foot .pf-btn { padding-inline: 10px; }

/* ───────────────────────── Mobile action bar ───────────────────────── */
.pf-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40; height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 16px rgba(13, 33, 64, .06); display: grid; grid-template-columns: repeat(5, 1fr);
}
.pf-bar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--c-navy-700); text-decoration: none; font-size: .8125rem; font-weight: var(--fw-medium); line-height: 1.4;
}
.pf-bar__item .pf-icon { width: 24px; height: 24px; }
.pf-bar__item:active { background: var(--c-navy-50); }
.pf-bar__item--cta { position: relative; color: #fff; }
.pf-bar__item--cta::before {
  content: ""; position: absolute; inset: 7px 4px; border-radius: var(--r-md); background: var(--cta); z-index: -1;
}
.pf-bar__item--cta { z-index: 0; }
@media (min-width: 1024px) { .pf-bar { display: none; } }

/* ───────────────────────── Footer ───────────────────────── */
.pf-footer { background: var(--c-navy-900); color: #fff; margin-top: var(--s-8); }
.pf-footer a { color: #fff; text-decoration: none; }
.pf-footer a:hover, .pf-footer a:focus { color: var(--c-green-400); text-decoration: underline; }
.pf-footer__top { display: grid; gap: var(--s-6); padding-block: var(--s-7) var(--s-6); }
.pf-footer__brand { display: flex; gap: var(--s-3); align-items: center; }
.pf-footer__brand svg { width: 48px; height: 49px; color: var(--c-green-400); flex: none; }
.pf-footer__brand strong { display: block; font-size: 1.125rem; }
.pf-footer__brand span { color: var(--c-navy-200); font-size: var(--fs-caption); }
.pf-footer__bio { color: var(--c-navy-200); font-size: var(--fs-small); line-height: 1.95; margin: var(--s-4) 0 var(--s-4); max-width: 34rem; }
.pf-footer h2 { font-size: var(--fs-body); font-weight: var(--fw-bold); margin: 0 0 var(--s-3); color: #fff; display: flex; align-items: center; gap: 8px; }
.pf-footer h2::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--c-green-400); }
.pf-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-small); }
.pf-hours { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.pf-hours th, .pf-hours td { padding: 5px 0; text-align: start; font-weight: var(--fw-regular); border-bottom: 1px solid rgba(255,255,255,.08); }
.pf-hours th { color: var(--c-navy-200); width: 46%; }
.pf-footer__addr { display: flex; gap: 8px; color: #fff; font-size: var(--fs-small); margin: 0 0 var(--s-3); line-height: 1.9; }
.pf-footer__addr .pf-icon { color: var(--c-green-400); width: 20px; height: 20px; margin-top: 4px; }
.pf-footer__phones { display: grid; gap: 6px; margin: var(--s-3) 0 0; font-size: var(--fs-small); }
.pf-footer__phones a { display: inline-flex; gap: 8px; align-items: center; }
.pf-footer__phones .pf-icon { width: 18px; height: 18px; color: var(--c-green-400); }
.pf-footer__note { color: var(--c-navy-200); font-size: var(--fs-caption); margin: 4px 0 0; }
.pf-social { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.pf-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); background: rgba(255,255,255,.08); }
.pf-social a:hover, .pf-social a:focus { background: rgba(255,255,255,.16); color: #fff; }
.pf-social .pf-icon { width: 22px; height: 22px; }
.pf-footer__index { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--s-4); }
.pf-footer__index > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; font-weight: var(--fw-bold); }
.pf-footer__index > summary::-webkit-details-marker { display: none; }
.pf-footer__index > summary .pf-icon { margin-inline-start: auto; width: 20px; height: 20px; transition: transform var(--t-fast) var(--ease); }
.pf-footer__index[open] > summary .pf-icon { transform: rotate(180deg); }
.pf-index { columns: 1; column-gap: var(--s-6); padding-top: var(--s-3); }
.pf-index__group { break-inside: avoid; margin-bottom: var(--s-4); }
.pf-index__group h3 { font-size: var(--fs-small); margin: 0 0 4px; color: var(--c-green-400); font-weight: var(--fw-medium); }
.pf-index__group ul { list-style: none; margin: 0; padding: 0; }
.pf-index__group li { font-size: var(--fs-caption); line-height: 1.6; padding-block: 3px; }
.pf-index__group li a { color: var(--c-navy-100); }
.pf-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--s-4); display: flex; flex-wrap: wrap; gap: 8px var(--s-5); justify-content: space-between; color: var(--c-navy-200); font-size: var(--fs-caption); }
.pf-footer__bottom a { color: var(--c-navy-200); }
@media (min-width: 640px) { .pf-index { columns: 2; } }
@media (min-width: 1024px) {
  .pf-footer__top { grid-template-columns: 1.3fr 1.1fr .8fr; gap: var(--s-7); }
  .pf-index { columns: 4; }
}

/* ───────────────────────── Article template ───────────────────────── */
.pf-crumbs { font-size: var(--fs-caption); color: var(--c-muted); padding-block: var(--s-4) 0; }
.pf-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; padding: 0; }
.pf-crumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pf-crumbs li + li::before { content: "‹"; color: var(--c-navy-200); }
.pf-crumbs a { color: var(--c-muted); text-decoration: none; padding-block: 6px; }
.pf-crumbs a:hover { color: var(--c-navy-700); text-decoration: underline; }
.pf-crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }

.pf-article__head { padding-block: var(--s-3) var(--s-5); max-width: 52rem; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--c-navy-50); color: var(--c-navy-700); font-size: var(--fs-caption); font-weight: var(--fw-medium); text-decoration: none;
}
.pf-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pf-chip:hover { background: var(--c-navy-100); }
.pf-article__title { font-size: var(--fs-h1); line-height: var(--lh-head); font-weight: var(--fw-bold); color: var(--c-ink); margin: var(--s-3) 0 var(--s-4); }
.pf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); font-size: var(--fs-caption); color: var(--c-muted); }
.pf-meta__author { display: flex; align-items: center; gap: 10px; color: var(--c-ink); text-decoration: none; }
.pf-meta__author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c-line); }
.pf-meta__author strong { display: block; font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.5; }
.pf-meta__author span { display: block; color: var(--c-muted); line-height: 1.5; }
.pf-meta__facts { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); list-style: none; margin: 0; padding: 0; }
.pf-meta__facts li { display: flex; align-items: center; gap: 6px; }
.pf-meta__facts .pf-icon { width: 18px; height: 18px; color: var(--c-navy-400); }
.pf-reviewed { display: inline-flex; align-items: center; gap: 6px; color: var(--c-green-700); font-weight: var(--fw-medium); }
.pf-reviewed .pf-icon { width: 18px; height: 18px; }

.pf-article__hero { margin: 0 0 var(--s-5); }
.pf-article__hero img { display: block; width: 100%; height: auto; border-radius: var(--r-md); background: var(--c-navy-50); }
.pf-article__hero.pf-article__hero--square { max-width: 420px; } /* video covers; beats the desktop hero width rule */

.pf-article__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } /* minmax: a wide table must not stretch the column */
.pf-article__aside { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 1024px) {
  .pf-article__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-7); align-items: start; }
  .pf-article__aside { position: sticky; top: calc(var(--header-h) + 24px); order: 2; }
  .pf-article__hero { max-width: calc(100% - 300px - var(--s-7)); }
}

/* TOC — built by the template from the post's H2s; plain slug ids, never #elementor-toc__heading-anchor-N */
.pf-toc { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-2); }
.pf-toc > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px;
  font-weight: var(--fw-bold); color: var(--c-ink);
}
.pf-toc > summary::-webkit-details-marker { display: none; }
.pf-toc > summary .pf-icon { color: var(--c-navy-700); }
.pf-toc > summary .pf-toc__count { font-weight: var(--fw-regular); font-size: var(--fs-caption); color: var(--c-muted); }
.pf-toc > summary .pf-toc__chev { margin-inline-start: auto; width: 20px; height: 20px; transition: transform var(--t-fast) var(--ease); }
.pf-toc[open] > summary .pf-toc__chev { transform: rotate(180deg); }
.pf-toc ol { margin: 0; padding: 0 16px 12px; list-style: none; counter-reset: toc; }
.pf-toc li { counter-increment: toc; }
.pf-toc a {
  display: flex; gap: 10px; padding: 7px 0; color: var(--c-text); text-decoration: none; font-size: var(--fs-small); line-height: 1.7;
  border-top: 1px solid var(--c-line);
}
.pf-toc a::before { content: counter(toc); flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--c-navy-100); color: var(--c-navy-700); font-size: .8125rem; }
.pf-toc a:hover, .pf-toc a.is-active { color: var(--c-navy-700); }
.pf-toc a.is-active::before { background: var(--c-navy-700); border-color: var(--c-navy-700); color: #fff; }
@media (min-width: 1024px) {
  .pf-toc > summary { pointer-events: none; }
  .pf-toc > summary .pf-toc__chev { display: none; }
  .pf-toc ol { max-height: calc(100vh - var(--header-h) - 300px); overflow-y: auto; }
}

.pf-asidecta { border-radius: var(--r-md); background: var(--c-navy-700); color: #fff; padding: var(--s-5); }
.pf-asidecta__title { font-size: 1.125rem; font-weight: var(--fw-bold); margin: 0 0 6px; line-height: 1.6; }
.pf-asidecta p { margin: 0 0 var(--s-4); color: var(--c-navy-100); font-size: var(--fs-small); line-height: 1.85; }
.pf-asidecta .pf-btn + .pf-btn { margin-top: var(--s-2); }
@media (max-width: 1023px) { .pf-asidecta { display: none; } }

/* Prose — styles the existing post HTML as it is. No post is edited in Phase 1. */
.pf-prose { max-width: var(--measure); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--c-text); }
.pf-prose > :first-child { margin-top: 0; }
.pf-prose p { margin: 0 0 1.1em; text-align: start !important; } /* posts carry inline text-align:justify — bad for Persian */
.pf-prose h2 {
  font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: var(--fw-bold); color: var(--c-ink);
  margin: 2em 0 .6em; padding-inline-start: 14px; position: relative;
}
.pf-prose h2::before { content: ""; position: absolute; inset-inline-start: 0; top: .35em; bottom: .35em; width: 4px; border-radius: 2px; background: var(--accent); }
.pf-prose h3 { font-size: var(--fs-h3); line-height: var(--lh-head); font-weight: var(--fw-bold); color: var(--c-navy-800); margin: 1.6em 0 .4em; }
.pf-prose h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-ink); margin: 1.4em 0 .3em; }
.pf-prose a { color: var(--c-link); text-decoration: underline; text-decoration-color: var(--c-navy-200); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.pf-prose a:hover { text-decoration-color: currentColor; }
.pf-prose strong, .pf-prose b { font-weight: var(--fw-bold); color: var(--c-ink); }
.pf-prose ul, .pf-prose ol { margin: 0 0 1.2em; padding-inline-start: 1.4em; }
.pf-prose li { margin-bottom: .35em; padding-inline-start: .2em; }
.pf-prose ul > li::marker { color: var(--accent); font-size: 1.1em; }
.pf-prose ol > li::marker { color: var(--c-navy-700); font-weight: var(--fw-bold); }
.pf-prose img { border-radius: var(--r-md); }
.pf-prose figure { margin: 1.6em 0; }
.pf-prose .aligncenter { display: block; margin-inline: auto; }
.pf-prose figcaption { font-size: var(--fs-caption); color: var(--c-muted); text-align: center; margin-top: 8px; line-height: 1.8; }
.pf-prose blockquote { margin: 1.6em 0; padding: var(--s-4) var(--s-5); border-inline-start: 4px solid var(--c-navy-700); background: var(--c-navy-50); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--c-ink); }
.pf-prose hr { border: 0; border-top: 1px solid var(--c-line); margin: 2em 0; }
/* tables scroll inside their own box on phones */
.pf-prose .wp-block-table, .pf-prose .pf-tablewrap { margin: 1.6em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.pf-prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.8; }
.pf-prose th, .pf-prose td { padding: 10px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.pf-prose thead th, .pf-prose tr:first-child > th { background: var(--c-navy-700); color: #fff; font-weight: var(--fw-medium); }
.pf-prose tbody tr:nth-child(even) td { background: var(--c-surface-2); }
.pf-prose tr:last-child td { border-bottom: 0; }
.pf-prose .wp-block-table table { border: 0; }
.pf-prose .wp-block-table td, .pf-prose .wp-block-table th { border-inline: 0; }

/* Inline CTA — injected by the template after the 3rd H2 (the_content filter), not written into posts */
.pf-inlinecta {
  margin: 2em 0; padding: var(--s-5); border-radius: var(--r-md); background: var(--c-green-50);
  border: 1px solid var(--c-green-100); display: grid; gap: var(--s-3); font-size: var(--fs-body);
}
.pf-inlinecta__title { font-weight: var(--fw-bold); color: var(--c-ink); font-size: 1.125rem; line-height: 1.6; margin: 0; }
.pf-inlinecta p { margin: 0; color: var(--c-green-800); font-size: var(--fs-small); line-height: 1.9; }
.pf-inlinecta__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pf-inlinecta__actions .pf-btn { flex: 1 1 180px; }
.pf-prose .pf-inlinecta a { text-decoration: none; }
.pf-inlinecta .pf-btn--cta, .pf-inlinecta .pf-btn--cta:hover { color: #fff; }   /* beat .pf-prose a */
.pf-inlinecta .pf-btn--ghost, .pf-inlinecta .pf-btn--ghost:hover { color: var(--brand); }

/* Share */
.pf-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-6) 0 var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--c-line); max-width: var(--measure); }
.pf-share__label { font-weight: var(--fw-medium); color: var(--c-ink); margin-inline-end: var(--s-2); }
.pf-share .pf-iconbtn { color: var(--c-navy-700); }

/* Author */
.pf-author { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; box-shadow: var(--e-1); max-width: var(--measure); }
.pf-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.pf-author__kicker { font-size: var(--fs-caption); color: var(--c-muted); margin: 0; }
.pf-author__name { font-size: 1.125rem; font-weight: var(--fw-bold); margin: 0; color: var(--c-ink); line-height: 1.6; }
.pf-author__role { color: var(--c-green-700); font-size: var(--fs-small); font-weight: var(--fw-medium); margin: 0 0 var(--s-3); }
.pf-author ul { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-small); line-height: 1.8; }
.pf-author li { display: flex; gap: 8px; }
.pf-author li .pf-icon { width: 18px; height: 18px; margin-top: 4px; color: var(--c-green-600); }
.pf-author__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
@media (min-width: 640px) {
  .pf-author { grid-template-columns: 96px 1fr; }
  .pf-author img { width: 96px; height: 96px; }
  .pf-author ul, .pf-author__links { grid-column: 2; }
}

/* Instagram follow card — replaces the insta-new.jpg image widgets */
.pf-follow { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-5) 0 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-navy-800), var(--c-navy-600)); color: #fff; text-decoration: none; max-width: var(--measure); }
.pf-follow__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.12); flex: none; }
.pf-follow__icon .pf-icon { width: 28px; height: 28px; }
.pf-follow__text strong { display: block; font-size: var(--fs-body); line-height: 1.6; }
.pf-follow__text span { display: block; color: var(--c-navy-100); font-size: var(--fs-caption); line-height: 1.7; }
.pf-follow .pf-follow__handle { margin-inline-start: auto; flex: none; padding: 8px 14px; border-radius: var(--r-sm); background: #fff; color: var(--c-navy-800); font-weight: var(--fw-medium); font-size: var(--fs-small); }
.pf-follow:hover .pf-follow__handle, .pf-follow:focus .pf-follow__handle { background: var(--c-green-50); }
@media (max-width: 479px) { .pf-follow { flex-wrap: wrap; } .pf-follow .pf-follow__handle { margin-inline-start: 0; width: 100%; text-align: center; } }

/* Related */
.pf-section-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-4); }
.pf-section-title h2 { font-size: var(--fs-h2); line-height: var(--lh-head); margin: 0; color: var(--c-ink); }
.pf-section-title a { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-navy-700); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.pf-related { padding-block: var(--s-7) 0; }
.pf-cards { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pf-cards { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.pf-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: var(--c-ink); box-shadow: var(--e-1); transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.pf-card:hover { box-shadow: var(--e-2); transform: translateY(-2px); }
.pf-card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--c-navy-50); }
.pf-cards--square .pf-card img { aspect-ratio: 1; }
.pf-card__body { padding: var(--s-3) var(--s-4) var(--s-4); display: grid; gap: 6px; }
.pf-card__cat { font-size: var(--fs-caption); color: var(--c-green-700); font-weight: var(--fw-medium); }
.pf-card__title { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.75; margin: 0; }

/* Booking band — last block before the footer */
.pf-band { margin-top: var(--s-8); background: var(--c-navy-50); border-block: 1px solid var(--c-navy-100); }
.pf-band__inner { display: grid; gap: var(--s-5); padding-block: var(--s-7); align-items: center; }
.pf-band h2 { font-size: var(--fs-h2); margin: 0 0 6px; color: var(--c-ink); line-height: var(--lh-head); }
.pf-band p { margin: 0; color: var(--c-muted); line-height: 1.9; }
.pf-band__facts { display: flex; flex-wrap: wrap; gap: 6px var(--s-5); list-style: none; padding: 0; margin: var(--s-3) 0 0; font-size: var(--fs-small); color: var(--c-text); }
.pf-band__facts li { display: flex; align-items: center; gap: 6px; }
.pf-band__facts .pf-icon { width: 18px; height: 18px; color: var(--c-green-600); }
.pf-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pf-band__actions .pf-btn { flex: 1 1 200px; }
.pf-band + .pf-footer { margin-top: 0; }
@media (min-width: 1024px) { .pf-band__inner { grid-template-columns: 1fr auto; } .pf-band__actions .pf-btn { flex: none; } }

/* ───────────────────────── Lightbox ─────────────────────────
   Built by site.js for [data-pf-lightbox] galleries. A <dialog>: Esc, focus and the backdrop come with it. */
.pf-lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: var(--s-4); border: 0; background: transparent; color: #fff; overflow: hidden; }
.pf-lightbox[open] { display: grid; place-items: center; }
.pf-lightbox::backdrop { background: rgba(8, 20, 40, .9); }
.pf-lightbox__fig { margin: 0; display: grid; gap: var(--s-3); justify-items: center; max-width: min(100%, 900px); }
.pf-lightbox__fig img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 180px); border-radius: var(--r-md); background: #fff; box-shadow: var(--e-3); touch-action: pan-y; }
.pf-lightbox__fig figcaption { text-align: center; font-weight: var(--fw-medium); line-height: 1.8; padding-inline: var(--s-4); }
.pf-lightbox__count { display: block; color: var(--c-navy-200); font-size: var(--fs-caption); font-weight: var(--fw-regular); }
.pf-lightbox .pf-iconbtn { position: absolute; z-index: 1; padding: 0; border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .12); color: #fff; }
.pf-lightbox .pf-iconbtn:hover, .pf-lightbox .pf-iconbtn:focus { background: rgba(255, 255, 255, .26); color: #fff; }
.pf-lightbox__close { top: calc(var(--s-3) + env(safe-area-inset-top)); inset-inline-end: var(--s-3); }
.pf-lightbox__prev, .pf-lightbox__next { top: 50%; margin-top: -22px; }
.pf-lightbox__prev { inset-inline-start: var(--s-3); }
.pf-lightbox__next { inset-inline-end: var(--s-3); }
.pf-lightbox [hidden] { display: none; }
@media (max-width: 767px) {
  .pf-lightbox__prev, .pf-lightbox__next { top: auto; margin-top: 0; bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); }
}
body.pf-noscroll { overflow: hidden; }

/* ───────────────────────── Comments (5 approved, 2020–21) ───────────────────────── */
.pf-comments { max-width: var(--measure); margin-top: var(--s-6); font-size: var(--fs-small); }
.pf-comments .comments-title, .pf-comments .comment-reply-title { font-size: 1.125rem; color: var(--c-ink); }
.pf-comments .comment-list { list-style: none; padding: 0; }
.pf-comments .comment-body { padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-md); margin-bottom: var(--s-3); }
.pf-comments textarea, .pf-comments input[type=text], .pf-comments input[type=email] { width: 100%; border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 10px 12px; font: inherit; }

/* ───────────────────────── Hello Elementor reset.css overrides ─────────────────────────
   Its a:hover{color:#336}, table borders/zebra and pink [type=button|submit]:hover would leak into these components. */
.pf-card:hover, .pf-brand:hover, .pf-meta__author:hover { color: var(--c-ink); }
.pf-mlist a:hover, .pf-acc > summary:hover, .pf-sechead__more:hover, .pf-section-title a:hover, .pf-visit__phone:hover { color: var(--c-navy-700); }
.pf-follow:hover, .pf-insta__card:hover, .pf-bar__item--cta:hover, .pf-skip:focus { color: #fff; }
.pf-bar__item:hover { color: var(--c-navy-700); }
.pf-drawer__search button:hover, .pf-drawer__search button:focus { background: var(--c-navy-100); color: var(--c-navy-700); }
.pf-drawer__search button { padding: 0; border-radius: 0; }
.pf-prose th, .pf-prose td, .pf-hours th, .pf-hours td { border-top: 0; border-inline: 0; }
.pf-prose tbody tr:nth-child(odd) > td { background: #fff; }
.pf-hours tbody tr > td, .pf-hours tbody tr > th { background: transparent; }
.pf-hours { margin: 0; }
.pf-prose table { margin: 0; }