/* Reset + base */
  :root{
    --bg:#ffffff;
    --page-bg:#f6f8fb;
    --nav-bg:#073b56;     /* deep blue similar to The Bulwark */
    --accent:#d94c3d;     /* red accent */
    --muted:#6b7280;
    --max-width:1500px;
  }
  *{box-sizing:border-box}
  
  a{color: #0b6b8f;text-decoration:none}
  a:hover{text-decoration:underline}

  /* Top nav */
  

  /* Article */
  


@media (max-width: 768px) {
  h1.title {
    font-size: 20px;
  }

  .post-content h2 {
    font-size: 1em;
  }

  .post-content h3 {
    font-size: 0.9em;
  }

  .post-content h4 {
    font-size: 0.9em;
  }
}



  .post-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
  .tag{background:#f1f5f9;color:#072033;padding:6px 10px;border-radius:999px;font-size:13px;border:1px solid #e6eef2}

  /* Sidebar */
  aside.sidebar{
    position:relative;
  }
  .card{background:#fff;padding:16px;border-radius:8px;box-shadow:0 6px 20px rgba(12,20,30,0.04);margin-bottom:16px}
  .subscribe h3{margin:0 0 8px 0;font-size:16px}
  .subscribe input[type="email"]{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e9ef;margin-bottom:8px}
  .subscribe button{width:100%;padding:10px;border-radius:8px;border:0;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}

  /* toc */

.printBtn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;font:600 14px/1 system-ui,Arial,sans-serif;color:#fff;background:#2563eb;border:none;border-radius:8px;cursor:pointer}</style>


.topic-divider {
  border: none;
  border-top: 2px solid #ccc; /* Line color and thickness */
  margin: 40px 0;             /* Space above and below */
}

.post-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}



.share-block {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

.share-btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 500;
  background-color: #333;
  transition: background 0.3s ease;
  white-space: nowrap;
    
}

.share-block a.share-btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.3s ease;
    width: 80px;
    text-align: center;
}

/* Specific platform colors */
.share-block a.share-btn.facebook { background-color: #3b5998 !important; }
.share-block a.share-btn.twitter { background-color: #055f92 !important; }
.share-block a.share-btn.linkedin { background-color: #0077b5 !important; }
.share-block a.share-btn.whatsapp { background-color: #0f6a46 !important; }
.share-block a.share-btn.email { background-color: #6c757d !important; }

.share-block a.share-btn:hover {
  opacity: 0.85;
}

@media (max-width: 480px) {
  .share-block {
    justify-content: flex-start;
  }

  .share-btn {
    font-size: 12px;
    padding: 5px 10px;
  }
}

:root{
  --tbl-bg: #ffffff;
  --tbl-text: #111827;
  --tbl-muted: #4b5563;
  --tbl-accent: #0b69ff;
  --tbl-border: #d1d5db;
  --row-alt: #fbfdff;
  --radius: 10px;
  --pad: 12px;
  --font-family: "Inter","Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --base-size: 16px;
}

/* Wrapper for horizontal scroll and spacing */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  padding: 0.75rem;
  font-family: var(--font-family);
  font-size: var(--base-size);
  color: var(--tbl-text);
}

/* Base table */
.table-wrap table.styled-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--tbl-bg);
  box-shadow: 0 8px 28px rgba(2,6,23,0.04);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 720px;
}

/* Caption */
.table-wrap table.styled-table caption{
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tbl-text);
}

/* Header */
.table-wrap table.styled-table thead th{
  text-align: left;
  background: linear-gradient(180deg, rgba(11,105,255,0.06), rgba(11,105,255,0.02));
  color: #062244;
  font-weight: 700;
  padding: calc(var(--pad) + 2px) var(--pad);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--tbl-border);
  letter-spacing: 0.2px;
}

/* Body cells */
.table-wrap table.styled-table tbody td{
  padding: calc(var(--pad) - 2px) var(--pad);
  color: var(--tbl-text);
  font-size: 0.95rem;
  vertical-align: top;
  border-bottom: 1px solid var(--tbl-border);
}

/* Alternating rows */
.table-wrap table.styled-table tbody tr:nth-child(even){
  background: var(--row-alt);
}

/* Last-row tidy */
.table-wrap table.styled-table tbody tr:last-child td{
  border-bottom: none;
}

/* Hover */
.table-wrap table.styled-table tbody tr:hover{
  background: rgba(11,105,255,0.04);
}

/* Links and buttons inside table */
.table-wrap .styled-table a,
.table-wrap .styled-table button {
  color: var(--tbl-accent);
}
.table-wrap .styled-table
 .table-wrap table.styled-table thead th:last-child {
  text-align: center;
  width: 40px;
}
@keyframes rowFlash {
  0%   { background-color: rgba(11,105,255,0.12); }
  100% { background-color: inherit; }
}

.table-wrap table.styled-table tbody tr.copied-row {
  animation: rowFlash 0.8s ease-out;
}

.faq-full {
  width: 100%;
  max-width: 100%;
  padding: 40px 20px;
  background: linear-gradient(180deg, rgba(11,105,255,0.06), rgba(11,105,255,0.02));
  font-family: 'Segoe UI', sans-serif;
}

.faq-full h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 30px;
  color: #2d5f7a;
}

.faq-box {
  background: #fff;
  margin-bottom: 16px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.faq-box.open {
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #0078D4;
  transition: background 0.3s ease;
}

.faq-header .faq-span {
  text-transform: uppercase;
}

.faq-header:hover {
  background: #e6f4ff;
}

.faq-toggle {
  width: 24px;
  height: 24px;
  fill: #0078D4;
  transition: transform 0.3s ease;
}

.faq-box.open .faq-toggle {
  transform: rotate(180deg);
}

.faq-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-box.open .faq-body {
  max-height: 500px;
  padding: 16px 24px 24px;
}

.faq-body p {
  margin: 0;
  font-size: 16px;
  color: #444;
}

figure {
  width: 100%;
  display: block;
}

figcaption, figcaption * {
  text-align: center;
}
.related-articles {
  padding: 40px 20px;
  background-color: #f9f9f9;
  border-top: 1px solid #ddd;
  text-align: center;
}

.related-articles h2 {
  font-size: 28px;
  margin-bottom: 30px;
  color: #333;
}

.carousel-container {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}
.article-card{
  box-sizing:border-box;
  width:100%;
  max-width:320px;           /* allows cards to size down in narrow containers */
  margin:0 10px;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  transition:transform .18s ease;
  flex:0 0 auto;             /* keeps it from shrinking in a horizontal scroller */
}

/* Image: preserve aspect ratio, avoid layout shift */
.article-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;         /* fallback if browser supports it; matches 900x600 */
  object-fit:cover;
}

/* Title and link */
.article-card h3{
  margin:12px 12px 6px;
  font-size:1.05rem;        /* scales with user settings */
  line-height:1.25;
  font-weight:600;
}
.article-card .b-related{
  color:#235069;
  text-decoration:none;
}
.article-card .b-related:focus,
.article-card .b-related:hover{
  text-decoration:underline;
  outline-offset:3px;
}

/* Description */
.article-card p{
  margin:0 12px 16px;
  color:#555;
  font-size:.95rem;
  line-height:1.45;
}

/* Small-screen tweaks */
@media (max-width:480px){
  .article-card{
    max-width:280px;
    margin:0 8px;
    border-radius:6px;
  }
  .article-card img{ aspect-ratio:3/2; height:auto; }
  .article-card h3{ font-size:1rem; margin:10px 10px 6px; }
  .article-card p{ font-size:.92rem; margin:0 10px 14px; }
}

/* Desktop/layout container guidance (optional) */
.cards-row{ display:flex; gap:12px; flex-wrap:nowrap; overflow-x:auto; padding:8px;}
.cards-row::-webkit-scrollbar{ height:8px }


.read-more {
  display: block;
  margin: 0 16px 16px;
  color: #0078A8;
  font-weight: bold;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #0078A8;
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 1;
  border-radius: 4px;
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}
#northern-map {
  width: 100%;
  height: 500px; /* or whatever height you want */
  display: block;
}.col-12.col-md-6 figure {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
blockquote {
  background: #fff8f6 !important;
  color: #1a1a1a !important;
  border-left: 4px solid #d94c3d !important;
  padding: 12px 16px !important;
  margin: 16px 0 !important;
  font-style: italic !important;
}

iframe.solo-station {
  flex: 1; 
  width: 100%;
  height: 500px;
  border: none;
}

.star-rating {
    font-size: 1em;
    color: black;
  }
  .star {
    color: black;
  }
  .star.filled {
    color: gold;
  }

@media (max-width: 600px) {
  .table-wrap {
    padding: 0.5rem;
    font-size: 14px;
  }

  .styled-table {
    font-size: 14px;
    min-width: 100%; /* Ensures scrollable width */
  }

  .styled-table thead th,
  .styled-table tbody td {
    padding: 10px 8px;
    white-space: nowrap; /* Prevents text wrapping */
  }

  /* Optional: Add scroll hint */
  .table-wrap::after {
    content: 'Swipe →';
    display: block;
    text-align: right;
    font-size: 12px;
    color: #888;
    margin-top: 4px;
  }
    
    iframe.solo-station {
  height: 300px;
}
}
blockquote a {
  color: #000 !important;
  background: transparent !important;
  text-decoration: none;
  font-style: italic;
  display: inline-block;
}

.b-related{font-size:0.9em;color:#2d5f7a;text-transform: uppercase; font-weight: bold;}

.fares-img{ max-height: 400px;}
@media (max-width: 800px) {
    .fares-img{ max-height: 300px;}
}

iframe.featured {
  flex: 1; 
  width: 100%;
  height: 100%;
  border: none;
}