@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');


/* Colour section to easy style pages */
:root {
    /* P = Primary | S = Secondary L = Links */
    --p-text: #CE1126;
    --p-highlight: #FFFFF0;
    --s-text: #FF7B1F;
    --s-highlight: #F2DDA0;
    --l-highlight: #007A3D;
    
    /* --- BOOTSTRAP OVERRIDES --- */
    --bs-primary: var(--p-text);
    --bs-body-font-family: 'Quicksand', sans-serif;
    --bs-link-color: var(--l-highlight);
}

/* Asterisk selector added to not interfere with the specific designs e.g. adding more width than wanted. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

body { 
    overflow-x: hidden;
    overflow-y: auto; 
}

main { 
    flex: 1;
    position: relative;
    z-index: 1; 
}

/* Typography */
h1, h2, h3 {
    letter-spacing: 2px;
    color: var(--p-text);
    font-weight: bolder;
}

/* The Global Theme Background */
.bg-travel-theme {
    background: linear-gradient(rgba(255, 255, 240, 0.6), rgba(255, 255, 240, 0.6)), 
                url("../images/pin-map_1.avif") no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Header */
header {
    background: url("../images/header.webp") no-repeat center center/cover;
    border-bottom: 4px solid var(--p-text);
}

header h1, header p {
    background-color: rgba(242, 221, 160, 0.8) !important;
    color: var(--p-text) !important;
    border-radius: 8px;
    padding: 10px;
}

/* 404 styles (header) */
#error-title {
    font-size: 300%;
    margin: 5px;
}

/* Navigation */
.navbar {
    background-color: var(--s-highlight) !important;
    box-shadow: 0 0 6px 4px #FFEAAA;
}

.navbar-nav .nav-link {
    color: var(--s-text) !important;
    transition: color 0.3s ease-in-out;
}

.navbar-toggler i { 
    color: var(--s-text) !important;
    transition: color 0.3s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active, 
.navbar-toggler:hover i {
    color: var(--p-text) !important; 
    font: bold;
}

/* Main content */
.card {
    background-color: var(--s-highlight) !important;
    border: none !important;
    color: var(--p-text) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Softer shadow */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
}

.card:hover { 
    transform: translateY(-10px) !important; /* Adds hover effect */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2) !important; 
}

.btn-outline-primary {
    color: var(--l-highlight) !important;
    border-color: var(--l-highlight) !important;
    font-weight: bold;
}

.btn-outline-primary:hover {
    background-color: var(--l-highlight) !important;
    color: var(--p-highlight) !important;
}

/* Gallery styles */
/* Ensures the images fill the square container without stretching */
.object-fit-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.gallery-card {
    background: transparent !important; /* Removes card background so only the photo shows */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth "bouncy" feel */
    overflow: hidden; /* Keeps the rounded corners tidy during zoom */
}

/* Hover Effect: Slight Zoom and Shadow */
.gallery-card:hover {
    transform: scale(1.08); /* Zooms in slightly */
    z-index: 10; /* Ensures the zoomed image stays on top of neighbors */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Utility Colors for the Video Card & Text */
.text-p { color: var(--p-text) !important; }
.text-s { color: var(--s-text) !important; }
.bg-s { background-color: var(--s-highlight) !important; }

/* Modal Video Styling */
.modal-content {
    border: none;
    background-color: var(--s-highlight);
}

.modal-header {
    border-bottom: 2px solid var(--p-text);
}

/* Form styles */
#form {
    width: 100%;
    padding: 60px 0;
    display: flex;
    align-items: center;
}

#form .card {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto;
    margin-right: auto;
}

.bg-transparent-light {
    background-color: rgba(255, 224, 163, 0.8) !important;
}

fieldset {
  border: 1px solid var(--s-highlight);
  padding: 1.5rem;
  border-radius: 1rem;
}

legend {
  width: auto;
  float: none;
  padding: 0 0.5rem;
}

.form-check-input:checked {
    background-color: var(--l-highlight);
    border-color: var(--l-highlight);
}

.form-check-input {
    cursor: pointer;
    width: 1.2em;
    height: 1.2em;
}

.btn-success {
    background-color: var(--l-highlight) !important;
    border-color: var(--l-highlight) !important;
}

.btn-success:hover {
    background-color: var(--s-text) !important;
    border-color: var(--s-text) !important;
}

/* Conformation styles */
#confirm-title {
    letter-spacing: -1px; /* Gives it a more modern, high-end travel brand look */
    color: var(--p-text); /* Ensure it uses your brand variable */
}

#form.d-flex {
    display: flex !important;
    min-height: calc(100vh - 160px);
}

/* Make the icon pop */
.display-1 {
    filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.1));
}

/* Smoother progress bar animation */
#redirect-bar {
    transition: width 1s linear;
}

/* Contact styles */
.bg-s {
    background-color: #f8f1e5; /* A slightly darker ivory/sand to contrast the white form */
}

/* Hover effect for social icons */
.text-p i:hover {
    color: var(--l-highlight);
    transform: translateY(-3px);
    transition: all 0.3s ease;
}

/* 404 styles */
.display-1.fw-black {
    font-size: 8rem;
    font-weight: 900;
    letter-spacing: -5px;
    line-height: 1;
}

#form.d-flex .container {
    margin-left: auto;
    margin-right: auto;
}

/* Ensure the warning image sits nicely over the text */
#error-img {
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
    animation: float 3s ease-in-out infinite;
}

/* A subtle floating animation for the warning icon */
@keyframes float {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-15px) scale(1.05); }
    100% { transform: translateY(0px) scale(1); }
}

/* Consistency for social links */
footer a.text-p:hover {
    color: var(--l-highlight) !important;
    transition: 0.3s;
}

/* Footer */
footer {
    color: var(--s-text);
    background-color: var(--s-highlight);
    box-shadow: 0 -2px 6px rgba(255, 234, 170, 0.5);
    position: relative;
    z-index: 10;
    clear: both;
}

#socials a i {
    color: var(--s-text);
    transition: all 0.3s ease-in-out;
}

#socials a:hover i { color: var(--p-text); }

/* landscape mobiles */
@media screen and (min-width: 576px) {
    /* Home styles */
    .img-area img {
        height: 500px;
        object-fit: cover;
    }

    /* Error styles */
    #error-img {
        width: 350px;
    }
}

/* Tablets and bigger */
@media screen and (min-width: 768px) {
    header p { font-size: 20px; }

    .navbar-nav .nav-link { font-size: 1.2rem; }

    #socials i { font-size: 200%; }

    /* Gallery styles */
    .gallery-card:hover { transform: scale(1.12); }

    /* Form styles */
    legend { font-size: 1.5rem; }

    .form-label { font-size: 1.1rem; }

    /* 404 styles */
    #error-title {
        font-size: 400%;
        letter-spacing: 5px;
    }

    button {
        font-size: 180%;
    }
    
    #error-wrap {
        font-size: 32px;
        line-height: 45px;
        padding-bottom: 20px;
    }
}

/* Large tablets and laptops */
@media screen and (min-width: 992px) {
    h1 { font-size: 250%; }

    h2 { font-size: 220%; }

    header p {
        font-size: 24px;
    }

    .navbar-nav .nav-link { font-size: 1.5rem; }

    /* Home styles */
    .img-area, .ratio {
        z-index: 2;
    }

    /* Form styles */
    .form-control-lg { font-size: 1rem; }

    #form { background-position: center center; }

    .col-lg-5 {
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    
    /* 404 styles */
    #error-title {
        font-size: 500%;
    }

    button {
        font-size: 200%;
    }
    
    #error-wrap {
        font-size: 40px;
    }
}

/* Large screens */
@media screen and (min-width: 1200px) {
    .navbar-nav .nav-link { font-size: 1.8rem; }

    /* Home styles */
    h1 { font-size: 300%; }

    /* Form styles */
    #form {
        background-position: center;
    }

    #sign-up {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    /* 404 styles */
    #error-title {
        font-size: 600%;
    }

    #navbar button i {
        font-size: 250%
    }
}