/* =====================================================================
   CMS bridge styles — pieces the static template didn't need but the
   dynamic CMS does: nav dropdowns, alert banner, dynamic-form notes,
   contact page grid, editor (rich text) content. Built on style.css tokens.
   Loaded after style.css (and style-ar.css on RTL pages).
   ===================================================================== */

/* ---------- Brand logo image (replaces the text monogram) ---------- */
.brand__img { height: 54px; width: auto; display: block; flex: 0 0 auto; }
.header .brand__img { height: 56px; }
.footer .brand__img--footer { height: 60px; background: #fff; border-radius: 50%; padding: 5px; }
@media (max-width: 768px) { .brand__img, .header .brand__img { height: 46px; } }

/* ---------- Nav dropdown submenus (menu items with children) ---------- */
.nav__list .has-sub { position: relative; }
.nav__list .has-sub > a::after { content: none; } /* keep underline effect off the parent toggle */
.nav__sub {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 220px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: var(--sp-2);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
}
.nav__list .has-sub:hover > .nav__sub,
.nav__list .has-sub:focus-within > .nav__sub { display: flex; }
.nav__sub li a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink);
}
.nav__sub li a::after { content: none; }
.nav__sub li a:hover { background: var(--c-primary-light); color: var(--c-primary-dark); }

@media (max-width: 768px) {
  .nav__sub {
    position: static;
    display: flex;
    box-shadow: none;
    border: none;
    border-inline-start: 2px solid var(--c-line);
    border-radius: 0;
    margin-inline-start: var(--sp-3);
    padding-block: 0;
  }
}

/* ---------- Alert / newsletter banner ---------- */
.alert-banner {
  background: #E8F6EF;
  border: 1.5px solid var(--c-success);
  color: #1E7A4F;
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-block: var(--sp-5);
}

/* ---------- Dynamic form notes (server-side success / error) ---------- */
.form-note {
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-block-end: var(--sp-4);
}
.form-note.success { background: #E8F6EF; border: 1.5px solid var(--c-success); color: #1E7A4F; }
.form-note.error   { background: #FDECEC; border: 1.5px solid var(--c-danger);  color: #A5322E; }

/* ---------- Contact page (form + info) ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: var(--sp-4); margin-block: var(--sp-5); }
.contact-map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
  min-height: 240px;
}
.contact-map img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 240px; }
@media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ---------- Editor (rich-text) content blocks ---------- */
.rte > *:first-child { margin-block-start: 0; }
.rte img { border-radius: var(--radius); margin-block: var(--sp-4); }
.rte h2 { font-size: var(--fs-xl); margin-block: var(--sp-6) var(--sp-3); }
.rte h3 { font-size: var(--fs-md); margin-block: var(--sp-5) var(--sp-2); color: var(--c-primary-dark); }
.rte ul { list-style: disc; padding-inline-start: var(--sp-5); margin-block-end: var(--sp-4); }
.rte ol { list-style: decimal; padding-inline-start: var(--sp-5); margin-block-end: var(--sp-4); }
.rte a { text-decoration: underline; }

/* Footer link columns rendered from editor HTML keep the template look */
.footer__links ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__links p { margin: 0; }