@charset "UTF-8";
/* ==========================================================================
   Europa Futura — page shell: header, off-canvas nav, sections, hero, footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Containers & sections
   -------------------------------------------------------------------------- */

.ef-container,
.container {
  width: 100%;
  max-width: var(--ef-maxw);
  margin-inline: auto;
  padding-inline: var(--ef-gutter);
}

.ef-section {
  padding-block: var(--ef-section-y);
}

.ef-section--tint  { background: var(--ef-g50); }
.ef-section--panel { background: var(--ef-g100); }

.ef-section--dark {
  background: var(--ef-g900);
  color: var(--ef-white);
}
.ef-section--dark h1,
.ef-section--dark h2,
.ef-section--dark h3,
.ef-section--dark h4 { color: var(--ef-white); }
.ef-section--dark a  { color: var(--ef-gold400); }
.ef-section--dark a:hover,
.ef-section--dark a:focus-visible { color: var(--ef-white); }

/* Section heading block */
.ef-heading {
  max-width: var(--ef-measure);
  margin: 0 auto var(--sp-6);
  text-align: center;
}
.ef-heading > :last-child { margin-bottom: 0; }

.ef-heading::after {
  content: "";
  display: block;
  width: 68px;
  height: 3px;
  margin: var(--sp-4) auto 0;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--ef-g400), var(--ef-gold500));
}

.ef-eyebrow {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ef-gold700);
  margin-bottom: var(--sp-2);
}

.ef-prose { max-width: var(--ef-measure); }
.ef-prose--center { margin-inline: auto; }
.ef-prose h3, .ef-prose h4 { margin-top: var(--sp-6); }
.ef-prose h3:first-child, .ef-prose h4:first-child { margin-top: 0; }

/* Legacy section classes still present in older markup */
.layout_padding        { padding-block: var(--ef-section-y); }
.layout_padding2       { padding-block: var(--ef-section-y); }
.layout_padding2-top   { padding-top: var(--ef-section-y); }
.layout_padding2-bottom{ padding-bottom: var(--ef-section-y); }
.layout_padding-top    { padding-top: var(--sp-5); }
.layout_padding-bottom { padding-bottom: var(--ef-section-y); }
.heading_container     { margin-bottom: var(--sp-6); }
.heading_center        { text-align: center; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.ef-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ef-g700);
  color: var(--ef-white);
  border-bottom: 3px solid var(--ef-gold500);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), var(--sh-1);
}

.ef-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 4.25rem;
}

.ef-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ef-white);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(1rem, .9rem + .55vw, 1.3rem);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1.1;
  padding-block: var(--sp-2);
}
.ef-brand:hover,
.ef-brand:focus-visible { color: var(--ef-gold400); }

.ef-brand__mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--ef-white);
  padding: 3px;
}

/* Desktop inline nav */
.ef-nav-inline {
  display: none;
  align-items: center;
  gap: clamp(.5rem, .1rem + 1vw, 1.35rem);
}

.ef-nav-inline a {
  color: var(--ef-white);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .02em;
  padding: var(--sp-2) var(--sp-1);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.ef-nav-inline a:hover,
.ef-nav-inline a:focus-visible {
  color: var(--ef-gold400);
  border-bottom-color: var(--ef-gold400);
}
.ef-nav-inline a[aria-current="page"] {
  color: var(--ef-gold400);
  border-bottom-color: var(--ef-gold400);
}

/* Burger */
.ef-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: auto;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  color: var(--ef-white);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background var(--ef-speed) var(--ef-ease),
              border-color var(--ef-speed) var(--ef-ease);
}
.ef-burger:hover { background: rgba(255, 255, 255, .12); border-color: var(--ef-gold400); }
.ef-burger__bars { display: block; width: 20px; height: 14px; position: relative; }
.ef-burger__bars::before,
.ef-burger__bars::after,
.ef-burger__bars span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.ef-burger__bars::before { top: 0; }
.ef-burger__bars span    { top: 6px; }
.ef-burger__bars::after  { top: 12px; }

@media (min-width: 62rem) {
  .ef-nav-inline { display: flex; }
  .ef-burger     { display: none; }
}

/* --------------------------------------------------------------------------
   Off-canvas panel
   -------------------------------------------------------------------------- */

.ef-sidebar {
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: 40;
  width: min(21rem, 88vw);
  padding: var(--sp-5) var(--sp-5) var(--sp-8);
  background: var(--ef-g800);
  color: var(--ef-white);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--sh-3);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform .28s var(--ef-ease), visibility .28s;
}

.ef-sidebar.is-open { transform: translateX(0); visibility: visible; }

.ef-sidebar__head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sp-4);
}

.ef-sidebar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ef-white);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--ef-speed) var(--ef-ease);
}
.ef-sidebar__close:hover { background: rgba(255, 255, 255, .22); }

.ef-sidebar__nav { display: flex; flex-direction: column; }

.ef-sidebar__nav a {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  color: var(--ef-white);
  text-decoration: none;
  font-size: var(--fs-lg);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transition: color var(--ef-speed) var(--ef-ease),
              padding-left var(--ef-speed) var(--ef-ease);
}
.ef-sidebar__nav a:hover,
.ef-sidebar__nav a:focus-visible {
  color: var(--ef-gold400);
  padding-left: var(--sp-4);
}
.ef-sidebar__nav a[aria-current="page"] {
  color: var(--ef-gold400);
  font-weight: 600;
}

.ef-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(18, 33, 26, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ef-ease), visibility .28s;
}
.ef-overlay.is-open { opacity: 1; visibility: visible; }

body.ef-no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero / slideshow
   -------------------------------------------------------------------------- */

.ef-hero { position: relative; background: var(--ef-g900); }

.imgContainer,
.ef-hero__frame {
  position: relative;
  overflow: hidden;
  /* width must be pinned: with width:auto, `max-height` makes the browser
     shrink the box in the inline direction too, to keep the ratio. */
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 15rem;
  max-height: 34rem;
  background: var(--ef-g800);
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s var(--ef-ease);
}
.slide.is-active { opacity: 1; }

/* The first frame stays painted until the deferred script takes over, so
   there is no blank hero and no layout shift. */
.imgContainer:not(.is-ready) .slide:first-of-type,
.ef-hero__frame:not(.is-ready) .slide:first-of-type { opacity: 1; }

.ef-hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(18, 33, 26, .30) 0%,
              rgba(18, 33, 26, .08) 30%,
              rgba(18, 33, 26, .62) 72%,
              rgba(18, 33, 26, .88) 100%);
}

.ef-hero__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--sp-6) var(--ef-gutter) var(--sp-7);
  text-align: center;
  color: var(--ef-white);
}

/* The global h1 colour is a dark green for light pages; over a photograph it
   has to be white, with a shadow so it survives a bright frame. */
.ef-hero__caption h1 {
  max-width: 22ch;
  margin: 0 auto var(--sp-3);
  color: var(--ef-white);
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.75rem);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .7), 0 1px 4px rgba(0, 0, 0, .55);
}

.ef-hero__quote {
  max-width: 46ch;
  margin: 0 auto;
  font-size: clamp(.95rem, .85rem + .55vw, 1.25rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}

/* The old `.c1` colour-cycling quote, kept but calmed down. */
.c1 {
  margin: 0 auto;
  text-align: center;
  max-width: 46ch;
  color: var(--ef-g700);
  font-size: var(--fs-lg);
  font-style: italic;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Info band + footer
   -------------------------------------------------------------------------- */

.info_section,
.ef-info {
  background: var(--ef-g900);
  color: var(--ef-white);
  padding-block: var(--ef-section-y);
}

.info_section h4,
.ef-info h4 {
  color: var(--ef-white);
  font-size: var(--fs-h5);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--sp-4);
}

.info_section p,
.ef-info p { color: rgba(255, 255, 255, .88); }

.ef-info__col { margin-bottom: var(--sp-6); }

.info_contact { margin-top: var(--sp-4); }

.info_contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ef-white);
  text-decoration: none;
  margin-bottom: var(--sp-2);
  word-break: break-word;
}
.info_contact a:hover,
.info_contact a:focus-visible { color: var(--ef-gold400); }
.info_contact i { width: 1.25rem; text-align: center; flex: 0 0 auto; }
.info_contact img { display: inline-block; margin-left: var(--sp-2); }

.social_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.social_box a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--r-full);
  color: var(--ef-white);
  text-decoration: none;
  transition: background var(--ef-speed) var(--ef-ease),
              border-color var(--ef-speed) var(--ef-ease),
              color var(--ef-speed) var(--ef-ease);
}
.social_box a:hover,
.social_box a:focus-visible {
  background: var(--ef-gold500);
  border-color: var(--ef-gold500);
  color: var(--ef-g900);
}

.politicas p { margin-bottom: var(--sp-2); }
.politicas a { color: var(--ef-white); }
.politicas a:hover,
.politicas a:focus-visible { color: var(--ef-gold400); }

.footer_section,
.ef-footer {
  background: var(--ef-g700);
  color: var(--ef-white);
  text-align: center;
  padding-block: var(--sp-5);
  border-top: 3px solid var(--ef-gold500);
}

.footer_section p,
.ef-footer p {
  color: var(--ef-white);
  margin: 0;
  font-size: var(--fs-sm);
}

.footer_section a,
.ef-footer a { color: var(--ef-gold400); }
.footer_section a:hover,
.ef-footer a:hover { color: var(--ef-white); }

.ef-footer__meta {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .75);
}

/* --------------------------------------------------------------------------
   Small-screen tuning of the w3.css float grid
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .ef-heading { margin-bottom: var(--sp-5); }
  .info_section .w3-col { margin-bottom: var(--sp-6); }
  .info_section .w3-col:last-child { margin-bottom: 0; }
}