/* ==========================================================================
   SRKay – WordPress / Elementor compatibility layer.
   srk.css (the original stylesheet, untouched) remains the source of truth for presentation.
   Everything here only neutralises Elementor's wrappers and adds WordPress-specific behaviour.
   ========================================================================== */

/* 1. Elementor wrappers: one full-width, zero-spacing container per SRKay widget ------------------------ */
.e-con.srk-root,
.e-con.e-parent.srk-root {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --margin-top: 0px; --margin-bottom: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --content-width: 100%; --width: 100%;
  --kit-widget-spacing: 0px;
  padding: 0; margin: 0; gap: 0; width: 100%; max-width: none;
  display: block; min-height: 0; border: 0;
}
.e-con.srk-root > .e-con-inner { max-width: none; padding: 0; margin: 0; }
.e-con.srk-root > .elementor-element,
.e-con.srk-root .elementor-widget[class*="elementor-widget-srk_"] {
  width: 100%; max-width: none; margin: 0; --kit-widget-spacing: 0px;
}
.elementor-widget[class*="elementor-widget-srk_"] > .elementor-widget-container { display: block; margin: 0; padding: 0; }
.elementor .elementor-widget[class*="elementor-widget-srk_"]:not(:last-child) { margin-block-end: 0; }

/* Elementor's frontend CSS resets images/links inside .elementor; restore what the original stylesheet expects. */
.elementor .logo img, .elementor .hdr img, .elementor .foot img { max-width: none; border-radius: 0; box-shadow: none; }
.elementor a, .elementor a:hover, .elementor a:focus { box-shadow: none; }

/* 2. WordPress admin bar ------------------------------------------------------------------------------- */
.admin-bar .hdr { top: 32px; }
.admin-bar .menu { padding-top: 32px; }
@media (max-width: 782px) { .admin-bar .hdr { top: 46px; } .admin-bar .menu { padding-top: 46px; } }
@media (max-width: 600px) { .admin-bar .hdr { top: 0; } .admin-bar .menu { padding-top: 0; } }

/* 3. The one deliberate deviation from the original: the pill list no longer forces 4 columns below 561px (it overflowed the screen on phones) */
@media (min-width: 561px) {
  .pill-list[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
  .pill-list[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  .pill-list[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

/* 4. Icons uploaded from the Media Library ------------------------------------------------------------- */
.value .srk-icon-img { width: 30px; height: 30px; object-fit: contain; }
.card .srk-icon-img { width: 34px; height: 34px; object-fit: contain; }

/* 5. Elementor editor / preview: no animation layer, so make everything visible and easy to select ------- */
.srk-editing .loader, .srk-editing .curtain, .srk-editing .cursor { display: none !important; }
.srk-editing .hdr { position: absolute; }
.srk-editing .menu { display: none; }
.srk-editing .hs { overflow: visible; }
.srk-editing .hs__pin { min-height: 0; padding-block: var(--section); }
.srk-editing .hs__track { flex-wrap: wrap; width: auto; }
.srk-editing .hs__bar { display: none; }
.srk-editing .svc { position: relative; top: 0 !important; margin-bottom: 20px; }
.srk-editing .scroll-cue { display: none !important; }
.srk-editing .marquee__track { flex-wrap: nowrap; }
.srk-editing .form__ok { display: block; }

/* 6. Pages / posts that are not built with Elementor (search, 404, blog, plain pages) ------------------- */
.srk-plain { padding-top: calc(var(--section) + 72px); min-height: 60vh; }
.srk-plain .h-lg, .srk-plain .h-xl { margin-bottom: clamp(24px, 3vw, 40px); }
.srk-prose { max-width: 720px; }
.srk-prose > * + * { margin-top: 1.1em; }
.srk-prose a { text-decoration: underline; text-underline-offset: 3px; }
.srk-prose img { max-width: 100%; height: auto; }
.srk-list { display: grid; gap: clamp(28px, 4vw, 48px); margin-top: clamp(24px, 3vw, 40px); }
.srk-list article { border-top: 1px solid var(--line-l); padding-top: 24px; }
.navigation.pagination { margin-top: 48px; }
.navigation.pagination .nav-links { display: flex; gap: 16px; flex-wrap: wrap; }

/* 7. Phone overflow fixes (both existed in the original at 390px and are the only other deviations) ---------- */
@media (max-width: 900px) {
  .split .cards3[style] { grid-template-columns: 1fr !important; }
  .values > .value { min-width: 0; }
  .value h3 { overflow-wrap: anywhere; }
}