/* ****************************************************************************************************** */
/* The Unknot Spot - Global Stylesheet                                                                    */
/* CSS Variables located in style.css & linked in HTML
   Example: <link rel="stylesheet" href="styles.css">
            <link rel="stylesheet" href="stylesNav.css">
            <link rel="stylesheet" href="stylesMedia.css"> 

   ALL responsive styles / @MEDIA properties for mobile/small screen sizes are located in stylesMedia.css
/* * **************************************************************************************************** */

/* --- CSS Variables at the highest level (HTML tag)--- */
:root {
    --media-responsive-width:   765px;      /* Use for responsive design breakpoints */
    --font-base:                Arial, sans-serif; /* Base font for the entire site */
    --font-size-xsmall:         12px;       /* Extra small font size for fine print, disclaimers, etc. */
    --font-size-small:          14px;       /* Small font size for captions, footnotes, etc. */
    --font-size-base:           16px;       /* Base font size for the entire site */
    --font-size-medium:         18px;       /* Medium font size for emphasis */
    --font-size-large:          22px;       /* Large font size for headings */
    --font-size-menu:           22px;       /* Font size for menu items */

    /* Color palette from background image */
    --color-blue:               #0171fe;  /* Deep Sky Blue */
    --color-out-of-blue:        #0391e8;  /* Out of the Blue */
    --color-lime:               #dcf803;  /* Lime Zest */
    --color-yellow:             #d4ff08;  /* Neon Yellow */
    --color-purple:             #b661fd;  /* Bubblegum Baby Girl */
    --color-magenta:            #ff10cf;  /* Hot Magenta */

    /* --- Color scheme variables and defaults --- */
    --color-scheme:                  dark;       /* Default color scheme for the entire site */
    --color-text-error:              #ff4d4d;  /* Bright red for error messages */
    --color-scheme-dark-text:        #fbfbfb;  /* Text color for dark mode / dark backgrounds */
    --color-scheme-dark-text-alt:    #aaaaaa;  /* Alternate text color for dark mode / dark backgrounds */
    --color-scheme-dark-bg:          #010101;  /* Background color for dark mode / dark backgrounds */
    --color-scheme-dark-border:      var(--color-lime);  /* Border color for dark mode / dark backgrounds */
    --color-scheme-dark-link:        var(--color-scheme-dark-text);  /* Link color for dark mode */
    --color-scheme-dark-link-hv:     var(--color-scheme-dark-text);  /* Link hover color for dark mode */
    --color-scheme-dark-link-bg:     var(--color-scheme-dark-text);
    --color-scheme-dark-link-a:      var(--color-blue);
    --color-scheme-dark-card-bg:     #1a1a1a;      /* Card background color for dark mode */
    --color-scheme-dark-card-border: var(--color-purple);   /* Card border color for dark mode OR  #2a2a2a; for a grey*/
    --color-scheme-dark-shadow:      #00000080; /* Shadow color for dark mode */

    --color-scheme-light-text:       #010101;  /* Text color for light mode / light backgrounds */
    --color-scheme-light-bg:         #fbfbfb;  /* Background color for light mode / light backgrounds */
    --color-scheme-light-link:       var(--color-blue);
    --color-scheme-light-link-bg:    var(--color-scheme-light-bg);

    /* CONSOLIDATED VARIABLES GO HERE */
  
    
    

}

/* Makes sizing and layout math much more predictable, 
   especially in grids/flex layouts */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Define over all background color behind anything transparent 
   and set the base font for the entire site */
body {
    margin: 0;
    padding: 0;
    background-color: var(--color-scheme-dark-bg);
    font-family: var(--font-base);
    font-size: var(--font-size-base);
}
/* SEO and SCREEN READER HELPER CLASS to be used by H1 for each page at minimum */
/*  One unique H1 per page (use .sr-only if needed)
    Meta descriptions on every page
    JSON-LD schema for local business
    Image alt text on all images
    Semantic HTML (<main>, <article>, <section>)
    Proper heading hierarchy (H1 → H2 → H3)
    Descriptive link text (not "Click here")
*/
.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* Prevent text from wrapping */
    border: 0;
}

/* MAIN BACKGROUND FOR HOME PAGE */
.background {
    margin: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 3 / 1; /* Coming Soon = 1500px wide by 500px tall */
    /* Adjust the aspect ratio to match the actual background image dimensions */
    background-image: url("../images/theme/background.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}

.image-banner {
    display: block;
    width: min(720px, 100%);
    aspect-ratio: 18 / 5; /* adjust to match the actual banner image dimensions */
    border-radius: 8px;
    margin: 0 auto 0rem auto;
    background-image: url("../images/theme/banner.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Use with footer.png  Feel Better, Be Better, Be You on footer */
/* Example: <img src="../images/theme/footer.png" alt="tagline" class="image-tagline"> */
/* margin: 2rem 0; can be added to create spacing around the image if needed */
.image-tagline {   
    display: block; /* Ensure the image is treated as a block element for proper centering */
    width: min(100%, 1000px); /* Scales from smaller screens up to a max width of 1000px w/auto height to maintain aspect ratio */
    height: auto;
    margin: 0 auto; /* Center the image horizontally */
}

/* was .image-thumbnail-link in stylesCMS.css */
.image-thumbnail-small {
    width: 38px;
    height: 38px;
    display: block;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 6px;
    border: 0px solid var(--color-scheme-dark-card-border);
    box-shadow: 0 2px 6px var(--color-scheme-dark-shadow);
}

.image-thumbnail {
    display: block;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 6px;
    border: 0px solid var(--color-scheme-dark-card-border);
    box-shadow: 0 2px 6px var(--color-scheme-dark-shadow);
}


/* Basic CSS for most text elements */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-scheme-dark-text);
    margin: 0 0 0.5em;
    line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p, li, td, th, label, input, textarea, select, span {
    color: var(--color-scheme-dark-text);
}

.blog-post-content {
    color: var(--color-scheme-dark-text);
}

.text-xsmall {
    font-size: var(--font-size-xsmall);
}
.text-small {
    font-size: var(--font-size-small);
}
.text-medium {
    font-size: var(--font-size-medium);
}
.text-large {
    font-size: var(--font-size-large);
}

.text-error {
    color: var(--color-text-error);
}

/* Unused helper retained as reference.
.spacer {
    flex: 1;
}
*/

/* --- Page wrapper --- */
.cms-page {
    max-width: 90%;
    margin: 0 auto;
    padding: 1rem 1rem;
    text-align: center; /* default center text for the entire page, can be overridden by specific elements */
    color: var(--color-scheme-dark-text); /* default text color for the entire page especially for text that is not wrapped in a specific element like p, h1, etc. */
}

.cms-page-title {
    /* This closely matches H2 style */
    color: var(--color-scheme-dark-text);
    margin: 0 0 0 0;
    line-height: 1.2;
    font-size: 2rem;
}

.cms-page-tagline {
    font-size: var(--font-size-medium);
    margin-bottom: 2rem;
    color: var(--color-scheme-dark-text-alt);
}

.cms-page-body {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-scheme-dark-text);
    text-align: left; /* Override default center text for body content */
}

/* --- Logo bar --- */
.logo-bar {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    /* border-bottom: 1px solid var(--color-blue); */
}

/* Default link styles */
a {
    color: var(--color-scheme-dark-link);
    text-decoration: underline;
}

a:hover {
    opacity: 0.6;
}

.centered {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 400px));
    justify-content: center;
    gap: 1rem;
    /* margin-top: 1rem; */
    margin-bottom: 1rem;
}

/* INFORMATION CARDS with dynamic column count to display 1-3 cards per row */
.info-cards:has(> .info-card:only-child) {
    grid-template-columns: minmax(0, 400px);
}

.info-cards:has(> .info-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 400px));
}

/* Removed font-weight:600 & font-size:1.1rem that made text look bold*/
.info-card {
    background-color: var(--color-scheme-dark-card-bg);
    border: 1px solid var(--color-scheme-dark-card-border);
    border-radius: 8px;
    padding: 1rem;
    text-align: left;
    color: var(--color-scheme-dark-text);
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    width: 100%;
    max-width: none;
}

/* Constrain images in info-cards to never exceed container width */
.info-card img {
    max-width: 100%;
    height: auto;
    display: block;
}

.info-card-view {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.info-card-view > .info-card {
    width: 100%;
    max-width: none;
}
/* @MEDIA Responsive styles for info-card(s) located in stylesMedia.css */

.events-itinerary-list {
    display: grid;
    gap: 1rem;
}

header nav .nav-menu-button#site-nav {
    text-align: center;
}

.events-itinerary-list.events-itinerary-cols-1 {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

.events-itinerary-list.events-itinerary-cols-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.events-itinerary-list.events-itinerary-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.events-itinerary-list.events-itinerary-cols-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.events-itinerary-list.events-itinerary-cols-5 {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

.events-itinerary-list.events-itinerary-cols-6 {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}

.event-card h3 {
    margin-bottom: 0.35rem;
}

.calendar-month-title {
    text-align: left;
    margin-bottom: 0.75rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.calendar-header-cell {
    background-color: var(--color-scheme-dark-card-bg);
    border: 1px solid var(--color-scheme-dark-card-border);
    border-radius: 8px;
    padding: 0.55rem;
    text-align: center;
    font-weight: 700;
}

.calendar-day-cell {
    min-height: 130px;
    background-color: var(--color-scheme-dark-card-bg);
    border: 1px solid var(--color-scheme-dark-card-border);
    border-radius: 8px;
    padding: 0.55rem;
}

.calendar-day-cell-off {
    opacity: 0.55;
}

.calendar-day-label {
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.calendar-event-item {
    border-left: 3px solid var(--color-blue);
    background: color-mix(in srgb, var(--color-blue) 10%, transparent);
    border-radius: 4px;
    margin-bottom: 0.3rem;
    padding: 0.3rem 0.4rem;
    font-size: var(--font-size-small);
}

.calendar-empty {
    margin: 0.2rem 0 0;
    color: var(--color-scheme-dark-text-alt);
    font-size: var(--font-size-small);
}



/* PICTURE CARDS with dynamic column count to display 1-3 cards per row */
.picture-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.picture-cards:has(> .picture-card:only-child) {
    grid-template-columns: 1fr;
}

.picture-cards:has(> .picture-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Removed font-weight:600 & font-size:1.1rem that made text look bold*/
.picture-card {
    background-color: var(--color-scheme-dark-card-bg);
    border: 1px solid var(--color-scheme-dark-card-border);
    border-radius: 8px;
    padding: 1rem;
    overflow: hidden;
    text-align: center;
    color: var(--color-scheme-dark-text);
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.picture-image {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 6px;
    box-shadow: 0 2px 2px var(--color-scheme-dark-shadow);
    object-fit: cover;
    transition: transform 0.3s ease;
}

.picture-card:hover .picture-image {
    transform: scale(1.05);
}



.footer {
    /* border-top: 1px solid var(--color-scheme-dark-border); */
    max-width: 90%;
    margin: 0 auto;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.footer-content {
    color: var(--color-scheme-dark-text-alt); 
    margin: 0 auto;
    padding: 0.25rem 0;
}

.footer-navigation {
    color: var(--color-scheme-dark-text-alt);
    text-align: center;
}

.footer-text {
    color: var(--color-scheme-dark-text-alt);
}

.rights-reserved {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-scheme-dark-text-alt);
    margin-top: 1rem;
}
/* @MEDIA responsive styles for picture-cards to show 1 per row on mobile located in stylesMedia.css */

/* ─────────────────────────────────────────────
   FLOATING TOAST NOTIFICATIONS (Public Pages)
   Used by: contact.php, event.php, gallery.php, etc.
   Loaded via: js/toasts.js
   ───────────────────────────────────────────── */

.toast-host {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9998;
    width: min(92vw, 480px);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    pointer-events: none;
}

.toast {
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: var(--font-size-base);
    font-weight: 500;
    box-shadow: 0 6px 16px var(--color-scheme-dark-shadow);
    pointer-events: auto;
    cursor: pointer;
    animation: toast-enter 180ms ease-out;
}

.toast-success {
    background-color: color-mix(in srgb, var(--color-lime) 18%, transparent);
    border-color: var(--color-yellow);
    color: var(--color-scheme-dark-text);
}

.toast-error {
    background-color: color-mix(in srgb, var(--color-text-error) 18%, transparent);
    border-color: var(--color-yellow);
    color: var(--color-text-error);
}

.toast.is-dismissing {
    animation: toast-leave 180ms ease-in forwards;
}

@keyframes toast-enter {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-leave {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-12px) scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast,
    .toast.is-dismissing {
        animation: none;
    }
}