/* ============================================
   🐾 Brand Color Variables
   ============================================ */
/**
 * @section Brand Color Variables
 * @description Defines the color palette for the website using CSS custom properties.
 * These variables are used throughout the stylesheet to ensure brand consistency.
 */
:root {
    /* Primary Brand Colors */
    --brand-primary: #a0522d;        /* sienna (darker brown): Used for major headings and accents. */
    --brand-accent: #f4a460;         /* sandy-brown (lighter brown): Used for borders and highlights. */

    /* Promotional / Highlight */
    --promo-bg: #fff8dc;             /* cornsilk (light yellow): Background for promotional sections. */

    /* Background Layers */
    --page-bg: #faf0e6;              /* linen (light tan): Overall background color for the page. */
    --card-bg: #ffffff;              /* pure-white — content surface: Background for content cards. */
    --panel-bg: #fdf5e6;             /* old-lace (off-white): Background for smaller panels or embeds. */

    /* Text Hierarchy */
    --text-primary: #6b4f34;         /* dark-brown: Primary text color. */
    --text-secondary: #8b7355;       /* medium-brown: Secondary text color, used for footer or less important text. */

    /* Utility & Dividers */
    --border-light: #d2b48c;         /* tan: For light borders. */
    --divider-line: #eee8aa;         /* pale-goldenrod: For subtle divider lines. */
}

/* ============================================
   🐾 General Body Styles
   ============================================ */
/**
 * @section General Body Styles
 * @description Sets the base styles for the entire document.
 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Modern, system-based font stack for wide compatibility. */
    line-height: 1.6; /* Improves readability. */
    margin: 0; /* Removes default browser margin. */
    padding: 0; /* Removes default browser padding. */
    background: var(--page-bg); /* Sets the page background color from variables. */
    color: var(--text-primary); /* Sets the default text color from variables. */
}

/* ============================================
   🐾 Title Card
   ============================================ */
/**
 * @section Title Card
 * @description Styles the main header/title card of the page.
 */
#title-card {
    display: flex; /* Enables flexbox for side-by-side layout. */
    justify-content: space-between; /* Pushes text and button to opposite ends. */
    align-items: center; /* Vertically aligns content. */
    background: var(--brand-primary); /* Uses the primary brand color for the background. */
    color: var(--card-bg); /* Sets text color to contrast with the background. */
    padding: 1.5rem; /* Standardizes card padding. */
    border-radius: 8px; /* Rounds the corners of the card. */
}

/**
 * @description Removes default text alignment from the container for the title and subtitle.
 */
.title-card-text {
    text-align: left;
}

/**
 * @description Styles the main heading within the title card.
 */
#title-card h1 {
    font-size: 2.5rem; /* Large font size for the main title. */
    margin: 0; /* Removes all default margins. */
    border-bottom: none; /* Removes any default border. */
}

/**
 * @description Styles the subtitle within the title card.
 */
#title-card p {
    margin: 0; /* Removes all default margins. */
}

/* ============================================
   🐾 Main Content
   ============================================ */
/**
 * @section Main Content
 * @description Styles the main container that holds all content sections.
 */
main {
    padding: 1.5rem; /* Adds padding around the main content area. */
    margin: 3rem 3rem 0; /* Adds margin to the top and sides. */
    display: flex; /* Use flexbox to center the main-container. */
    justify-content: center; /* Center the main-container horizontally. */
}

.main-container {
    display: flex;
    flex-direction: column; /* Mobile-first: default to single column */
    gap: 1.5rem;
    width: 100%;
    max-width: 960px; /* Constrains the overall width */
}

.left-column, .right-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/**
 * @description Styles for generic content sections.
 */
section {
    background: var(--card-bg); /* Sets a white background for content cards. */
    padding: 1.5rem; /* Adds internal spacing. */
    border-radius: 8px; /* Rounds the corners. */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds a subtle shadow for depth. */
    width: 100%; /* Ensures the section takes the full width of its container. */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

/**
 * @description Styles for all H2 headings.
 */
h2 {
    color: var(--brand-primary); /* Sets the color to the primary brand color. */
    border-bottom: 2px solid var(--brand-accent); /* Adds a colored underline for emphasis. */
    padding-bottom: 0.5rem; /* Adds space between the text and the underline. */
}

/* ============================================
   🐾 Promotions Section
   ============================================ */
/**
 * @section Promotions Section
 * @description Styles for the promotional offer container.
 */
.promotion-details {
    background: var(--promo-bg); /* Uses the promotional background color. */
    border-left: 5px solid var(--brand-accent); /* Adds a highlight border on the left. */
    padding: 1rem; /* Adds internal spacing. */
    margin-bottom: 1rem; /* Adds space below the promotion. */
    border-radius: 4px; /* Consistent rounding */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Add a subtle base shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Add transition for hover */
}

/* ============================================
   🐾 Services Section
   ============================================ */
/**
 * @section Services Section
 * @description Styles for the services and rates area.
 */
.service-category {
    margin-bottom: 1.5rem; /* Adds space between different service categories. */
}

/**
 * @description Styles for the headings within each service category.
 */
.service-category h3 {
    color: var(--text-primary); /* Sets the text color. */
    margin-bottom: 0.75rem; /* Adds space below the heading. */
    padding-bottom: 0.25rem; /* Adds space between text and border. */
    border-bottom: 1px solid var(--divider-line); /* Adds a subtle divider line. */
}

/**
 * @description A flex container for a single service item, aligning name and price.
 */
.service-item {
    display: flex; /* Enables flexbox layout. */
    justify-content: space-between; /* Pushes the service name and price to opposite ends. */
    padding: 0.5rem 0; /* Adds vertical padding. */
}

/**
 * @description Styles the name of the service.
 */
.service-name {
    flex: 3; /* Allows the name to take up more space. */
    padding-right: 1rem; /* Adds space between the name and the price. */
}

/**
 * @description Styles the price of the service.
 */
.service-price {
    flex: 1; /* Assigns a smaller portion of the space. */
    text-align: right; /* Aligns the price to the right. */
    font-weight: bold; /* Makes the price stand out. */
    color: var(--brand-primary); /* Uses the primary brand color for the price. */
}

/* ============================================
   🐾 About Section
   ============================================ */
/**
 * @section About Section
 * @description Styles for the "About Me" and "About Dog" sections.
 */
.about-container {
    display: flex; /* Enables flexbox layout. */
    flex-wrap: wrap; /* Allows items to wrap onto the next line on smaller screens. */
    gap: 2rem; /* Adds space between the about cards. */
    justify-content: center; /* Centers the items horizontally. */
    align-items: flex-start; /* Aligns items to the top. */
}

/**
 * @description Styles for the individual containers for person and dog info.
 */
.about-me, .about-dog {
    text-align: center; /* Centers the text and image. */
    max-width: 300px; /* Constrains the width of each card. */
}

/**
 * @description Styles for the images in the about section.
 */
.about-container img {
    border-radius: 50%; /* Creates circular images. */
    width: 150px; /* Sets a fixed width. */
    height: 150px; /* Sets a fixed height. */
    object-fit: cover; /* Ensures the image covers the area without distortion. */
    border: 4px solid var(--brand-accent); /* Adds a colored border. */
}

/* ============================================
   🐾 Schedule Section
   ============================================ */
/**
 * @section Schedule Section
 * @description Styles for the embedded calendar section.
 */
.cal-embed {
    min-height: 400px; /* Ensures the container has a minimum height. */
    border: 1px solid var(--border-light); /* Adds a light border. */
    display: flex; /* Enables flexbox layout. */
    justify-content: center; /* Centers content horizontally. */
    align-items: center; /* Centers content vertically. */
    background-color: var(--panel-bg); /* Sets a background color. */
}

/* ============================================
   🐾 Footer
   ============================================ */
/**
 * @section Footer
 * @description Styles for the page footer.
 */
footer {
    text-align: center; /* Centers the copyright text. */
    padding: 1.5rem 1.5rem 3rem; /* Adds padding, with extra at the bottom. */
    color: var(--text-secondary); /* Uses a secondary text color. */
}

/* ============================================
   🐾 Sticky Header
   ============================================ */
/**
 * @section Sticky Header
 * @description Styles for the header that sticks to the top of the page on scroll.
 * It's designed to match the width and style of the main content cards.
 */
#sticky-header {
    position: fixed; /* Fixes the header to the viewport. */
    top: 1.5rem; /* Adds space from the top of the viewport. */
    left: 3rem; /* Aligns with main content margin. */
    right: 3rem; /* Aligns with main content margin. */

    width: auto; /* Width is determined by left/right. */
    max-width: 960px; /* Matches the width of content cards. */
    margin: 0 auto; /* Centers the header when max-width is reached. */
    box-sizing: border-box; /* Ensures padding is included in the total width. */

    background: var(--brand-primary); /* Matches main header background. */
    color: var(--card-bg); /* Matches main header text color. */
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-radius: 8px; /* Matches card corners. */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Matches card shadow. */
    z-index: 1000;

    /* Hides the header off-screen vertically. */
    transform: translateY(-200%);
    transition: transform 0.4s ease-in-out;
}

/**
 * @description Controls the visibility of the sticky header.
 * The `scrolled` class is added to the body via JavaScript.
 */
body.scrolled #sticky-header {
    /* On scroll, brings the header into view. */
    transform: translateY(0);
}

/**
 * @description Container for the text content within the sticky header.
 */
.header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Adds space between text elements. */
}

.header-title {
    font-weight: bold;
    font-size: 1.2rem;
}

.header-divider {
    color: var(--divider-line);
}

/* ============================================
   🐾 Buttons & Navigation
   ============================================ */
/**
 * @section Buttons
 * @description General styles for buttons, including the booking button.
 */
.button {
    background: var(--brand-accent);
    color: var(--card-bg);
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block;
    border: none;
    cursor: pointer;
}

.button:hover {
    background: #e3944a; /* Slightly darker shade for hover. */
    transform: translateY(-2px);
}

/**
 * @description Styles for card links to remove default anchor styling.
 */
.card-link {
    text-decoration: none; /* Removes underline. */
    color: inherit; /* Inherits text color from parent. */
    display: block; /* Ensures the link takes up the full block for better clicking. */
}

.card-link:hover .promotion-details {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

a:focus {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
}

/**
 * @description Adds margin to the booking button in the main title card.
 */
#title-card .booking-button {
    margin-top: 1rem;
}

/**
 * @description Container for header buttons to manage layout.
 */
.header-buttons {
    display: flex;
    align-items: flex-end; /* Aligns buttons to the bottom of the header. */
    flex-direction: row; /* Default to side-by-side for desktop */
    gap: 1rem; /* Increase gap for side-by-side layout */
}

/**
 * @section Iframe Navigation
 * @description Styles for the back/forward buttons for the calendar embed.
 */
.iframe-nav {
    display: flex;
    gap: 0.5rem; /* Adds space between the buttons. */
    margin-bottom: 1rem; /* Adds space below the buttons. */
}

.iframe-nav button {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    padding: 0.5rem; /* Adjusted padding for icons. */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex; /* Enables flexbox for centering. */
    align-items: center; /* Vertically centers the icon. */
    justify-content: center; /* Horizontally centers the icon. */
    width: 40px; /* Gives the button a fixed width. */
    height: 40px; /* Gives the button a fixed height. */
}

.iframe-nav button:hover {
    background-color: var(--divider-line);
}

/**
 * @description Ensures the SVG icons fill the button and use the correct color.
 */
.iframe-nav button svg {
    fill: currentColor; /* Uses the button's text color. */
}


/* ============================================
   🐾 Utility Classes
   ============================================ */
/**
 * @section Utility Classes
 * @description Reusable helper classes.
 */
.hidden {
    display: none; /* Hides an element from the page completely. */
}

/* ============================================
   🐾 Responsive Design
   ============================================ */
/**
 * @section Responsive Design
 * @description Media queries to adjust the layout for smaller screens (e.g., mobile devices).
 */
/* Desktop Layout: Two-column grid */
@media (min-width: 769px) {
    .main-container {
        flex-direction: row;
    }

    .left-column {
        flex: 0 0 40%; /* Assigns 40% of the width to the left column */
    }

    .right-column {
        flex: 1; /* The right column takes the remaining space */
    }

    /* Make the last card in each column fill the remaining space */
    .left-column section:last-child,
    .right-column section:last-child {
        flex-grow: 1;
    }
}

@media (max-width: 768px) {
    /**
     * @description Reduces side margins for the main content on mobile.
     */
    main {
        margin: 1.5rem 1.5rem 0; /* Reduces side margins. */
    }

    /**
     * @description Adjusts sticky header positioning to align with new mobile margins.
     */
    #sticky-header {
        left: 1.5rem; /* Matches main content's mobile margin. */
        right: 1.5rem; /* Matches main content's mobile margin. */
    }

    /**
     * @description Stacks the about cards vertically on smaller screens.
     */
    .about-container {
        flex-direction: column;
    }

    /**
     * @description Reduces the font size of the main title on smaller screens.
     */
    #title-card h1 {
        font-size: 2rem;
    }

    /**
     * @description Stacks title card content vertically on mobile for better flow.
     */
    #title-card {
        flex-direction: column;
        align-items: flex-start; /* Aligns items to the start (left). */
        gap: 1rem; /* Adds space between text and button. */
    }

    /**
     * @description Stacks header buttons vertically on mobile.
     */
    #sticky-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    #title-card .header-buttons, #sticky-header .header-buttons {
        flex-direction: row;
        gap: 0.5rem;
        width: 100%; /* Ensure buttons take full width */
    }

    #title-card .header-buttons .button, #sticky-header .header-buttons .button {
        text-align: center; /* Center text within buttons */
        width: 100%;
    }
}