@charset "UTF-8";

/* Reset and base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; color: #222; background: #fff; line-height: 1.7; }
a { color: #2E546B; }

/* Layout */
.wrap { max-width: 930px; margin: 0 auto; padding: 0 20px; }

/* ============================================================
   Header
   ============================================================ */
header { background: #2E546B; color: #fff; padding: 16px 0; }
header .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
header .site-name { color: #fff; text-decoration: none; font-size: 1.3em; font-weight: bold; }
.header-search {
    max-width: 320px;
    flex: 1;
    margin-left: auto;
}
.header-search input {
    padding: 7px 12px;
    font-size: 0.9em;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    border-radius: 4px 0 0 4px;
}
.header-search input::placeholder { color: rgba(255,255,255,0.6); }
.header-search input:focus {
    outline: none;
    background: rgba(255,255,255,0.25);
}
.header-search button {
    padding: 7px 12px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    border-left: none;
    color: #fff;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}
.header-search button:hover { background: rgba(255,255,255,0.35); }

/* ============================================================
   Search page
   ============================================================ */
.search-section {
    padding: 24px 0 20px;
    border-bottom: 2px solid #eee;
    margin-bottom: 24px;
}
.search-section h1 {
    font-size: 1.8em;
    color: #2E546B;
    margin-bottom: 16px;
}
.search-form {
    display: flex;
    gap: 0;
    max-width: 560px;
}
.search-form input {
    flex: 1;
    padding: 11px 16px;
    border: 2px solid #2E546B;
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 1em;
    font-family: 'Inter', sans-serif;
    outline: none;
    color: #222;
}
.search-form input:focus {
    border-color: #2a5a8c;
}
.search-form button {
    padding: 11px 20px;
    background: #2E546B;
    color: #fff;
    border: 2px solid #2E546B;
    border-radius: 0 4px 4px 0;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}
.search-form button:hover { background: #2a5a8c; border-color: #2a5a8c; }

/* Results */
.results-section { margin-bottom: 40px; }
.results-count {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.result-item {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.result-item:last-child { border-bottom: none; }
.result-item a {
    font-weight: 600;
    font-size: 1.05em;
    color: #2E546B;
    text-decoration: none;
}
.result-item a:hover { text-decoration: underline; }
.result-type {
    display: inline-block;
    background: #f0f4f8;
    color: #666;
    font-size: 0.78em;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.result-sub {
    font-size: 0.88em;
    color: #888;
    margin-top: 3px;
}
.no-results {
    color: #666;
    font-size: 1.05em;
    padding: 20px 0;
}
/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb { padding: 10px 0; font-size: 0.9em; color: #666; }
.breadcrumb a { color: #2E546B; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; color: #bbb; }
/* ============================================================
   Booking button
   ============================================================ */
.rc-book-btn {
    display: inline-block;
    background: #2E546B;
    color: #fff;
    padding: 5px 14px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}
.rc-book-btn:hover { background: #2a5a8c; color: #fff; }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: 30px 0 20px; border-bottom: 2px solid #eee; margin-bottom: 24px; }
.hero h1 { font-size: 2em; color: #2E546B; margin-bottom: 8px; }
.hero .meta { font-size: 0.95em; color: #555; }
.hero .meta span { margin-right: 16px; }
.hero p { font-size: 1.05em; color: #555; max-width: 640px; margin-top: 8px; }

/* Region page hero stats */
.hero .stats { display: flex; gap: 24px; margin-top: 12px; flex-wrap: wrap; }
.hero .stat { background: #f0f4f8; padding: 10px 18px; border-radius: 6px;
              text-align: center; min-width: 100px; }
.hero .stat .num { font-size: 1.6em; font-weight: bold; color: #2E546B; }
.hero .stat .lbl { font-size: 0.8em; color: #666; text-transform: uppercase; }

/* ============================================================
   Section titles
   ============================================================ */
.section-title { font-size: 1.4em; color: #2E546B; margin: 32px 0 16px;
                 padding-bottom: 8px; border-bottom: 1px solid #2E546B; }
.subsection-title { font-size: 1.3em; color: #2E546B; margin: 24px 0 12px;
                    padding-left: 10px;}

/* ============================================================
   Info box
   ============================================================ */
.info-box { background: #f5f8fc; border: 1px solid #dde; border-radius: 6px;
            padding: 16px 20px; margin: 24px 0; display: flex; flex-wrap: wrap;
            gap: 16px; justify-content: flex-start; }
.info-box .item { flex: 1 1 130px; }
.info-box .label { font-size: 0.8em; text-transform: uppercase; color: #888; letter-spacing: 0.05em; }
.info-box .value { font-size: 1em; color: #222; font-weight: bold; }
.info-box .value a { color: #2E546B; text-decoration: none; }
.info-box.operator-card > * {
    width: 100%;
    flex: 0 0 100%;
}

@media (max-width: 600px) {
    .info-box { gap: 10px; }
    .info-box .item { flex: 1 1 calc(50% - 10px); }
}

/* ============================================================
   Map box
   ============================================================ */
.map-box { background: #eef2f7; border: 1px solid #ccd; border-radius: 6px;
           height: 400px; margin: 24px 0; overflow: hidden; position: relative; }
.map-box > div { width: 100%; height: 100%; }
.map-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.map-box canvas {
    filter: grayscale(30%) brightness(1.05) contrast(0.9);
}

/* ============================================================
   Description
   ============================================================ */
.description { margin: 20px 0; font-size: 1.05em; color: #333; }
.description p { margin-bottom: 10px; }
.description p:last-child { margin-bottom: 0; }

/* ============================================================
   Port grid
   ============================================================ */
.ports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
              gap: 12px; margin-bottom: 12px; }
.port-card { border: 1px solid #ddd; border-radius: 6px; padding: 12px 16px;
             text-decoration: none; color: #2E546B; display: block;
             transition: box-shadow 0.2s, background 0.2s; }
.port-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); background: #f5f8fc; }
.port-card .port-name { font-weight: bold; font-size: 1em; }
.port-card .port-meta { font-size: 0.82em; color: #777; margin-top: 3px; }

/* ============================================================
   Route Cards — shared base
   ============================================================ */
.route-card {
    background: #f5f8fc;
    border: 1px solid #dde;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 10px;
}
.rc-title {
    font-weight: 600;
    font-size: 1.05em;
    color: #2E546B;
    text-decoration: none;
}
.rc-title:hover { text-decoration: underline; }
.rc-meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    font-size: 0.9em;
}
@media (max-width: 600px) {
    .rc-meta { flex-wrap: wrap; }
}
.rc-meta span { display: flex; align-items: center; gap: 4px; }
.rc-operator { font-size: 0.85em; color: #666; }
.rc-port { color: #2E546B; text-decoration: none; }
.rc-port:hover { text-decoration: underline; }

/* ============================================================
   Port card — single horizontal line
   ============================================================ */
.route-card--port {
    padding: 10px 16px;
}
.route-card--port .rc-main {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    flex-wrap: nowrap;
}
.route-card--port .rc-title {
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: 0;
    display: inline;
}
.route-card--port .rc-meta {
    flex: 1;
    margin: 0;
    flex-wrap: nowrap;
}
.route-card--port .rc-operator {
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
    margin-left: auto;
}

@media (max-width: 600px) {
    .route-card--port .rc-main { flex-wrap: wrap; }
    .route-card--port .rc-operator { margin-left: 0; }
}

/* ============================================================
   Island card — arrow layout with divider
   ============================================================ */
.route-card--island {
    padding: 14px 18px;
}
.route-card--island .rc-arrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}
.route-card--island .rc-arrow a {
    color: #2E546B;
    text-decoration: none;
}
.route-card--island .rc-arrow a:hover { text-decoration: underline; }
.route-card--island .rc-arrow-icon { color: #888; font-size: 0.9em; }
.route-card--island .rc-divider {
    height: 1px;
    background: #dde;
    margin: 8px 0;
}
.route-card--island .rc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.route-card--island .rc-link {
    font-weight: 600;
    color: #2E546B;
    text-decoration: none;
}
.route-card--island .rc-link:hover { text-decoration: underline; }

/* ============================================================
   Region card — text-led, no badges
   ============================================================ */
.route-card--region {
    padding: 12px 16px;
}
.route-card--region .rc-title {
    font-size: 1em;
    display: block;
    margin-bottom: 6px;
}
.route-card--region .rc-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.9em;
    color: #444;
    margin-bottom: 6px;
}
.route-card--region .rc-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.route-card--region .rc-details a {
    color: #2E546B;
    text-decoration: none;
}
.route-card--region .rc-details a:hover { text-decoration: underline; }
.route-card--region .rc-operator {
    margin-top: 4px;
}
/* ============================================================
   Route box — region page style
   ============================================================ */
.route-box {
    background: #f5f8fc;
    border: 1px solid #dde;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    width: 100%;
}
.route-name { margin-bottom: 0; flex: 1; min-width: 0; }
.route-name a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.route-duration { font-size: 0.9em; color: #555; white-space: nowrap; flex-shrink: 0; }
.route-season { white-space: nowrap; flex-shrink: 0; }
.route-icons { font-size: 1.1em; flex-shrink: 0; margin-left: auto; }
.route-box .rc-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
    flex-wrap: nowrap;
    font-size: 0.9em;
}
.route-box .rc-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.route-box .rc-operator {
    white-space: nowrap;
    font-size: 0.85em;
    color: #666;
}
@media (max-width: 600px) {
    .route-box { flex-wrap: wrap; }
    .route-name { flex: 1 1 100%; }
    .route-icons { margin-left: 0; }
}
/* ============================================================
   Season badge
   ============================================================ */
.badge { display: inline-block; color: #fff; padding: 2px 8px;
         border-radius: 3px; font-size: 0.8em; font-family: 'Inter', sans-serif; }

/* ============================================================
   Timetable table
   ============================================================ */
.timetable {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 24px;
    font-size: 0.95em;
}
.timetable th {
    background: #2E546B;
    color: #fff;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.timetable td {
    padding: 9px 12px;
    border-bottom: 1px solid #dde;
    vertical-align: top;
}
.timetable tbody tr:nth-child(even) {
    background: #f5f8fc;
}
.timetable tbody tr:hover {
    background: #e8f0fa;
}
.timetable tbody tr:last-child td {
    border-bottom: none;
}
.timetable td:first-child {
    font-weight: 600;
    color: #2E546B;
    white-space: nowrap;
}
.timetable td.times {

    font-size: 1em;
    letter-spacing: 0.05em;
}
@media (max-width: 600px) {
    .timetable th, .timetable td { padding: 7px 8px; font-size: 0.88em; }
}


/* ============================================================
   Disclaimer box
   ============================================================ */
.disclaimer-box { background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px;
                  padding: 16px 20px; margin: 32px 0; }
.disclaimer-box p { color: #5d4037; font-size: 0.97em; }
.disclaimer-box strong { display: block; margin-bottom: 6px; color: #4e342e; }

/* Route page disclaimer (plain text) */
.disclaimer { font-size: 0.82em; color: #999; margin-top: 24px;
              padding-top: 16px; border-top: 1px solid #eee; }
.disclaimer a { color: #888; }

/* ============================================================
   No content
   ============================================================ */
.no-content { color: #888; font-style: italic; padding: 16px 0; }

/* ============================================================
   Footer
   ============================================================ */
footer { background: #2E546B; color: #aac; padding: 24px 0; margin-top: 60px;
         font-size: 0.9em; text-align: center; }
footer a { color: #cde; text-decoration: none; }
footer a:hover { color: #fff; }
footer .footer-links { margin-top: 8px; }
footer .footer-links a { margin: 0 10px; }

/* ============================================================
   Region page - quick links
   ============================================================ */
.quick-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.quick-links a { background: #f0f4f8; border: 1px solid #ccd; border-radius: 4px;
                 padding: 5px 14px; text-decoration: none; color: #2E546B; font-size: 0.9em; }
.quick-links a:hover { background: #2E546B; color: #fff; }

/* Region page - subregion sections */
.subregion { margin: 36px 0; }
.subregion-title { font-size: 1.5em; color: #2E546B; padding: 10px 0 8px;
                   border-bottom: 3px solid #2E546B; margin-bottom: 20px;
                   display: flex; align-items: center; justify-content: space-between; }
.subregion-title span { display: flex; align-items: center; gap: 8px; }
.subregion-title a { font-size: 0.6em; color: #2E546B; text-decoration: none;
                     font-weight: normal; border: 1px solid #2E546B;
                     padding: 3px 10px; border-radius: 3px; }
.subregion-title a:hover { background: #2E546B; color: #fff; }

/* Region page - routes heading */
.routes-heading { font-size: 1.1em; font-weight: bold; color: #333;
                  margin: 20px 0 12px; padding-left: 10px;
                  border-left: 3px solid #2E546B; }

/* Region page - route rows */
.route-row { border: 1px solid #e0e0e0; border-radius: 5px; padding: 12px 16px;
             margin-bottom: 10px; display: flex; flex-wrap: wrap;
             align-items: flex-start; gap: 12px; }
.route-row:hover { border-color: #2E546B; }
.route-row .rr-name { flex: 1 1 260px; }
.route-row .rr-name a { font-weight: bold; color: #2E546B; text-decoration: none; font-size: 1.05em; }
.route-row .rr-name a:hover { text-decoration: underline; }
.route-row .rr-name .rr-operator { font-size: 0.85em; color: #555; margin-top: 2px; }
.route-row .rr-name .rr-operator a { color: #555; }
.route-row .rr-details { flex: 2 1 320px; display: flex; flex-wrap: wrap;
                          gap: 10px; font-size: 0.88em; color: #444; align-items: center; }
.route-row .rr-details .d { display: flex; align-items: center; gap: 3px; }
.route-row .rr-book a { display: inline-block; background: #2E546B; color: #fff;
                         padding: 5px 14px; border-radius: 4px; text-decoration: none;
                         font-size: 0.85em; white-space: nowrap; }
.route-row .rr-book a:hover { background: #2a5a8c; }
.route-row .rr-notes { flex: 1 1 100%; font-size: 0.83em; color: #777;
                        font-style: italic; border-top: 1px solid #eee;
                        padding-top: 6px; margin-top: 2px; }
.external-section { margin: 36px 0; }

/* ============================================================
   Route page - two column layout
   ============================================================ */
.route-layout { display: flex; gap: 32px; margin-top: 24px; align-items: flex-start; }
.route-main   { flex: 1 1 620px; min-width: 0; }
.route-aside  { flex: 0 0 240px; }

/* Route arrow */
.route-arrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.route-arrow .port-box { background: #f0f4f8; border: 1px solid #ccd; border-radius: 6px;
                          padding: 12px 16px; text-align: center; min-width: 150px; flex: 1; }
.route-arrow .port-box a { color: #2E546B; text-decoration: none; }
.route-arrow .port-box a:hover { text-decoration: underline; }
.route-arrow .port-box .pname { font-weight: bold; font-size: 1.1em; }
.route-arrow .port-box .pmeta { font-size: 0.82em; color: #666; margin-top: 3px; }
.route-arrow .arrow { font-size: 2em; color: #2E546B; flex: 0 0 auto; }

/* Route facts grid */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
         gap: 12px; margin: 24px 0; }
.fact  { background: #f5f8fc; border: 1px solid #dde; border-radius: 6px; padding: 12px 14px; }
.fact .flabel { font-size: 0.78em; text-transform: uppercase; color: #888;
                letter-spacing: 0.05em; margin-bottom: 4px; }
.fact .fvalue { font-size: 1em; font-weight: bold; color: #2E546B; }
.fact .fsub   { font-size: 0.82em; color: #666; margin-top: 2px; }

/* Season bar (route page) */
.season-bar { border-radius: 4px; padding: 4px 10px; color: #fff;
              font-weight: bold; display: inline-block; font-size: 0.9em; }

/* Notes box */
.notes-box { background: #f0f4f8; border-left: 4px solid #4a7c9e; padding: 14px 18px; margin: 20px 0; border-radius: 0 8px 8px 0; font-size: 0.93em; color: #334; line-height: 1.6; }
.notes-box strong { color: #1a3a5c; font-weight: 700; }
.notes-box ul { margin: 6px 0 0 0; padding-left: 18px; }
.notes-box li { margin-bottom: 4px; }
.notes-box a { color: #1a5276; }

/* Operator box */
.operator-box { border: 1px solid #dde; border-radius: 6px; padding: 16px 18px; margin: 24px 0; }
.operator-box h3 { color: #2E546B; margin-bottom: 8px; font-size: 0.85em;
                   text-transform: uppercase; letter-spacing: 0.05em; }
.operator-box .oname { font-size: 1.1em; font-weight: bold; margin-bottom: 6px; }
.operator-box .oname a { color: #2E546B; text-decoration: none; }
.operator-box .oname a:hover { text-decoration: underline; }
.operator-box .osite a { color: #2E546B; font-size: 0.9em; }
.operator-box .onotes { font-size: 0.88em; color: #666; margin-top: 8px; }

/* Book button */
.book-btn { display: block; background: #2E546B; color: #fff; text-align: center;
            padding: 14px; border-radius: 6px; text-decoration: none;
            font-size: 1.05em; font-weight: bold; margin: 20px 0; transition: background 0.2s; }
.book-btn:hover { background: #2a5a8c; }
.book-note { font-size: 0.82em; color: #888; text-align: center;
             margin-top: -12px; margin-bottom: 20px; }

/* Aside boxes */
.aside-box { border: 1px solid #dde; border-radius: 6px; padding: 14px 16px; margin-bottom: 20px; }
.aside-box h3 { font-size: 0.85em; text-transform: uppercase; color: #888;
                letter-spacing: 0.05em; margin-bottom: 12px; }
.aside-route { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 0.9em; }
.aside-route:last-child { border-bottom: none; padding-bottom: 0; }
.aside-route a { color: #2E546B; text-decoration: none; font-weight: bold; }
.aside-route a:hover { text-decoration: underline; }
.aside-route .ar-meta { font-size: 0.82em; color: #777; margin-top: 2px; }

/* Port links in aside */
.port-link { display: block; color: #2E546B; text-decoration: none;
             padding: 8px 0; border-bottom: 1px solid #eee; font-size: 0.92em; }
.port-link:last-child { border-bottom: none; }
.port-link:hover { text-decoration: underline; }
.port-link .pl-meta { font-size: 0.8em; color: #888; display: block; margin-top: 2px; }

/* ============================================================
   Operator listing page
   ============================================================ */
.operator-card { border: 1px solid #ddd; border-radius: 6px; padding: 20px 24px;
                 margin-bottom: 20px; transition: box-shadow 0.2s; }
.operator-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.op-header { display: flex; align-items: center; gap: 20px; margin-bottom: 12px; }
.op-logo { flex-shrink: 0; }
.op-logo img { height: 56px; width: auto; max-width: 140px; object-fit: contain; }
.op-logo-placeholder { width: 56px; height: 56px; background: #2E546B; color: #fff;
                        border-radius: 6px; display: flex; align-items: center;
                        justify-content: center; font-size: 1.2em; font-weight: bold; }
.op-title h2 { font-size: 1.25em; color: #2E546B; margin-bottom: 4px; }
.op-title h2 a { color: #2E546B; text-decoration: none; }
.op-title h2 a:hover { text-decoration: underline; }
.op-meta { font-size: 0.88em; color: #666; display: flex; flex-wrap: wrap; gap: 12px; }
.op-meta a { color: #2E546B; }
.op-notes { font-size: 0.93em; color: #444; margin-bottom: 12px;
            border-left: 3px solid #eee; padding-left: 12px; }
.op-link { display: inline-block; font-size: 0.9em; color: #2E546B;
           text-decoration: none; font-weight: bold; }
.op-link:hover { text-decoration: underline; }
.rc-port-links {
    font-size: 0.85em;
    white-space: nowrap;
    flex-shrink: 0;
}
.rc-port-links a {
    color: #2E546B;
    text-decoration: none;
}
.rc-port-links a:hover { text-decoration: underline; }

/* ============================================================
   Islands list page
   ============================================================ */
.islands-table { width: 100%; border-collapse: collapse; font-size: 0.95em; margin-bottom: 12px; }
.islands-table th { background: #2E546B; color: #fff; padding: 10px 14px;
                    text-align: left; font-size: 0.85em; text-transform: uppercase;
                    letter-spacing: 0.04em; }
.islands-table td { padding: 10px 14px; border-bottom: 1px solid #eee; vertical-align: middle; }
.islands-table tr:hover td { background: #f5f8fc; }
.islands-table .island-name { font-weight: bold; }
.islands-table .island-name a { color: #2E546B; text-decoration: none; }
.islands-table .island-name a:hover { text-decoration: underline; }
.islands-table .uninhabited { color: #aaa; font-style: italic; font-size: 0.88em; }
.route-badge { display: inline-block; background: #2E546B; color: #fff;
               border-radius: 3px; padding: 2px 8px; font-size: 0.82em; }
.route-badge.none { background: #eee; color: #aaa; }

/* ============================================================
   Homepage specific
   ============================================================ */
.home-hero { background: linear-gradient(135deg, #2E546B 0%, #2a6090 100%);
             color: #fff; padding: 60px 0 50px; text-align: center; }
.home-hero h1 { font-size: 2.4em; margin-bottom: 14px; line-height: 1.2; }
.home-hero p  { font-size: 1.15em; color: #cde; max-width: 600px; margin: 0 auto 30px; }

.search-box { max-width: 560px; margin: 0 auto; }
.search-box form { display: flex; gap: 8px; }
.search-box input { flex: 1; padding: 13px 16px; border: none; border-radius: 5px;
                    font-size: 1em; font-family: 'Inter', sans-serif; outline: none; }
.search-box button { padding: 13px 22px; background: #f59e0b; color: #2E546B;
                     border: none; border-radius: 5px; font-size: 1em;
                     font-weight: bold; cursor: pointer; white-space: nowrap; }
.search-box button:hover { background: #d97706; }
.search-hint { font-size: 0.82em; color: #9ab; margin-top: 8px; text-align: center; }
.search-results { background: #fff; border-radius: 5px; margin-top: 6px;
                  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
                  display: none; text-align: left; overflow: hidden; }
.search-results.active { display: block; }
.sr-item { padding: 10px 16px; border-bottom: 1px solid #eee; cursor: pointer;
           font-size: 0.95em; color: #222; }
.sr-item:last-child { border-bottom: none; }
.sr-item:hover { background: #f0f4f8; }
.sr-item .sr-type { font-size: 0.78em; color: #888; text-transform: uppercase; margin-left: 8px; }
.sr-item .sr-sub  { font-size: 0.82em; color: #666; margin-top: 2px; }

.stats-bar { background: #f0f4f8; padding: 24px 0; border-bottom: 1px solid #dde; }
.stats-bar .wrap { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.stat-item { text-align: center; }
.stat-item .num { font-size: 2em; font-weight: bold; color: #2E546B; }
.stat-item .lbl { font-size: 0.85em; color: #666; text-transform: uppercase;
                  letter-spacing: 0.05em; margin-top: 2px; }

.home-section { padding: 44px 0; }
.home-section-alt { background: #f8fafc; }
.home-section h2 { font-size: 1.6em; color: #2E546B; margin-bottom: 8px; }
.home-section .section-sub { color: #666; margin-bottom: 28px; font-size: 0.98em; }

.intro-text { max-width: 720px; }
.intro-text p { margin-bottom: 14px; font-size: 1.05em; color: #333; }
.intro-text p:last-child { margin-bottom: 0; }

.regions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.region-card { border: 1px solid #dde; border-radius: 8px; padding: 20px 18px;
               text-decoration: none; color: #222; display: block;
               transition: box-shadow 0.2s, border-color 0.2s; background: #fff; }
.region-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.1); border-color: #2E546B; }
.region-card .rc-icon { font-size: 1.8em; color: #2E546B; margin-bottom: 10px; }
.region-card .rc-name { font-weight: bold; color: #2E546B; font-size: 1.05em; margin-bottom: 6px; }
.region-card .rc-desc { font-size: 0.84em; color: #666; line-height: 1.4; }

.featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.feat-card { border: 1px solid #dde; border-radius: 8px; padding: 18px 20px;
             text-decoration: none; color: #222; display: block;
             transition: box-shadow 0.2s, border-color 0.2s; background: #fff; }
.feat-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.1); border-color: #2E546B; }
.feat-card .fc-route { font-weight: bold; color: #2E546B; font-size: 1.05em; margin: 8px 0; }
.feat-card .fc-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85em; color: #555; }
.feat-card .fc-meta .m { display: flex; align-items: center; gap: 4px; }
.feat-card .fc-notes { font-size: 0.82em; color: #777; margin-top: 8px; font-style: italic;
                        border-top: 1px solid #eee; padding-top: 8px; line-height: 1.4; }

.operators-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.op-card { border: 1px solid #dde; border-radius: 6px; padding: 14px 16px;
           text-decoration: none; color: #222; display: block;
           transition: box-shadow 0.2s, border-color 0.2s; background: #fff; }
.op-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-color: #2E546B; }
.op-card .oc-name { font-weight: bold; color: #2E546B; font-size: 0.98em; margin-bottom: 4px; }
.op-card .oc-meta { font-size: 0.82em; color: #777; }

.home-footer { background: #2E546B; color: #aac; padding: 32px 0; font-size: 0.9em; }
.home-footer .wrap { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.home-footer h3 { color: #cde; font-size: 0.95em; margin-bottom: 10px;
                  text-transform: uppercase; letter-spacing: 0.05em; }
.home-footer a { color: #9ab; text-decoration: none; display: block; margin-bottom: 5px; }
.home-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #2a5a8c; margin-top: 24px; padding-top: 16px;
                 text-align: center; font-size: 0.85em; color: #778; }
/*================================================================
Region List
============================================================= */
.country-heading {
    font-size: 1.3em;
    color: #2E546B;
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #2E546B;
}
.parent-heading {
    font-size: 1.2em;
    color: #2E546B;
    margin: 20px 0 8px;
	border-bottom: 2px solid #2E546B;
}
.regions-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.region-card-wide {
    display: flex; align-items: center; gap: 16px;
    background: #fff; border: 1px solid #dde; border-radius: 6px;
    padding: 14px 18px; text-decoration: none; color: #222;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.region-card-wide:hover { border-color: #2E546B; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.rcw-left { font-size: 1.4em; color: #2E546B; min-width: 28px; text-align: center; }
.rcw-body { flex: 1; }
.rcw-name { font-size: 1.05em; font-weight: bold; color: #2E546B; margin-bottom: 4px; }
.rcw-stats { font-size: 0.85em; color: #666; display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.rcw-stats span { white-space: nowrap; }
.rcw-desc { font-size: 0.85em; color: #888; line-height: 1.4; }
.rcw-arrow { color: #bbb; font-size: 0.9em; }
/* ============================================================
   Island hopping
   ============================================================ */
.hop-section { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.hop-card { background: #f5f8fc; border: 1px solid #dde; border-radius: 6px; padding: 14px 18px; }
.hop-title { font-size: 1.05em; color: #2E546B; margin-bottom: 10px; }
.hop-title a { color: #2E546B; text-decoration: none; font-weight: 600; }
.hop-title a:hover { text-decoration: underline; }
.hop-direct, .hop-indirect { margin-bottom: 8px; font-size: 0.92em; }
.hop-label { font-weight: 600; color: #2E546B; display: block; margin-bottom: 4px; }
.hop-text { display: block; margin-left: 16px; color: #444; margin-bottom: 4px; }
.hop-text a { color: #2E546B; text-decoration: none; }
.hop-text a:hover { text-decoration: underline; }
.hop-leg-label {
    font-size: 0.78em;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.04em;
    margin-right: 3px;
}
.hop-indirect-link {
    font-weight: 600;
    color: #2E546B;
    text-decoration: none;
}
.hop-indirect-link:hover { text-decoration: underline; }
.hop-legs {
    font-size: 0.85em;
    color: #666;
}
/* ============================================================
   Indirect connection timeline
   ============================================================ */
.hop-timeline {
    margin: 8px 0 12px 0;
    padding-left: 12px;
}
.hop-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    margin-bottom: 0;
}
.hop-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2E546B;
    flex-shrink: 0;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.hop-timeline-dot.transfer {
    background: #fff;
    border: 2px solid #2E546B;
}
.hop-timeline-line {
    width: 2px;
    background: #2E546B;
    flex-shrink: 0;
    margin-left: 5px;
    height: 32px;
    opacity: 0.4;
}
.hop-timeline-content {
    flex: 1;
    padding-bottom: 8px;
    font-size: 0.92em;
}
.hop-timeline-content a {
    color: #2E546B;
    text-decoration: none;
    font-weight: 600;
}
.hop-timeline-content a:hover { text-decoration: underline; }
.hop-timeline-content .hop-leg-info {
    font-size: 0.85em;
    color: #888;
    margin-top: 2px;
}
.hop-transfer-label {
    font-size: 0.78em;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.04em;
    margin-top: 2px;
}
/* ============================================================
   Route prose display
   ============================================================ */
.route-prose {
    background: #f5f8fc;
    border: 1px solid #dde;
    border-radius: 6px;
    padding: 20px 24px;
    margin-bottom: 20px;
    font-size: 1em;
    line-height: 1.8;
}
.route-prose p {
    margin-bottom: 10px;
}
.route-prose p:last-child {
    margin-bottom: 0;
}
.route-prose h4 {
    font-size: 1em;
    color: #2E546B;
    margin: 16px 0 6px;
}
.route-prose h5 {
    font-size: 0.9em;
    color: #555;
    margin: 12px 0 4px;
}
.route-prose-note {
background: #f0f4f8; border-left: 4px solid #4a7c9e; padding: 14px 18px; margin: 20px 0; border-radius: 0 8px 8px 0; font-size: 0.93em; color: #334; line-height: 1.6; }
.route-prose-meta {
    font-size: 0.85em;
    color: #888;
    margin-top: 12px;
}
/* ============================================================
   Route tabs
   ============================================================ */
.route-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #2E546B;
}
.route-tab {
    padding: 10px 24px;
    background: #f0f4f8;
    border: none;
    border-bottom: none;
    cursor: pointer;
    font-size: 0.95em;
    font-family: 'Inter', sans-serif;
    color: #555;
    border-radius: 4px 4px 0 0;
    margin-right: 4px;
    transition: background 0.15s, color 0.15s;
}
.route-tab:hover { background: #dde6f0; color: #2E546B; }
.route-tab.active {
    background: #2E546B;
    color: #fff;
    font-weight: bold;
}
@media (max-width: 600px) {
    .route-tabs {
        flex-wrap: wrap;
    }
    .route-tab {
        flex: 1 1 auto;
        text-align: center;
        padding: 10px 12px;
        font-size: 0.85em;
    }
}
/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 700px) {
    .route-layout { flex-direction: column; }
    .route-aside  { flex: none; width: 100%; }
    .facts { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .hero h1 { font-size: 1.5em; }
    .info-box { flex-direction: column; gap: 10px; }
    .ports-grid { grid-template-columns: 1fr 1fr; }
    header .wrap { flex-direction: column; align-items: flex-start; }
    .hero .stats { gap: 10px; }
    .home-hero h1 { font-size: 1.7em; }
    .home-hero p  { font-size: 1em; }
    .stats-bar .wrap { gap: 20px; }
    .stat-item .num { font-size: 1.5em; }
    .search-box form { flex-direction: column; }
    .regions-grid { grid-template-columns: 1fr 1fr; }
    .featured-grid { grid-template-columns: 1fr; }
    .home-footer .wrap { flex-direction: column; gap: 20px; }
}
@media (max-width: 600px) {
    .route-box { flex-wrap: wrap; }
    .route-name { flex: 1 1 100%; }
    .route-box .rc-meta { flex-wrap: wrap; width: 100%; margin-left: 0; }
    .route-icons { margin-left: 0; }
}