/* PSCC Flight Centre — shared theme, matching psxcockpitcrew.com's actual
   chosen palette (alternating #110c00/#ffffff sections, Lato font) rather
   than that site's generic page-builder utility colors. */

/* Self-hosted (not Google Fonts' CDN, which would expose every visitor's IP
   to Google on every page load before any cookie consent) -- vendored from
   fonts.gstatic.com's Lato v25, latin subset only (no accented Eastern
   European/Vietnamese glyphs needed for this site's content). See
   psccfc/web/static/vendor/fonts/. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../vendor/fonts/lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../vendor/fonts/lato-900.woff2') format('woff2');
}

:root {
  --pscc-dark: #110c00;
  --pscc-light: #ffffff;
  --pscc-accent: #cda434; /* gold, matching the PSCC badge's pilot wings */
  --pscc-border: #d0d0d0;
  --pscc-error: #b00020;
}

body {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  color: var(--pscc-dark);
  background: var(--pscc-light);
  margin: 0;
}

a {
  color: var(--pscc-dark);
}
a:hover {
  color: var(--pscc-accent);
}

.pscc-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--pscc-dark);
  color: var(--pscc-light);
  padding: 10px 16px;
  font-size: 14px;
}
.pscc-navbar a {
  color: var(--pscc-light);
  text-decoration: none;
  margin-left: 14px;
  padding: 8px 0;
  display: inline-block;
}
.pscc-navbar a:hover {
  color: var(--pscc-accent);
}
.pscc-navbar .pscc-brand {
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pscc-navbar .pscc-brand:hover {
  color: var(--pscc-accent);
}

/* Hidden on desktop; toggles .pscc-nav-links open/closed on narrow
   screens, where there isn't room for every link on one line. */
.pscc-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--pscc-light);
  color: var(--pscc-light);
  font-size: 20px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
}

@media (max-width: 700px) {
  .pscc-navbar {
    flex-wrap: wrap;
  }
  .pscc-navbar .pscc-brand {
    font-size: 13px;
  }
  .pscc-nav-toggle {
    display: inline-block;
  }
  .pscc-nav-links {
    display: none;
    flex-basis: 100%;
    margin-top: 10px;
  }
  .pscc-nav-links.pscc-nav-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .pscc-nav-links a, .pscc-nav-links form {
    margin-left: 0;
    width: 100%;
  }
  .pscc-nav-links a {
    padding: 12px 4px;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 16px;
  }
  .pscc-nav-links .pscc-btn {
    width: 100%;
    padding: 12px;
    margin-top: 4px;
  }
}

.pscc-page {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 16px;
  font: 16px 'Lato', Helvetica, Arial, sans-serif;
}

/* Pages whose main content is a data-heavy table — 800px forced a
   horizontal scrollbar on these even on an ordinary desktop monitor with
   plenty of room to spare. Add alongside .pscc-page, not instead of it,
   to keep its margin/padding/font. */
.pscc-page-wide {
  max-width: 1600px;
}

@media (max-width: 700px) {
  .pscc-page {
    margin: 16px auto;
  }
}

.pscc-page h1 {
  border-bottom: 3px solid var(--pscc-accent);
  padding-bottom: 8px;
}

/* Wrap any <table> in <div class="pscc-table-scroll"> — on a narrow screen
   a data-heavy table (5+ columns) would otherwise either overflow the
   page or get squashed into unreadably cramped columns; this lets it
   scroll horizontally instead, while staying full-width on desktop. */
.pscc-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pscc-page table {
  min-width: 100%;
  border-collapse: collapse;
}
.pscc-page th, .pscc-page td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--pscc-border);
  white-space: nowrap;
}
.pscc-page th {
  color: var(--pscc-dark);
  border-bottom: 2px solid var(--pscc-dark);
}

.pscc-page form.inline {
  display: inline;
}

.pscc-page label {
  display: block;
  margin-top: 10px;
}
.pscc-page input, .pscc-page textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--pscc-border);
  border-radius: 3px;
  font-family: inherit;
  box-sizing: border-box;
}

.pscc-page button, .pscc-btn {
  background: var(--pscc-dark);
  color: var(--pscc-light);
  border: 1px solid var(--pscc-dark);
  border-radius: 3px;
  padding: 6px 12px;
  font-family: inherit;
  cursor: pointer;
}
.pscc-page button:hover, .pscc-btn:hover {
  background: var(--pscc-accent);
  border-color: var(--pscc-accent);
  color: var(--pscc-dark);
}

.pscc-error {
  color: var(--pscc-error);
}

.pscc-page button.pscc-btn-danger, .pscc-btn-danger {
  background: var(--pscc-light);
  color: var(--pscc-error);
  border: 1px solid var(--pscc-error);
}
.pscc-page button.pscc-btn-danger:hover, .pscc-btn-danger:hover {
  background: var(--pscc-error);
  color: var(--pscc-light);
  border-color: var(--pscc-error);
}

.pscc-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--pscc-dark);
  background: rgba(205, 164, 52, 0.2);
  border: 1px solid var(--pscc-accent);
  border-left: 5px solid var(--pscc-accent);
  border-radius: 3px;
  padding: 10px 14px;
}
.pscc-warning::before {
  content: "\26A0";
  font-size: 18px;
  line-height: 1.3;
}
.pscc-warning strong {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pscc-local-time {
  color: #666;
  font-size: 0.9em;
}

/* ACARS inbox: outgoing (our own) telex rows get a gold tint so they're
   visually distinct from received messages at a glance. */
.acars-out {
  background: rgba(205, 164, 52, 0.15);
}

.acars-quicktargets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
a.pscc-btn {
  text-decoration: none;
}