/**
 * Know.Travel — Airports Directory
 * Styles for /airports/ page
 */

/* Reset: override WP admin-bar margin if present */
html { margin-top: 0 !important; }

/* Mobile guard: prevent any rogue overflow from pushing the page horizontally.
   `clip` is preferred over `hidden` because it doesn't break position: sticky
   on descendants. Falls back gracefully on older browsers. */
@media (max-width: 768px) {
  html, body { overflow-x: clip; }
}

/* Container */
.ap-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Search input */
.ap-search {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-default);
  border-radius: 8px; background: var(--bg-input); color: var(--text-primary);
  font-size: 14px; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s;
}
.ap-search:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px var(--accent-blue-muted); outline: none; }
.ap-search::placeholder { color: var(--text-tertiary); }

/* IATA badge */
.iata-badge {
  display: inline-block; padding: 3px 8px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600;
  letter-spacing: 1px; background: var(--accent-blue-muted); color: var(--accent-blue);
  border: 1px solid transparent; transition: all 0.15s;
}

/* Sort pill */
.ap-pill {
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
  color: var(--text-secondary); background: transparent;
  border: 1px solid var(--border-default); cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.ap-pill:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.ap-pill.active { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
[data-theme="dark"] .ap-pill.active { color: #0e0e18; }
[data-theme="sunset"] .ap-pill.active { color: #1a1410; }

/* Checkbox */
.ap-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }

/* Continent SVG icon */
.continent-icon { width: 20px; height: 16px; opacity: 0.4; transition: opacity 0.2s; flex-shrink: 0; }
.continent-icon path { fill: currentColor; }

/* Flag icon */
.flag-icon { display: inline-block; vertical-align: -2px; margin-right: 6px; border-radius: 2px; }

/* Pagination */
.ap-pagination { display: flex; align-items: center; gap: 4px; padding: 24px 0 40px; flex-wrap: wrap; }
.ap-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; border-radius: 6px; padding: 0 8px;
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  border: 1px solid var(--border-default); transition: all 0.15s; text-decoration: none;
}
.ap-page:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.ap-page.current { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
[data-theme="dark"] .ap-page.current { color: #0e0e18; }
[data-theme="sunset"] .ap-page.current { color: #1a1410; }
.ap-page.dots { border: none; color: var(--text-tertiary); cursor: default; }
.ap-page-info { margin-left: auto; font-size: 13px; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }

/* Table */
.ap-table { width: 100%; border-collapse: collapse; }
.ap-table thead { background: var(--bg-elevated); transition: background 0.35s; }
.ap-table th {
  padding: 12px 16px; font-size: 11px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-tertiary); text-align: left;
}
.ap-table td { padding: 14px 16px; font-size: 15px; border-top: 1px solid var(--border-subtle); transition: border-color 0.35s; }
.ap-table tbody tr { cursor: pointer; transition: background 0.12s; }
.ap-table tbody tr:hover { background: var(--accent-blue-muted); }
.ap-table tbody tr:hover .iata-badge { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
[data-theme="dark"] .ap-table tbody tr:hover .iata-badge { color: #0e0e18; }
[data-theme="sunset"] .ap-table tbody tr:hover .iata-badge { color: #1a1410; }
.ap-col-city { width: 22%; white-space: nowrap; }
.ap-col-airport { font-weight: 500; }
.ap-col-iata { width: 80px; text-align: center; }


/* ===========================================================================
   BREADCRUMBS
   =========================================================================== */
.rm-breadcrumb-bar { padding: 16px 24px 0; background: var(--bg-base); }
.ap-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-tertiary); flex-wrap: wrap; }
.ap-breadcrumb a { color: var(--accent-blue); text-decoration: none; transition: color 0.15s; }
.ap-breadcrumb a:hover { color: var(--accent-blue); text-decoration: underline; }
.ap-breadcrumb .sep { opacity: 0.5; }

/* ===========================================================================
   HERO
   =========================================================================== */
.v7-hero { padding: 16px 24px 28px; text-align: center; position: relative; z-index: 10; }
.v7-title {
  font-size: 36px; font-weight: 700; letter-spacing: -1.2px;
  margin-bottom: 8px; line-height: 1.2;
}
.v7-subtitle {
  font-size: 15px; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.5;
}
.v7-subtitle strong { color: var(--text-primary); font-weight: 600; }


/* ===========================================================================
   SEARCH BAR (hero)
   =========================================================================== */
.v7-search-wrap {
  max-width: 640px; margin: 0 auto; position: relative;
  display: flex; align-items: center;
  border: 1px solid var(--border-default); border-radius: 12px;
  background: var(--bg-input); transition: border-color 0.2s, box-shadow 0.2s;
}
.v7-search-wrap:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 4px var(--accent-blue-muted);
}
.v7-search-wrap svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--text-tertiary); pointer-events: none;
}
.v7-search-wrap input {
  flex: 1; padding: 14px 16px 14px 46px; border: none; background: transparent;
  color: var(--text-primary); font-size: 15px; font-family: inherit; outline: none;
}
.v7-search-wrap input::placeholder { color: var(--text-tertiary); }
.v7-country-inline {
  padding: 8px 12px; margin: 6px 6px 6px 0; border: 1px solid var(--border-default);
  border-radius: 8px; background: var(--bg-elevated); color: var(--text-secondary);
  font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap;
}

/* Custom country dropdown */
.v7-country-dd {
  position: relative; margin: 6px 6px 6px 0; flex-shrink: 0;
}
.v7-country-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--border-default); border-radius: 8px;
  background: var(--bg-elevated); color: var(--text-secondary);
  font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s;
}
.v7-country-btn:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.v7-country-arrow {
  width: 16px; height: 16px; flex-shrink: 0; opacity: 0.5;
  transition: transform 0.2s;
}
.v7-country-btn.open .v7-country-arrow { transform: rotate(180deg); }
.v7-country-list {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 220px; max-height: 280px; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  z-index: 900;
}
.v7-country-list.open { display: block; }
.v7-country-item {
  padding: 9px 14px; font-size: 13px; color: var(--text-primary);
  cursor: pointer; transition: background 0.1s; white-space: nowrap;
}
.v7-country-item:hover { background: var(--bg-hover); }
.v7-country-item.active { color: var(--accent-blue); font-weight: 600; }
.v7-country-item:first-child { border-bottom: 1px solid var(--border-default); }
.v7-country-cnt { color: var(--text-tertiary); font-size: 12px; }


/* ===========================================================================
   CONTINENT STAT CARDS
   =========================================================================== */
.v7-stats {
  display: flex; gap: 8px; padding: 4px 0 20px;
  margin-top: -4px;
  width: max-content;
  min-width: 100%;
}
.v7-stats::-webkit-scrollbar { display: none; }
.v7-stat {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--border-default); background: var(--bg-card);
  text-decoration: none; color: inherit; transition: all 0.15s;
  min-width: 130px; cursor: pointer;
}
.v7-stat:hover {
  border-color: var(--accent-blue); background: var(--accent-blue-muted);
}
.v7-stat.active {
  border-color: var(--accent-blue); background: var(--accent-blue-muted);
}
.v7-stat-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v7-stat-icon .continent-icon { width: 32px; height: 26px; opacity: 0.35; }
.v7-stat:hover .continent-icon,
.v7-stat.active .continent-icon { opacity: 0.85; }
.v7-stat:hover .continent-icon path,
.v7-stat.active .continent-icon path { fill: var(--accent-blue); }

/* Scroll indicator — shown via JS class when cards overflow */
.v7-stats-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.v7-stats-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--accent-blue, #4fc3f7) 20%, var(--accent-blue, #4fc3f7) 80%, transparent);
  opacity: 0; transition: opacity 0.3s; pointer-events: none; border-radius: 1px;
}
.v7-stats-wrap.has-scroll::after { opacity: 0.3; }
/* Globe icon (stroke-based) */
.v7-stat:hover .continent-icon circle,
.v7-stat:hover .continent-icon ellipse,
.v7-stat.active .continent-icon circle,
.v7-stat.active .continent-icon ellipse { stroke: var(--accent-blue); }
.v7-stat:hover .continent-icon path[fill="none"],
.v7-stat.active .continent-icon path[fill="none"] { fill: none; stroke: var(--accent-blue); }
.v7-stat-info { display: flex; flex-direction: column; gap: 1px; }
.v7-stat-name { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.v7-stat-val {
  font-family: 'JetBrains Mono', monospace; font-size: 16px;
  font-weight: 600; color: var(--accent-blue);
}


/* ===========================================================================
   TOOLBAR (sort + checkbox)
   =========================================================================== */
.v7-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 0; border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.v7-pills { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.v7-toolbar .ap-checkbox { margin-left: auto; }


/* ===========================================================================
   SEARCH IN HEADER (appears on scroll)
   =========================================================================== */
.v7-header-search {
  display: none; /* Replaced by KT site header with $show_header_search */
}
.v7-header-search.visible { opacity: 1; }
.v7-header-search.visible .v7-hs-field { pointer-events: auto; }

.v7-hs-inner {
  max-width: 1200px; margin: 0 auto; height: 64px;
  display: flex; align-items: center;
  padding: 0 28px;
  /* Offset: skip logo area on left, nav area on right */
  padding-left: 220px;
  padding-right: 320px;
}

.v7-hs-field {
  position: relative; width: 100%; max-width: 480px; margin: 0 auto;
  display: flex; align-items: center;
  border: 1px solid var(--border-default); border-radius: 8px;
  background: var(--bg-input); overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.v7-hs-field:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-muted);
}
.v7-hs-field svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-tertiary); pointer-events: none;
}
.v7-hs-input {
  flex: 1; padding: 7px 8px 7px 32px; min-width: 0;
  border: none; background: transparent; color: var(--text-primary);
  font-size: 13px; font-family: inherit; outline: none;
}
.v7-hs-input::placeholder { color: var(--text-tertiary); }
.v7-hs-country {
  padding: 5px 8px; margin: 4px 4px 4px 0; flex-shrink: 0;
  border: 1px solid var(--border-default); border-radius: 5px;
  background: var(--bg-elevated); color: var(--text-secondary);
  font-size: 11px; font-family: inherit; cursor: pointer;
  max-width: 130px; white-space: nowrap;
  text-overflow: ellipsis; overflow: hidden;
}


/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
  .v7-stats { gap: 6px; }
  .v7-stat { min-width: 110px; padding: 10px 12px; }
  .v7-hs-inner { padding-left: 200px; padding-right: 200px; }
}
@media (max-width: 640px) {
  .ap-container { padding: 0 16px; }
  .rm-breadcrumb-bar { padding: 12px 16px 0; }
  .v7-hero { padding: 12px 16px 20px; }
  .v7-title { font-size: 26px; }
  .v7-subtitle { font-size: 13px; }
  .v7-search-wrap { flex-wrap: wrap; }
  /* When the country select wraps to a second row, the SVG with `top: 50%`
     centers on the whole two-row wrapper. Pin it to the input row instead. */
  .v7-search-wrap svg { top: 16px; transform: none; }
  .v7-search-wrap input { min-width: 200px; }
  .v7-country-inline { flex: 1; margin: 0 6px 6px 6px; }
  .v7-stats { gap: 6px; }
  .v7-stat { min-width: 100px; padding: 10px; gap: 8px; }
  .v7-stat-icon .continent-icon { width: 24px; height: 20px; }
  .v7-stat-val { font-size: 14px; }
  .v7-stat-name { font-size: 11px; }
  .v7-toolbar { gap: 6px; }
  .v7-pills { gap: 4px; }
  .v7-pills .ap-pill { padding: 5px 10px; font-size: 12px; }
  .v7-header-search { display: none; }
  /* Allow long unbroken names (Saint-Léonard-de-Noblat, Wagga Wagga, etc.)
     to wrap instead of pushing the table beyond container width. */
  .ap-col-city { width: auto; white-space: normal; word-break: break-word; }
  .ap-col-airport { font-size: 13px; word-break: break-word; }
}

/* =============================================================================
   COUNTRY PAGE — add this block to the END of airports-kt.css
   ============================================================================= */

/* Hero flag next to title */
.v7-hero-flag { width:40px; height:30px; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,0.2); flex-shrink:0 }

/* Title with flag (flex) */
.page-airports-country .v7-title,
.page-airports-continent .v7-title {
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
}

/* Continent SVG silhouette in title */
.v7-hero-continent { width:36px; height:36px; flex-shrink:0 }
.v7-hero-continent path { fill:currentColor; opacity:0.7 }

/* Legend dots inline in toolbar */
.ap-legend-inline {
  display:flex; align-items:center; gap:12px;
  margin-left:16px; padding-left:16px;
  border-left:1px solid var(--border-subtle);
}
.ap-legend-item { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-tertiary) }
.ap-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 }
.ap-legend-dot.large  { background:var(--accent-blue) }
.ap-legend-dot.medium { background:var(--accent-green) }
.ap-legend-dot.small  { background:var(--accent-yellow) }
.ap-legend-dot.closed { background:var(--accent-red) }

/* 2-column layout: Table | Map */
.ap-country-layout {
  display:grid;
  grid-template-columns:1fr 380px;
  gap:24px;
  align-items:start;
}

/* Map panel */
.ap-map-panel {
  position:sticky; top:80px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
  transition:border-color .35s, background .35s;
}
.ap-map-area {
  width:100%; height:520px;
  background:#1a1a2e;
}

/* Map legend (inside map, bottom-left — same as visa-check) */
.ap-map-legend {
  position:absolute; bottom:12px; left:12px; z-index:800;
  display:flex; gap:10px; padding:8px 14px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.08); border-radius:8px;
}
.lg-item { display:flex; align-items:center; gap:5px; font-size:10px; color:#5a5a70 }
.lg-dot { width:7px; height:7px; border-radius:50% }

/* Map style switcher (same as visa-check / routes) */
.ap-map-styles {
  position:absolute; top:12px; right:12px; z-index:800;
  display:flex; gap:4px; padding:3px;
  background:rgba(12,12,20,.82); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.07); border-radius:8px;
}
.ms-btn {
  width:32px; height:32px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:rgba(255,255,255,.55);
  cursor:pointer; transition:all .15s;
}
.ms-btn:hover { color:#eaeaf0; background:rgba(255,255,255,.08) }
.ms-btn.active { background:rgba(59,130,246,.25); color:#93bbfc }

/* Leaflet tile fix for dark backgrounds */
.leaflet-tile-pane { will-change:transform }
.leaflet-tile { outline:1px solid transparent }

/* Table header with map toggle */
.ap-table-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.ap-table-title { font-size:14px; font-weight:500; color:var(--text-secondary) }
.ap-table-title .count { color:var(--text-tertiary) }
.ap-table-toggle-map {
  display:none; /* hidden on desktop, shown on mobile */
  align-items:center; gap:6px;
  padding:6px 14px; border-radius:8px;
  border:1px solid var(--border-default);
  background:transparent;
  color:var(--text-secondary);
  font-size:13px; font-family:inherit;
  cursor:pointer; transition:all .15s;
}
.ap-table-toggle-map:hover { border-color:var(--accent-blue); color:var(--accent-blue) }

/* SEO content section */
.ap-seo-content { max-width:1200px; margin:0 auto; padding:32px 24px 8px }
.ap-seo-content h2 { font-size:20px; font-weight:600; margin-bottom:12px; color:var(--text-primary) }
.ap-seo-content p { font-size:15px; color:var(--text-secondary); line-height:1.7; margin-bottom:12px }

/* Global search fallback */
.ap-global-fallback { padding:20px 0 }
.ap-global-fallback p { font-size:14px; color:var(--text-secondary); margin-bottom:12px }
.fallback-list { display:flex; flex-direction:column; gap:4px; margin-top:12px }
.fallback-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:8px;
  border:1px solid var(--border-default);
  color:var(--text-primary); text-decoration:none;
  transition:all .15s;
}
.fallback-item:hover { background:var(--accent-blue-muted); border-color:var(--accent-blue) }
.fallback-item .fb-name { font-weight:500; flex:1 }
.fallback-item .fb-loc { font-size:13px; color:var(--text-secondary); flex:1 }

/* Compass loader (reused from old design) */
.compass-loader {
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--border-default);
  border-top-color:var(--accent-blue);
  animation:spin 0.8s linear infinite;
  margin:12px 0;
}
@keyframes spin { to { transform:rotate(360deg) } }

/* Map fullscreen */
.ap-map-panel.map-fullscreen {
  position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:9999; border-radius:0; border:none;
}
.ap-map-panel.map-fullscreen .ap-map-area { height:100vh }
body.map-fullscreen { overflow:hidden }

/* Leaflet airport markers */
.leaflet-airport-marker {
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.leaflet-airport-marker:hover { transform: scale(1.15); z-index: 999 !important; }
.leaflet-airport-marker.large_airport  { width:36px; height:36px; line-height:32px; font-size:11px; background:#1565c0; }
.leaflet-airport-marker.medium_airport { width:32px; height:32px; line-height:28px; font-size:10px; background:#2e7d32; }
.leaflet-airport-marker.small_airport  { width:28px; height:28px; line-height:24px; font-size: 9px; background:#f9a825; color:#333; }
.leaflet-airport-marker.closed         { width:26px; height:26px; line-height:22px; font-size: 8px; background:#c62828; }
.leaflet-airport-marker.heliport       { width:24px; height:24px; line-height:20px; font-size: 8px; background:#6a1599; }
.leaflet-airport-marker.seaplane_base  { width:24px; height:24px; line-height:20px; font-size: 8px; background:#00838f; }

/* Leaflet popup */
.airport-popup-code { font-family:'JetBrains Mono',monospace; font-size:16px; font-weight:700; color:var(--accent-blue, #1976d2); margin-bottom:2px }
.airport-popup-name { font-size:13px; font-weight:500; margin-bottom:2px }
.airport-popup-city { font-size:12px; color:#888; margin-bottom:6px }
.airport-popup-link { font-size:12px; color:var(--accent-blue, #1976d2); text-decoration:none; font-weight:500 }
.airport-popup-link:hover { text-decoration:underline }


/* =============================================================================
   RESPONSIVE — Country page
   ============================================================================= */

@media (max-width:1024px) {
  .ap-country-layout { grid-template-columns:1fr 320px; gap:16px }
  .ap-map-area { height:420px }
  .ap-legend-inline { display:none }
  .ap-map-legend { gap:6px; padding:6px 10px }
}

@media (max-width:768px) {
  .ap-country-layout { grid-template-columns:1fr }
  .ap-map-panel { position:static; order:2 }
  .ap-map-panel.map-hidden { display:none }
  .ap-map-area { height:320px }
  .ap-table-toggle-map { display:inline-flex }
  .ap-legend-inline { display:none }
  .ap-map-legend { bottom:8px; left:8px }
  .ap-map-styles { top:8px; right:8px }
}

@media (max-width:640px) {
  .page-airports-country .v7-title,
  .page-airports-continent .v7-title { font-size:24px; gap:10px }
  .page-airports-country .v7-title .count,
  .page-airports-continent .v7-title .count { font-size:18px }
  .v7-hero-flag { width:32px; height:24px }
  .v7-hero-continent { width:28px; height:28px }
  .ap-map-area { height:260px }
  .ap-map-legend { display:none }
}
/* ── Leaflet attribution ── */
.leaflet-control-attribution {
    background: transparent !important;
    color: rgba(255,255,255,0.15) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    padding: 1px 4px !important;
}
.leaflet-control-attribution a {
    color: rgba(255,255,255,0.2) !important;
    text-decoration: none !important;
}
[data-theme="light"] .leaflet-control-attribution { color: rgba(0,0,0,0.12) !important; }
[data-theme="light"] .leaflet-control-attribution a { color: rgba(0,0,0,0.15) !important; }