/*
  Sociálne Kasíno XYZ - style.css
  Design: Glassmorphism, Asymmetrical Balance
  Color Scheme: Tetrad
  Animation: Parallax
  Fonts: Montserrat (Headings), Merriweather (Body)
*/

:root {
    /* Tetradic Color Scheme */
    --primary-color: #7F00FF; /* Purple */
    --primary-color-dark: #6a00d9;
    --secondary-color: #FFD700; /* Gold */
    --secondary-color-dark: #e6c300;
    --accent-color-1: #00BFB2; /* Teal */
    --accent-color-1-dark: #008c81;
    --accent-color-2: #FF6347; /* Tomato/Coral */
    --accent-color-2-dark: #e05236;

    /* Text Colors */
    --text-heading-color: #222222;
    --text-body-color: #333333;
    --text-subtle-color: #555555;
    --text-light-color: #FFFFFF;
    --text-on-primary: #FFFFFF;
    --text-on-secondary: #333333;

    /* Background Colors */
    --bg-body: #f4f7f6;
    --bg-card: #ffffff;
    --bg-footer: #1f1f1f;
    --bg-glass: rgba(255, 255, 255, 0.15);
    --bg-glass-darker: rgba(50, 50, 100, 0.15);
    --bg-overlay-dark: rgba(0, 0, 0, 0.6);
    --bg-overlay-hero: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8));

    /* Borders & Shadows */
    --border-glass: rgba(255, 255, 255, 0.25);
    --shadow-card: 0 5px 15px rgba(0,0,0,0.08);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --text-shadow-dark-bg: 1px 1px 3px rgba(0,0,0,0.5);
    --text-shadow-light-bg: 1px 1px 2px rgba(0,0,0,0.1);

    /* Fonts */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Merriweather', serif;

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-ease: ease-in-out;

    /* Header Height (for content offset) */
    --header-height: 70px; /* Approximate, adjust if navbar height changes */
}

/* Global Styles */
body {
    font-family: var(--font-body);
    color: var(--text-body-color);
    line-height: 1.7;
    background-color: var(--bg-body);
    overflow-x: hidden;
    font-size: 16px; /* Base font size */
    padding-top: 0px !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-heading-color);
    text-align: center;
    margin-bottom: 1.5rem; /* Bulma might override this, check specificity */
    font-weight: 700;
    line-height: 1.3;
}

.title { /* Bulma class refinement */
    font-family: var(--font-heading);
    color: var(--text-heading-color) !important; /* Ensure override if needed */
}
.subtitle { /* Bulma class refinement */
    font-family: var(--font-body);
    color: var(--text-subtle-color) !important;
}

.section-title {
    margin-top: 2.5rem;
    margin-bottom: 3rem;
    font-size: 2.8rem;
    color: var(--text-heading-color);
    text-shadow: var(--text-shadow-light-bg);
}

@media screen and (max-width: 768px) {
    .section-title {
        font-size: 2.2rem;
    }
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--primary-color);
    transition: color var(--transition-speed) var(--transition-ease);
}
a:hover {
    color: var(--primary-color-dark);
}

/* Main Container and Content Container */
.main-container { /* Already in HTML */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.content-container { /* Already in HTML */
    padding: 60px 0; /* Default section padding */
}

/* Privacy and Terms page top padding */
.privacy-page-content,
.terms-page-content {
    padding-top: calc(var(--header-height) + 30px) !important; /* Offset for fixed header */
}


/* Glassmorphism Base Style */
.glassmorphic {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-glass);
    padding: 25px;
    margin-bottom: 20px;
    color: var(--text-body-color); /* Default text color for glassmorphic */
}
.glassmorphic .title, .glassmorphic h1, .glassmorphic h2, .glassmorphic h3, .glassmorphic h4 {
    color: var(--text-heading-color); /* Ensure headings are dark on light glass */
}
/* For glassmorphic elements on dark backgrounds with light text */
.glassmorphic-light-text {
    color: var(--text-light-color);
}
.glassmorphic-light-text .title, .glassmorphic-light-text h1, .glassmorphic-light-text h2, .glassmorphic-light-text h3, .glassmorphic-light-text h4 {
    color: var(--text-light-color);
}


/* Header & Navigation */
.site-header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color var(--transition-speed) var(--transition-ease);
    height: var(--header-height);
}
.site-header .navbar {
    min-height: var(--header-height);
}

.navbar-item, .navbar-link {
    color: var(--text-light-color) !important;
    font-family: var(--font-heading);
    font-weight: 600;
    transition: background-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);
}
.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--secondary-color) !important;
}
.navbar-burger span {

    height: 2px;
}
.navbar-menu.is-active {
    background-color: rgba(10, 10, 10, 0.95) !important; /* Darker for open mobile menu */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    padding: 0.5rem 0;
}
.logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--secondary-color) !important;
}

/* Hero Section */
#hero {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* For CSS parallax effect */
    color: var(--text-light-color);
    min-height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#hero .hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay-hero);
    z-index: 1;
}
#hero .hero-body {
    position: relative;
    z-index: 2;
    padding: 2rem; /* Padding for content */
}
#hero .title, #hero .subtitle {
    color: var(--text-light-color) !important; /* IMPORTANT: Ensures white text */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}
#hero .title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
#hero .subtitle {
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}
#hero p {
    font-size: 1.1rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}
@media screen and (max-width: 768px) {
    #hero .title {
        font-size: 2.5rem;
    }
    #hero .subtitle {
        font-size: 1.3rem;
    }
    #hero p {
        font-size: 1rem;
    }
}

/* Global Button Styles */
/* Bulma's .button is the base */
.button {
    font-family: var(--font-heading);
    font-weight: 600;
    border-radius: 8px;
    padding: 0.8em 1.8em;
    transition: all var(--transition-speed) var(--transition-ease);
    border: none; /* Remove default border if any */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.button.is-primary { /* Customizing Bulma's primary button */
    background-color: var(--secondary-color);
    color: var(--text-on-secondary) !important;
    border: 1px solid var(--secondary-color);
}
.button.is-primary:hover {
    background-color: var(--secondary-color-dark);
    color: var(--text-on-secondary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.button.is-link { /* Customizing Bulma's link button for other actions */
    background-color: var(--primary-color);
    color: var(--text-on-primary) !important;
    border: 1px solid var(--primary-color);
}
.button.is-link:hover {
    background-color: var(--primary-color-dark);
    color: var(--text-on-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.button.is-link.is-outlined {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
}
.button.is-link.is-outlined:hover {
    background-color: var(--primary-color);
    color: var(--text-on-primary) !important;
}

.button.is-info.is-outlined { /* For terms/privacy links */
    background-color: transparent;
    border-color: var(--accent-color-1);
    color: var(--accent-color-1) !important;
}
.button.is-info.is-outlined:hover {
    background-color: var(--accent-color-1);
    color: var(--text-on-primary) !important;
}


.hero-button { /* Specific hero button if needed, but should inherit from global */
    margin-top: 2rem;
    font-size: 1.1rem; /* Slightly larger */
    padding: 1rem 2.5rem;
}


/* Card Styles (Portfolio, Events, etc.) */
.card {
    background-color: var(--bg-card);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    height: 100%; /* For equal height cards in a row */
    display: flex; /* For flex children like card-image and card-content */
    flex-direction: column; /* Stack image and content vertically */
    transition: transform var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.card .card-image { /* Bulma class */
    /* align-items: center and text-align: center here or on figure */
    text-align: center; /* Center the figure if it's narrower than card-image */
}
.card .card-image figure.image { /* Bulma class, often is-4by3, is-16by9 etc. */
    margin: 0 auto; /* Center figure if it's block and has width */
    overflow: hidden; /* Ensure image doesn't overflow figure on radius */
}
.card .card-image figure.image img,
.card .image-container img { /* For custom .image-container */
    width: 100%;
    height: 220px; /* Fixed height for consistency */
    object-fit: cover; /* Crop image to fit, maintaining aspect ratio */
    display: block; /* Remove extra space below image */
}

.card .card-content {
    padding: 1.5rem;
    flex-grow: 1; /* Allows content to take remaining space */
    display: flex;
    flex-direction: column;
    text-align: left; /* Default text alignment for content */
}
.card .card-content .title {
    color: var(--text-heading-color) !important;
    margin-bottom: 0.75rem;
    text-align: left; /* Titles in cards can be left-aligned */
    font-size: 1.3rem;
}
.card .card-content .content, .card .card-content p {
    color: var(--text-subtle-color);
    font-size: 0.95rem;
    flex-grow: 1; /* Paragraph takes available space */
}
.card .card-content .button {
    margin-top: auto; /* Pushes button to the bottom of card-content */
    align-self: flex-start; /* Align button to the left */
}

/* Styles for centering content within card-like elements (if needed broadly) */
.item-centered-content, .testimonial, .team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


/* Accordion (Workshops) */
.accordion-item {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}
.accordion-item .accordion-header {
    background-color: var(--bg-glass);
    padding: 18px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-glass);
    color: var(--text-body-color);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    transition: background-color var(--transition-speed) var(--transition-ease);
}
.accordion-item .accordion-header:hover,
.accordion-item .accordion-header.is-active {
    background-color: rgba(255, 255, 255, 0.25); /* Slightly more opaque on hover/active */
}
.accordion-item .accordion-header .animated-icon { /* Example icon */
    margin-right: 12px;
    font-size: 1.2em;
    color: var(--primary-color);
    transition: transform var(--transition-speed) var(--transition-ease);
}
.accordion-item .accordion-header.is-active .animated-icon {
    transform: rotate(90deg);
}
.accordion-item .accordion-content {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 20px;
    display: none; /* JS will toggle this */
    color: var(--text-subtle-color);
    border-top: none;
    line-height: 1.8;
}
.accordion-item .accordion-content.is-active {
    display: block;
}


/* Parallax Background Sections */
.parallax-background {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 80px 20px;
    color: var(--text-light-color);
}
.parallax-background::before { /* Overlay for text readability */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay-dark);
    z-index: 1;
}
.parallax-background .container {
    position: relative;
    z-index: 2;
}
.parallax-background .title,
.parallax-background .subtitle,
.parallax-background p,
.parallax-background ul li {
     color: var(--text-light-color) !important;
     text-shadow: var(--text-shadow-dark-bg);
}
.parallax-background .glassmorphic { /* Glassmorphic elements on parallax bg */
    background: rgba(30, 30, 50, 0.5); /* Darker glass for light text */
    border: 1px solid rgba(255, 255, 255, 0.2);
}


/* External Resources Section */
#external-resources .card {
    background: rgba(230, 230, 240, 0.2); /* Slightly different glass tint */
}
#external-resources .card-content .title a {
    color: var(--primary-color) !important;
    text-decoration: none;
}
#external-resources .card-content .title a:hover {
    text-decoration: underline;
    color: var(--primary-color-dark) !important;
}


/* Contact Form Section */
#contact-form-section .glassmorphic, /* For form on index */
#contact-page-form .glassmorphic { /* For form on contact page */
  background: var(--bg-glass-darker);
}
#contact-form-section .label,
#contact-page-form .label {
  color: var(--text-light-color); /* Light label for darkish glass */
  font-family: var(--font-heading);
  font-weight: 600;
}
#contact-form-section .input, #contact-form-section .textarea,
#contact-page-form .input, #contact-page-form .textarea {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-light-color);
  border-radius: 6px;
  font-family: var(--font-body);
  padding: 0.8em 1em;
}
#contact-form-section .input::placeholder, #contact-form-section .textarea::placeholder,
#contact-page-form .input::placeholder, #contact-page-form .textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
/* Button styling for forms is handled by global .button.is-primary */
#contact-page-form .label { /* Specific for contact page if background is lighter */
    color: var(--text-body-color);
}
#contact-page-form .input, #contact-page-form .textarea { /* Specific for contact page if background is lighter */
    background-color: rgba(255,255,255,0.7);
    border-color: rgba(0,0,0,0.2);
    color: var(--text-body-color);
}
#contact-page-form .input::placeholder, #contact-page-form .textarea::placeholder {
    color: var(--text-subtle-color);
}


/* Footer */
.site-footer {
    background-color: var(--bg-footer);
    color: #cccccc; /* Lighter grey for footer text */
    padding: 50px 20px;
    font-family: var(--font-body);
    font-size: 0.95rem;
}
.site-footer .footer-column .menu-label {
    color: var(--text-light-color);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.site-footer .footer-column .menu-list a,
.site-footer .social-links a {
    color: var(--accent-color-1);
    padding: 0.5em 0;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-ease), padding-left var(--transition-speed) var(--transition-ease);
}
.site-footer .footer-column .menu-list a:hover,
.site-footer .social-links a:hover {
    color: var(--secondary-color);
    padding-left: 5px; /* Slight indent on hover */
}
.site-footer .social-links {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.site-footer .social-links a {
    margin: 0 12px;
    display: inline-block;
    font-weight: 600;
}
.site-footer .copyright {
    margin-top: 30px;
    text-align: center;
    font-size: 0.9rem;
    color: #888888;
}

/* Asymmetrical Balance Example (using Bulma columns) */
.asymmetric-columns .column.is-two-thirds {
    /* Styles for the larger column */
}
.asymmetric-columns .column.is-one-third {
    /* Styles for the smaller column, maybe different background or offset */
    align-self: center; /* Example alignment */
}

/* 'Read More' Link Style */
.read-more-link {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--accent-color-2);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-speed) var(--transition-ease), border-bottom-color var(--transition-speed) var(--transition-ease);
}
.read-more-link:hover {
    color: var(--accent-color-2-dark);
    border-bottom-color: var(--accent-color-2-dark);
}
.read-more-link::after {
    content: ' →'; /* Arrow indicator */
    margin-left: 4px;
}


/* Success Page (success.html) */
.success-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Full viewport height */
    text-align: center;
    padding: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative; /* For overlay if needed */
}
/* Optional overlay for success page background image */
.success-page-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(244, 247, 246, 0.8); /* Light overlay matching body bg to ensure readability */
    z-index: 1;
}
.success-message-box {
    background: var(--bg-glass); /* Glassmorphic box */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 40px 50px;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.2);
    max-width: 600px;
    position: relative; /* Above overlay */
    z-index: 2;
}
.success-message-box h1 {
    color: var(--accent-color-1); /* Greenish/Teal for success */
    font-size: 3rem;
    margin-bottom: 1.5rem;
}
.success-message-box p {
    color: var(--text-body-color);
    font-size: 1.2rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}
.success-message-box .button {
    /* Uses global .button.is-primary styles */
    font-size: 1.1rem;
}


/* Cookie Consent Popup */
#cookieConsentPopup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    color: var(--text-light-color);
    padding: 20px 25px;
    text-align: center;
    z-index: 9999;
    display: none; /* Hidden by default, JS handles display */
    font-family: var(--font-body);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
#cookieConsentPopup p {
    margin: 0 0 15px 0;
    font-size: 0.95rem;
    line-height: 1.6;
}
#cookieConsentPopup a {
    color: var(--secondary-color); /* Gold for link */
    text-decoration: underline;
}
#cookieConsentPopup button { /* Styles for the accept button */
    background-color: var(--secondary-color);
    color: var(--text-on-secondary);
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 1rem;
    transition: background-color var(--transition-speed) var(--transition-ease);
}
#cookieConsentPopup button:hover {
    background-color: var(--secondary-color-dark);
}


/* Utility Classes */
.has-text-shadow-dark {
    text-shadow: var(--text-shadow-dark-bg);
}
.has-text-shadow-light {
    text-shadow: var(--text-shadow-light-bg);
}
.mb-0 { margin-bottom: 0 !important; }
.mt-large { margin-top: 4rem !important; }
.mb-large { margin-bottom: 4rem !important; }

/* AOS Animation Overrides/Defaults (if needed) */
[data-aos] {
    /* Example: Make animations a bit slower or faster */
    /* transition-duration: 1s !important; */
}

/* Ensure responsive iframe for videos if any */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.navbar-item{
    color: #e6c300 !important;
}
.navbar-burger span{
    color: #000 !important;
}