/* Global Styles */
:root {
    --brand-lemon: #edffb1;
    --brand-dark: #111111;
    --brand-grey: #d6d6d6;
    --primary-color: #edffb1;
    --primary-color-focus: #c8d59f;
    --secondary-color: #111111;
    --base: #d6d6d6;
    --background: #ffffff;
    --warning-color: #ff7777;

    /* Base font sizes */
    --font-size-h1: 2rem;
    --font-size-h2: 1.6rem;
    --font-size-h3: 1.4rem;
    --font-size-h4: 1.3rem;
    --font-size-h5: 1.2rem;
    --font-size-h6: 1.1rem;
    --font-size-p: 0.8rem;
    --font-size-a: 0.8rem;
    
    /* Image sources */
    --logo-citycon-white: url(/sfsites/c/file-asset/Citycon_logo_white?v=1&height=300&width=300);
}

/*
*
* Font size and typography definitions
*
*/

/* All text that is not more explicitly defined should default to this */
body {
    font-size: var(--font-size-p);
}
h1 {
    font-size: var(--font-size-h1);
}
h2 {
    font-size: var(--font-size-h2);
}
h3 {
    font-size: var(--font-size-h3);
}
h4 {
    font-size: var(--font-size-h4);
}
h5 {
    font-size: var(--font-size-h5);
}
h6 {
    font-size: var(--font-size-h6);
}
p,
a {
    font-size: var(--font-size-p);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    line-height: 1.5;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

/* 
*
* Responsive Styles
*
*/

/* Mobile and general styles */

.component-container {
  display: flex;
  justify-content: center;
}

.header-container {
  margin-bottom: 1rem;
}

.content-container {
  padding: 2rem 1rem;
  width: 100%;
}

/* Tablet styles */
@media screen and (min-width: 481px) {
    /* Adjusting font sizes for tablet */
    :root {
        --font-size-h1: 2.4rem;
        --font-size-h2: 2rem;
        --font-size-h3: 1.8rem;
        --font-size-h4: 1.6rem;
        --font-size-h5: 1.4rem;
        --font-size-h6: 1.2rem;
        --font-size-p: 0.9rem;
        --font-size-a: 0.9rem;
    }

    .header-container {
        margin-bottom: 2rem;
    }

    .content-container {
        padding: 3rem 1rem;
    }
}

/* Desktop styles */
@media screen and (min-width: 1025px) {
    /* Adjusting font sizes for desktop */
    :root {
        --font-size-h1: 3rem;
        --font-size-h2: 2.4rem;
        --font-size-h3: 2.2rem;
        --font-size-h4: 2rem;
        --font-size-h5: 1.8rem;
        --font-size-h6: 1.6rem;
        --font-size-p: 1rem;
        --font-size-a: 1rem;
    }

    .content-container {
        padding: 5rem 2rem;
    }
}

/* Extra large Desktop styles */
@media screen and (min-width: 1439px) {
    /* Adjusting font sizes for extra large desktop */
    :root {
        --font-size-h1: 3.6rem;
        --font-size-h2: 3rem;
        --font-size-h3: 2.8rem;
        --font-size-h4: 2.6rem;
        --font-size-h5: 2.4rem;
        --font-size-h6: 2.2rem;
        --font-size-p: 1.2rem;
        --font-size-a: 1.2rem;
    }

    .content-container {
        padding: 8rem 2rem;
    }
}

.component-container {
    background-color: #ffffff;
}

.helped-input-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.helped-input-container > lightning-input,
lightning-textarea,
lightning-combobox {
    width: 100%;
}

.reservation-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

lightning-input,
lightning-combobox,
lightning-textarea {
    --slds-c-input-radius-border: 0;
    --lwc-shadowButtonFocus: 0;
    --lwc-borderWidthThin: 0;
    --slds-c-input-shadow-focus: 0;
    --sds-c-input-shadow-focus: 0;
    border-bottom: 1px solid var(--brand-dark);
}

.slds-popover_tooltip, .slds-popover--tooltip { background: var(--brand-dark) !important }


.spotlightLogoBlack {
    background-image: url('/sfsites/c/resource/Spotlight_Logo_Black');
    background-size: contain;
    background-repeat: no-repeat;
}

.spotlightLogoWhite {
    background-image: url('/sfsites/c/resource/Spotlight_Logo_White');
    background-size: contain;
    background-repeat: no-repeat;
}