/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',system-ui,Arial,sans-serif;
  background:#F7F9FC;
  color:#111827;
  min-height:100vh;
  display:grid;
  grid-template-rows: auto 1fr auto;
  padding:0;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}

/* ---------- site header ---------- */
.site-header{
  width:100%;
  padding:.75rem 1rem;
  background:#F7F9FC;
  color:#111827;
  border-bottom:1px solid #E5E7EB;
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
  min-height: 56px;
  grid-row: 1;
}
.site-header nav{display:flex;align-items:center;font-weight:600;font-size:.95rem}
.site-header .divider{width:1px;height:1rem;background:#14B8A6;margin:0 .75rem}
.nav-link, .home-link {
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

/* Separate home-link to keep it bold */
.home-link {
  font-weight: 700;
}

/* Make nav-links less bold */
.nav-link {
  font-weight: 500;
}

.nav-link:hover, .home-link:hover {
  color: #14B8A6;
}
html.dark .nav-link:hover, html.dark .home-link:hover {
  color: #14B8A6;
}

/* header buttons container */
.header-buttons {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* theme toggle button */
.theme-btn{
  padding: 0 !important; /* Match padding with lang-btn */
  background:#14B8A6 !important;
  color:currentColor;
  border:none !important;
  cursor:pointer;
  border-radius:.5rem;
  width: 34px;
  height: 34px;
  display:flex;align-items:center;justify-content:center;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
  font-size: 0.95rem; /* Match lang-btn font-size */
}
.theme-btn:hover{background:#0D9488 !important}
.theme-btn svg{
  width: 1em;
  height: 1em;
  color:currentColor;
}

/* language toggle button */
.lang-btn {
  position: relative !important;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  background: #eee !important;
  color: #666 !important;
  border: none;
  cursor: pointer;
  border-radius: .5rem;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0;
  font-family: 'Inter', system-ui, Arial, sans-serif;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
  padding: 0 !important;
}
.lang-btn:hover { 
  background: #ddd !important;
}
html.dark .lang-btn {
  background: #444 !important;
  color: #000 !important;
}
html.dark .lang-btn:hover {
  background: #555 !important;
}

/* home button */
.home-btn {
  background: #eee !important;
  color: #666 !important;
  border: none;
  cursor: pointer;
  padding: .35rem .8rem;
  border-radius: .5rem;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
  margin-right: .5rem;
}
.home-btn:hover {
  background: #ddd !important;
}
.home-btn .accent {
  color: #14B8A6;
  font-size: 1.3em;
  font-weight: 700;
  margin-left: 2px;
  display: inline-block;
}
html.dark .home-btn {
  background: #444 !important;
  color: #000 !important;
}
html.dark .home-btn:hover {
  background: #555 !important;
}
html.dark .home-btn .accent {
  color: #029c96;
}

/* home link */
.home-link {
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}
.home-link .accent {
  color: #14B8A6;
  font-size: 1.2em;
  font-weight: 700;
  margin-left: 2px;
  display: inline-block;
}
.home-link:hover {
  color: #14B8A6;
}
html.dark .home-link .accent {
  color: #029c96;
}

/* ---------- primary wrapper ---------- */
.wrapper{
  width:100%;
  max-width:900px;
  margin:3.5rem auto 0;
  display:block;
  padding:0 1rem;
  --cards-gap:1.2rem;
  grid-row: 2;
}


/* ---------- headings / form ---------- */
h1{font-size:2.2rem;font-weight:600;text-align:center;margin-bottom:.5rem}
h1 .accent {
  color: #14B8A6;
  font-size: 2.4rem;
  font-weight: 700;
  margin-left: 2px;
  display: inline-block;
}
html.dark h1 .accent {
  color: #029c96;
}
.subtitle {
  text-align: center;
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}
html.dark .subtitle {
  color: #aaa;
}
h2{font-size:1.3rem;font-weight:600;margin:2rem 0 .8rem}

form{display:flex;gap:.6rem;justify-content:center}
input{
  flex:1;max-width:240px;padding:.65rem .9rem;
  border:1px solid #E5E7EB;border-radius:.6rem;font-size:1rem;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
button, #back{
  padding:.65rem 1.1rem;background:#14B8A6;color:#111827;
  border:none;border-radius:.6rem;font-size:1rem;cursor:pointer;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
button:hover, #back:hover{background:#0D9488}

/* ---------- cards ---------- */
.cards{
  display: flex;
  flex-direction: column;
  gap: var(--cards-gap);
  margin-bottom: 0 !important;
}
.card{
  background:#fff;border:1px solid #e3e8f0;border-radius:.75rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  padding:1rem 2rem 1rem 1.25rem;font-size:.95rem;line-height:1.35;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
  margin-bottom: 0;
  position: relative;
}
.notam-header{font-weight:600;margin-bottom:0.3rem}
.notam-series{margin-left:0.25rem;font-weight:600;color:#555}
.notam-body{
  font-family:'JetBrains Mono',monospace;font-size:.9rem;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  margin: 0;
}

/* ---------- NOTAM STATUS INDICATOR ---------- */
.notam-status-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 10;
  transition: all 0.2s ease;
}

/* ---------- WEATHER STATUS INDICATOR ---------- */
.wx-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  z-index: 10;
  margin: 0;
}

.wx-status.lifr { background-color: #bd32cc; }
.wx-status.ifr  { background-color: #ff6159; }
.wx-status.mvfr { background-color: #3244cc; }
.wx-status.vfr  { background-color: #28c941; }

/* ---------- WEATHER STATUS LEGEND ---------- */
/* Inherit visuals from .status-legend so it matches NOTAM legend */

#wx-status-legend {
  margin-bottom: 0.25rem;
}

.wx-status-legend .legend-item {

  cursor: default;
}

.legend-rect {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.legend-rect.lifr { background-color: #bd32cc; }
.legend-rect.ifr  { background-color: #ff6159; }
.legend-rect.mvfr { background-color: #3244cc; }
.legend-rect.vfr  { background-color: #28c941; }

/* ---------- DROPDOWN TOGGLE ---------- */
.dropdown-toggle {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 16px;
  height: 16px;

  cursor: pointer;
  transition: transform 0.2s ease;
}

.card.open .dropdown-toggle {
  transform: rotate(180deg);
}

.raw-notam-body {
  margin-top: 0;

  font-family: 'JetBrains Mono', monospace;
  font-size: .9rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  position: relative;
  padding-left: 0.75rem;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
  text-indent: 0;
}

.raw-notam-body strong:first-child {
  display: block;
  font-weight: 700;
}


.raw-notam-body::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--status-color, #999);
}

.card.open .raw-notam-body {
  margin-top: 0.3rem;
  max-height: 1000px;
  opacity: 1;

}

.card.open .notam-body {
  margin: 0 0 0.3rem 0;
}

/* Remove bottom margin from weather panel body when collapsed */
.card:not(.open) .notam-body {
  margin-bottom: 0;
}

/* Ensure collapsed elements don't add extra spacing */
.card:not(.open) .wx-collapsible,
.card:not(.open) .raw-notam-body {
  margin: 0;
  padding: 0;
}

/* Adjust card padding when collapsed to reduce bottom gap - only for weather panels */
.card:not(.open):has(.wx-status) {
  padding-bottom: 0.5rem;
}



.card.open .raw-taf {
  margin-top: 0.35rem; /* match spacing around bullet list */
}

/* Collapsible plain-text sections (e.g., TAF summary) */
.wx-collapsible {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
  margin-top: 0;
  padding-top: 0;
}

.card.open .wx-collapsible {
  /* max-height is adjusted inline for accurate animation */
  opacity: 1;
  margin-top: 0; /* NO gap above collapsible blocks */
  padding-top: 0;
}

/* Subtle divider between METAR and TAF sections */
.wx-divider {
  height: 3px !important;
  background: #e5e7eb;
  margin: 0.5rem 0; /* space above and below divider */
  border-radius: 1px;
  transition: background-color 0.3s ease;
}

html.dark .wx-divider {
  background: #333;
}
 
.card.open .wx-divider {
  margin: 0.5rem 0; /* space above and below divider */
  border-radius: 1px;
  max-height: 200px !important; /* override the collapsible max-height */
}

/* Tighter spacing for markdown-rendered summaries */
.wx-collapsible.tight-markdown {
  line-height: 1.1; /* ultra tight line-height */
  margin: 0 !important;
  padding: 0 !important;
}
.wx-collapsible.tight-markdown p {
  margin: 0 !important; /* remove spacing around paragraphs */
  padding: 0 !important;
}
.wx-collapsible.tight-markdown li {
  margin: 0 !important;
  padding: 0 !important; /* eliminate gaps between bullet points */
  line-height: 1.1;
  display: list-item !important;
}
.wx-collapsible.tight-markdown li p {
  margin: 0; /* no extra gaps inside list items */
}
.wx-collapsible.tight-markdown ul {
  list-style: disc !important;
  margin: 0 0 0 1rem !important; /* NO margins above and below */
  padding-left: 1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.card.open .raw-notam-body.raw-taf {
  margin-top: 0.3rem; /* gap below bullet list - same as .notam-body to .raw-notam-body */
}

.raw-notam-body.raw-taf {
  text-indent: 0;
  white-space: pre;
}
.wx-collapsible.tight-markdown *:first-child { margin-top: 0 !important; }
.wx-collapsible.tight-markdown *:last-child  { margin-bottom: 0 !important; }

/* Split TAF sections - NO GAPS AT ALL */
.taf-intro, .taf-aware, .taf-bullets {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1;
}

.taf-intro {
  margin-bottom: 0.3rem !important;
  padding-bottom: 0 !important;
}

.taf-aware {
  margin-bottom: 0.3rem !important;
  padding: 0 !important;
}

.taf-bullets {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Manual bullet list styling */
.taf-bullet-list {
  list-style: disc !important;
  margin: 0 0 0 1rem !important;
  padding-left: 1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.taf-bullet-list li {
  margin: 0 0 0.3rem 0 !important;
  padding: 0 !important;
  line-height: 1.1;
  display: list-item !important;
}

.taf-bullets ul {
  list-style: disc !important;
  margin: 0 0 0 1rem !important;
  padding-left: 1rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.taf-bullets li {
  margin: 0 0 0.3rem 0 !important;
  padding: 0 !important;
  line-height: 1.1;
  display: list-item !important;
}

.taf-bullets p {
  margin: 0 !important;
  padding: 0 !important;
}

.notam-status-indicator:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Dark mode adjustments for status indicator */
html.dark .notam-status-indicator {
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ---------- STATUS LEGEND ---------- */
.status-legend {
  display: flex;
  gap: 1.5rem;
  margin-bottom: var(--cards-gap);
  padding: 0.75rem 1rem;
  background: rgba(20, 184, 166, 0.05);
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  color: #666;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1.5px 4px rgba(0,0,0,0.08);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.legend-item.selected span {
  text-decoration: underline;
  font-weight: 600;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Dark mode for status legend */
html.dark .status-legend {
  background: rgba(20, 184, 166, 0.1);
  border-color: rgba(20, 184, 166, 0.3);
  color: #aaa;
}

html.dark .legend-dot {
  border-color: rgba(0, 0, 0, 0.3);
}

/* Mobile adjustments for status legend */
@media (max-width: 600px) {
  .status-legend {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
  
  .legend-item {
    gap: 0.4rem;
  }
}

/* ---------- loader ---------- */
.loader{
  margin: 0 0 .75rem 0;
  border:6px solid #E5E7EB;
  border-top:6px solid #14B8A6;
  border-radius:50%;
  width:46px;
  height:46px;
  animation:spin 1s linear infinite
}
@keyframes spin{100%{transform:rotate(360deg)}}

/* ---------- pages & back btn ---------- */
#results {
  --cards-gap: 1.1rem;
  padding-top: 0; /* Remove top padding to match home page */
  padding-bottom: 0;
}

/* Remove unwanted gap below disclaimer only on results page */
/* (removed; handled by results-page flex layout) */
/* #results + .notam-disclaimer { margin-bottom: 0; } */

.airport-head {
  margin-bottom: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem; /* Add horizontal padding to match home page */
}

#apt-name {
  font-size: 2.2rem; /* Match home page h1 size */
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: .5rem; /* Match home page h1 margin */
}

#apt-meta {
  font-size: 1.1rem; /* Match subtitle size */
  color: #666;
  margin-bottom: 1.5rem; /* Match subtitle margin */
  line-height: 1.4;
}

#apt-meta svg {
  width: 1.6em;
  height: 1.6em;
  vertical-align: middle;
}

/* Airport meta structured layout */
#apt-meta .apt-basic-info {
  margin-bottom: 0.3rem; /* Match TAF bullet spacing */
}

#apt-meta .apt-time-info {
  margin-bottom: 0.3rem; /* Match TAF bullet spacing */
  font-weight: 500;
}

#apt-meta .apt-time-group {
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 0.3rem; /* Match TAF bullet spacing */
  white-space: nowrap; /* Prevent breaking on small screens */
}

#apt-meta .apt-time-item {
  margin-right: 0.15rem; /* Reduced for uniform spacing */
}

#apt-meta .apt-time-arrow {
  margin: 0 0.15rem; /* Reduced for uniform spacing */
  display: inline-block;
  vertical-align: middle;
}

#back {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem auto; /* Match form margin */
  padding: .65rem 1.1rem; /* Match button padding */
  background: #14B8A6;
  border: none;
  color: #111827;
  border-radius: .6rem;
  font-size: 1rem; /* Match button font size */
  cursor: pointer;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}

#back svg {
  margin-right: 8px;
  display: block;
  width: 22px;
  height: 22px;
}

#back:hover {
  background: #0D9488;
}

/* Dark mode overrides for results page */
html.dark #apt-meta {
  color: #aaa;
}

html.dark #back {
  background: #029c96;
  color: #1e1e1e;
}

html.dark #back:hover {
  background: #00a8a1;
}

html.dark #back svg {
  stroke: #000;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  #apt-name {
    font-size: 1.8rem; /* Match mobile h1 size */
  }
  
  #apt-meta {
    font-size: 1rem; /* Match mobile subtitle size */
    margin-bottom: 1.25rem;
  }
  
  #apt-meta .apt-time-group {
    display: block; /* Stack vertically on very small screens */
    margin-right: 0;
    margin-bottom: 0.3rem; /* Match TAF bullet spacing */
  }
  
  #back {
    width: 100%;
    font-size: 1.05rem; /* Match mobile button size */
    margin-bottom: 1.25rem;
  }
  
  .airport-head {
    padding: 0 .5rem;
  }

  .theme-btn svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .lang-btn, .theme-btn {
    width: 34px;
    height: 34px;
    border-radius: .5rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lang-btn {
    font-size: 1.6rem !important;
  }

  .theme-btn {
    font-size: 1rem;
  }

  .theme-btn svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}

.cards ul{list-style:none;padding-left:0}

/* ---------- DARK MODE overrides ---------- */
html.dark body{background:#1e1e1e;color:#f1f1f1}
html.dark .site-header{background:#1e1e1e;border-bottom-color:#333}
html.dark .divider{background:#333}
html.dark .nav-link{color:#f1f1f1}
html.dark .nav-link:hover{color:#14B8A6}
html.dark .theme-btn{background:#444 !important;color:#f1f1f1 !important}
html.dark .theme-btn:hover{background:#555 !important}
html.dark .lang-btn{background:#444 !important;color:#f1f1f1 !important}
html.dark .lang-btn:hover{background:#555 !important}
html.dark .card{background:#242424;border-color:#333;box-shadow:0 2px 6px rgba(0,0,0,.5)}
html.dark input{background:#2b2b2b;color:#f1f1f1;border-color:#444}
html.dark input::placeholder{color:#aaa}
html.dark button{background:#029c96;color:#1e1e1e}
html.dark button:hover{background:#00a8a1}
html.dark .loader{border:6px solid #333;border-top:6px solid #029c96}
.theme-btn{background:#eee !important;color:#666 !important}
.theme-btn:hover{background:#ddd !important}
html.dark #back{background:#039c96 !important;color:#000 !important}
html.dark #back svg{stroke:#000 !important}
html.dark #back:hover{background:#00a8a1 !important}
#search button{display:flex;align-items:center;justify-content:center}
#search button svg{margin-right:8px;display:block}
html.dark .site-header .divider{background:#039c96}
html.dark .about-text {
  color: #f1f1f1 !important;
}

/* ---------- MOBILE (≤600px) ---------- */
@media (max-width: 600px) {
  /* ... other mobile styles ... */
  
  /* Utility buttons (language / theme) ----------------------------- */
  .header-buttons{
    flex:0 0 auto;                    
    gap:.35rem;
    display: flex;
    align-items: center;
  }

  .lang-btn, .theme-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
  }
  
  .lang-btn {
    font-size: 1.2rem !important; /* Increased size */
    font-weight: 500;
  }
  
  .theme-btn svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}

.site-footer {
  width: 100%;
  border-top: 1px solid #E5E7EB;
  background: #F7F9FC;
  color: #888;
  font-size: .85rem;
  text-align: center;
  padding: .75rem 1rem;
  margin-top: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
  min-height: 66px;
  grid-row: 3;
}
.site-footer .footer-inner {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
html.dark .site-footer {
  border-top: 1px solid #333;
  background: #1e1e1e;
  color: #aaa;
}

.lang-dropdown {
  position: relative;
  display: inline-block;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 125%; /* Position below the button */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 1010;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  top: 118%; /* Position below the button */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  z-index: 1011;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show tooltip only when the corresponding menu is NOT expanded */
[data-tooltip]:hover:not([aria-expanded="true"])::after,
[data-tooltip]:hover:not([aria-expanded="true"])::before {
  opacity: 1;
  visibility: visible;
  display: block;
}

/* Adjust tooltip position for elements near the right edge */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  right: 0;
  left: auto;
  transform: none;
}

.lang-menu {
  position: absolute;
  top: 110%;
  left: 0;
  min-width: 60px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: .5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 0.2rem 0;
  z-index: 1001;
  list-style: none;
  margin: 0;
  display: block;
}
.lang-menu[hidden] {
  display: none;
}
.lang-menu li {
  padding: .4rem 1.1rem;
  cursor: pointer;
  font-size: 1rem;
  color: #333;
  background: none;
  border: none;
  text-align: left;
  transition: background 0.2s, color 0.2s;
}
.lang-menu li:hover {
  background: #14B8A6;
  color: #fff;
}
html.dark .lang-menu {
  background: #222;
  border-color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
html.dark .lang-menu li {
  color: #eee;
}
html.dark .lang-menu li:hover {
  background: #029c96;
  color: #fff;
}
/* ---------- GLOBAL FLUID TYPE ---------- */
html{
  /* Scales between 16 px on phones and 20 px on 4 K screens */
  font-size: clamp(16px, 0.9vw + 0.6rem, 20px);
}

/* ---------- TABLET (600 px – 900 px) ---------- */
@media (min-width: 600px) and (max-width: 899px){

  /* Give cards some breathing room in two columns */
  #results { --cards-gap: 1.2rem; }
  .cards{
    /* display:grid; */
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:var(--cards-gap);
  }

  /* Make the search form sit neatly in one row again */
  form{
    flex-direction:row;
    gap:.7rem;
  }
  input{max-width:260px}
  button{width:auto}

  /* Slightly larger titles on mid-sized screens */
  h1{font-size:2rem}
  h2{font-size:1.25rem}
}

/* ---------- LAPTOP & SMALL DESKTOP (≥ 900 px) ---------- */
@media (min-width: 900px){

  /* Cards in three flowing columns when there's space */
  #results { --cards-gap: 1.2rem; }
  .cards{
    /* display:grid; */
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:var(--cards-gap) 1.4rem;
  }

  /* Provide side padding on narrow laptops */
  .wrapper{max-width:1000px;padding:0 1rem}


  /* Roomier airport header */
  #apt-name{font-size:2.4rem}
  .airport-head .small{font-size:1.2rem}
}

/* Remove wrapper padding once the screen is wide enough */
@media (min-width: 1010px){
  .wrapper{padding:0}
}

/* ---------- BIG DESKTOP / 4 K (≥ 1440 px) ---------- */
@media (min-width: 1440px){
  .wrapper{max-width:1180px;padding:0}

  /* Subtle up-size for readability */
  h1{font-size:2.6rem}
  h2{font-size:1.5rem}
  .card{font-size:1.05rem}
}

/* ---------- SUPER-SMALL PHONES (≤ 360 px) ---------- */
@media (max-width: 360px){
  /* Keep nav/snug buttons from wrapping awkwardly */
  .site-header nav{gap:.5rem}
  .theme-btn,.lang-btn{width:30px;height:30px}
  h1{font-size:1.25rem}
}
@media (max-width: 600px){

  /* ---------- HEADER ---------- */
  .site-header{
    flex-wrap:wrap;              /* allow nav to break beneath brand */
    padding:.5rem .75rem;
  }

  /* navigation row */
  .site-header nav{
    flex:0 0 100%;               /* full-width row */
    justify-content:space-between;
    margin-bottom:.25rem;
  }
  .site-header .divider{display:none}          /* hide vertical bars */
  .nav-link, .home-link{white-space:nowrap;}   /* keep links on one line */
  .nav-link{font-size:.9rem}

  /* utility buttons */
  .header-buttons{gap:.4rem}
  .lang-btn,.theme-btn{width:30px;height:30px}

  /* ---------- GLOBAL WRAPPER ---------- */
  .wrapper{
    margin:2rem auto 0;
    padding:0 1rem;              /* breathes at screen edges */
  }

  /* ---------- HERO / FORM ---------- */
  h1{font-size:1.8rem}
  .subtitle{font-size:1rem;margin-bottom:1.25rem}

  form{
    display:flex;
    flex-direction:column;
    gap:.8rem;
  }
  form input,
  form button{width:100%; margin-top: .5rem;}        /* no side scroll */

  /* ---------- CARD LIST ---------- */

  .cards{gap:var(--cards-gap)}

  /* ---------- FOOTER ---------- */
  .site-footer{font-size:.8rem;padding:.55rem .75rem;min-height:66px}
}

/* Tablet and desktop */

/* 600 px – 899 px */
@media (min-width: 600px) and (max-width: 899px){

  .cards{/* display:grid; */grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--cards-gap)}
  form{flex-direction:row;gap:.7rem}
  input{max-width:260px}
}

/* ≥ 900 px */
@media (min-width: 900px){

  .cards{/* display:grid; */grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--cards-gap) 1.4rem}
  .wrapper{max-width:1000px;padding:0 1rem}
}

/* ≥ 1440 px */
@media (min-width: 1440px){
  .wrapper{max-width:1180px;padding:0}
  h1{font-size:2.6rem}
  h2{font-size:1.5rem}
  .card{font-size:1.05rem}
}

/* super-small phones (≤ 360 px) */
@media (max-width: 360px){
  .header-buttons{gap:.3rem}
  .lang-btn,.theme-btn{width:28px;height:28px}
  h1{font-size:1.6rem}
}
@media (max-width: 600px){

  /* Header container ------------------------------------------------ */
  .site-header{
    flex-wrap:nowrap;
    padding:.55rem .75rem;
    column-gap:1rem;
    align-items: center; /* Ensures nav and header-buttons are vertically centered */
    min-height: 48px;
  }

  /* Navigation ------------------------------------------------------ */
  .site-header nav{
    flex:1 1 auto;                    
    display:flex;align-items:center;
    gap:.55rem;                       
    overflow-x:auto;                  
    scrollbar-width:none;            
    position: relative;
    top: 2px;
  }
  .site-header nav::-webkit-scrollbar{display:none;} 

  .site-header .divider{display:none} 

  .nav-link,.home-link{
    font-size:.95rem;                 
    font-weight:600;
    white-space:nowrap;              
    display: inline-flex;
    align-items: center;
    height: 28px;
  }

  /* Utility buttons (language / theme) ----------------------------- */
  .header-buttons{
    flex:0 0 auto;                    
    gap:.35rem;
    display: flex;        /* Make it a flex container */
    align-items: center;  /* Vertically center its children */
  }

  .lang-btn, .theme-btn {
    width: 34px;
    height: 34px;
    padding: 0;
  }
  
  .lang-btn {
    font-size: 1.2rem !important;
  }
  
  .theme-btn svg {
    width: 1.1rem;
    height: 1.1rem;
  }
}

@media (min-width: 901px){
  .site-header{
    box-shadow:0 1px 3px rgba(0,0,0,.06); 
  }
}

/* —— phones first (≤ 600 px) —— */
@media (max-width: 600px){
  .nav-link,
  .home-link{
    font-size: 1.05rem;   
  }
}

/* —— everything above 600 px —— */
@media (min-width: 601px){
  .nav-link{
    font-size: 1.18rem;   
  }
  .home-link{             
    font-size: 1.28rem;   
  }
}
@media (max-width: 600px){
  form input{ max-width:100%; }   
}
@media (min-width: 901px){      
  .nav-link{
    font-size: 1.1rem;   
  }
  .home-link{
    font-size: 1.2rem;   
  }
}

.lang-label {
  width: 100%;
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  font-size: 1rem;
  line-height: 1;
  z-index: 1;
}

.notam-disclaimer {
  font-size: 0.93rem;
  color: #888;
  text-align: center;
  margin: 1rem auto;
  max-width: 600px;
  padding: 0.2rem 1rem;
  line-height: 1.5;
  display: block;
}

/* Force fixed, equal gap for disclaimer on results page as well */
/* removed to allow flex to place space above disclaimer */
/* body.results-page .notam-disclaimer{margin:1rem auto !important}
#results + .notam-disclaimer{margin:1rem auto !important} */

html.dark .notam-disclaimer {
  color: #aaa;
}

/* Shimmer animation for loading cards */
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.card.loading {
  position: relative;
  overflow: hidden;
  min-height: 70px;
  margin-bottom: 0.5rem;
}
.card.loading::after {
  display: none;
}
.card.loading .loading-line {
  height: 1.1em;
  width: 80%;
  margin: 0.7em 0 0.7em 0;
  border-radius: 0.4em;
  background: linear-gradient(90deg, #e3e8f0 20%, #f7f9fc 40%, #e3e8f0 60%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
  opacity: 1;
}
.card.loading .loading-line.short {
  width: 40%;
}

/* Dark mode for shimmer lines */
html.dark .card.loading .loading-line {
  background: linear-gradient(90deg, #333 20%, #242424 40%, #333 60%);
  background-size: 200% 100%;
}

/* Shimmer loading effect for text content during language switching */
.shimmer-loading {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 4px;
}

.shimmer-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
}

/* Dark mode shimmer for text */
html.dark .shimmer-loading {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

/* Shimmer text effect for language switching */
.shimmer-text {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0.5em 0;
  padding: 0;
}

/* Adjust spacing for different shimmer types */
.shimmer-text.notam-header {
  margin: 0.3em 0;
}

.shimmer-text.notam-body {
  margin: 0.4em 0;
}

/* Hide dropdown icon during language switching */
.shimmer-text .dropdown-toggle {
  display: none;
}

/* Hide all dropdown icons when shimmer is active anywhere on the page */
.shimmer-text ~ .dropdown-toggle,
.shimmer-text + .dropdown-toggle {
  display: none;
}

.shimmer-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #e3e8f0 20%, #f7f9fc 40%, #e3e8f0 60%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 0.4em;
  z-index: 1;
}

/* Dark mode shimmer text */
html.dark .shimmer-text::before {
  background: linear-gradient(90deg, #333 20%, #242424 40%, #333 60%);
  background-size: 200% 100%;
}

/* Special styling for title shimmer - make it shorter */
.shimmer-text.notam-header::before {
  width: 60%;
  right: auto;
}

.loading-message {
  display: none;
  text-align: center;
  color: #888;
  font-size: 0.9rem;
  margin-top: 1.2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
#loading-container.notam-loading .loading-message {
  display: block;
}
html.dark .loading-message {
  color: #aaa;
}

#loading-container {
  display: none;
  justify-content: center;
  align-items: center;
  min-height: auto;
  margin: 0;
  padding: 2rem 0;
  text-align: center;
}
#loading-container.notam-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2rem 0;
  text-align: center;
}

@keyframes notamFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.notam-animate-in .card:not(.fade-out) {
  opacity: 0;
  animation: notamFadeInUp 0.25s cubic-bezier(.23,1.02,.32,1) forwards;
}

@keyframes notamFadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(24px);
  }
}

.card.fade-out {
  animation: notamFadeOutDown 0.25s cubic-bezier(.23,1.02,.32,1) forwards;
}

@keyframes noNotamPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.cards.no-results {
  animation: noNotamPulse 0.3s ease;
}

@keyframes noNotamPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.cards.no-results {
  animation: noNotamPulse 0.3s ease;
}

.wx-note {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  font-weight: bold;
  color: #ff6159;

}
/* Results page layout: make wrapper a column flex and pin disclaimer to bottom */
body.results-page{display:flex !important;flex-direction:column;min-height:100vh}
body.results-page .wrapper{flex:1 0 auto;display:flex;flex-direction:column;margin-bottom:0}
body.results-page #results{flex:0 0 auto}
body.results-page #loading-container{flex:0 0 auto}
body.results-page .notam-disclaimer{margin-top:auto !important;margin-bottom:1rem !important}
body.results-page #results{margin-bottom:auto !important}
body.results-page .notam-disclaimer{margin:1rem auto !important}

/* METAR/TAF bullet list spacing: ensure wrapped lines have comfortable gap */
.taf-bullets .taf-bullet-list{line-height:1.6}
.taf-bullets li{line-height:1.6}