:root {
    /* Configuration Variables (using modern naming conventions: --scope-property-modifier) */
    --layout-radius: 0.5rem;
    --layout-padding: 0.5rem;

    /* Color Palette (Primary colors for accessibility and design) */
    --color-dark-primary: #1C2529;
    /* Near black, main text color */
    --color-dark-translucent: #1c252980;
    /* Increased opacity for better contrast on glass effects */
    --color-medium-gray: #565954;
    --color-medium-translucent: #56595499;
    /* Adjusted opacity */
    --color-brand-primary: #40A9B0;
    /* Bright teal/cyan */
    --color-brand-translucent: #40a8b099;
    --color-light-primary: #ffffff;
    --color-light-translucent: #ffffffcc;
    /* Increased opacity for better background visibility */
    --color-highlight: #00e69cff;
    --color-highlight-translucent: #00e69c99;
    --color-button-default: #0e76ff;
    --color-button-translucent: #68cce6e6;
    /* Adjusted for better visibility */

    /* Typography Scale (Simplified and using 'font-size' prefix) */
    --font-size-xxl: 3rem;
    /* H1 on desktop */
    --font-size-xl: 2.5rem;
    /* H2 on desktop, equivalent to --main-font-size-l */
    --font-size-l: 2rem;
    /* Equivalent to --main-font-size-ml */
    --font-size-m: 1.25rem;
    /* Default paragraph size */
    --font-size-s: 1rem;
    /* Default link/small text size, equivalent to --main-font-size-s */
    --font-size-xs: 0.875rem;
    /* Adjusted from .75rem for better readability (min 14px) */
    --font-size-xxs: 0.3rem;

    /* Legacy mapping for cleaner code usage */
    --main-radius: var(--layout-radius);
    --main-padding: var(--layout-padding);
    --main-color-dark-o: var(--color-dark-primary);
    --main-color-dark-t: var(--color-dark-translucent);
    --main-color-medium-o: var(--color-medium-gray);
    --main-color-medium-t: var(--color-medium-translucent);
    --main-color-bright-o: var(--color-brand-primary);
    --main-color-bright-t: var(--color-brand-translucent);
    --main-color-light-o: var(--color-light-primary);
    --main-color-light-t: var(--color-light-translucent);
    --main-color-high-o: var(--color-highlight);
    --main-color-high-t: var(--color-highlight-translucent);
    --main-color-button-o: var(--color-button-default);
    --main-color-button-t: var(--color-button-translucent);
    --main-font-size-l: var(--font-size-xl);
    --main-font-size-ml: var(--font-size-l);
    --main-font-size-m: var(--font-size-m);
    --main-font-size-s: var(--font-size-s);
    --main-font-size-xs: var(--font-size-xs);
    --main-font-size-xxs: var(--font-size-xxs);
}

/* Base Styles (Use box-sizing for predictable layouts) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Typography Reset and Base Sizes (Use fluid typography for better responsiveness) */
html {
    /* Base font size for better scaling */
    font-size: 100%;
    /* Default 16px */
}

body {
    font-family: 'Gentium Book Basic', 'EB Garamond', serif;
    /* Prioritize the specified font */
    background-color: var(--main-color-bright-t);
    background-image: url(BKG-full.svg);
    background-size: cover;
    background-repeat: repeat-y;
    background-position: center;
    background-attachment: fixed;
    margin: 0;
    /* Standard practice is 0 margin */
    padding: 1rem;
    /* Use padding instead of margin on body for consistent background */
    text-align: center;
    margin: 0;
    padding: 0;
    /* REMOVE global padding from body */
    text-align: center;
    /* Add global box-sizing insurance */
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
    /* Inherit color unless explicitly set by a class */
    font-size: var(--main-font-size-s);
    word-break: break-all;
    word-wrap: break-word;
        overflow-wrap: break-word;
    /* Inherit size from surrounding context or set base */
}

/* Headings: Using variables consistently */
h1 {
    font-size: var(--font-size-xxl);
    margin-top: 0;
    /* Clean up default margins */
    margin-bottom: var(--layout-padding);
}

h2 {
    font-size: var(--font-size-xl);
    margin-top: 0;
    margin-bottom: var(--layout-padding);
}

h3 {
    font-size: var(--font-size-l);
    margin-top: 0;
    margin-bottom: var(--layout-padding);
}

h4 {
    font-size: var(--main-font-size-m);
    /* Adjusted from 1.5rem to M scale for better flow */
}

h5 {
    font-size: var(--main-font-size-s);
}

p {
    margin: 1rem auto;
    /* Center P tags with margin auto */
    font-size: var(--main-font-size-m);
    font-weight: 600;
    max-width: 35rem;
    /* Increased max-width for better readability on larger screens */
}

/* Lists */
body ul {
    padding: 0;
    list-style: none;
    /* CHANGE 1: Increase max-width for lists to match the panel width */
    max-width: 35rem;
    /* The body ul naturally centers if the width is less than the panel's full width. 
       Since the panel is already wide (min-width: 90%), let's ensure the UL uses the full available width of the panel. */
    width: 100%;
    /* Ensure UL fills panel space */
    max-width: 35rem;
    /* Existing max-width restriction */
    margin: 1rem auto;
    /* Crucial for horizontal centering */
}

body li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
}

.hours li {
    /* Ensure list items are slightly wider/more padded if needed */
    /*padding: 0.5rem 1rem;*/

    /* The width: 100% here is good */
    width: 100%;

    justify-content: space-between;

    /* CHANGE 2: Ensure text uses up the full width of the padding */
    text-align: left;
}

.hours li>div {
    /* CHANGE 3: Remove rigid flex sizing and allow them to take space */
    display: block;

    /* Remove flex-shrink and flex-grow to rely on content sizing and space-between */
    /* flex-shrink: 0; <--- REMOVED */
    /* flex-grow: 0; <--- REMOVED */

    /* Ensure the day names (first div) can take up space, 
       and the time slot (second div) is consistently aligned. */

    /* Explicitly target the time column (second div) for alignment */
    /* text-align: right; <--- REMOVED from the general div rule */

    /* max-width: 50%; <--- REMOVED */

    /* Add a small right margin to the day name to prevent text collision if necessary */
    margin-right: 1rem;
}

/* New Rule: Explicitly align the time column to the right */
.hours li>div:last-child {
    text-align: right;
    /* Use a fixed min-width for the time string to ensure it doesn't wrap 
       unnecessarily, especially if the list contains only a single word (like "Closed") */
    min-width: 6rem;
}

/* New Rule: Allow the day name (first div) to take up the remaining space */
.hours li>div:first-child {
    flex-grow: 1;
    /* Allow the day name to push the time column over */
}

.about {
    /* If the images are floated, the parent container must contain them. */
    /* Using clearfix method */
    overflow: auto;
    width: 100%;
    text-align: left;
    /* Ensure text flows left-aligned within .about */
}

.pabout {
    text-align: left;
    font-size: var(--main-font-size-m);
    font-weight: 600;
    /* Ensure pabout is also block-level and clears floats if needed, 
       but setting overflow: auto on .about handles the clearing. */
}

/* ================== Header and Navigation ================== */

header {
    padding: var(--layout-padding);
    display: flex;
    flex-wrap: wrap;
    gap: var(--layout-padding);
    justify-content: space-evenly;
    align-items: stretch;
}

header a {
    /* Standardized header button sizing */
    flex: 1 0 min(10rem, 100%);
    /* Use min() for better responsiveness: at least 10rem, max 100% */
    font-size: var(--main-font-size-m);
    font-weight: bold;
    cursor: pointer;
    display: grid;
    min-height: 4rem;
    align-content: center;
    text-align: center;
}

header nav a {
    min-height: auto;
    /* Reset flex/grid properties for internal menu links if they were inherited strangely */
    display: block;
}

header img {
    max-height: 4rem;
    max-width: 100%;
    /* No need for header .shadow, use the shadow defined in .glass */
}

header details {
    flex: 1 0 min(10rem, 100%);
    /* Set height 100% of parent flex item to match others */
    height: 4rem;
    position: relative;
    /* Needed for absolute positioning of dropdown */

}

header details>summary {
    font-size: var(--main-font-size-m);
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    min-height: 4rem;
    padding: 0 var(--layout-padding);
    border-radius: 20%;
}

details summary::-webkit-details-marker {
    display: none;
}

header details>nav {
    position: absolute;
    top: 100%;
    /* Position below the summary */
    left: 0;
    padding: var(--layout-padding);
    margin: 0;
    display: grid;
    /* Use a fixed width or max-width for dropdown menus */
    width: min(20rem, 100%);
    z-index: 10;
    /* Ensure dropdown is above other header elements */
    border-top: none;

}

header details>nav a {
    margin: 0.25rem 0;
    /* Reduced margin for tighter menu */
    padding: 0.5rem 1rem;
    /* Reduced padding */
    display: block;
    width: 100%;
}

/* Logo specific styles */
.logogroup {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logoMenuIcon {
    /* Ensure background is centered and contained within the summary box */
    background-size: 80% auto;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ================== Main Content ================== */

main {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    /* Reduced gap for better mobile screen utilization */
    margin-top: 2rem;
    margin-bottom: 5rem;
    /* Reduced margin to rely more on footer positioning */
    z-index: 0;
    justify-content: center;
    /* Center all panels */
    padding: var(--layout-padding);
}

main .panel {
    display: grid;
    /* CHANGE: align-items to center if you want content centered vertically too, 
       otherwise keep it flex-start. Keeping it flex-start to stack cleanly from the top. */
    align-items: flex-start;

    /* KEEP: This centers items horizontally */
    justify-items: center;

    flex-grow: 1;
    padding: 1.5rem;

    /* Keep text-align center as a fallback */
    text-align: center;

    max-width: 35rem;
    min-width: min(90%, 20rem);
}

main .panel ul[aria-label="Designer Frame Brands available at Winthrop Eye Center"] {
    display: flex;
    /* Use flex to wrap the items */
    flex-wrap: wrap;
    justify-content: center;
    /* Center the entire block of logos */
    gap: 1rem;
    /* Space between logos */
    padding: 0;
    max-width: 100%;
    /* Ensure it uses the panel's full width */
}

main .panel ul[aria-label="Designer Frame Brands available at Winthrop Eye Center"]>li {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Define the flexible size for each logo container */
    flex: 1 0 min(8rem, 45%);
    /* Minimum 8rem wide, max 45% of parent width */
    max-width: 12rem;
    /* Cap the max size of a single logo container */

    /* Remove padding set by generic li */
    padding: 0;
}

/* Ensure the link inside the list item fills the space */
main .panel ul[aria-label="Designer Frame Brands available at Winthrop Eye Center"]>li>a {
    width: 100%;
}

main .panel.narrow ul[aria-label="List of Comprehensive Eye Care Services"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center the list items horizontally */
    width: 100%;
}

main .panel.narrow ul[aria-label="List of Comprehensive Eye Care Services"] li {
    /* Override generic body li styling for the services list */
    display: block;
    /* Stack items vertically */
    text-align: center;
    font-size: var(--main-font-size-m);
    /* Use medium size for readability */
    font-weight: 600;
    padding: 0.5rem 0;
    /* Add vertical spacing */
    border-bottom: 1px dashed var(--color-medium-gray);
    /* Optional: add separator */
    width: 100%;
    max-width: 25rem;
    /* Match max-width of p tags for clean look */
}

main .panel.narrow ul[aria-label="List of Comprehensive Eye Care Services"] li:last-child {
    border-bottom: none;
}

.BodyLogo {
    height: auto;
    /* Use auto height to scale correctly */
    width: min(80vw, 30rem);
    /* Max width of 30rem or 80vw */
    flex-grow: 0;
    /* Should not grow unnecessarily */
}

.frontpage {
    font-weight: 600;
    font-size: var(--main-font-size-m);
    text-align: left;

    /* CHANGE: Ensure frontpage container is centered if it doesn't take up 100% width */
    margin: 0 auto;
    width: 100%;
    /* Ensure it spans the full width of the panel's content area */
}

.mapIcon {
    width: min(90%, 20rem);
    /* Fluid width */
    height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: block;
    /* Ensure it takes up full width for centering */
    margin: 0 auto;
}

.fixedWidthPanel {
    /* If max width is required for content focus */
    max-width: 40rem;
    min-width: 90%;
}

.pdfcont {
    width: 100%;
    /* Ensure it spans the full width of the panel */
    height: 80vh;
    /* Set a substantial height so the PDF viewer is visible */
    display: block;
    margin: 1rem 0;
    /* Add vertical margin for spacing */
}

/* We should ensure that panels containing PDFs don't restrict width unnecessarily.
   If pdfBlock is meant to be wider than the standard 35rem panel, 
   we need a rule for it. */
.pdfBlock {
    /* If the standard .panel max-width: 35rem is too small for a PDF, 
       we need to override it here: */
    max-width: 50rem !important;
    /* Example: allowing it to be wider */
    min-width: 90% !important;
}

/* Ensure the embedded object fills its container */
.pdfcont object {
    width: 100%;
    height: 100%;
    display: block;
}

/* Image/Icon styles in main */
main img {
    height: 1.5rem;
    margin: 0;
    border-radius: 5%;
    /* Use 50% for perfect circles */
    padding: 0;
}

main .frameLogo {
    height: auto;
    /* Auto height for logos */
    Width: 80%;
    max-width: 25rem;
    margin: 0.5rem auto;
    display: block;
}

/* Details/Accordion Styling */
main details {
    flex-grow: 1;
    width: 100%;
    /* Important for centering and layout */
}

main details>summary {
    cursor: pointer;
    list-style: none;
    padding: var(--layout-padding);
}

main details>nav {
    padding: 0;
    margin: 1rem;
    display: grid;
    row-gap: 0.5rem;
    /* Reduced gap */
}

main details>nav a {
    border-radius: var(--layout-radius);
    margin: 0;
    padding: 1rem;
    min-width: 15rem;
}

/* Special Element Styling (e.g., Doctor image) */
.dr {
    width: min(40vw, 179px);
    height: auto;
    aspect-ratio: 179 / 307;
    float: left;
    margin: 0 1rem 1rem 0;
    /* Top, Right, Bottom, Left margins */
    shape-outside: url(DR.jpg);
    /* If shape-outside is needed for complex wrap */
    background-clip: content-box;
    background-image: url("DR.jpg");
    background-size: cover;
    background-position: top center;
    border-radius: var(--main-radius);
}

.dr2 {
    width: min(40vw, 179px);
    height: auto;
    aspect-ratio: 179 / 307;
    float: right;
    margin: 1rem 0 0 1rem;
    shape-outside: url(doc-1.jpg);
    background-clip: content-box;
    background-image: url("doc-1.jpg");
    background-size: cover;
    background-position: top center;
    border-radius: var(--main-radius);
}


.pabout {
    text-align: left;
    font-size: var(--main-font-size-m);
    font-weight: 600;
}

/* ================== Utility Classes (Naming convention updated) ================== */

/* Glassmorphism Effects */
.glass {
    background-color: var(--main-color-dark-t);
    backdrop-filter: blur(1rem);
    /* Slight reduction for performance/style */
    -webkit-backdrop-filter: blur(1rem);
    border-radius: var(--layout-radius);
    color: var(--main-color-light-o);
    box-shadow: 0.25rem 0.25rem 0.5rem #00808080;
    /* Use translucent teal shadow */
    transition: background-color 0.3s ease;
    /* Added transition for smooth hover */
}

.lightglass {
    /* Using slightly less aggressive blur */
    background-color: #797e76aa;
    background-color: var(--main-color-light-t);
    backdrop-filter: blur(0.25rem);
    -webkit-backdrop-filter: blur(0.25rem);
    background-blend-mode: overlay;
    box-shadow: 0.5rem 0.5rem 0.5rem #00808080;
    /* Use translucent teal shadow */
    border-radius: var(--layout-radius);
    color: var(--main-color-dark-o);
}

/* Button Styling */
.button {
    background-color: var(--main-color-button-t);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    font-size: var(--main-font-size-m);
    font-weight: bold;
    box-shadow: 0.25rem 0.25rem 0.5rem var(--main-color-bright-o);
    color: var(--main-color-dark-o);
    display: inline-flex;
    /* Use flex for centering text */
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    min-width: max-content;
    text-align: center;
}

.button:hover {
    background-color: var(--main-color-medium-t);
    /* Use a defined hover color */
    color: var(--main-color-light-o);
}

.hover:hover {
    /* Specific hover for glass elements (used heavily in header) */
    background-color: var(--main-color-medium-t);
}

/* ================== Footer ================== */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Using flex column for the footer container to stack nav and copyright */
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0.5rem;
    /* Reduced padding slightly for better space usage */
    z-index: 100;
}

footer nav {
    /* --- FLEXBOX IMPLEMENTATION for Centered Grid --- */
    display: flex;
    flex-wrap: wrap;
    /* Allows buttons to drop to next line */
    justify-content: center;
    /* CENTERS the buttons (including the last row) */

    gap: 0.5rem;
    padding: 0;
    background-color: transparent;
    width: 100%;
    /* Ensure nav takes full width */
    max-width: 60rem;
    /* Prevent it from getting too wide on huge screens */
}

footer a {
    display: flex;
    align-items: center;
    justify-content: center;

    /* REMOVE fixed width, use flex-basis and flex-grow */
    /* width: 6rem; <--- REMOVED */

    /* 1. Allow the button to grow and take up space */
    flex-grow: 1;

    /* 2. Define the minimum size/starting width (the basis) */
    flex-basis: 6rem;
    /* Minimum size for desktop/tablet */

    height: 2.5rem;
    /* Maintain fixed height */

    /* flex: 0 0 auto; <--- REPLACED BY explicit flex-grow/basis */

    padding: 0.25rem;
    font-size: var(--main-font-size-s);
    text-align: center;
}


footer p {
    position: relative;
    padding-top: 0rem;
    margin: 0.5rem 0 0 0;
    font-size: var(--main-font-size-xxs);
    font-weight: normal;
    /* Normal weight for copyright text */
    max-width: 100%;
}


/* ================== Media Queries (Responsive Design) ================== */

@media only screen and (min-width: 40rem) {

    /* ... (Existing min-width 40rem styles remain unchanged) ... */
    body {
        padding: 0;
        /* Ensure body padding is zeroed out on mobile */
        overflow-x: hidden;
    }

    .frontpage {
        padding: 0 1rem;
    }
}

@media only screen and (max-width: 40rem) {
    /* Mobile-specific adjustments */
    /* ... (Existing mobile body/main/p styles remain unchanged) ... */

    body {
        padding: 0;
        /* Ensure body padding is zeroed out on mobile */
        overflow-x: hidden;
    }

    header {
        gap: 0.5rem;
        padding: 0.5rem;
        /* Apply small padding inside the header container */
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Since the logo is now a direct link, give it full width on mobile */
    header a:first-child {
        flex: 1 0 100%;
        min-height: 5rem;
    }

    header a {
        flex: 1 0 calc(50% - 0.5rem);
        /* 50% minus half the gap size for perfect two-column layout */
    }

    main {
        gap: 1rem;
        padding: 0.5rem;
        margin-top: 1rem;
        margin-bottom: 12rem;
        /* Ensure space for the large fixed footer on mobile */
    }


    main .panel {
        /* Remove padding override here since we added padding to 'main' */
        padding: 1rem;
        /* Use standard padding relative to the now-padded main */
        min-width: 100%;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }


    /* Style for the services list on services.html */
    main .panel.narrow ul[aria-label="List of Comprehensive Eye Care Services"] li {
        /* Ensure the list item text fits */
        font-size: var(--main-font-size-s);
        /* Ensure font size is small enough (1rem) */

        /* Remove the max-width restriction on the list item itself 
           so it can fill the panel space */
        max-width: 100%;

        /* Increase padding slightly so text doesn't touch the edge of the panel */
        padding: 0.5rem 1rem;
    }

    /* Ensure the general H1 is also handled well on mobile, especially since it's long */
    #services-heading {
        font-size: var(--font-size-l);
        /* Use 2rem size or slightly smaller */
        padding: 0 0.5rem;
    }

    p {
        font-size: var(--main-font-size-s);
        max-width: 100%;
        padding: 0 0.5rem;

        /* Apply text breaking rules to general text as well */
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .frontpage {
        font-size: var(--main-font-size-s);
    }

    /* Contact Page Specific Adjustments (for h3 + a links) */
    main h1 {
        /* Ensure headings for contact info stack cleanly */
        margin-top: 1rem;
        margin-bottom: 0.25rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    main h2 {
        /* Ensure headings for contact info stack cleanly */
        margin-top: 1rem;
        margin-bottom: 0.25rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    main h3 {
        /* Ensure headings for contact info stack cleanly */
        margin-top: 1rem;
        margin-bottom: 0.25rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    main h4 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    main address a.button {
        display: block;
        width: 90%;
        margin: 0.5rem auto;
        font-size: var(--main-font-size-s);
        height: auto;
        min-height: 2.5rem;
        padding: 0.5rem;

        /* Ensure text inside buttons breaks if the button is narrow */
        word-break: break-all;
    }


    .dr,
    .dr2 {
        float: none;
        /* Remove float on mobile */
        margin: 1rem auto;
        /* Center the image blocks */
        display: block;
        width: 60%;
        /* Make images smaller and centralized */
        max-width: 150px;
    }

    .about,
    .pabout {
        text-align: center;
        /* Center content when images are centered */
    }

    .pabout p {
        text-align: left;
        /* Keep long paragraphs readable */
    }

    /* Footer adjustments for mobile */
    footer {
        position: fixed;
        padding: 0.25rem;
        /* Minimal padding on mobile container */
    }

    footer nav {
        gap: 0.25rem;
        /* Small gap to prevent overlap */
    }

    footer a {
        /* Mobile "Grid" Cell Size */
        /* width: 4.5rem; <--- REMOVED */

        /* Set mobile flex-basis (minimum size) to 4.5rem, allowing them to stretch equally */
        flex-basis: 4.5rem;

        height: 2rem;

        font-size: var(--main-font-size-xxs);
        padding: 0 0.1rem;
    }

    footer a img {
        height: 1rem;
    }

}