/* Last edited: 14 april, 2025 */
:root {
    --primary-010: #FAFAF2;
    --primary-100: #F3EFE2;
    --primary-200: #E2D9BC;
    --primary-300: #CDC091;
    --primary-400: #BDAE73;
    --primary-500: #A49453;
    --primary-600: #867636;
    --primary-700: #534821;
    --neutral-050: #F4F4F6;
    --neutral-100: #EAEAF3;
    --neutral-300: #ACADBD;
    --neutral-500: #737589;
    --neutral-600: #464859;
    --neutral-700: #393B4B;
    --neutral-800: #2E3142;
    --neutral-900: #222434;

    --image-default: url(https://static.foyer.lu/images/D2/photowealinsforagenericevents.D254F3EC820A850B7B890C3A77406239BF296B02.jpg);
    --image-capibelgium: url(https://static.foyer.lu/images/39/photoeventcapibelgiumforwealins.39E34CB8B12D53A7154EDDFEC28B6A4F0B2C85ED.jpg);
    --image-golf: url(https://static.foyer.lu/images/9A/photoofthegolfeventsforwealins.9A0E2117DF7C01D8808F8EC097FEC46AF5B62BAF.jpg);
    --image-building: url(https://static.foyer.lu/images/69/wealinsevent30yearsatluxembourg.698A4BBCDB5F08E5F6A1FB42DEB04588516F116E.png);

    --image: var(--image-default);

    --max-width: 1048px;
    --block-spacing: 80px;
}

@media (max-width:  640px) {
    :root {
        --block-spacing: 40px;
    }
}

/* For the sake of perfection */
::selection {
    color: white;
    background: var(--primary-500);
}

::-moz-selection {
    color: white;
    background: var(--primary-500);
}

/**
 * Links
 */
a:not([class^="cmpsr"]),
a:not([class^="live"]) {
    color:  var(--primary-600);
    text-decoration:  underline;
}

a:not([class^="cmpsr"]):hover,
a:not([class^="cmpsr"]):focus,
a:not([class^="live"]):hover,
a:not([class^="live"]):focus {
    color:  var(--primary-700);
    text-decoration:  none;
}

/* Navigation */
nav[class*="cmpsr"][class*="cmpsr"],
nav[class*="live"][class*="live"] {
    width: 100%;
    max-width: var(--max-width);
    margin:  0 auto;
}

.nav-items > li {
    margin: .25rem 0;
}

.nav-item.nav-item.nav-item {
    border-color: transparent;
    color: var(--primary-600);
}

.nav-item.nav-item.nav-item:hover,
.nav-item.nav-item.nav-item:focus,
.nav-item.nav-item.nav-item.active {
    border-color: transparent;
    border-bottom-color: var(--primary-300);
    color: var(--primary-700);
}

.nav-item.nav-item.nav-item.active {
    border-bottom-color: var(--primary-500);
}

/* Boxed container (with white BG mostly) */
.white-panel, 
.registration .public-attendee-form-container.add-new-participant, 
.registration .main-card.add-new-participant,
.registration .public-attendee-form-container.retrieve,
.registration .main-card.retrieve, 
.registration .public-attendee-form-container.summary-card,
.registration .main-card.summary-card,
.registration .public-attendee-form-container.payments,
.registration .main-card.payments,
.registration .public-attendee-form-container.attendee-success-message,
.registration .main-card.attendee-success-message {
    box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
}

/**
 * Limit the width of the full wide block contents.
 * 
 * Tricky part is that they don't have a clear and stable unique class. The pattern of block seems to be "if it is a child of .block and has direct div with custom BG"
 */
/* Added in 2025 */
.block > div:has(div[style*="background-image"]) {
    margin: 0;
    padding: 0;
}
/* Added END */

.block > div > div[style*="background-image"] {
    /* max-width: var(--max-width); Edited in 2025 */
    width: 100%;
    margin: 0 auto;
    padding-top: var(--block-spacing);
    padding-bottom: var(--block-spacing);
}

/**
 * Some Typography default styles
 */
[class^="cmpsr"] h1,
[class^="live"] h1 {
    margin-bottom: .25em;
    font-size: 3.157rem;
    color: var(--primary-500);
}

[class^="cmpsr"] h2,
[class^="live"] h2 {
    font-size: 2.369rem;
    color: var(--primary-700);
}

[class^="cmpsr"] h3,
[class^="live"] h3 {
    font-size: 1.777rem;
    color: var(--neutral-800);
}

[class^="cmpsr"] h4,
[class^="live"] h4 {
    font-size: 1.333rem;
    color: var(--neutral-800);
}

[class^="cmpsr"] p,
[class^="cmpsr"] li,
[class^="live"] p,
[class^="live"] li {
    max-width: 80ch;
    font-size: 1rem;
    line-height: 1.55;
}

[class^="cmpsr"] p,
[class^="live"] p {
    margin:  1.5em auto;
    color: var(--neutral-900);
}

[class^="cmpsr"] li,
[class^="live"] li {
    margin:  .5rem auto;
}

/**
 * Buttons
 * Well, buttons are links with random .cmpsrXXX classes. (TA eventtia)
 * But, apparently, a last child "a" after a div (col content) seems to be our pattern.
 */
.block > div[style*="background-image"] div + a:last-child[class^="cmpsr"],
.block > div[style*="background-image"] div + a:last-child[class^="live"] {
    text-decoration: none;
    font-weight:  bold;
    background: var(--primary-500);
}

.block > div[style*="background-image"] div + a:last-child[class^="cmpsr"] p,
.block > div[style*="background-image"] div + a:last-child[class^="live"] p {
    color:  white;
}

.block > div[style*="background-image"] div + a:last-child[class^="cmpsr"]:focus,
.block > div[style*="background-image"] div + a:last-child[class^="cmpsr"]:hover,
.block > div[style*="background-image"] div + a:last-child[class^="live"]:focus,
.block > div[style*="background-image"] div + a:last-child[class^="live"]:hover {
    background: var(--primary-600);
    color: white;
    text-decoration: none;
}

.block > div[style*="background-image"] div + a:last-child[class^="cmpsr"]:hover p,
.block > div[style*="background-image"] div + a:last-child[class^="cmpsr"]:focus p,
.block > div[style*="background-image"] div + a:last-child[class^="live"]:hover p,
.block > div[style*="background-image"] div + a:last-child[class^="live"]:focus p {
    color:  white;
}

/**
 * Right aligned text on mobile, let's deal with it since Eventtia can't do it
 */
@media (max-width: 800px) {
    .block div[class^="cmpsr"] div[style*="text-align: right"],
    .block div[class^="live"] div[style*="text-align: right"] {
        text-align: left!important;
    }
}

/**
 * Registration forms and other forms.
 */
.registration-iframe {
    display:  block;
    max-width: var(--max-width);
    width: 100%;
    margin: calc(var(--block-spacing) / 2 * -1) auto 80px!important;
    border-radius:  16px;
}

/**
 * Timeline
 */

/* The dark line */
.timeline {
    --item-spacing: 56px;
    margin-top: calc(var(--block-spacing) * -1);
}

.timeline > div::before {
    background-color: var(--neutral-500);
    border: 0 none;
    top: 30px;
    left: 2px;
    width: 1px;
    height: calc(100% - var(--item-spacing, 56px) - 64px);
    content: "";
    position: absolute;
    border-radius: 0;
}

/* The event dot */
.timeline > div > div::before {
    top: 10px;
    left: -23px;
    width: 1em;
    height: 1em;
    content: "";
    position: absolute;
    border-radius: 5rem;
    background: rgba(192, 177, 118, 1);
    border: 2px solid white;
}

.timeline .leftInfo .time {
    font-weight: bold;
}

.timeline .leftInfo .location {
    font-weight: normal;
    color:  var(--neutral-500);
}

.timeline .rightInfo.rightInfo {
    min-height: auto;
    border-bottom:  0 none;
    margin-left:  32px;
    padding-bottom:  var(--item-spacing);
}

.timeline .workshop-name {
    color: var(--primary-500);
}

.timeline .description-container .description {
    font-size: 14px;
    line-height: 1.55;
    color: var(--neutral-600);
}

.timeline .speaker-list {
}
/* each speaker item */
.timeline .speaker-list .speaker-info {
    margin-left:  0;
}

.timeline .speaker-list .picture {
    pointer-events: none;
}

.timeline .speaker-list .speaker-name.speaker-name.speaker-name {
    margin-bottom:  0;
}

.timeline .speaker-list .speaker-secondary-info.speaker-secondary-info.speaker-secondary-info {
    margin-top:  0;
}

.timeline .speaker-list .speaker-secondary-info:empty {
    display: none;
}

/**
 * Contact form
 * To be able to select it, we need the style background rgb to be that precise value.
 */
.block > [class^="cmpsr"] > [class^="cmpsr"][style*="rgb(80, 227, 194)"],
.block > [class^="live"] > [class^="live"][style*="rgb(80, 227, 194)"] {
    margin-top: calc(var(--block-spacing, 80px) * -1);
}

.block [class^="cmpsr"][style*="rgb(80, 227, 194)"],
.block [class^="live"][style*="rgb(80, 227, 194)"] {
    background: white!important;
}

.block label {
    position: static!important;
    display: inline-block;
    margin-bottom: 4px;
    font-size:  1.2rem!important;
    font-weight: bold;
    color:  var(--neutral-700);
}


.block label + div {
    margin-top: 0!important;
    padding-top: 0;
    padding-bottom: 0;
    background:  var(--neutral-100);
    border-bottom:  1px solid var(--neutral-300);
}

.block label + div > div::after {
    border-bottom-color: var(--neutral-500)!important;
    border-bottom-width: 1px!important;
}

.block label + div[class^="cmpsr"]::before,
.block label + div[class^="live"]::before {
    content: none;
}

.block label + div[class^="live"] svg,
.block label + div[class^="cmpsr"] svg {
    margin-left:  8px;
}

.block label + div[class^="cmpsr"] svg path:not([fill="none"]),
.block label + div[class^="live"] svg path:not([fill="none"]) {
    fill: var(--primary-400);
}

.block label + div input,
.block label + div textarea {
    padding: 12px 8px;
}

.block label + div input:focus,
.block label + div textarea:focus {
    background:  var(--primary-100);
}

/**
 * Website FOOTER
 */
footer .logo-wrapper {

}

/* The logo image  */
footer .logo-wrapper img {

}

/*  The copyright under the logo  */
footer .logo-wrapper .copyright-msg.copyright-msg {
    font-size:  14px;
    margin: 32px 0;
    opacity:  .5;
    color: var(--primary-400);
}

/*  The list of links  */
footer ul.footer-items.footer-items {
    border:  0 none;
}

@media (min-width:  840px) {
    footer ul.footer-items.footer-items {
        display: block;
        align-self: flex-start;
        column-count: 2;
        column-gap: 2rem;
        min-height: auto;
    }
}

footer .footer-items li {
    padding:  0.5rem 0;
    margin:  0;
}

/*  A link in the footer  */
footer .footer-items li a.footer-item:hover,
footer .footer-items li a.footer-item:focus {
    color: var(--primary-500);
}

/*  The social block  */
footer > div:last-child {

}