/**
 * CookieConsent v3 - Light Theme
 * FOX Development
 *
 * Light version of the cookie consent bar styling.
 * Include this file AFTER the CookieConsent library CSS.
 * Do NOT add cc--darkmode class to <html> when using this theme.
 *
 * Usage:
 *   <link rel="stylesheet" href="cookieconsent.css">
 *   <link rel="stylesheet" href="cookieconsent-light.css">
 *
 * galeriacincin.sk: brand #313139 (site headings), hover #000, site font, Bootstrap 3
 *   container widths (1170/970/750), description and Customize text darkened to #414145
 *   for WCAG AA contrast.
 *
 * All sizes are px, never rem. Bootstrap 3 sets html { font-size: 10px }, so rem
 * values rendered at 62.5% there (an 8px description on seniorfriendly.sk).
 * The library itself pins #cc-main to 16px, px keeps the theme on the same base.
 *
 * Specificity: the desktop rules include `.cm.cm--bar.cm--inline` (4 classes).
 * Every rule inside a @media block MUST list that same 4-class selector, or the
 * desktop value wins at that width (2026-09-29: three buttons 415px wide clipped
 * in a 375px bar; body stayed 1140px wide at 1024px).
 */

/* ===== Cookie Consent - FOX Light Theme ===== */
#cc-main {
    --cc-bg: rgba(255, 255, 255, 0.92);
    --cc-primary-color: #2a2a2e;
    --cc-secondary-color: #5a5a66;
    --cc-btn-primary-bg: #313139;
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-hover-bg: #000;
    --cc-btn-secondary-bg: rgba(0, 0, 0, 0.06);
    --cc-btn-secondary-color: #333;
    --cc-btn-secondary-hover-bg: rgba(0, 0, 0, 0.12);
    --cc-separator-border-color: rgba(0, 0, 0, 0.08);
    --cc-toggle-on-bg: #313139;
    --cc-toggle-off-bg: #c0c0c8;
    --cc-toggle-on-knob-bg: #fff;
    --cc-toggle-off-knob-bg: #fff;
    --cc-cookie-category-block-bg: rgba(0, 0, 0, 0.03);
    --cc-cookie-category-block-hover-bg: rgba(0, 0, 0, 0.06);
    --cc-footer-bg: rgba(0, 0, 0, 0.03);
    --cc-footer-color: #6a6a75;
    --cc-footer-border-color: rgba(0, 0, 0, 0.08);
    --cc-overlay-bg: rgba(0, 0, 0, 0.45);
    --cc-font-family: "HelveticaNeueW02-67MdCn 694060", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --cc-modal-border-radius: 0;
    --cc-btn-border-radius: 6px;
    --cc-font-size: 13.44px;
}

/* Consent bar - matches Bootstrap .container width exactly */
#cc-main .cm,
#cc-main .cm.cm--bar,
#cc-main .cm.cm--bar.cm--inline {
    max-width: 100% !important;
    width: 100% !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
}

/* Body matches Bootstrap .container responsive widths */
#cc-main .cm__body,
#cc-main .cm.cm--bar .cm__body,
#cc-main .cm.cm--bar.cm--inline .cm__body {
    max-width: 1170px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 17.6px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
    box-sizing: border-box !important;
}
@media (max-width: 1399.98px) {
    #cc-main .cm__body,
    #cc-main .cm.cm--bar .cm__body,
    #cc-main .cm.cm--bar.cm--inline .cm__body {
        max-width: 1170px !important;
    }
}
@media (max-width: 1199.98px) {
    #cc-main .cm__body,
    #cc-main .cm.cm--bar .cm__body,
    #cc-main .cm.cm--bar.cm--inline .cm__body {
        max-width: 970px !important;
    }
}
@media (max-width: 991.98px) {
    #cc-main .cm__body,
    #cc-main .cm.cm--bar .cm__body,
    #cc-main .cm.cm--bar.cm--inline .cm__body {
        max-width: 750px !important;
    }
}

/* Text container : no extra padding from library */
#cc-main .cm__texts,
#cc-main .cm.cm--bar .cm__texts,
#cc-main .cm.cm--bar.cm--inline .cm__texts {
    flex: 1;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
}
#cc-main .cm__title,
#cc-main .cm.cm--bar .cm__title {
    font-size: 14.72px;
    font-weight: 600;
    margin-bottom: 4px;
    padding: 0 !important;
    color: #2a2a2e;
}
#cc-main .cm__desc,
#cc-main .cm.cm--bar .cm__desc {
    font-size: 12.8px;
    line-height: 1.5;
    padding: 0 !important;
    margin: 0 !important;
    color: #414145;
}
/* Override library's combined title+desc horizontal padding */
#cc-main .cm__desc,
#cc-main .cm__title {
    padding: 0 !important;
}

/* Button container : always row, never wrap, no max-width limit */
#cc-main .cm__btns,
#cc-main .cm.cm--bar .cm__btns,
#cc-main .cm.cm--bar.cm--inline .cm__btns,
#cc-main .cm--bar.cm--inline .cm__btns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

/* Kill library's margin-top on adjacent buttons and button groups */
#cc-main .cm__btn + .cm__btn,
#cc-main [class*="cm__btn-group"] + [class*="cm__btn-group"] {
    margin-top: 0 !important;
    margin: 0 !important;
}

/* Button groups : size to content, not 50/50 split.
   display:flex is REQUIRED here. The theme shipped `gap` on this selector while the
   element stayed `display:block`, and gap does nothing on a block container, so the
   two buttons inside a group rendered flush against each other and read as one wide
   amber slab. Adam spotted it as "no space between the consent buttons". */
#cc-main [class*="cm__btn-group"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: none !important;
    gap: 8px !important;
}

/* All buttons : auto width so text fits, no overflow clipping */
#cc-main .cm .cm__btn,
#cc-main .cm.cm--bar .cm__btn,
#cc-main .cm.cm--bar.cm--inline .cm__btn,
#cc-main .cm .cm__btn[data-role] {
    font-family: "HelveticaNeueW02-67MdCn 694060", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13.12px !important;
    font-weight: 500 !important;
    padding: 7.2px 17.6px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    width: auto !important;
    min-width: fit-content !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    line-height: 1.4 !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Primary button (Povoliť všetko / Accept all) : solid orange */
#cc-main .cm .cm__btn[data-role="all"] {
    background: #313139 !important;
    color: #fff !important;
    border: 1px solid #313139 !important;
}
#cc-main .cm .cm__btn[data-role="all"]:hover {
    background: #000 !important;
    border-color: #000 !important;
}

/* Secondary button (Odmietnuť všetko / Reject all) : solid orange, same as primary */
#cc-main .cm .cm__btn[data-role="necessary"] {
    background: #313139 !important;
    color: #fff !important;
    border: 1px solid #313139 !important;
}
#cc-main .cm .cm__btn[data-role="necessary"]:hover {
    background: #000 !important;
    border-color: #000 !important;
}

/* Tertiary button (Prispôsobiť / Customize) : ghost outline */
#cc-main .cm .cm__btn[data-role="show"] {
    background: transparent !important;
    color: #414145 !important;
    border: 1px solid rgba(0, 0, 0, 0.35) !important;
}
#cc-main .cm .cm__btn[data-role="show"]:hover {
    color: #333 !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Mobile responsive.
   Every selector list carries the 4-class `.cm.cm--bar.cm--inline` variant, or the
   desktop rules above win (see header).
   All three buttons sit in ONE row, on every site (Adam, 2.10.2026: two rows of buttons
   waste space on small screens; the two-row layout of 29.9. was rejected). The two
   library button groups dissolve (display: contents), each button starts at its label
   width plus 4px side padding and the leftover width is shared out, so the row is always
   full. Label size scales with the screen, clamp(11.5px, 3.6vw, 14px): padding alone is
   not enough, the label width decides. Tuned on citysounds.sk (system font): the three SK
   labels measure 284px at 14px and a 320px phone leaves 274px. With another font or other
   labels, measure at 320px and retune the clamp. 44px tap height; below about 300px a
   label wraps inside its button instead of spilling out. */
@media (max-width: 767.98px) {
    #cc-main .cm__body,
    #cc-main .cm.cm--bar .cm__body,
    #cc-main .cm.cm--bar.cm--inline .cm__body {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px 12px !important;
        max-width: 100% !important;
    }
    #cc-main .cm__btns,
    #cc-main .cm.cm--bar .cm__btns,
    #cc-main .cm.cm--bar.cm--inline .cm__btns,
    #cc-main .cm--bar.cm--inline .cm__btns,
    #cc-main .cm.cm--box .cm__btns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
        border: none !important;
    }
    #cc-main .cm__btn-group,
    #cc-main .cm .cm__btn-group,
    #cc-main .cm.cm--bar .cm__btn-group,
    #cc-main .cm.cm--bar.cm--inline .cm__btn-group,
    #cc-main .cm [class*="cm__btn-group"] {
        display: contents !important;
    }
    #cc-main .cm .cm__btn,
    #cc-main .cm.cm--box .cm__btn,
    #cc-main .cm.cm--bar .cm__btn,
    #cc-main .cm.cm--bar.cm--inline .cm__btn,
    #cc-main .cm .cm__btn[data-role],
    #cc-main .cm [class*="cm__btn--"] {
        flex: 1 1 auto !important;
        min-width: auto !important;
        width: auto !important;
        min-height: 44px !important;
        padding: 6px 4px !important;
        font-size: clamp(11.5px, 3.6vw, 14px) !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        text-align: center !important;
        margin: 0 !important;
        border-radius: 6px !important;
    }
    #cc-main .cm .cm__btn[data-role="all"] {
        margin-right: 0 !important;
    }
}

/* Preferences modal */
#cc-main .pm {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.95);
}
#cc-main .pm__title {
    font-size: 17.6px;
    color: #2a2a2e;
}
#cc-main .pm__section-desc,
#cc-main .pm__section-title {
    font-size: 13.6px;
}

#cc-main .cc-link {
    color: #313139;
}
#cc-main .cc-link:hover {
    color: #000;
}

/* Cookie settings button (floating). 2026-10-21: lighter and smaller (white with a hairline, grey icon, 5.3:1), so
   it no longer reads as one of the footer's social icons; footer.tpl.php lifts it above the footer when the footer
   is on screen, so no transform transition here (it follows the scroll). */
#cookie-settings-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(49, 49, 57, 0.18);
    color: #6b6b73;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#cookie-settings-btn:hover,
#cookie-settings-btn:focus-visible {
    background: #313139;
    border-color: #313139;
    color: #fff;
}
@media (max-width: 767px) {
    #cookie-settings-btn { width: 40px; height: 40px; }
}