/* Container */
.gxf-board {
  color: #1a1a1a;
  font-family: inherit;
}

/* Section Heading */
.gxf-section-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 14px;
}

.gxf-section-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid #016778;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.gxf-section-icon svg {
  fill: #016778;
  width: 24px;
  height: 24px;
}

.gxf-section-title {
  font-style: italic;
  font-weight: 700;
  color: #016778;
  font-size: clamp(26px, 3.2vw, 34px);
  letter-spacing: normal;
}

/* Table Base */
.gxf-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

/* Table Header */
.gxf-table thead th {
  background: #016778;
  color: #fff;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 20px);
  text-align: left;
  padding: 14px 18px;
}

.gxf-table thead th:first-child {
  padding-left: 34px;
}

/* Desktop Column Widths
   Scoped to the table view only. Below 783px the rows become stacked cards, and
   an unscoped percentage width here beats the card rule on specificity, which
   squeezed every card cell down to a fraction of the screen. */
@media (min-width: 783px) {
  .gxf-table thead th:nth-child(1),
  .gxf-table tbody td:nth-child(1) {
    width: 22%;
  }

  .gxf-table thead th:nth-child(2),
  .gxf-table tbody td:nth-child(2) {
    width: 13%;
  }

  .gxf-table thead th:nth-child(3),
  .gxf-table tbody td:nth-child(3) {
    width: 18%;
  }

  .gxf-table thead th:nth-child(4),
  .gxf-table tbody td:nth-child(4) {
    width: 27%;
  }

  .gxf-table thead th:nth-child(5),
  .gxf-table tbody td:nth-child(5) {
    width: 20%;
  }
}

/* Table Body Rows */
.gxf-table tbody tr {
  border-top: 1px solid #e3e3e3;
}

.gxf-table tbody tr:first-child {
  border-top: none;
}

/* First row spacer technique */
.gxf-table tbody tr:first-child td {
  padding-top: 26px;
}

/* Table Body Cells */
.gxf-table tbody td {
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 600;
  vertical-align: middle;
}

.gxf-table tbody td:first-child {
  padding-left: 34px;
}

/* Airline Cell */
.gxf-airline img {
  height: 26px;
  width: auto;
  display: block;
}

.gxf-airline-name {
  font-weight: 700;
  color: #1a1a1a;
}

/* Status Cell */
.gxf-status {
  font-weight: 600;
}

.gxf-status--arrived,
.gxf-status--landed,
.gxf-status--on-time,
.gxf-status--departed,
.gxf-status--en-route {
  color: #1a1a1a;
}

.gxf-status--delayed,
.gxf-status--cancelled {
  color: #aa272f;
}

.gxf-status--boarding {
  /* Brand mid-green #739600 is only 3.45:1 on white — fails WCAG AA for
     normal text. Darkened to 4.95:1 while staying in the same green family. */
  color: #5c7a00;
}

/* Empty state */
.gxf-empty {
  font-size: 16px;
  color: #444;
  font-style: italic;
  padding: 12px 0;
}

/* Updated Note */
.gxf-updated {
  font-size: 13px;
  color: #595959;  /* 7.0:1 on white */
  font-style: italic;
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 782px) {
  .gxf-table thead {
    display: none;
  }

  .gxf-table,
  .gxf-table tbody,
  .gxf-table tr,
  .gxf-table td {
    display: block;
    width: 100%;
  }

  /* A row hidden by filter.js (rows[i].hidden = true) must stay hidden here
     too — without this, the class selector above (higher specificity than
     the browser's built-in [hidden] { display: none }) would override it
     and the "hidden" row would still render as a card. */
  .gxf-table tr[hidden] {
    display: none;
  }

  .gxf-table tbody tr {
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    margin-bottom: 14px;
    padding: 14px;
    width: 100%;
    box-sizing: border-box;
  }

  .gxf-table tbody tr:first-child {
    border-top: 1px solid #e3e3e3;
  }

  /* Reset first row top padding for cards */
  .gxf-table tbody tr:first-child td {
    padding-top: 8px;
  }

  .gxf-table tbody td,
  .gxf-table tbody td:nth-child(1),
  .gxf-table tbody td:nth-child(2),
  .gxf-table tbody td:nth-child(3),
  .gxf-table tbody td:nth-child(4),
  .gxf-table tbody td:nth-child(5) {
    display: grid;
    grid-template-columns: minmax(96px, 38%) 1fr;
    align-items: center;
    column-gap: 14px;
    padding: 10px 0;
    text-align: left;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    /* GeneratePress puts a border on every td; in card view its right edge
       reads as a stray vertical rule down the middle of the card. */
    border-right: 0;
    border-bottom: 1px solid #eee;
  }

  .gxf-table tbody td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .gxf-table tbody td:first-child,
  .gxf-table tbody td:nth-child(1) {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-bottom: 12px;
    border-right: 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 6px;
  }

  .gxf-table tbody td::before {
    content: attr(data-label);
    color: #016778;
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
  }

  /* Hide label on the airline logo row */
  .gxf-table tbody td:first-child::before {
    content: none;
    display: none;
  }
}

/* ============================================================
   Tabbed layout (All Flights / Arrivals / Departures)
   Progressive enhancement: without JS every panel stacks (each
   keeps its heading). assets/tabs.js adds .gxf-js to the board,
   which reveals the tablist and shows one panel at a time.
   ============================================================ */

/* Tablist hidden until JS confirms it works */
.gxf-tablist {
  display: none;
}

.gxf-board--tabs.gxf-js .gxf-tablist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
  border-bottom: 2px solid #016778;
  margin: 28px 0 0;
}

.gxf-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: #016778;
  font-family: inherit;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 20px);
  padding: 12px 22px;
  margin-bottom: -2px;
  cursor: pointer;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  line-height: 1.2;
}

.gxf-tab:hover,
.gxf-tab:focus-visible {
  background: #e8f1f2;
  outline: none;
}

.gxf-tab.is-active {
  background: #016778;
  color: #fff;
  border-color: #016778;
}

/* Panels: all visible without JS; JS shows only the active one */
.gxf-board--tabs.gxf-js .gxf-panel {
  display: none;
}

.gxf-board--tabs.gxf-js .gxf-panel.is-active {
  display: block;
}

/* Per-panel heading: needed for the no-JS stacked view, redundant once
   the tablist is present, so hide it when JS is active. */
.gxf-panel-head {
  margin-top: 24px;
}

.gxf-board--tabs.gxf-js .gxf-panel-head {
  display: none;
}

/* Direction icon in the "All Flights" flight cell */
.gxf-flight {
  white-space: nowrap;
}

.gxf-flight-val {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.gxf-dir {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 8px;
}

.gxf-dir svg {
  width: 18px;
  height: 18px;
}

.gxf-dir--arrivals svg {
  fill: #016778;
}

.gxf-dir--departures svg {
  fill: #739600;
}

/* Time-range control, sits alongside the tab buttons inside .gxf-tablist */
.gxf-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gxf-time-selection {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
}

.gxf-time-selection label {
  font-size: 13px;
  font-weight: 700;
  color: #016778;
  white-space: nowrap;
}

.gxf-time-select {
  font: inherit;
  font-size: 14px;
  color: #1a1a1a;
  background: #fff;
  border: 2px solid #5d6a6e; /* 3.4:1 on white — meets AA for UI components */
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 36px;
}

.gxf-time-select:focus-visible {
  outline: 3px solid #016778;
  outline-offset: 2px;
  border-color: #016778;
}

@media (max-width: 782px) {
  .gxf-board--tabs.gxf-js .gxf-tablist {
    margin-top: 12px;
    flex-direction: column;
    align-items: stretch;
  }

  .gxf-tab-buttons {
    justify-content: center;
  }

  .gxf-time-selection {
    justify-content: center;
  }

  .gxf-tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 10px 12px;
  }

  /* Direction icon rides with the flight number in card view */
  .gxf-flight {
    white-space: normal;
  }

  .gxf-flight-val {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* ============================================================
   Loading skeleton
   Server-rendered on every request (see gxf_render_skeleton) so
   page-caching plugins only ever cache this, never live flight
   data. assets/loader.js swaps it for the real board once the
   REST fetch resolves.
   ============================================================ */
.gxf-skeleton-block,
.gxf-skeleton-tab,
.gxf-skeleton-cell {
  display: inline-block;
  background: linear-gradient(90deg, #e9e9e8 25%, #f4f4f3 37%, #e9e9e8 63%);
  background-size: 400% 100%;
  animation: gxf-shimmer 1.4s ease infinite;
  border-radius: 6px;
}

@keyframes gxf-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.gxf-skeleton-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 20px;
}

.gxf-skeleton-block {
  height: 44px;
  flex: 1 1 140px;
}

.gxf-skeleton-block--search {
  flex: 2 1 220px;
}

.gxf-skeleton-tabs {
  display: flex;
  gap: 6px;
  margin: 28px 0 0;
}

.gxf-skeleton-tab {
  height: 40px;
  width: 120px;
  border-radius: 8px 8px 0 0;
}

.gxf-skeleton-table {
  margin-top: 14px;
}

.gxf-skeleton-row {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #e3e3e3;
}

.gxf-skeleton-row:first-child {
  border-top: none;
}

.gxf-skeleton-cell {
  height: 18px;
}

.gxf-skeleton-cell--airline {
  width: 22%;
  height: 26px;
}

.gxf-skeleton-cell--flight {
  width: 13%;
}

.gxf-skeleton-cell--city {
  width: 18%;
}

.gxf-skeleton-cell--time {
  width: 27%;
}

.gxf-skeleton-cell--status {
  width: 20%;
}

.gxf-loading-text {
  font-size: 14px;
  color: #595959; /* 7.0:1 on white */
  font-style: italic;
  margin: 14px 0 0;
}

.gxf-block--error .gxf-error {
  font-size: 15px;
  font-weight: 600;
  color: #aa272f;
}

@media (max-width: 782px) {
  .gxf-skeleton-row {
    flex-wrap: wrap;
  }

  .gxf-skeleton-cell {
    flex: 1 1 45%;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Search & filter bar
   Hidden until filter.js runs, so a no-JS visitor never sees dead controls.
   Colours here are checked against WCAG 2.1 AA on the white board background.
   --------------------------------------------------------------------------- */
.gxf-filters {
  display: none;
  margin: 0 0 20px;
}

.gxf-filters--ready {
  display: block;
}

.gxf-filters__row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)) auto;
  gap: 14px;
  align-items: end;
}

.gxf-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gxf-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  color: #1a1a1a;
  margin-bottom: 6px;
}

.gxf-input,
.gxf-select {
  font: inherit;
  font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  color: #1a1a1a;
  background: #fff;
  border: 2px solid #5d6a6e; /* 3.4:1 on white — meets AA for UI components */
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px; /* 44px touch target */
}

.gxf-input::placeholder {
  color: #5a5a5a; /* 7.0:1 on white */
  opacity: 1;
}

.gxf-input:focus-visible,
.gxf-select:focus-visible,
.gxf-reset:focus-visible {
  outline: 3px solid #016778;
  outline-offset: 2px;
  border-color: #016778;
}

.gxf-hint {
  font-size: 13px;
  color: #5a5a5a; /* 7.0:1 on white */
  margin: 6px 0 0;
}

.gxf-field--action {
  justify-content: flex-end;
}

.gxf-reset {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #016778; /* 5.7:1 with white text */
  border: 2px solid #016778;
  border-radius: 8px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
}

.gxf-reset:hover {
  background: #003740;
  border-color: #003740;
}

.gxf-results {
  font-size: 15px;
  color: #1a1a1a;
  margin: 12px 0 0;
  min-height: 1.2em; /* reserve space so results text does not shift layout */
}

.gxf-empty--filtered {
  color: #1a1a1a;
  font-style: normal;
}

@media (max-width: 900px) {
  .gxf-filters__row {
    grid-template-columns: 1fr 1fr;
  }
  .gxf-field--search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .gxf-filters__row {
    grid-template-columns: 1fr;
  }
}