/* ============================================================
   Loreto Vertical Accordion (vta) — Elementor widget styles.

   Custom properties are scoped to .vta (not :root) so several accordions with
   different Elementor settings can coexist on one page. No page/body styling.
   ============================================================ */

.vta {
  /* colours */
  --vta-text: #173a5e;
  --vta-line: #8AB0CA;
  --vta-rule: #4B88B4;
  --vta-node: #16609E;
  --vta-page-bg: #f7f6ef;

  /* layout / sizing */
  --vta-max-w: 1180px;
  --vta-rail-w: 46px;
  --vta-rail-gap: 56px;
  --vta-line-w: 1.5px;
  --vta-node-size: 15px;
  --vta-node-ring: 1.5px;
  --vta-star-size: 36px;
  --vta-row-py: 30px;
  --vta-content-padding: 8%;
  --vta-subtab-panel-padding: 0px;

  /* motion */
  --vta-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vta-dur: 0.45s;

  display: flex;
  align-items: stretch;
  gap: var(--vta-rail-gap);
  max-width: var(--vta-max-w);
  margin: 0 auto;
}

/* ---------- Left rail: line + nodes ---------- */
.vta__rail {
  position: relative;
  flex: 0 0 var(--vta-rail-w);
  width: var(--vta-rail-w);
}

/* The vertical line spans between the first and last node centres.
   --vta-rail-top / --vta-rail-bottom are set per instance by the script. */
.vta__rail::before {
  content: "";
  position: absolute;
  top: var(--vta-rail-top, 0);
  bottom: var(--vta-rail-bottom, 0);
  left: 50%;
  width: var(--vta-line-w);
  background: var(--vta-line);
  transform: translateX(-50%);
}

/* A node marker, absolutely centred on its matching row (top set by script) */
.vta__node {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--vta-star-size);
  height: var(--vta-star-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hollow circle (closed) */
.vta__circle {
  width: var(--vta-node-size);
  height: var(--vta-node-size);
  border-radius: 50%;
  border: var(--vta-node-ring) solid var(--vta-node);
  background: var(--vta-page-bg);
  transition: opacity var(--vta-dur) var(--vta-ease);
}

/* Compass star (open) */
.vta__star {
  position: absolute;
  width: var(--vta-star-size);
  height: var(--vta-star-size);
  object-fit: contain;
  opacity: 0;
  transform: scale(0.55) rotate(-45deg);
  transition:
    opacity var(--vta-dur) var(--vta-ease),
    transform var(--vta-dur) var(--vta-ease);
}

.vta__node.is-open .vta__circle {
  opacity: 0;
}

.vta__node.is-open .vta__star {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* ---------- Right column: accordion ---------- */
.vta__list {
  flex: 1 1 auto;
  min-width: 0;
}

.vta__item {
  border-bottom: var(--vta-line-w) solid var(--vta-rule);
}

.vta__item:first-child {
  border-top: var(--vta-line-w) solid transparent;
}

.vta__header {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
  padding: var(--vta-row-py) 0;
  cursor: pointer;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.vta__header:focus-visible {
  outline: 2px solid var(--vta-node);
  outline-offset: 4px;
}

.vta__title {
  flex-grow: 1;
  margin: 0;
  padding-left: var(--vta-content-padding);
  color: #16609E !important;
  font-family: "Noto Serif Display", serif;
  font-size: 43px;
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
  text-transform: none;
}

/* The + / × toggle */
.vta__icon {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  color: #16609E !important;
}

.vta__icon::before,
.vta__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition:
    transform var(--vta-dur) var(--vta-ease),
    opacity var(--vta-dur) var(--vta-ease);
}

.vta__icon::before {           /* horizontal bar */
  width: 100%;
  height: 3px;
  transform: translate(-50%, -50%);
}

.vta__icon::after {            /* vertical bar */
  width: 3px;
  height: 100%;
  transform: translate(-50%, -50%);
}

.vta__item.is-open .vta__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

/* Collapsible panel */
.vta__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--vta-dur) var(--vta-ease);
}

.vta__item.is-open .vta__panel {
  grid-template-rows: 1fr;
  padding-left: var(--vta-content-padding);
}

.vta__item.is-open.has-subtabs .vta__panel {
  padding-left: var(--vta-subtab-panel-padding);
}

.vta__panel-inner {
  overflow: hidden;
}

.vta__text {
  max-width: 720px;
  margin: 0;
  padding: 0 0 var(--vta-row-py);
  color: var(--vta-text) !important;
  font-family: "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--vta-dur) var(--vta-ease),
    transform var(--vta-dur) var(--vta-ease);
}

.vta__item.is-open .vta__text {
  opacity: 1;
  transform: translateY(0);
}

/* Elementor's Site Settings > Default Colors prints its own color rules with
   !important on generic tags (p, a, li, button…), which otherwise beats this
   widget's colours regardless of selector specificity or stylesheet order.
   Matching it with !important above, and forcing WYSIWYG markup to inherit
   it here, keeps the widget's own palette in control. */
.vta__text *,
.vta__subtab-panel * {
  color: inherit !important;
}

/* ---------- Sub tabs (per-item tab list) ---------- */
.vta {
  --vta-subtabs-nav-w: 190px;
  --vta-subtabs-gap: 48px;
  --vta-subtab-color: #3E6E93;
  --vta-subtab-color-active: #173a5e;
}

.vta__subtabs {
  display: flex;
  gap: var(--vta-subtabs-gap);
  padding: 24px 0 var(--vta-row-py);
  border-top: var(--vta-line-w) solid var(--vta-rule);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--vta-dur) var(--vta-ease),
    transform var(--vta-dur) var(--vta-ease);
}

.vta__item.is-open .vta__subtabs {
  opacity: 1;
  transform: translateY(0);
}

.vta__subtabs-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 var(--vta-subtabs-nav-w);
  width: var(--vta-subtabs-nav-w);
}

.vta__subtab-btn {
  all: unset;
  cursor: pointer;
  color: var(--vta-subtab-color) !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  transition: color var(--vta-dur) var(--vta-ease);
}

.vta__subtab-btn:hover {
  color: var(--vta-subtab-color-active) !important;
}

.vta__subtab-btn:focus-visible {
  outline: 2px solid var(--vta-node);
  outline-offset: 3px;
}

.vta__subtab-btn.is-active {
  color: var(--vta-subtab-color-active) !important;
  font-weight: 700;
}

.vta__subtabs-panels {
  flex: 1 1 auto;
  min-width: 0;
}

.vta__subtab-panel {
  display: none;
  max-width: 720px;
  color: var(--vta-text) !important;
  font-family: "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

.vta__subtab-panel.is-active {
  display: block;
}

.vta__subtab-panel p {
  margin: 0 0 22px;
}

.vta__subtab-panel p:last-child {
  margin-bottom: 0;
}

/* Sub-tab rows use a close (×) icon instead of the +/− toggle */
.vta__item.has-subtabs.is-open .vta__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.vta__item.has-subtabs.is-open .vta__icon::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .vta {
    --vta-content-padding: 0px;
  }
}

@media (max-width: 767px) {
  .vta {
    --vta-rail-gap: 28px;
    --vta-subtabs-gap: 20px;
  }

  .vta__title {
    font-size: 26px;
  }

  .vta__subtabs {
    flex-direction: column;
  }

  .vta__subtabs-nav {
    flex-direction: column;
    width: auto;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vta__circle,
  .vta__star,
  .vta__icon::before,
  .vta__icon::after,
  .vta__panel,
  .vta__text,
  .vta__subtabs,
  .vta__subtab-btn {
    transition: none !important;
  }
}