/* Page z-indices:
   - 0: background
   - 3: bottom layer
   - 5: main layer
   - 7: upper layer
   - 9: mobile
   - 10: top bar
   - 17: popup
*/

/* Breakpoints (max-width):
    - xs: 0px
    - sm: 400px
    - md: 700px
    - lg: 1100px
    - xl: 1700px
*/

/* Theme defaults */
:root {


    /* Update design/components.php to load the fonts through GoogleFonts. */
    --regular-font: 'Open Sans', sans-serif;
    --header-font: 'Signika', sans-serif;

    --font-size-small: 12px;
    --font-size-regular: 14px;
    --font-size-large: 18px;

    --input-height-regular: 40px;
    --input-height-small: calc(0.8 * var(--input-height-regular));
    --button-radius-ratio: 0;

    --border-radius: 2px;
    --spacing: 4px;

    --pallete-stodola-header: #8A557CB0;

    --palette-background: black;
    --palette-background-paper: white;
    --palette-background-input: rgb(208, 243, 243);
    --palette-background-divider: #32bad9;
    --palette-background-dim-1: mintcream;
    --palette-background-dim-2: #32bad9;
    --palette-background-text: black;

    --palette-primary-bright: #32BAD9;
    --palette-primary-main: steelblue;
    --palette-primary-dim: rgb(51, 72, 90);
    --palette-primary-text: white;

    --palette-secondary-bright: #EBEBEB;
    --palette-secondary-main: #ADADAD;
    --palette-secondary-text: #888888;

    --palette-action-disabled: #ADADAD;
    --palette-action-selected: #888888;

    --palette-error-text: #D12F19;
    --palette-error-main: #F8E0DD;

    --palette-warning-text: #D19219;
    --palette-warning-main: #F8F2DD;

    --palette-info-text: #038CA0;
    --palette-info-main: #D9EEF1;

    --palette-success-text: #00A131;
    --palette-success-main: #D9F1E0;

    --palette-attendee-main: rgb(192, 192, 192);
    --palette-attendee-text: black;
    --palette-sponsor-main: #e09c2a;
    --palette-sponsor-text: white;
    --palette-supersponsor-main: #b676d6;
    --palette-supersponsor-text: white;
    --palette-orgateam-main: rgb(197, 69, 44);
    --palette-orgateam-text: white;
    --palette-minor-main: #3261a9;
    --palette-minor-text: white;

    --shadow-regular: 0px 3px 8px rgba(0, 0, 0, 0.25);
    --shadow-regular-length: 11px;

    --layer-bottom: 3;
    --layer-main: 5;
    --layer-upper: 7;
    --layer-top-bar: 10;
    --layer-popup: 20;
}

/* mod start */

.homepage #convention-title {
    height: initial !important; /* fix homepage for phones (multi-line title) */
}

#footer {
    background-color: var(--pallete-stodola-header);
    width: 100%;
    padding: 0px;
    margin: 0px 0px;
   
}

.footerStripe {
    padding-top: 0px;
}

.header-menu {
    background-color: var(--pallete-stodola-header);
    width: 100%;
}

.summary-title {
    color: black;
    display: block !important;
}

#summary {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.summary-area-page {
    min-height: 10px;
}

.contentStripePage {
    padding-top: 100px !important;
    margin-bottom: -20px !important;
}

.content-area-page {
    border-radius: 30px 30px 0 0;
}

.userAttendee {
    color: white;
    background-color: #80ddef;
    border-color: #80ddef;
}
.userAttendee.inline {
    color: #80ddef;
    background: none;
}

.attendeeTypeRole .userAttendee {
    color: black;
    background-color:#80ddef;
}



.userSponsor1 {
    color: white;
    background-color: yellow;
    border-color: yellow;
}
.userSponsor1.inline {
    color: yellow;
    background: none;
}

.attendeeTypeRole .userSponsor1 {
    color: black;
    background-color:yellow;
}

.userSponsor2 {
    color: white;
    background-color: orange;
    border-color: orange;
}
.userSponsor2.inline {
    color: orange;
    background: none;
}

.attendeeTypeRole .userSponsor2 {
    color: black;
    background-color:orange;
}


.userOrga {
    color: white;
    background-color: purple;
    border-color: purple;
}
.userOrga.inline {
    color: purple;
    background: none;
}

.userOrga .userSponsor2 {
    color: black;
    background-color:purple;
}

.attendeeTypeRole .userAttendee {
    color: white;
    background-color: #80ddef;
}

.attendeeTypeRole .userSponsor {
    color: white;
    background-color: yellow;
}

.attendeeTypeRole.brief .userSuper {
    color: white;
    background-color: orange;
}

.attendeeTypeRole .userOrga {
    color: gold;
    background-color: purple;
}




/* =========================
   ROLE BADGES (colors)
   already used:
   - blue: minor
   - orange: conops/staff + sponsor2
   - orangered: security/medic
   - yellow: GoH + sponsor1
   - purple: orga
   ========================= */

/* keep existing */
.attendeeTypeRole .minor {
    color: white;
    background-color: blue;
}

.attendeeTypeRole .roleConOps {
    color: white;
    background-color: orange;
}

.attendeeTypeRole .roleSecurity,
.attendeeTypeRole .roleMedic {
    color: white;
    background-color: orangered;
}

/* IMPORTANT: GoH badge itself stays yellow, but note sponsor1 also uses yellow
   (you already override sponsor colors inside attendeeTypeRole to black text) */
.attendeeTypeRole .roleGoH {
    color: black;                 /* better readability on yellow */
    background-color: yellow;
}

/* new roles: pick colors not used elsewhere */
.attendeeTypeRole .roleTech {
    color: white;
    background-color: teal;       /* new */
}

.attendeeTypeRole .roleDecoration {
    color: white;
    background-color: seagreen;   /* new */
}

.attendeeTypeRole .roleGraphic {
    color: white;
    background-color: hotpink;    /* new */
}

.attendeeTypeRole .roleShowrunner {
    color: white;
    background-color: crimson;    /* new */
}

.attendeeTypeRole .roleProgram {
    color: white;
    background-color: dodgerblue; /* new (not "blue") */
}

.attendeeTypeRole .roleModerator {
    color: white;
    background-color: slategray;  /* new */
}

.attendeeTypeRole .roleJury {
    color: white;
    background-color: sienna;     /* new */
}

.attendeeTypeRole .roleDJ {
    color: white;
    background-color: black;      /* new */
}


/* =========================
   ROLE ICONS (background-image)
   ========================= */

.roleTech {
    width: 16px;
    background-image: url('gfx-stodola/style/role-tech.svg');
}

.roleDecoration {
    width: 16px;
    background-image: url('gfx-stodola/style/role-decoration.svg');
}

.roleGraphic {
    width: 16px;
    background-image: url('gfx-stodola/style/role-graphic.svg');
}

.roleShowrunner {
    width: 16px;
    background-image: url('gfx-stodola/style/role-showrunner.svg');
}

.roleProgram {
    width: 16px;
    background-image: url('gfx-stodola/style/role-program.svg');
}

.roleModerator {
    width: 16px;
    background-image: url('gfx-stodola/style/role-moderator.svg');
}

.roleJury {
    width: 16px;
    background-image: url('gfx-stodola/style/role-jury.svg');
}

.roleDJ {
    width: 16px;
    background-image: url('gfx-stodola/style/role-dj.svg');
}



/** LOGO **/
.header-menu-logo {
    margin-left: calc(31px + var(--header-side-gap));
    margin-right: 10px;
    padding: 0;
    cursor: pointer;
    width: 175px;
    
}
    #header-mobile .header-menu-logo {
        margin-left: 0px;
        margin-right: 5px;
    }


.header-menu-logo .item a {
  display: block;
  width: 64px;          /* adjust to your logo */
  height: 64px;          /* adjust to your logo */

  background-image: url("/css/gfx-stodola/logo_mono.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  text-indent: -9999px; 
  overflow: hidden;
  white-space: nowrap;
}

.header-menu-logo:hover .item a {

  background-image: url("/css/gfx-stodola/logo.png");

}

body.mobile .header-menu-logo {
  display: none;
}

/* mod end */


/** BACKGROUND and TITLE **/
#body-background {
    background-color: var(--palette-background);
    background-image: none;
}
    #body-background::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100vh;
        top: 0;
        right: 0;
        background-repeat: no-repeat;
    }
    @media screen and (min-width: 0px) { /* xs, sm */
        #body-background::before {
            background-image: url("gfx-stodola/background1.webp");
            background-position: right top;
            background-size: cover;
        }
    }
    @media screen and (min-width: 700px) { /* md */
        #body-background::before {
            background-image: url("gfx-stodola/background1.webp");
            background-position: right top;
            background-size: cover;
        }
    }
    @media screen and (min-width: 1100px) { /* lg, xl */
        #body-background::before {
            background-image: url("gfx-stodola/background1.webp");
            background-position: right top;
            background-size: cover;
        }
    }

/* --- BUBBLE PARALLAX --- */
.bubble-layer {
    position: fixed;
    inset: -10vh -10vw;              /* přesah okna, aby kraje nebyly vidět */
    pointer-events: none;
    background-image: url("gfx-stodola/bubliny.png");
    background-repeat: no-repeat;    /* NE repeat */
    background-size: 120vw 120vh;    /* větší než okno */
    will-change: transform;
    z-index: 3;
}

/* zadní, nejjemnější vrstva */
.bubble-layer-1 {
    opacity: 0.18;
    animation: bubbles-layer-1 70s linear infinite;
}

/* střední vrstva */
.bubble-layer-2 {
    opacity: 0.28;
    animation: bubbles-layer-2 45s linear infinite reverse;
}

/* přední, nejvýraznější vrstva */
.bubble-layer-3 {
    opacity: 0.38;
    animation: bubbles-layer-3 30s linear infinite alternate;
}

@keyframes bubbles-layer-1 {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-80px, -160px, 0); }
}

@keyframes bubbles-layer-2 {
    from { transform: translate3d(40px, -40px, 0); }
    to   { transform: translate3d(-120px, 80px, 0); }
}

@keyframes bubbles-layer-3 {
    from { transform: translate3d(-30px, 60px, 0); }
    to   { transform: translate3d(90px, -90px, 0); }
}