/* Main styles for Cruise Recommender */

/* Base font size - standard Bootstrap default */
html {
    font-size: 100% !important; /* 16px base */
}

/* Body font size - readable and standard */
body {
    font-size: 1rem !important; /* 16px */
    line-height: 1.6;
}

/* Heading hierarchy - proportional and aesthetic */
h1, .h1 { font-size: 2.25rem !important; } /* 36px */
h2, .h2 { font-size: 1.875rem !important; } /* 30px */
h3, .h3 { font-size: 1.5rem !important; } /* 24px */
h4, .h4 { font-size: 1.25rem !important; } /* 20px */
h5, .h5 { font-size: 1.125rem !important; } /* 18px */
h6, .h6 { font-size: 1rem !important; } /* 16px */

.display-1 { font-size: 4.5rem !important; } /* 72px */
.display-2 { font-size: 4rem !important; } /* 64px */
.display-3 { font-size: 3.5rem !important; } /* 56px */
.display-4 { font-size: 3rem !important; } /* 48px */
.display-5 { font-size: 2.5rem !important; } /* 40px */
.display-6 { font-size: 2rem !important; } /* 32px */

.lead { font-size: 1.125rem !important; } /* 18px */
.fs-1 { font-size: 2.5rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }

small, .small { font-size: 0.875rem !important; } /* 14px */

/* Navigation Bar - balanced and aesthetic */
.navbar {
    font-size: 1rem !important; /* 16px - standard readable size */
    padding: 0.5rem 0 !important;
}

.navbar-brand {
    font-size: 1.5rem !important; /* 24px - prominent but not overwhelming */
    font-weight: 600;
    padding: 0.25rem 0 !important;
}

.nav-link {
    font-size: 1rem !important; /* 16px - matches navbar base */
    padding: 0.5rem 0.75rem !important;
    font-weight: 500;
}

.navbar .dropdown-menu {
    font-size: 0.95rem !important; /* 15.2px - slightly smaller for dropdown */
}

.navbar .dropdown-item {
    font-size: 0.95rem !important;
    padding: 0.5rem 1rem !important;
}

/* Navigation icons - proportional to text */
.navbar .nav-link i,
.navbar .nav-link .fas,
.navbar .nav-link .far,
.navbar .nav-link .fab {
    font-size: 1em !important; /* Same size as parent text */
}

.navbar-brand i,
.navbar-brand .fas,
.navbar-brand .far,
.navbar-brand .fab {
    font-size: 1em !important; /* Same size as brand text */
}

/* Paragraphs and content - readable */
p {
    font-size: 1rem !important; /* 16px */
    margin-bottom: 1rem;
}

/* Form elements - comfortable sizes */
.form-label {
    font-size: 0.95rem !important; /* 15.2px */
    margin-bottom: 0.5rem !important;
    font-weight: 500;
}

.form-control,
.form-select {
    font-size: 1rem !important; /* 16px */
    padding: 0.5rem 0.75rem !important;
}

.form-select-lg {
    font-size: 1.125rem !important; /* 18px */
    padding: 0.75rem 1rem !important;
}

/* Buttons - proportional */
.btn {
    font-size: 1rem !important; /* 16px */
    padding: 0.5rem 1rem !important;
    font-weight: 500;
}

.btn-lg {
    font-size: 1.125rem !important; /* 18px */
    padding: 0.75rem 1.5rem !important;
}

.btn-sm {
    font-size: 0.875rem !important; /* 14px */
    padding: 0.25rem 0.75rem !important;
}

/* Cards - balanced spacing */
.card {
    margin-bottom: 1rem !important;
}

.card-body {
    padding: 1rem !important;
}

.card-header {
    padding: 0.75rem 1rem !important;
    font-size: 1.125rem !important; /* 18px */
    font-weight: 600;
}

.card-title {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 600;
}

.card-text {
    font-size: 1rem !important; /* 16px */
}

/* Lists - readable */
li {
    font-size: 1rem !important; /* 16px */
}

/* Tables - readable */
td, th {
    font-size: 0.95rem !important; /* 15.2px */
    padding: 0.5rem !important;
}

/* Spacing utilities - balanced */
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }

.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }

.p-5 { padding: 3rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-1 { padding: 0.25rem !important; }

.mb-5 { margin-bottom: 3rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }

.mt-5 { margin-top: 3rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-1 { margin-top: 0.25rem !important; }

.me-5 { margin-right: 3rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-1 { margin-right: 0.25rem !important; }

.ms-5 { margin-left: 3rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-1 { margin-left: 0.25rem !important; }

.g-5 { gap: 3rem !important; }
.g-4 { gap: 1.5rem !important; }
.g-3 { gap: 1rem !important; }
.g-2 { gap: 0.5rem !important; }
.g-1 { gap: 0.25rem !important; }

/* Container padding */
.container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Hero section */
.hero-section {
    background: #FFFFFF;
    color: #111111;
    padding: 2rem 0 !important;
}

/* Feature cards */
.feature-card {
    transition: transform 0.3s ease;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-card .card-body {
    padding: 1.5rem !important;
}

/* Port cards */
.port-card {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.port-card .card-body {
    padding: 1rem !important;
}

/* Stats section */
.stats-section {
    background-color: #f8f9fa;
    padding: 3rem 0 !important;
}

/* Map */
#map {
    height: 500px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#userPortMap {
    height: 400px;
    width: 100%;
    min-height: 400px;
    border-radius: 8px;
}

.port-selector {
    margin-bottom: 1rem !important;
}

/* Modal */
.modal-body {
    padding: 1.5rem !important;
}

.modal-header {
    padding: 1rem 1.5rem !important;
}

.modal-footer {
    padding: 0.75rem 1.5rem !important;
}

/* Badge and labels */
.badge {
    font-size: 0.875rem !important; /* 14px */
    padding: 0.35em 0.65em !important;
}

/* Alert */
.alert {
    font-size: 1rem !important; /* 16px */
    padding: 1rem 1.25rem !important;
}

/* Text utilities */
.text-muted {
    font-size: 0.95rem !important; /* 15.2px */
    color: #333333 !important;
}

.fw-bold {
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    h1, .h1 { font-size: 1.4rem !important; }
    h2, .h2 { font-size: 1.2rem !important; }
    h3, .h3 { font-size: 1.1rem !important; }
    .display-5, .display-6 { font-size: 1.35rem !important; }
    .lead { font-size: 0.95rem !important; }
    .navbar-brand { font-size: 1.05rem !important; }
    .nav-link { font-size: 0.9rem !important; }
    .py-5 { padding-top: 1.4rem !important; padding-bottom: 1.4rem !important; }
    .mb-5 { margin-bottom: 1rem !important; }
    .hero-section { padding: 1.1rem 0 0.9rem !important; }
    .stats-section { padding: 1.4rem 0 !important; }
    .btn-lg { font-size: 0.95rem !important; padding: 0.55rem 1rem !important; }
    #map { height: 260px !important; }
    #userPortMap { height: 220px !important; min-height: 220px !important; }
}