/* HEADER LOGO */

header img {
    /* Makes the image behave like a block so margin auto can center it */
    display: block;

    /* Responsive width based on the page width */
    width: 28%;

    /* Prevents the logo from getting too large */
    max-width: 32rem;

    /* Prevents the logo from getting too small */
    min-width: 16rem;

    /* top = 1.5rem, left/right = auto centers it, bottom = 1rem */
    margin: 1.5rem auto 1rem;
}


/* NAVIGATION */

a {
    /* Removes underline from links */
    text-decoration: none;

    /* Adds clickable space around the link text */
    padding: 0.5rem 0.75rem;

    /* Slightly rounds link hover background */
    border-radius: 0.4rem;

    /* Smooth hover effect */
    transition: background-color 0.4s ease;
}

a:hover {
    background-color: darkblue;
}

a:active {
    color: white;
}

nav {
    /* Places logo, links, and phone number in a flexible row */
    display: flex;

    /* Allows nav items to wrap instead of squeezing badly on small screens */
    flex-wrap: wrap;

    /* Vertically centers items inside the nav bar */
    align-items: center;

    /* Spreads nav items across the available space */
    justify-content: space-evenly;

    background-color: #0B2545;
}

nav .icon {
    /* Controls the small icon/logo inside the nav */
    width: 6.25rem;
}

nav .nav-links {
    /* Allows the links group to size based on its content */
    width: auto;
}

nav .nav-links span {
    font-size: 1rem;

    /* Space around the vertical separators */
    margin: 0 0.5rem;

    color: white;
}

nav .nav-links a {
    /* Prevents link text like “Service Areas” from breaking into two lines */
    white-space: nowrap;

    font-size: 1rem;
    color: yellow;
}

nav .phone-number {
    /* Keeps the phone number on one line */
    white-space: nowrap;

    font-size: 1rem;
    color: red;
}

@media (max-width: 600px) {
    nav {
        /* Centers the nav items instead of spreading them out on small screens */
        justify-content: center;
    }

    nav .icon {
        /* Makes the logo smaller on mobile */
        width: 4rem;
    }

    nav .nav-links {
        /* Gives the links their own full row */
        width: 100%;

        /* Places the links in a flexible row */
        display: flex;

        /* Centers the links horizontally */
        justify-content: center;

        /* Allows links to wrap neatly if they do not fit on one line */
        flex-wrap: wrap;

        /* Adds space between wrapped links after removing separators */
        gap: 0.5rem 1rem;
    }

    nav .nav-links span {
        /* Hides the separator bars on mobile */
        display: none;
    }

    nav .nav-links a {
        /* Slightly reduces link text size for mobile without making it too tiny */
        font-size: 0.85rem;
    }

    nav .phone-number {
        /* Moves the phone number onto its own full row */
        width: 100%;

        /* Centers the phone number */
        text-align: center;

        /* Adds space above the phone number */
        margin-top: 0.5rem;
    }
}


/* SLIDESHOW */

.slideshow-container {
    /* Adds space around the whole slideshow section */
    padding: 2rem;
}

.slider-wrapper {
    /* Allows the dot navigation to be positioned relative to this box */
    position: relative;

    /* Controls the overall slideshow width */
    max-width: 28rem;

    /* Centers the slideshow */
    margin: 0 auto;
}

.slider {
    /* Places slides in a horizontal row */
    display: flex;

    /* Gives the slideshow a portrait-style frame */
    aspect-ratio: 4 / 5;

    /* Allows horizontal scrolling */
    overflow-x: auto;

    /* Makes the scroll stop cleanly on each slide */
    scroll-snap-type: x mandatory;

    /* Smooth scrolling when clicking dot links */
    scroll-behavior: smooth;

    /* Adds depth around the slideshow */
    box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);

    /* Rounds the slideshow corners */
    border-radius: 0.5rem;
}

.slider-wrapper img {
    /* Each image takes up one full slide */
    flex: 1 0 100%;

    /* Slightly smaller than the full frame */
    width: 94%;
    height: 94%;

    /* Makes each image snap to the start of the slider */
    scroll-snap-align: start;

    /* Keeps the full image visible without stretching */
    object-fit: contain;
}

.slider-nav {
    /* Places dot links in a row */
    display: flex;

    /* Space between dots */
    column-gap: 1rem;

    /* Positions dots inside the slideshow wrapper */
    position: absolute;
    bottom: 1.25rem;

    /* Centers the dots horizontally */
    left: 50%;
    transform: translateX(-50%);

    /* Controls stacking order */
    z-index: 0;
}

.slider-nav a {
    /* Dot size */
    width: 0.5rem;
    height: 0.5rem;

    /* Turns square links into circles */
    border-radius: 50%;

    background-color: #fff;
    opacity: 0.75;

    /* Smooth fade when hovering */
    transition: opacity ease 250ms;
}

.slider-nav a:hover {
    opacity: 1;
}


/* MAP */

.map {
    /* Centers the embedded map */
    display: flex;
    justify-content: center;
}

iframe {
    /* Makes the map responsive */
    width: 80%;

    /* Prevents the map from becoming too wide on large screens */
    max-width: 50rem;
}


/* PAGE BACKGROUND */

body {
    /* Main page background color */
    background-color: #c8dced;
}


/* TEXT SECTIONS */

section p,
section h1,
section h3 {
    /* Adds comfortable vertical spacing between lines */
    line-height: 2;

    /* Makes the text box only as wide as its content */
    width: fit-content;

    /* Centers the text box */
    margin: 0 auto;

    /* Keeps text aligned normally inside the centered box */
    text-align: left;
}


/* SERVICE IMAGE SECTIONS */

.service-images {
    /* Places service images in a flexible row */
    display: flex;

    /* Allows images to move to the next row when space runs out */
    flex-wrap: wrap;

    /* Vertically centers images in the row */
    align-items: center;

    /* Spreads images evenly across the row */
    justify-content: space-evenly;
}

.service-images img {
    /* Gives every service image the same frame size */
    width: 14rem;
    height: 10rem;

    /* Fills the frame neatly without stretching, but may crop edges */
    object-fit: cover;
}

.service-category h3 {
    /* Adds space above and below each service category heading */
    margin: 1.5rem auto 1rem;
}


/* LOCATIONS LIST */

.locations {
    /* Adds readable spacing between cities */
    line-height: 2;

    /* Keeps the list only as wide as its content */
    width: fit-content;

    /* Centers the list block */
    margin: 0 auto;

    /* Keeps the list text aligned naturally */
    text-align: left;
}

/* ABOUT ME PAGE */

.about-section {
    /* Keeps the text from stretching too wide on larger screens */
    max-width: 65rem;

    /* Centers the section horizontally */
    margin: 0 auto;

    /* Adds space inside the section so content is not against the edges */
    padding: 1rem;

    /* Increases spacing between lines for easier reading */
    line-height: 2;
}

.about-section h3 {
    /* Creates separation above each subsection heading */
    margin-top: 2rem;

    /* Keeps the heading connected to the content below it */
    margin-bottom: 0.75rem;
}

.about-img {
    /* Makes the image behave like a block element */
    display: block;

    /* Allows text to wrap around the right side of the image */
    float: left;

    /* Sets a controlled image width */
    width: 10rem;

    /* Adds space around the image so text does not touch it */
    margin: 1rem 1rem;
}

/* Mobile styles for smaller screens */
@media (max-width: 600px) {
    .about-img {
        /* Stops text from wrapping beside the image on mobile */
        float: none;

        /* Keeps the image as a block element */
        display: block;

        /* Centers the image horizontally on mobile */
        margin: 0 auto;
    }
}