/*
 * custom.css
 * Overrides for Hyde/Grav theme.
 * Key principle: broad element selectors (h1, p, span…) are always
 * scoped to .content so they never bleed into the sidebar.
 */

/* =============================================
   SIDEBAR — let hyde.css do the work, just
   reinforce and add what it doesn't cover.
   ============================================= */
.sidebar {
    min-height: 120vh;
    padding: 0;
    /* color and background come from hyde.css — do not override here */
}
.sidebar-sticky {
    bottom: 0;
    top: 4rem;
}

/* hyde.css already sets .sidebar a { color: #fff }
   We only need to add the hover blur */
.sidebar a:hover {
    filter: blur(3px);
    text-decoration: none !important;
}
.sidebar-about h1:hover a {
    text-decoration: none;
    filter: blur(10px);
}

/* Social icons */
.social-icons {
    margin-top: 40px !important; /* This pushes the whole group of icons down */
}

.social-icon {
    display: block;
    height: 30px;
    width: 30px;
    margin-bottom: 10px;
}
.inst {
    margin-top: 3px;
    margin-left: 1px;
}
.social-icon img {
    margin-left: -3px;
}
.social-icon:hover img {
    margin-left: -3px;
    filter: blur(3px);
}

/* Sidebar nav */
.sidebar .sidebar-nav-item:active {
    background: none !important;
    outline: none !important;
}

/* =============================================
   GLOBAL RESETS (safe, non-conflicting)
   ============================================= */
h1 {
    margin-bottom: 1.5rem;
}
img {
    border-radius: 0;
    margin-bottom: 10px;
}
hr {
    background: black;
    border-color: black;
    border: none;
    height: 1px;
    margin-top: 30px;
    margin-bottom: 1.5rem;
}
hr:last-child {
    display: none;
}
* {
    -webkit-tap-highlight-color: transparent;
}
::-moz-selection {
    color: #FFF !important;
    background: #202020 !important;
}
::selection {
    color: #FFF !important;
    background: #202020 !important;
}

/* =============================================
   CONTENT AREA — scoped to .content/.page/.post
   so these NEVER touch the sidebar
   ============================================= */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.content strong,
.content p,
.content span,
.content li,
.content blockquote,
.content em,
.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6,
.page strong,
.page p,
.page span,
.page li,
.page blockquote,
.page em {
    color: #202020;
    text-decoration: none !important;
}
.page-title {
    color: #202020;
}
.page a {
    color: #202020;
    text-decoration: none;
}
.page a:hover {
    text-decoration: none;
}
.page-subtitle {
    font-size: .8rem !important;
    margin-top: -0.8rem !important;
    color: #202020 !important; /* Changed to black */
}
.page, .post {
    text-align: left;
    margin-bottom: 4em;
    font-size: 17px;
    padding-top: 5rem;
}
.page img {
    object-fit: contain;
}
.content p > a, .page p > a {
    text-decoration: underline !important;
}
.content p > a:hover, .page p > a:hover {
    filter: blur(3px) !important;
}

/* =============================================
   LINKS & BLUR EFFECTS
   ============================================= */
.blur-link {
    color: #202020;
    text-decoration: none !important;
    display: block;
}
.blur-link:hover {
    filter: blur(3px);
    text-decoration: none !important;
}
.article-link, .custom-link {
    text-decoration: none !important;
    color: #202020;
    text-align: left;
}
.article-link:hover, .custom-link:hover {
    text-decoration: none !important;
    filter: blur(3px) !important;
}
h2 .custom-link:hover {
    filter: blur(5px) !important;
}
.glightbox:hover {
    filter: blur(10px);
}

/* =============================================
   LAYOUT — content area positioning
   ============================================= */
.content {
    max-width: 54rem;
    padding-bottom: 0 !important;
    margin-left: calc((100vw - 14rem - 54rem) / 2 + 14rem);
    padding-top: 0;
    margin-top: 0;
}
#return-to-top svg {
    top: 14px !important;
}

/* =============================================
   LIGHTBOX
   ============================================= */
.gslider {
    background: #202020;
}
.glightbox-clean .gdesc-inner {
    padding: 0 !important;
}
.glightbox-clean .gslide-description {
    background-color: black !important;
    padding: 0 20px !important;
    font-size: 16px;
}
.glightbox-clean .gslide-description .gslide-title {
    color: rgba(255, 255, 255, 0.55) !important;
    padding: 10px;
    text-align: center;
    font-family: "DM Sans", Helvetica, Arial, sans-serif;
}
.glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev {
    background-color: rgba(0, 0, 0, .0) !important;
    opacity: .55;
}
.glightbox-clean .gclose:hover, .glightbox-clean .gnext:hover, .glightbox-clean .gprev:hover {
    opacity: .2 !important;
}
.gslide-image {
    position: relative;
}
.gslide.loaded.current.zoomed .gslide-image img {
    cursor: move !important;
}
.gslide.loaded.current.zoomed .gslide-image img.dragging {
    cursor: move !important;
}
.ginner-container {
    background: black !important;
}
.watermark-text {
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    overflow: hidden;
}

/* =============================================
   HOME CAROUSEL
   ============================================= */
/* Use min-height instead of fixed height so it grows if needed */
.carousel {
    position: relative;
    text-align: center;
    max-width: 800px;
    overflow: visible;
    padding-bottom: 80px;
}
.carousel-inner {
    position: relative;
    width: 100%;
    height: 380px; /* Original height */
}
.carousel-item {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 4s ease-in-out, filter 5s ease-in-out;
    filter: blur(10px);
    pointer-events: none;
}
.carousel .arr {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 100%;
    color: #202020;
    font-size: 80px;
    opacity: .2;
    cursor: pointer;
    transition: opacity .3s ease-in-out;
}
.carousel .arr:hover {
    opacity: .7;
}
.carousel .r-arr { right: 0; }
.carousel .l-arr { left: 0; }
.carousel-item.active {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
}
.carousel-item img {
    height: 100%;
    object-fit: contain;
    text-align: left;
    margin: 0 !important;
    border-radius: 0 !important;
}
.carousel .description {
    width: 100%;
    background: #fff;
    color: rgb(32,32,32);
    text-align: left;
    padding: 10px 20px 10px 0;
    font-size: 14px;
    display: block;
}

/* =============================================
   NEWS (Consolidated & Specific)
   ============================================= */
.news-page {
    max-width: 34rem;
}

.news-wrapper {
    display: block;
    max-width: 800px;
    margin-top: 3rem !important; 
}

/* This targets all links in news, but we override it below */
.news-wrapper a {
    color: #202020;
    display: block;
    margin: .5rem 0;
}

.news-wrapper h3 a {
    display: inline;
}

.news-wrapper h3 a:hover {
    filter: blur(3px);
    text-decoration: none;
}

/* Existing news styles */
.news-block {
    margin-bottom: .5rem;
}

.news-block em {
    font-size: .7rem;
}

.news-link-date {
    display: block;
    margin-top: 0.4rem;
}

/* This targets the see-more link directly, anywhere inside .news-page */
.news-page .news-see-more {
    font-size: 14px !important;    /* Adjust this to 12px or 16px as you prefer */
    margin-top: 3rem !important;
    display: block !important;
    text-align: left !important;
    text-decoration: none !important;
    color: #202020 !important;
}

/* =============================================
   SERIES
   ============================================= */
.page-serie {
    max-width: 34rem;
}

.works .serie-container {
    display: flow-root; 
    margin-bottom: 3rem;
    position: relative;
}

.works .carousel {
    height: 400px; /* This only affects works */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.works .see-more {
    font-size: 17px;
    color: #202020;
    display: block;
    clear: both; /* Forces it below the carousel */
    margin-top: 25px !important; 
    text-align: left;
    margin-bottom: 20px;
}
.serie-scroll,
.serie-scroll a {
    display: inline;
    padding-right: 2rem;
    white-space: nowrap;
    line-height: 1.5rem;
    font-weight: bold !important;
    text-shadow: 0.1px 0.1px 0px rgba(32,32,32, 0.3); /* Softly thickens the text */
}
.serie-scroll:hover {
    filter: blur(3px) !important;
}
.serie-photo .glightbox:hover {
    filter: none;
}
.serie-photo {
    width: 100%;
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
}
.serie-photo img:hover {
    filter: blur(15px);
}
.serie-photo img {
    display: block;
    width: 100%;
    margin-bottom: 0;
}
.serie-photo .description {
    background: #FFF;
    color: #202020;
    text-align: left;
    padding: 10px 20px 10px 0;
    font-size: 14px;
}

/* =============================================
   CATEGORY GRID
   ============================================= */
.category-wrapper {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.category-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-preview img {
    max-height: 100%;
    object-fit: contain;
}
.category-preview:nth-child(n+4) {
    display: none;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media screen and (max-width: 959px) {
    .sidebar {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 40px !important;
    }
}

@media screen and (max-width: 1200px) {
    .serie-scroll {
        line-height: 2rem;
    }
}

@media screen and (max-width: 959px) {
    .sidebar {
        height: auto !important;
        padding: 2rem 0;
        min-height: 420px;
    }
    .sidebar h1 {
        text-align: left;
    }
    .sidebar .sidebar-nav-item {
        font-size: 22px !important;
        text-align: left;
    }
    .sidebar .social-icon {
        display: inline-block;
        text-align: left;
    }
    .sidebar .social-icons {
        text-align: left;
    }
    .sidebar-sticky {
        position: static !important;
        top: auto !important;
    }
    .container {
        max-width: 100%;
    }
    .content {
        max-width: 100%;
        padding: 0 14px !important;
        margin-left: 0;
    }
    .category-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
    .category-preview {
        margin-bottom: 3rem;
    }
    img {
        border-radius: 0 !important;
    }
    .carousel .arr {
        top: -10px;
    }
    .works hr {
        margin-top: 2rem;
        margin-bottom: 4rem;
    }
    * {
        font-family: "DM Sans", sans-serif !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .news-link-date {
    font-size: 1rem;
}
}

@media screen and (max-height: 720px) {
    html {
        font-size: 16px;
    }
    .sidebar-about h1 {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    .sidebar-sticky {
        top: 2rem;
    }
    .page {
        padding-top: 2rem;
    }
    .carousel-inner {
        width: 100%;
        height: 60vw;
    }
    
    .page, .post {
    padding-bottom: 5rem !important;
}
    
    .content {
    padding-bottom: 5rem !important;
}
}
/* Style for the homepage news link only */
.homepage-see-more {
    font-size: 13px !important;   /* Make it smaller */
    margin-top: 30px !important;  /* Adjust padding above the link */
    display: block;
    color: #202020 !important;
}
/* Ensure both elements use the exact same font size */
.serie-meta {
    font-size: 13px !important;
}

.homepage-see-more {
    font-size: 13px !important; /* Matches the meta text */
    margin-top: 10px !important;
    display: block;
    color: #202020 !important;
    text-decoration: none !important;
}
/* =============================================
   COOKIE CONSENT — matched to sidebar style
   ============================================= */
#cc-main {
    --cc-font-family: "DM Sans", Helvetica, Arial, sans-serif;
    --cc-bg: #202020;
    --cc-primary-color: #ffffff;
    --cc-secondary-color: rgba(255, 255, 255, 0.6);
    --cc-btn-primary-bg: #ffffff;
    --cc-btn-primary-color: #202020;
    --cc-btn-primary-hover-bg: #ffffff;
    --cc-btn-primary-border-color: transparent;
    --cc-btn-secondary-bg: #202020;
    --cc-btn-secondary-color: #ffffff;
    --cc-btn-secondary-hover-bg: #202020;
    --cc-btn-secondary-border-color: transparent;
    --cc-modal-border-radius: 0;
    --cc-btn-border-radius: 0;
    --cc-modal-box-shadow: none;
    --cc-link-color: rgba(255, 255, 255, 0.5);
    --cc-separator-border-color: rgba(255, 255, 255, 0.15);
}

/* Banner and preferences panel */
#cc-main .cm,
#cc-main .pm,
#cc-main .pm__header,
#cc-main .pm__body,
#cc-main .pm__footer,
#cc-main .pm__section,
#cc-main .pm__section-header,
#cc-main .pm__section-desc,
#cc-main .pm__section-title {
    background-color: #202020 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 0 !important;
    font-family: "DM Sans", Helvetica, Arial, sans-serif !important;
}

/* All text */
#cc-main .cm__title,
#cc-main .cm__desc,
#cc-main .pm__title,
#cc-main .pm__desc {
    color: #ffffff !important;
    font-family: "DM Sans", Helvetica, Arial, sans-serif !important;
}

/* Close X button */
#cc-main .pm__close-btn {
    background: none !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
#cc-main .pm__close-btn:hover {
    filter: blur(2px) !important;
    background: none !important;
}

/* Toggle switches */
#cc-main .pm__toggle-wrapper,
#cc-main .section__toggle-wrapper {
    background-color: #202020 !important;
}

/* ALL buttons — reset browser defaults first */
#cc-main button,
#cc-main .cm__btn,
#cc-main .pm__btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    font-family: "DM Sans", Helvetica, Arial, sans-serif !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    will-change: filter !important;
    transition: filter 0.3s ease !important;
}

/* Accept all */
#cc-main .cm__btn--primary,
#cc-main button.cm__btn--primary,
#cc-main .pm__btn--primary,
#cc-main button.pm__btn--primary {
    background-color: #ffffff !important;
    color: #202020 !important;
    border: none !important;
}
#cc-main .cm__btn--primary:hover,
#cc-main button.cm__btn--primary:hover,
#cc-main .pm__btn--primary:hover,
#cc-main button.pm__btn--primary:hover {
    filter: blur(2px) !important;
    -webkit-filter: blur(2px) !important;
    background-color: #ffffff !important;
    color: #202020 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Reject all + Manage preferences + Save preferences */
#cc-main .cm__btn--secondary,
#cc-main button.cm__btn--secondary,
#cc-main .pm__btn--secondary,
#cc-main button.pm__btn--secondary {
    background-color: #202020 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
#cc-main .cm__btn--secondary:hover,
#cc-main button.cm__btn--secondary:hover,
#cc-main .pm__btn--secondary:hover,
#cc-main button.pm__btn--secondary:hover {
    filter: blur(2px) !important;
    -webkit-filter: blur(2px) !important;
    background-color: #202020 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Footer — Privacy Policy link */
#cc-main .cm__footer {
    background-color: #202020 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 10px 16px !important;
}
#cc-main .cm__footer a,
#cc-main .cm__footer a:hover,
#cc-main .cm__footer a:visited {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}
#cc-main .cm__footer a:hover {
    filter: blur(2px) !important;
}

/* All links */
#cc-main a,
#cc-main a:hover,
#cc-main a:focus,
#cc-main a:visited {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
}
#cc-main a:hover {
    filter: blur(2px) !important;
}

/* Kill ALL blue outlines, focus rings, tap highlights */
#cc-main *,
#cc-main *:focus,
#cc-main *:active,
#cc-main *:focus-visible,
#cc-main *:focus-within {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
/* Cookie banner: Accept all stays white, fades on hover like other buttons */
#cc-main {
  --cc-btn-primary-hover-bg: #ffffff;
  --cc-btn-primary-hover-color: #000000;
}
#cc-main .cm__btn:not(.cm__btn--secondary):hover,
#cc-main .pm__btn:not(.pm__btn--secondary):hover {
  opacity: 0.8;
}

/* FIX: 'Accept all' has no --primary class in this library version.
   Target the non-secondary button directly. */
#cc-main .cm__btn:not(.cm__btn--secondary),
#cc-main .pm__btn:not(.pm__btn--secondary) {
    background-color: #ffffff !important;
    color: #202020 !important;
    border: none !important;
}
#cc-main .cm__btn:not(.cm__btn--secondary):hover,
#cc-main .pm__btn:not(.pm__btn--secondary):hover {
    background-color: #ffffff !important;
    color: #202020 !important;
    filter: blur(2px) !important;
    -webkit-filter: blur(2px) !important;
}

/* Preferences modal: unify text to soft gray like the banner */
#cc-main .pm,
#cc-main .pm__title,
#cc-main .pm__desc,
#cc-main .pm__header,
#cc-main .pm__body,
#cc-main .pm__section,
#cc-main .pm__section-header,
#cc-main .pm__section-title,
#cc-main .pm__section-desc {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Toggles: white checkmark in 'on' state for all toggles */
#cc-main {
    --cc-toggle-on-knob-icon-color: #ffffff;
    --cc-toggle-readonly-knob-icon-color: #ffffff;
    --cc-toggle-enabled-icon-color: #ffffff;
}
#cc-main .toggle__icon-on svg,
#cc-main .toggle__icon-on svg path {
    stroke: #ffffff !important;
}