/* ==========================================================================
   PANAP — Elementor brand alignment.

   Loaded only on Elementor-built pages. Maps Elementor's widget defaults onto
   the PANAP design tokens so an inner page built by an editor looks on-brand
   without anyone styling individual widgets.
   ========================================================================== */

.panap-elementor-page .elementor {
  /* Expose the design tokens to Elementor's global colour pickers. */
  --e-global-color-primary: var(--teal);
  --e-global-color-secondary: var(--purple);
  --e-global-color-text: var(--gray-700);
  --e-global-color-accent: var(--teal-dark);
}

/* The theme adds no page padding on Elementor pages — sections own spacing. */
.panap-elementor-page .panap-page-content--full {
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------ Typography */

.panap-elementor-page .elementor-widget-text-editor,
.panap-elementor-page .elementor-widget-theme-post-content {
  color: var(--gray-700);
  font-family: 'Lato', sans-serif;
  line-height: 1.8;
}

.panap-elementor-page .elementor-heading-title {
  color: var(--ink);
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

.panap-elementor-page h1.elementor-heading-title {
  font-size: clamp(30px, 4.4vw, 52px);
}

.panap-elementor-page h2.elementor-heading-title {
  font-size: clamp(26px, 3.4vw, 42px);
}

.panap-elementor-page h3.elementor-heading-title {
  font-size: clamp(20px, 2.4vw, 28px);
}

/* --------------------------------------------------------------- Buttons */

.panap-elementor-page .elementor-button {
  align-items: center;
  background: var(--gradient-main);
  border: 0;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  justify-content: center;
  padding: 14px 24px;
  transition:
    transform 0.15s ease,
    box-shadow 0.25s ease,
    opacity 0.2s ease;
}

.panap-elementor-page .elementor-button:hover,
.panap-elementor-page .elementor-button:focus {
  box-shadow: 0 12px 28px rgba(2, 135, 136, 0.28);
  color: #fff;
  transform: translateY(-2px);
}

.panap-elementor-page .elementor-button-link.elementor-size-sm {
  font-size: 15px;
  padding: 11px 20px;
}

/* Elementor's "link" and outline variants keep the brand colour. */
.panap-elementor-page .elementor-widget-button .elementor-button[class*='outline'] {
  background: transparent;
  border: 1px solid var(--teal);
  color: var(--teal-dark);
}

/* ----------------------------------------------------------- Components */

.panap-elementor-page .elementor-widget-icon-box .elementor-icon,
.panap-elementor-page .elementor-widget-icon .elementor-icon {
  color: var(--teal);
}

.panap-elementor-page .elementor-widget-divider {
  --divider-color: var(--border);
}

.panap-elementor-page .elementor-widget-image img {
  border-radius: var(--radius-md);
}

.panap-elementor-page blockquote,
.panap-elementor-page .elementor-blockquote {
  border-left: 4px solid var(--teal);
  color: var(--gray-700);
  padding-left: 24px;
}

.panap-elementor-page .elementor-widget-text-editor a {
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tabs, accordions and toggles inherit the card treatment. */
.panap-elementor-page .elementor-accordion .elementor-accordion-item,
.panap-elementor-page .elementor-toggle .elementor-toggle-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
}

.panap-elementor-page .elementor-accordion .elementor-tab-title,
.panap-elementor-page .elementor-toggle .elementor-tab-title {
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 600;
}

.panap-elementor-page .elementor-accordion .elementor-tab-title.elementor-active {
  color: var(--teal-dark);
}

/* Form widget (Elementor Pro) picks up the theme's field treatment. */
.panap-elementor-page .elementor-field-group .elementor-field {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Lato', sans-serif !important;
  padding: 12px 14px !important;
}

.panap-elementor-page .elementor-field-group .elementor-field:focus {
  border-color: var(--teal) !important;
  outline: none;
}

/* --------------------------------------------------------- Our History */

/* The About Us timeline.
   Elementor free has no timeline widget, and its per-element Custom CSS panel
   is a Pro feature, so this is the one piece of the page that cannot live in
   the editor. It is deliberately the smallest possible piece: the centre
   spine, the marker dot, and which side of the spine a card sits on. The
   cards themselves are ordinary containers — their gradient, radius, shadow,
   padding and type are all Elementor controls, so an editor can restyle a
   card without touching this file.

   Column collapse at tablet and below is set in Elementor's own responsive
   grid controls, not here. */

.panap-elementor-page .panap-timeline {
  position: relative;
}

.panap-elementor-page .panap-timeline::before {
  background: var(--border);
  bottom: 0;
  content: '';
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
}

.panap-elementor-page .panap-timeline__item {
  position: relative;
}

.panap-elementor-page .panap-timeline__item::before {
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff;
  content: '';
  height: 14px;
  left: 50%;
  position: absolute;
  top: 26px;
  transform: translateX(-50%);
  width: 14px;
  z-index: 1;
}

@media (min-width: 1025px) {
  .panap-elementor-page .panap-timeline__card {
    grid-column: 1;
  }

  .panap-elementor-page .panap-timeline__item.is-alt .panap-timeline__card {
    grid-column: 3;
  }
}

/* One left rail below 1025px, matching the approved design's own behaviour. */
@media (max-width: 1024px) {
  .panap-elementor-page .panap-timeline::before,
  .panap-elementor-page .panap-timeline__item::before {
    left: 10px;
  }

  .panap-elementor-page .panap-timeline__item {
    padding-left: 38px;
  }
}

/* ------------------------------------------------- Post-loop widgets */

/* The .panap-loop grid the PANAP Publications, Updates and Events widgets
   render into lives in wp.css, not here. The events archive renders the same
   grid without Elementor being involved at all, and this file is loaded only
   on Elementor-built pages — so a listing primitive shared by both belongs in
   the stylesheet the whole site gets.

   What stays Elementor's job is the column count and the gap, which come from
   each widget's own responsive controls and are written into the page's
   generated CSS. */

/* ----------------------------------------------------- Embed slots */

/* A placeholder standing in for a third-party embed the site has not been
   given yet — the donation widget, currently. It is deliberately loud: an
   unfilled slot that looks like body copy is one that ships unfilled. */
.panap-donate-placeholder {
  align-items: flex-start;
  background: repeating-linear-gradient(
    135deg,
    var(--bg-soft) 0 12px,
    rgba(2, 135, 136, 0.05) 12px 24px
  );
  border: 2px dashed var(--teal);
  border-radius: var(--radius-md);
  color: var(--gray-700);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 auto;
  max-width: 560px;
  padding: 28px 24px;
  text-align: center;
}

.panap-donate-placeholder strong {
  color: var(--teal-dark);
  font-size: 17px;
  width: 100%;
}

.panap-donate-placeholder span {
  font-size: 14px;
  line-height: 1.6;
  width: 100%;
}

/* The card a mailing-list shortcode is dropped into. A plugin's own form
   arrives unstyled; this gives it a panel to sit in either way, and the
   field rules above do the rest once MailPoet is active. */
.panap-elementor-page .panap-form-card .elementor-widget-shortcode {
  color: var(--gray-700);
}

.panap-elementor-page .panap-form-card form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panap-elementor-page .panap-form-card input[type='text'],
.panap-elementor-page .panap-form-card input[type='email'],
.panap-elementor-page .panap-form-card select,
.panap-elementor-page .panap-form-card textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  padding: 12px 14px;
  width: 100%;
}

.panap-elementor-page .panap-form-card input[type='submit'],
.panap-elementor-page .panap-form-card button[type='submit'] {
  background: var(--gradient-main);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  padding: 13px 26px;
}

/* An un-rendered shortcode — MailPoet not installed, or a wrong form id —
   would otherwise look like stray body text in the middle of a card. */
.panap-elementor-page .panap-form-card .elementor-widget-shortcode:not(:has(form)) {
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  padding: 16px;
}