/* base selectors... */

html, body {
    /* Ensures the main canvas is exactly the viewport width */
    width: 100%;
    
    /* Hides any content that attempts to push beyond the width */
    overflow-x: hidden;

    margin: 0;
    padding: 0; /* prevents the browser's default setting */
}

body {
    font-family: 'DroidSans', arial, sans-serif;        
    border: 0;
    color: #444;
    background-color: #dcdcdc;
}

#email-signup-form input[type="email"],
#email-signup-form button[type="submit"] {
    /* Ensure padding is identical for vertical alignment */
    padding-top: 10px;
    padding-bottom: 10px;
    
    /* Center vertical alignment */
    vertical-align: middle; 
}
#email-signup-form form {
    /* Treat the form element as a flex container */
    display: flex;
    /* Align items vertically centered */
    align-items: center; 
    /* Ensure no wrapping */
    flex-wrap: nowrap;
    /* Optional: Add some space between the input and button */
    gap: 10px; 
    /* Ensure the form doesn't take up 100% width if you want it centered */
    justify-content: center;
}

/* anchors */

a {
    font-family: 'DroidSans', Arial, Helvetica, sans-serif;
}

a:link {
    color: #702779;
    font-weight: 600;
    text-decoration: none;
}

/* unvisited link */

a:visited {
    color: #702779;
    font-weight: 600;
    text-decoration: none;
}

/* visited link */

/* hovered link */

a:active {
    color: #888;
}

/* selected link */

/* svg... */

/*** selectors by class, alphabetical... ***/

/* Custom Button Styles for CTAs - STRUCTURAL ONLY */
a.btn-cta {
    display: block !important; /* Forces the block display */
    padding: 12px 24px !important;
    margin: 10px auto !important; 
    max-width: 300px !important; 
    text-align: center !important;
    text-decoration: none !important; /* Removes the underline */
    font-size: 18px !important;    
    border-radius: 5px !important; 
    cursor: pointer !important;
    transition: background-color 0.3s, opacity 0.3s !important;
    /* *** ENSURE THERE IS NO BACKGROUND-COLOR OR COLOR DEFINED HERE *** */
}

/* Primary Button Style (Dive into...) - High Contrast */
a.btn-primary-cta {
    background-color: #e0e0e0 !important; /* Light Silver/Gray */
    color: #4a4a4a !important; /* Dark Gray Text for High Contrast */
    border: none !important;
}

a.btn-primary-cta:hover {
    background-color: #f5f5f5 !important; /* Fades to near-white on hover for a clear lift effect */
    color: #2e2e2e !important; /* Darkens the text slightly on hover */
    opacity: 1; /* Ensure no unwanted opacity */
}

/* Secondary Button Style (See Our Mission) - Outline or Lighter */
a.btn-secondary-cta {
    background-color: transparent !important; 
    color: #4a4a4a !important; 
    border: none !important;
}

a.btn-secondary-cta:hover {
    background-color: #f0f0f0 !important;
    color: #2e2e2e !important; /* Darkens the text slightly on hover */
}

/*** component classes, like button, card, nav bar, or modal ***/

/* Target the CTA link within the dedicated launch card container */
#launch-signup-container .btn-secondary-cta {
    margin-bottom: 0;
}

.c-card {   
    text-align: center !important;
    width: 100%;
    background-color: #ffffff;
}


.c-cta-wrapper {
    /* Style for the container around the primary CTA */
    padding-bottom: 5px;
}
.c-cta-container {
    /* Style for the container around the secondary CTA, setting the large bottom margin */
    margin-bottom: 40px;
}

.c-tagline-text {
    font-size: 21px;
    margin-bottom: 20px;
    padding: 0 20px 10px 20px;
}
.c-tagline-text .c-tagline-text--line1 {
    font-size: 22px;
}
.c-tagline-text .c-tagline-text--line2 {
    font-size: 20px;
}

.c-title {
    padding-bottom: 0;
    text-align: center;
}
.c-title__main {
    font-size: 29px;
    letter-spacing: 2px;
    padding-top: 20px;
}  

/* Style for the new philosophical tagline */
.c-title__philosophy {
    /* Base styles from the teaser, but smaller */
    font-size: 18px; /* Slightly smaller than h2 (24px) */
    font-weight: normal; 
    text-align: center;
    color: #444; /* Dark gray for a slightly subdued look */
    
    /* Spacing adjustments for the new element */
    margin-top: -10px; /* Pulls it up closer to the h1 */
    margin-bottom: 10px; /* Creates space above the existing h2 */
}

.c-title__teaser {
    font-size: 19px;
    font-weight: 600;
}

/*** Modal Styles ***/

.art-modal {
    display: none; /* Must remain */
    padding: 20px;
}
/* Modal Headings */
.art-modal h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}
.art-modal h3 {
    text-align: center;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 15px;
}
/* Specific Paragraph/List Item Margins */
/* First main paragraph in Dive modal */
#dive-into > p:first-of-type {
    margin-bottom: 25px; 
    padding: 0 20px;
}
/* Last main paragraph in Dive modal */
#dive-into > p:last-of-type {
    padding: 0 20px 20px 20px; 
}

/* List/Strong elements inside Dive modal */
#dive-into ul {
    list-style-type: none;
    padding: 0 20px;
}
#dive-into ul li {
    margin-bottom: 20px;
}
#dive-into ul strong {
    font-size: 18px;
}
#dive-into ul p {
    margin-top: 5px;
    line-height: 1.5;
}

/* Modal Paragraphs (General) */
.art-modal p {
    font-size: 16px;
    line-height: 1.6;
}

/* Paragraphs in Mission modal */
#mission p {
    margin-bottom: 25px; 
    padding: 0 20px;
}

/*** Modal and Launch Component Styles ***/
/*** Rules governing the appearance of the sign-up card and the iframe/form inside the #begin-journey modal. ***/

/* Card Container Styling */
.c-card.launch-card {
    border: 2px solid #dcdcdc; /* Subtle gray border */
    padding: 0; /* Removing the default padding from the container */
    max-width: 340px; /* Setting a specific max width for the whole card */
    margin: 20px auto 30px auto; /* Centering the card and adding top and bottom margins */
}
/* Benefit Text (Unlock exclusive...) */
.launch-benefit-text {
    font-size: 16px;
    margin: 20px auto 0 auto; /* Top spacing inside the card */
    color: #555;
    max-width: 510px;
    padding: 0 20px;
}
/* CTA Link Heading */
.launch-cta-heading {
    /* Clearing margin for the heading so the button placement is clean */
    margin: 15px 0;
}
/* Date/Context Text (The Riparia.US Bookshop...) */
.launch-date-text {
    font-size: 16px;
    margin: 0 auto 20px auto; /* Bottom spacing inside the card */
    color: #555;
    line-height: 1.5em;
    max-width: 500px;
    padding: 0 20px;
}
/* Specific styling for the CTA link within the card */
.launch-cta-link {
    /* Use your existing button styles but ensure the margin-bottom is reset */
    margin-bottom: 0 !important;
}

/* 1. Iframe alignment and maximum width */
#begin-journey iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    /* NOTE: We leave width="540" and height="719" as HTML attributes for IFRAMES
    as they define the intrinsic aspect ratio/size for better loading. */
}
/* 2. Hidden Email Form Wrapper */
#email-signup-form {
    margin: 0 20px 20px 20px;
    display: none;
}
/* 3. Form Input Field Styling */

/* 4. Form Button Styling */
#email-signup-form button {
    max-width: 350px;
    margin: 0;
}

/*** footer classes ***/

.c-footer {
    /* Position the footer at the very bottom of the page */
    width: 100%;
    padding: 20px 0; /* Vertical padding */
    border-top: 1px solid #eee; /* Subtle separator line */
    background-color: #f7f7f7; /* Light background to separate it from body */
    text-align: center; /* Center the entire footer content */
    font-size: 0.9em; /* Smaller, less prominent text */
    color: #555;
}
.c-footer__content {
    /* Use max-width and center it if the main page content is also centered */
    max-width: 1200px;
    margin: 0 auto;
    display: flex; /* Use flexbox for easy layout */
    flex-direction: column; /* Stack items vertically */
    gap: 10px; /* Space between the contact link and the copyright text */
}

.diary {
    background-color: #9a4040 !important;
}

.exhibition-photo {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
}

 .fancybox__backdrop {
    /* Set the opacity (0.7 is 70% opaque) */
    opacity: 0.6 !important;
}

/* Get the modals to load with a percent of screen width for different devices */
        /* This CSS here seems to allow it to override what may be in the CSS files */
        /* 1. Base style for ALL screens (Mobile First) */
        /* This ensures we don't exceed a reasonable width on small screens and use margin auto for centering */
.fancybox__content {
    max-width: 90vw !important; /* 90% of the viewport width */
    width: auto !important;
    margin: 0 auto !important;
}

/*** helper classes, that apply a specific style or function ***/

.h-clearR {
    clear: right;
}

/*** layout, structural classes ***/

.l-main-container {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
.l-main-container--max-width {    
    background-color: #ffffff;
    margin: 0 auto;
    max-width: 1120px;
    padding: 1px 0 0 0;
}

/* Media queries*/

 @media screen and (min-width: 437px) {            
    .exhibition-photo {
        width: 83%;
    }
}

@media screen and (min-width: 580px) {                       
    .c-card {
        width: 87%;
        margin: 0 auto;
    }
}

@media screen and (min-width: 768px) {
    .c-card {
        width: 84%;
        margin: 0 auto;
    }

    .fancybox__content {
        /* Set to 75% of the viewport width, up to a maximum of 900px */
        max-width: 75vw !important; 
        width: 100% !important; /* Ensure max-width is respected */
    }
}

/* 3. Media Query for Very Large Screens (Optional, for better readability) */
@media (min-width: 1200px) {
    .fancybox__content {
        /* Cap the absolute maximum width for readability on huge monitors */
        max-width: 900px !important; 
    }
}