/* ==========================================================================
   theme.css — Modern UI refresh (blue primary + orange accent)
   Layered on top of existing styles. Remove the <link> in _Layout to revert.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    --js-blue: #0a66c2;
    --js-blue-dark: #074a8c;
    --js-blue-soft: #eaf3fb;
    --js-orange: #ff8a00;
    --js-orange-dark: #e67a00;
    --js-ink: #1c2733;
    --js-muted: #5b6b7a;
    --js-radius: 14px;
    --js-shadow: 0 10px 30px rgba(16, 42, 67, .10);
}

/* ---------- Base typography ---------- */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    color: var(--js-ink);
}
h1, h2, h3, h4, h5, .navbar-brand, .card-title {
    font-family: 'Poppins', system-ui, sans-serif !important;
    letter-spacing: -.01em;
}

/* ---------- Navbar (keep original orange header — only polish links) ---------- */
.navbar-nav .nav-link {
    font-weight: 500;
    border-radius: 8px;
    transition: background .2s, transform .2s;
}
.navbar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .15);
    transform: translateY(-1px);
}

/* ---------- Buttons ---------- */
.btn-warning {
    background: var(--js-orange) !important;
    border-color: var(--js-orange) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(255, 138, 0, .30);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-warning:hover {
    background: var(--js-orange-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255, 138, 0, .40);
}
.btn-outline-warning {
    border-radius: 10px;
    font-weight: 600;
    border-color: var(--js-orange) !important;
    color: var(--js-orange-dark) !important;
}
.btn-outline-warning:hover {
    background: var(--js-orange) !important;
    color: #fff !important;
}

/* ---------- Hero carousel ---------- */
#heroCarousel .carousel-item img {
    filter: brightness(.82);
}
#heroCarousel .carousel-caption h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}
#heroCarousel .carousel-caption p {
    font-size: 1.1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

/* ---------- Search box ---------- */
.searchFormTitle {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
form.searchForm {
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(6px);
    border: none !important;
    border-radius: var(--js-radius) !important;
    box-shadow: var(--js-shadow) !important;
    padding: 1.25rem 1.25rem !important;
}
form.searchForm .form-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: var(--js-muted);
}
form.searchForm .form-control,
form.searchForm .form-select,
form.searchForm .dropdown-toggle {
    border-radius: 10px !important;
    border: 1px solid #dde5ec !important;
    padding: .55rem .8rem;
}
#searchBtn {
    border-radius: 10px;
    width: 100%;
}

/* ---------- Section headings ---------- */
section h2, section h3 {
    font-weight: 700;
}
section h3.text-center::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    background: var(--js-orange);
    border-radius: 4px;
    margin: .6rem auto 0;
}

/* ---------- Sunshine special cards ---------- */
.special-card {
    border: none !important;
    border-radius: var(--js-radius) !important;
    overflow: hidden;
    box-shadow: var(--js-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.special-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(16, 42, 67, .18);
}
.special-card .card-img-top {
    transition: transform .5s ease;
}
.special-card:hover .card-img-top {
    transform: scale(1.06);
}
.price-badge {
    background: var(--js-orange);
    color: #fff;
    font-weight: 600;
    padding: .35rem .7rem;
    border-radius: 999px;
    position: absolute;
    top: 12px;
    right: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    font-size: .85rem;
}

/* ---------- Footer polish ---------- */
.footer-col-link { transition: color .15s; }
.footer-col-link:hover { color: var(--js-orange) !important; }

/* ---------- News & offers section bg ---------- */
.bg-gradient {
    background: var(--js-blue-soft) !important;
}

/* ==========================================================================
   GLOBAL POLISH — applies to all inner pages (About, Contact, Destination…)
   ========================================================================== */

/* Breathing room for page content */
main { min-height: 50vh; }
.page-content-area { padding-top: 2.5rem; padding-bottom: 3rem; }

/* Headings rhythm */
.page-content-area h1 { font-weight: 700; margin-bottom: .75rem; }
.page-content-area h2 { font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; }
.page-content-area h3 { font-weight: 600; margin-top: 1.5rem; }

/* Content links (orange, not buttons/nav/footer) */
.page-content-area a:not(.btn) {
    color: var(--js-blue);
    text-decoration: none;
    font-weight: 500;
}
.page-content-area a:not(.btn):hover {
    color: var(--js-orange-dark);
    text-decoration: underline;
}

/* Generic cards everywhere */
.card {
    border: none;
    border-radius: var(--js-radius);
    box-shadow: 0 6px 20px rgba(16, 42, 67, .08);
}

/* Form controls everywhere */
.form-control, .form-select {
    border-radius: 10px;
    border: 1px solid #dde5ec;
    padding: .55rem .8rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--js-orange);
    box-shadow: 0 0 0 .2rem rgba(255, 138, 0, .15);
}

/* Tables (e.g. admin-style data on inner pages) */
.table thead th {
    background: var(--js-blue-soft);
    color: var(--js-ink);
    border: none;
    font-weight: 600;
}

/* Primary buttons that aren't warning -> brand them */
.btn-primary {
    background: var(--js-blue) !important;
    border-color: var(--js-blue) !important;
    border-radius: 10px;
    font-weight: 600;
}
.btn-primary:hover { background: var(--js-blue-dark) !important; }

/* Banner area on offer/info pages */
.Sunshine-Special-banner {
    background: linear-gradient(120deg, var(--js-blue-soft), #fff);
    border-radius: var(--js-radius);
}

/* Hero captions readability (extra) */
#heroCarousel .carousel-item img { height: 70vh; object-fit: cover; }
@media (max-width: 768px) {
    #heroCarousel .carousel-item img { height: 50vh; }
}