/* Self-host the live theme's Open Sans 300 face so Pages does not depend on
   Google Fonts and the typography remains available under the site's CSP. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/open-sans-300.ttf") format("truetype");
}

:root {
  --black: #050505;
  --gold: #7d6312;
  --gold-light: #b89a2d;
  --red: #8b0000;
  --red-dark: #670000;
  --ink: #181818;
  --muted: #686868;
  --paper: #ffffff;
  --soft: #f3f1ed;
  --content-width: var(--fluid-1360);
  --topbar-rendered-height: var(--fluid-60);
  --header-stack-height: calc(var(--fluid-60) + var(--fluid-94));
  /* Desktop dimensions remain exact through 1920px, then scale in direct
     viewport proportion up to 4K. Centralizing the bounds prevents a single
     fixed pixel value from distorting the composition on large displays. */
  --fluid-1: clamp(1px, 0.052083333333vw, 2px);
  --fluid-2: clamp(2px, 0.104166666667vw, 4px);
  --fluid-3: clamp(3px, 0.15625vw, 6px);
  --fluid-4: clamp(4px, 0.208333333333vw, 8px);
  --fluid-5: clamp(5px, 0.260416666667vw, 10px);
  --fluid-8: clamp(8px, 0.416666666667vw, 16px);
  --fluid-9: clamp(9px, 0.46875vw, 18px);
  --fluid-10: clamp(10px, 0.520833333333vw, 20px);
  --fluid-12: clamp(12px, 0.625vw, 24px);
  --fluid-13: clamp(13px, 0.677083333333vw, 26px);
  --fluid-14: clamp(14px, 0.729166666667vw, 28px);
  --fluid-15: clamp(15px, 0.78125vw, 30px);
  --fluid-16: clamp(16px, 0.833333333333vw, 32px);
  --fluid-17: clamp(17px, 0.885416666667vw, 34px);
  --fluid-18: clamp(18px, 0.9375vw, 36px);
  --fluid-20: clamp(20px, 1.041666666667vw, 40px);
  --fluid-21: clamp(21px, 1.09375vw, 42px);
  --fluid-22: clamp(22px, 1.145833333333vw, 44px);
  --fluid-22-5: clamp(22.5px, 1.171875vw, 45px);
  --fluid-24: clamp(24px, 1.25vw, 48px);
  --fluid-26: clamp(26px, 1.354166666667vw, 52px);
  --fluid-28: clamp(28px, 1.458333333333vw, 56px);
  --fluid-29-333: clamp(29.333333px, 1.527777777778vw, 58.666667px);
  --fluid-30: clamp(30px, 1.5625vw, 60px);
  --fluid-32: clamp(32px, 1.666666666667vw, 64px);
  --fluid-34: clamp(34px, 1.770833333333vw, 68px);
  --fluid-35: clamp(35px, 1.822916666667vw, 70px);
  --fluid-35-2: clamp(35.2px, 1.833333333333vw, 70.4px);
  --fluid-36: clamp(36px, 1.875vw, 72px);
  --fluid-38: clamp(38px, 1.979166666667vw, 76px);
  --fluid-40: clamp(40px, 2.083333333333vw, 80px);
  --fluid-44: clamp(44px, 2.291666666667vw, 88px);
  --fluid-48: clamp(48px, 2.5vw, 96px);
  --fluid-55: clamp(55px, 2.864583333333vw, 110px);
  --fluid-60: clamp(60px, 3.125vw, 120px);
  --fluid-66-667: clamp(66.666667px, 3.472222222222vw, 133.333333px);
  --fluid-74: clamp(74px, 3.854166666667vw, 148px);
  --fluid-80: clamp(80px, 4.166666666667vw, 160px);
  --fluid-90: clamp(90px, 4.6875vw, 180px);
  --fluid-94: clamp(94px, 4.895833333333vw, 188px);
  --fluid-100: clamp(100px, 5.208333333333vw, 200px);
  --fluid-132: clamp(132px, 6.875vw, 264px);
  --fluid-200: clamp(200px, 10.416666666667vw, 400px);
  --fluid-235: clamp(235px, 12.239583333333vw, 470px);
  --fluid-260: clamp(260px, 13.541666666667vw, 520px);
  --fluid-280: clamp(280px, 14.583333333333vw, 560px);
  --fluid-310: clamp(310px, 16.145833333333vw, 620px);
  --fluid-380: clamp(380px, 19.791666666667vw, 760px);
  --fluid-410: clamp(410px, 21.354166666667vw, 820px);
  --fluid-540: clamp(540px, 28.125vw, 1080px);
  --fluid-720: clamp(720px, 37.5vw, 1440px);
  --fluid-740: clamp(740px, 38.541666666667vw, 1480px);
  --fluid-760: clamp(760px, 39.583333333333vw, 1520px);
  --fluid-960: clamp(960px, 50vw, 1920px);
  --fluid-1140: clamp(1140px, 59.375vw, 2280px);
  --fluid-1200: clamp(1200px, 62.5vw, 2400px);
  --fluid-1240: clamp(1240px, 64.583333333333vw, 2480px);
  --fluid-1360: clamp(1360px, 70.833333333333vw, 2720px);
  --fluid-1400: clamp(1400px, 72.916666666667vw, 2800px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-stack-height);
}

body {
  margin: 0;
  padding-top: var(--header-stack-height);
  color: var(--ink);
  background: var(--paper);
  font-family: "Open Sans", sans-serif;
  font-size: var(--fluid-16);
  line-height: normal;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: #000;
}

button,
input,
textarea {
  font: inherit;
}

/* Keep required semantic headings available to assistive technology when the
   live composition intentionally has no visible page-title row. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 999;
  top: var(--fluid-8);
  left: var(--fluid-8);
  padding: var(--fluid-10) var(--fluid-16);
  color: #fff;
  background: var(--red);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.topbar {
  position: fixed;
  z-index: 51;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: var(--fluid-60);
  color: #fff;
  background: var(--gold);
}

.topbar__inner {
  width: min(calc(100% - var(--fluid-80)), var(--content-width));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: var(--fluid-30);
  font-size: var(--fluid-16);
}

.topbar__notice {
  text-align: center;
  text-transform: uppercase;
}

.topbar__inner > div:first-child {
  display: flex;
  align-items: center;
  gap: var(--fluid-5);
}

.topbar__address {
  text-align: right;
}

.topbar__address a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--fluid-5);
  color: inherit;
  line-height: 1.25;
}

.site-header {
  position: fixed;
  z-index: 50;
  top: var(--topbar-rendered-height);
  right: 0;
  left: 0;
  width: 100%;
  height: var(--fluid-94);
  color: #fff;
  background: var(--black);
  box-shadow: var(--fluid-1) var(--fluid-1) var(--fluid-5) rgb(0 0 0 / 42%);
}

.site-header__inner {
  width: min(calc(100% - var(--fluid-80)), var(--content-width));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.brand {
  position: absolute;
  z-index: 2;
  top: var(--fluid-14);
  display: flex;
  align-items: flex-start;
  gap: var(--fluid-18);
}

.brand > a {
  display: block;
  line-height: 0;
}

.brand img {
  width: var(--fluid-132);
  height: var(--fluid-132);
  border-radius: 50%;
  object-fit: contain;
}

.primary-nav {
  margin-left: auto;
}

.primary-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--fluid-12);
}

.primary-nav li {
  position: relative;
}

.primary-nav a,
.nav-group__toggle {
  display: block;
  padding: var(--fluid-13) var(--fluid-16);
  color: #fff;
  border: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.nav-group__toggle:hover,
.nav-group__toggle:focus-visible,
.nav-group__toggle[data-current-section="true"],
.primary-nav .active {
  color: var(--gold-light);
}

.primary-nav .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: var(--fluid-280);
  padding: var(--fluid-8) 0;
  background: #111;
  box-shadow: 0 var(--fluid-12) var(--fluid-24) rgb(0 0 0 / 28%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--fluid-8));
  transition: 160ms ease;
}

/* Back controls are injected for mobile overlay panels only. */
.primary-nav .submenu-back {
  display: none;
}

.primary-nav .submenu .submenu {
  top: calc(0px - var(--fluid-8));
  left: 100%;
}

.primary-nav li:hover > .submenu,
.primary-nav li:focus-within > .submenu,
.primary-nav li.is-open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-nav .submenu a {
  padding: var(--fluid-10) var(--fluid-18);
  font-size: var(--fluid-15);
  line-height: 1.35;
  white-space: normal;
}

.primary-nav .nav-cta {
  margin-left: var(--fluid-10);
  padding: var(--fluid-12) var(--fluid-22);
  color: #fff;
  background: var(--red);
  border-radius: var(--fluid-12);
}

.primary-nav .nav-cta:hover,
.primary-nav .nav-cta:focus-visible {
  color: #fff;
  background: var(--red-dark);
}

.menu-toggle {
  display: none;
}

.social-rail {
  position: fixed;
  z-index: 35;
  top: 55%;
  left: var(--fluid-4);
  display: grid;
  gap: var(--fluid-20);
  transform: translateY(-50%);
}

.social-rail a {
  width: var(--fluid-32);
  height: var(--fluid-32);
  display: grid;
  place-items: center;
  background: transparent;
}

.hero {
  position: relative;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* Preserve the original poster as a local fallback if Stream cannot play. */
  background: #231b18 url("/images/polemikes-texnes-thessaloniki-main-video-background.jpg") center / cover no-repeat;
}

.hero__poster {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 1;
  transition: opacity 300ms ease;
}

.hero.is-playing .hero__poster {
  opacity: 0;
}

.cloudflare-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.cloudflare-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The homepage hero is ambient media, not an interactive player. Blocking
   pointer input prevents context menus and player modes from surfacing while
   the Stream iframe continues its muted autoplay loop behind the poster. */
.cloudflare-video--hero iframe {
  pointer-events: none;
  user-select: none;
}

.ui-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--fluid-21);
  height: var(--fluid-21);
  object-fit: contain;
}

.topbar__address .ui-icon {
  width: var(--fluid-30);
  height: var(--fluid-30);
}

.social-rail .ui-icon {
  width: var(--fluid-32);
  height: var(--fluid-32);
  transition: transform 250ms ease;
}

.social-rail a:hover .ui-icon,
.social-rail a:focus-visible .ui-icon {
  transform: scale(1.1);
}

.feature-row {
  width: min(calc(100% - var(--fluid-80)), var(--content-width));
  margin-right: auto;
  margin-left: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.feature-row:nth-child(odd) .feature-row__media {
  order: 2;
}

.feature-row__media {
  width: 100%;
  min-height: 0;
  align-self: start;
  background: transparent;
}

.feature-row__media img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.feature-row__copy {
  min-height: var(--fluid-410);
  padding-block: clamp(var(--fluid-29-333), 4vw, var(--fluid-66-667));
  padding-inline: clamp(var(--fluid-44), 6vw, var(--fluid-100));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* Keep each outer copy edge on the same frame as the header while retaining
   the generous spacing between the copy and its neighboring image. */
.feature-row:nth-child(odd) .feature-row__copy {
  padding-left: 0;
}

.feature-row:nth-child(even) .feature-row__copy {
  padding-right: 0;
}

.feature-row h2,
.section-heading {
  margin: 0 0 var(--fluid-24);
  line-height: 1.15;
  font-weight: 500;
}

.feature-row h2 {
  font-size: clamp(var(--fluid-24), 2.4vw, var(--fluid-35-2));
}

.section-heading {
  font-size: clamp(var(--fluid-30), 3vw, var(--fluid-44));
}

/* Match the live theme's native H1 treatment while keeping it independent
   from the larger promotional headings used only on the homepage. */
.entry-title {
  margin: 0;
  color: #000;
  font-family: "Open Sans", sans-serif;
  font-size: var(--fluid-32);
  font-weight: 700;
  line-height: normal;
}

/* A relocated Visual Composer title must keep the theme's page-title
   treatment rather than inherit the builder's oversized generic H1 rule. */
.content-body .entry-title {
  font-size: var(--fluid-32);
  font-weight: 700;
  line-height: normal;
}

/* Give the short federation title its own centered introduction and keep it
   visually separate from the bordered membership statement below. */
.eopt-page .entry-title {
  margin-bottom: var(--fluid-20);
  text-align: center;
}

.button {
  display: inline-block;
  min-width: var(--fluid-235);
  margin-top: var(--fluid-18);
  padding: var(--fluid-14) var(--fluid-24);
  color: #fff;
  background: var(--red);
  text-align: center;
}

.button:hover,
.button:focus-visible {
  color: #fff;
  background: var(--red-dark);
}

.programs {
  padding: var(--fluid-74) var(--fluid-40) var(--fluid-90);
  background: var(--soft);
}

.section-heading {
  text-align: center;
}

.program-grid {
  width: min(100%, var(--content-width));
  margin: var(--fluid-40) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fluid-24);
}

.program-card {
  position: relative;
  min-height: var(--fluid-310);
  overflow: hidden;
  color: #fff;
  background: #151515;
}

.program-card img {
  width: 100%;
  height: 100%;
  min-height: var(--fluid-310);
  object-fit: cover;
  opacity: 0.74;
  transition: transform 300ms ease, opacity 300ms ease;
}

.program-card span {
  position: absolute;
  right: var(--fluid-20);
  bottom: var(--fluid-20);
  left: var(--fluid-20);
  color: #fff;
  font-size: var(--fluid-24);
  font-weight: 600;
  text-shadow: 0 var(--fluid-2) var(--fluid-9) #000;
}

.program-card:hover img,
.program-card:focus-visible img {
  opacity: 0.9;
  transform: scale(1.03);
}

.visit {
  padding: var(--fluid-80) var(--fluid-40);
}

.visit__inner {
  width: min(100%, var(--content-width));
  margin: 0 auto;
}

.visit__lead {
  margin-bottom: var(--fluid-55);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--fluid-40);
}

.visit__lead h2 {
  margin-top: 0;
  font-size: clamp(var(--fluid-30), 3vw, var(--fluid-44));
  font-weight: 500;
}

.school-grid {
  margin-top: var(--fluid-35);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fluid-32);
}

.school-location {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.school-card {
  flex: 1 1 auto;
  padding: var(--fluid-32);
  border-top: var(--fluid-5) solid var(--gold);
  background: var(--soft);
}

.school-card h2,
.school-card h3 {
  margin-top: 0;
  font-size: var(--fluid-28);
  font-weight: 500;
}

/* Keep each location map directly attached to its information card while
   reserving stable space during Google's lazy iframe load. */
.school-map {
  aspect-ratio: 4 / 3;
  margin-top: var(--fluid-16);
  overflow: hidden;
  background: #ddd;
}

.school-map iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Both school schedules share one centered heading and a compact bordered
   table. The scroll region contains narrow-screen overflow without widening
   the document or shrinking the timetable into unreadable text. */
.entry.schedule-page {
  min-height: 0;
  padding-top: var(--fluid-60);
  padding-bottom: var(--fluid-35);
}

.schedule-page__header {
  margin-bottom: var(--fluid-22);
  padding: 0 var(--fluid-20);
  text-align: center;
}

.schedule-page__header .entry-title {
  margin-bottom: var(--fluid-8);
  font-size: var(--fluid-24);
}

.schedule-page__phone {
  font-weight: 700;
}

.schedule-table-wrap {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
}

.schedule-table {
  border: var(--fluid-1) solid #000;
  border-collapse: collapse;
  white-space: nowrap;
}

.schedule-table th,
.schedule-table td {
  padding: var(--fluid-10);
  border: var(--fluid-1) solid #000;
  vertical-align: middle;
}

.schedule-table thead th {
  font-size: var(--fluid-20);
  font-weight: 500;
}

.schedule-table tbody th {
  text-align: left;
}

.schedule-table tbody tr:first-child td,
.schedule-table__closed,
.schedule-table__personal {
  text-align: center;
}

.schedule-table__closed {
  color: blue;
  font-weight: 700;
}

.schedule-table__personal {
  color: red;
  font-size: var(--fluid-17);
  font-weight: 700;
}

/* Match the live career category: a natural-ratio landscape image at left and
   its complete explanatory copy at right, both starting below the header. */
.career-page {
  min-height: calc(100vh - var(--fluid-60) - var(--fluid-94));
  padding: var(--fluid-60) var(--fluid-40) var(--fluid-80);
}

.career-hero {
  width: min(100%, var(--content-width));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--fluid-40);
}

.career-hero__media img {
  width: 100%;
  height: auto;
}

.career-hero__copy .entry-title {
  margin-bottom: var(--fluid-20);
}

.career-hero__copy p {
  margin: 0;
  font-size: var(--fluid-26);
  font-weight: 500;
  line-height: 1.28;
}

/* Contact details reuse the homepage location cards and attached maps so each
   phone/address remains visually associated with the correct school. */
.contact-page {
  width: min(calc(100% - var(--fluid-80)), var(--content-width));
  min-height: 65vh;
  margin: 0 auto;
  padding: var(--fluid-60) 0 var(--fluid-80);
}

.contact-page__header {
  max-width: var(--fluid-760);
  margin: 0 auto;
  text-align: center;
}

.contact-page__header .entry-title {
  margin-bottom: var(--fluid-16);
}

.contact-page__header p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fluid-18);
  line-height: 1.5;
}

.entry {
  width: min(calc(100% - var(--fluid-80)), var(--content-width));
  min-height: 65vh;
  margin: 0 auto;
  padding: 0 0 var(--fluid-80);
}

.entry-header {
  padding: 0 var(--fluid-40);
}

/* Desktop emblems extend 52px below the black header. Keep the first visible
   title clear of that overhang while leaving the main wrapper flush with the
   header as required by the shared page structure. */
.entry > .entry-header {
  padding-top: var(--fluid-60);
}

.entry-meta {
  color: var(--muted);
  font-size: var(--fluid-15);
}

.content-body {
  font-size: var(--fluid-16);
  line-height: normal;
  overflow-wrap: anywhere;
}

/* Visual Composer pages keep their one semantic title in the text column and
   use route-specific boxed rows without affecting regular articles. */
.entry--visual-composer {
  width: 100%;
}

/* Imported builder rows share the header's bounded content width. This keeps
   paired media/text columns aligned with the global page frame. */
.entry--visual-composer .content-body > .vce-row-container {
  width: min(calc(100% - var(--fluid-80)), var(--content-width));
  margin-right: auto;
  margin-left: auto;
}

.entry--visual-composer .content-body .vce-row-content {
  gap: var(--fluid-30);
}

.entry--visual-composer .content-body .vce-row-content::after {
  content: none;
  display: none;
}

/* Course pages use the live 80px vertical breathing room without narrowing
   their columns; profiles use the live 40px inset on every side. */
.entry--visual-composer
  .content-body
  > .vce-row-container:only-child
  > .vce-row {
  padding: var(--fluid-80) 0;
}

.entry--visual-composer.instructor-profile
  .content-body
  > .vce-row-container
  > .vce-row,
.entry--visual-composer
  .content-body
  > .vce-row-container:not(:only-child):nth-child(n + 2)
  > .vce-row {
  padding: var(--fluid-40);
}

.entry--visual-composer
  .content-body
  > .vce-row-container
  > .vce-row
  > .vce-row-content
  > .vce-col
  .vce-col-content {
  padding: 0;
}

/* Instructor indexes use the same square, absolute portrait crop as the live
   builder. Scoping prevents this crop from changing article and gallery media. */
.instructor-directory .vce-single-image--border-round {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding-bottom: 0 !important;
  overflow: hidden;
  border-radius: 50%;
}

.instructor-directory .vce-single-image--border-round .vce-single-image {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100%;
  object-fit: cover;
}

/* The directory's visible live title is semantically promoted from H2 to H1.
   Preserve the builder's former H2 metrics so the heading level has no visual
   effect on spacing, weight, or responsive typography. */
.content-body .instructor-directory__title {
  margin-block: 0.83em;
  font-size: var(--fluid-32);
  font-weight: 500;
  line-height: 1.2;
}

/* Most profile sources already contain two builder columns. The teacher page
   has combined source markup, so its media and copy are split visually without
   duplicating or rewriting the imported biography content. */
.instructor-profile--combined .content-body .vce-col-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fluid-30);
  padding: 0;
}

.instructor-profile--combined .content-body .vce-text-block {
  padding: 0 var(--fluid-20) var(--fluid-34);
}

.instructor-profile .vce-text-block-wrapper > .entry-title:first-child {
  margin-bottom: var(--fluid-20);
}

.entry--featured .content-body {
  font-size: var(--fluid-18);
  line-height: 1.75;
}

.entry.entry--featured {
  width: min(calc(100% - var(--fluid-80)), var(--content-width));
}

.entry-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.entry--featured .entry-layout {
  padding-top: var(--fluid-60);
  gap: var(--fluid-40);
}

.entry-feature img {
  width: 100%;
  max-height: none;
  object-fit: contain;
}

.entry-copy .content-body {
  padding: 0 var(--fluid-40);
}

/* Live news posts use the complete half-column for both heading and prose.
   Removing nested padding keeps the 40px grid gutter as the sole separator. */
.entry--featured .entry-header,
.entry--featured .entry-copy .content-body {
  padding-right: 0;
  padding-left: 0;
}

/* Give news headings a consistent visual rhythm instead of inheriting the
   browser's paragraph margins around the publication date. The compact title
   grouping and larger body gap keep the metadata attached to its heading. */
.entry--featured .entry-header,
.entry--news .entry-header {
  margin-bottom: var(--fluid-24);
}

.entry--featured .entry-title,
.entry--news .entry-title {
  margin-bottom: var(--fluid-8);
}

.entry--featured .entry-meta,
.entry--news .entry-meta {
  margin: 0;
}

/* Imported Visual Composer markup remains semantic; these rules recreate its
   original rows while keeping the static snapshot independent of the plugin. */
.content-body .vce-row-content {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.content-body .vce-row-content::after {
  content: "";
  display: table;
  clear: both;
}

.content-body .vce-col {
  flex: 1 1 0;
  min-width: 0;
}

.content-body .vce-col-content {
  padding: 0 var(--fluid-40) var(--fluid-34);
}

.content-body .vce-row-container:first-child .vce-col-content {
  /* Visual Composer pages begin below the overhanging desktop emblems. */
  padding-top: var(--fluid-60);
}

.content-body .vce-single-image-figure-inner,
.content-body figure {
  width: 100% !important;
  margin: 0;
}

/* The live theme suppresses attachment filenames under Visual Composer
   images; alt text remains available to assistive technology. */
.content-body figcaption {
  display: none !important;
}

.content-body .vce-single-image-inner {
  padding-bottom: 0 !important;
}

.content-body img:not(.emoji) {
  width: auto;
  max-width: 100%;
}

.content-body .vce-single-image {
  width: 100% !important;
}

.content-body h1,
.content-body h2,
.content-body h3 {
  line-height: 1.2;
  font-weight: 500;
}

.content-body h1 {
  font-size: var(--fluid-40);
}

.content-body h2 {
  font-size: var(--fluid-32);
}

.content-body h3 {
  font-size: var(--fluid-26);
}

.content-body p {
  margin: 0 0 var(--fluid-20);
}

.hierarchy-table {
  margin-top: var(--fluid-20) !important;
}

.hierarchy-table table {
  width: 100%;
  border-collapse: collapse;
}

.hierarchy-table th,
.hierarchy-table td {
  padding: var(--fluid-10) var(--fluid-5);
  border: var(--fluid-1) solid #000;
  vertical-align: top;
  text-align: left;
}

/* Rank names are short identifiers; keeping them intact prevents the narrow
   first column from breaking labels into the unreadable fragments shown before. */
.hierarchy-table th {
  width: 1%;
  white-space: nowrap;
}

.content-body iframe {
  width: 100%;
  max-width: 100%;
  min-height: var(--fluid-380);
  border: 0;
}

/* Reproduce the live Visual Composer video layout without its runtime bundle:
   boxed rows, paired 16:9 players, and the centered final square player. */
.video-page .entry {
  width: 100%;
}

.video-page .entry-header,
.video-page .content-body > .vce-row-container > .vce-row {
  width: 100%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.video-page .content-body > .vce-row-container:nth-child(n + 2):not(
    :nth-child(4)
  )
  > .vce-row {
  padding: var(--fluid-40);
}

.video-page .content-body .vce-row-content {
  gap: var(--fluid-30);
}

.video-page .content-body .vce-row-content::after {
  content: none;
  display: none;
}

.video-page
  .content-body
  > .vce-row-container
  > .vce-row
  .vce-col-content {
  padding: 0;
}

.video-page #el-e2f17ac8 {
  padding-top: var(--fluid-100);
}

.video-page #el-e2f17ac8 h2 {
  margin: 0.83em 0;
  font-size: var(--fluid-24);
  font-weight: 700;
}

.video-page #el-15534f17 .vce-row-content {
  min-height: 1em;
}

.video-page .content-body iframe {
  display: block;
  min-height: 0;
}

@media (min-width: 768px) {
  .video-page .content-body .vce-col--md-25p {
    max-width: calc(25% - var(--fluid-22-5));
    flex: 0 0 calc(25% - var(--fluid-22-5));
  }

  .video-page .content-body .vce-col--md-50p {
    max-width: calc(50% - var(--fluid-15));
    flex: 0 0 calc(50% - var(--fluid-15));
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .video-page .entry-header,
  .video-page .content-body > .vce-row-container > .vce-row {
    max-width: var(--fluid-540);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .video-page .entry-header,
  .video-page .content-body > .vce-row-container > .vce-row {
    max-width: var(--fluid-720);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .video-page .entry-header,
  .video-page .content-body > .vce-row-container > .vce-row {
    max-width: var(--fluid-960);
  }
}

@media (min-width: 1200px) {
  .video-page .entry-header,
  .video-page .content-body > .vce-row-container > .vce-row {
    max-width: var(--content-width);
  }
}

.content-body .aligncenter {
  margin-right: auto;
  margin-left: auto;
}

.content-body .gallery,
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fluid-16);
}

.content-body .gallery-item {
  margin: 0;
}

.content-body .gallery img,
.photo-grid img {
  width: 100% !important;
  height: var(--fluid-260);
  object-fit: cover;
  cursor: zoom-in;
}

/* Recreate the live gallery's five natural-height masonry columns without
   retaining a runtime dependency on the original Visual Composer plugin. */
.gallery-page .content-body .vce-col-content {
  padding-right: var(--fluid-20);
  padding-left: var(--fluid-20);
}

/* The first-row rule for general builder pages is more specific, so this
   route-specific selector restores the live gallery's clear space below the
   overhanging header emblems. */
.gallery-page
  .content-body
  .vce-row-container:first-child
  .vce-col-content {
  padding-top: var(--fluid-60);
}

.gallery-page .vce-image-masonry-gallery-wrapper {
  margin-bottom: var(--fluid-30);
  overflow: hidden;
}

.gallery-page .vce-image-masonry-gallery-list {
  margin: 0 calc(0px - var(--fluid-5)) calc(0px - var(--fluid-10));
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
}

.gallery-page .vce-image-masonry-gallery-column {
  max-width: 20%;
  flex: 0 0 20%;
}

.gallery-page .vce-image-masonry-gallery-item {
  margin-bottom: var(--fluid-10);
  padding: 0 var(--fluid-5);
  display: block;
  color: transparent;
  border: 0;
  box-shadow: none;
}

.gallery-page .vce-image-masonry-gallery-img {
  width: 100% !important;
  height: auto;
  /* Reserve each image's natural geometry while its lazy request is deferred,
     preventing collapsed columns and scroll jumps in the masonry gallery. */
  aspect-ratio: var(--smush-placeholder-aspect-ratio);
  display: block;
  cursor: zoom-in;
  transition: opacity 160ms ease;
}

.gallery-page .vce-image-masonry-gallery-item:hover
  .vce-image-masonry-gallery-img,
.gallery-page .vce-image-masonry-gallery-item:focus-visible
  .vce-image-masonry-gallery-img {
  opacity: 0.82;
}

.content-body form {
  display: grid;
  gap: var(--fluid-18);
  max-width: var(--fluid-740);
}

.content-body input,
.content-body textarea {
  width: 100%;
  padding: var(--fluid-13) var(--fluid-14);
  border: var(--fluid-1) solid #bbb;
}

.content-body input[type="submit"] {
  width: auto;
  color: #fff;
  background: var(--red);
  border: 0;
  cursor: pointer;
}

.news-index {
  width: min(calc(100% - var(--fluid-80)), var(--content-width));
  min-height: 60vh;
  margin: 0 auto;
  padding: 0 0 var(--fluid-90);
}

.news-index__intro {
  padding-top: var(--fluid-60);
  margin-bottom: var(--fluid-40);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--fluid-40);
}

.news-index__intro > * {
  grid-column: 2;
}

.news-index__intro .category-title {
  margin-bottom: var(--fluid-20);
}

/* The live news archive retains this semantic section heading in its markup
   but intentionally hides it on the news category page. */
.news-index__section-title {
  display: none;
}

.news-grid {
  width: 100%;
  max-width: var(--fluid-1240);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fluid-40);
}

.news-card {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: #fff;
  border: 0;
  box-shadow: none;
}

.news-card:hover,
.news-card:focus-visible {
  color: var(--ink);
  transform: none;
}

.news-card img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: #ddd;
}

.news-card__body {
  padding: var(--fluid-10) 0 0;
}

.news-card h2 {
  margin: 0 0 var(--fluid-10);
  font-size: var(--fluid-22);
  line-height: 1.25;
}

.news-card time {
  color: var(--ink);
  font-size: var(--fluid-14);
}

.news-card p {
  color: var(--muted);
  font-size: var(--fluid-16);
}

.not-found {
  width: min(calc(100% - var(--fluid-40)), var(--fluid-760));
  min-height: 60vh;
  margin: 0 auto;
  padding: var(--fluid-100) 0;
  text-align: center;
}

.site-footer {
  padding: var(--fluid-40);
  color: #fff;
  background: #000;
}

.site-footer__grid {
  width: min(100%, var(--content-width));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fluid-20);
}

.site-footer h2 {
  color: #fff;
  font-size: var(--fluid-24);
}

.site-footer ul {
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: #fff;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--gold-light);
}

.site-footer__bottom {
  width: min(100%, var(--content-width));
  margin: var(--fluid-40) auto 0;
  padding: 0;
  color: #fff;
  border: 0;
  font-size: var(--fluid-16);
  text-align: center;
}

.site-footer__brand img {
  width: calc(100% - var(--fluid-40));
  max-width: var(--fluid-200);
  padding-right: var(--fluid-40);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--fluid-10);
}

.site-footer__social a,
.site-footer__social img {
  width: var(--fluid-36);
  height: var(--fluid-36);
  display: block;
}

.bottom-ticker {
  --ticker-duration: 20s;
  position: fixed;
  z-index: 100;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--fluid-34);
  padding: var(--fluid-5) 0;
  display: flex;
  gap: 0;
  color: #fff;
  background: var(--gold);
  text-transform: uppercase;
  overflow: hidden;
}

.bottom-ticker__track {
  flex: 0 0 auto;
  width: max-content;
  min-width: 100%;
  padding: 0 var(--fluid-48);
  display: flex;
  align-items: center;
  gap: var(--fluid-40);
  justify-content: center;
  /* Both identical tracks move in lockstep. At the loop boundary the second
     occupies the first track's original position, preventing a visible reset. */
  animation: bottom-ticker-scroll var(--ticker-duration) linear infinite;
  will-change: transform;
}

.bottom-ticker span {
  color: #fff;
  font-size: var(--fluid-16);
  font-weight: 700;
  letter-spacing: var(--fluid-3);
  white-space: nowrap;
}

/* Each looping copy carries both announcements from the live ticker. Keeping
   both messages in one measured track preserves the seamless hand-off. */
.bottom-ticker__track::after {
  content: "Η ΣΧΟΛΗ ΤΡΙΑΝΔΡΙΑΣ ΕΙΝΑΙ ΕΠΙΤΙΜΟ ΜΕΛΟΣ ΤΗΣ ΕΛΛΗΝΙΚΗΣ ΟΜΟΣΠΟΝΔΙΑΣ ΠΟΛΕΜΙΚΩΝ ΤΕΧΝΩΝ (Ε.Ο.Π.Τ.) ΚΑΙ ΤΗΣ ΠΑΓΚΟΣΜΙΑΣ ΟΜΟΣΠΟΝΔΙΑΣ ΠΟΛΕΜΙΚΩΝ ΤΕΧΝΩΝ (W.F.M.A.)";
  color: #fff;
  font-size: var(--fluid-16);
  font-weight: 700;
  letter-spacing: var(--fluid-3);
  white-space: nowrap;
}

@keyframes bottom-ticker-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-100%, 0, 0);
  }
}

.view-counter {
  position: fixed;
  z-index: 100;
  left: var(--fluid-10);
  bottom: var(--fluid-40);
  padding: var(--fluid-5) var(--fluid-12);
  color: #fff;
  background: #000;
  border-radius: var(--fluid-10);
  font-family: "Open Sans", sans-serif;
  font-size: var(--fluid-16);
  font-weight: 300;
  line-height: normal;
  letter-spacing: var(--fluid-1);
  white-space: nowrap;
}

.view-counter b {
  font-weight: 700;
}

.lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: none;
  place-items: center;
  padding: var(--fluid-40);
  background: rgb(0 0 0 / 92%);
}

body.lightbox-open {
  overflow: hidden;
}

.lightbox.is-visible {
  display: grid;
}

.lightbox img {
  width: auto;
  height: auto;
  max-width: min(var(--fluid-1200), 95vw);
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 var(--fluid-18) var(--fluid-60) rgb(0 0 0 / 60%);
}

.lightbox button {
  position: absolute;
  width: var(--fluid-48);
  height: var(--fluid-48);
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.lightbox > button:not(.lightbox__nav) {
  top: var(--fluid-18);
  right: var(--fluid-22);
  font-size: var(--fluid-38);
}

.lightbox__nav {
  z-index: 1;
  top: 50%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  background: rgb(0 0 0 / 62%) !important;
  border: var(--fluid-1) solid rgb(255 255 255 / 55%) !important;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Fixed SVG geometry avoids font-baseline offsets inside the circular controls. */
.lightbox__nav svg {
  display: block;
  width: var(--fluid-24);
  height: var(--fluid-24);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.lightbox__nav[hidden] {
  display: none;
}

.lightbox__nav--previous {
  left: var(--fluid-22);
}

.lightbox__nav--next {
  right: var(--fluid-22);
}

:focus-visible {
  outline: var(--fluid-3) solid #f0c741;
  outline-offset: var(--fluid-3);
}