/*
 Theme Name: blocksy child
 Theme URI: https://creativethemes.com/blocksy/
 Description: A child theme for blocksy
 Author: CreativeThemes
 Author URI: https://creativethemes.com
 Template: blocksy
 Version: 2.1.41
*/

/* ==========================================================================
   1. CABECALHO: HAMBURGER EM TODOS OS DISPOSITIVOS
   ========================================================================== */
/* Apply your installed font to the entire website */
*, body, h1, h2, h3, h4, h5, h6, p, a, li, input, button, select, textarea {
    font-family: 'YourFontName', sans-serif !important;
}
body .ct-header [data-device="desktop"] {
    display: none !important;
}

body .ct-header [data-device="mobile"] {
    display: block !important;
}

body .ct-header [data-device="tablet"] {
    display: none !important;
}

body .ct-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 99990 !important;
}

body.admin-bar .ct-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar .ct-header {
        top: 46px !important;
    }
}

body .ct-header [data-row*="row"] > .ct-container,
body .ct-header .ct-container {
    max-width: 100% !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

body .ct-header .ct-container-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 100px !important;
    box-sizing: border-box !important;
}

body .site-logo-container {
    display: flex !important;
    align-items: center !important;
}

body .site-logo-container img,
body .site-logo-container svg {
    padding-left: clamp(20px, 5vw, 50px) !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    vertical-align: middle !important;
}

body .ct-header-trigger {
    position: relative !important;
    z-index: 99991 !important;
    padding-right: clamp(20px, 5vw, 50px) !important;
    display: flex !important;
    align-items: center !important;
}

/* ==========================================================================
   2. PAGINA / ARCHIVE FULL WIDTH
   ========================================================================== */

body.post-type-archive-ator #main-container,
body.post-type-archive-ator .site-main,
body.post-type-archive-ator .ct-container,
body.post-type-archive-ator [data-content="normal"],
body.post-type-archive-ator [data-archive],
body.home #main-container,
body.home .site-main,
body.home .ct-container,
body.home [data-content="normal"],
body.home .entry-content,
body.home .ct-no-sidebar,
body.home article.page,
body.home .type-page,
body.home .hero-section,
body.home .ct-container-full,
body.page .vca-ator-board {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.home .entry-header,
body.home .page-title {
    display: none !important;
}

/* ==========================================================================
   3. GRELHA DE ATORES
   ========================================================================== */

body.post-type-archive-ator .entries,
.vca-ator-board {
    --grid-columns: 10 !important;
    --grid-columns-tablet: 5 !important;
    --grid-columns-mobile: 2 !important;
    --grid-column-gap: 0px !important;
    --grid-row-gap: 0px !important;
    --grid-gap: 0px !important;
    --cards-gap: 0px !important;

    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    background-color: #af4825 !important;
    border-top: 5px solid #af4825 !important;
    border-bottom: 5px solid #af4825 !important;
}

/* ==========================================================================
   4. CARD DO ATOR
   ========================================================================== */

body.post-type-archive-ator .entries > article,
body.post-type-archive-ator article.entry-card,
body.post-type-archive-ator .entry-card,
.vca-ator-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    position: relative !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

body.post-type-archive-ator .card-content {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    position: static !important;
    line-height: normal !important;
}

/* ==========================================================================
   5. IMAGEM DO ATOR
   ========================================================================== */

body.post-type-archive-ator .ct-media-container,
.vca-ator-image {
    aspect-ratio: 2 / 3 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.vca-ator-image-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
}

body.post-type-archive-ator .ct-media-container a,
body.post-type-archive-ator .ct-media-container picture,
body.post-type-archive-ator .ct-media-container img,
.vca-ator-image picture,
.vca-ator-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

body.post-type-archive-ator .ct-media-container img,
.vca-ator-image img {
    object-fit: cover !important;
    object-position: center center !important;
    filter: grayscale(100%) !important;
    transform: scale(1) !important;
    transition: filter 0.6s ease, transform 0.6s ease !important;
}

/* ==========================================================================
   6. ESCONDER ELEMENTOS EXTRA DO ARCHIVE
   ========================================================================== */

body.post-type-archive-ator .entry-meta,
body.post-type-archive-ator .entry-excerpt,
body.post-type-archive-ator .entry-button {
    display: none !important;
}

/* ==========================================================================
   7. HOVER: COR + ZOOM, SEM OVERLAY
   ========================================================================== */

body.post-type-archive-ator .ct-media-container::after {
    content: none !important;
    display: none !important;
}

body.post-type-archive-ator .entries > article:hover .ct-media-container img,
body.post-type-archive-ator .entry-card:hover .ct-media-container img,
.vca-ator-card:hover .vca-ator-image img,
.vca-ator-image-link:hover .vca-ator-image img,
.vca-ator-image-link:focus .vca-ator-image img {
    filter: grayscale(0%) !important;
    transform: scale(1.05) !important;
}

/* ==========================================================================
   8. TITULO SOBRE A IMAGEM
   ========================================================================== */

body.post-type-archive-ator .entry-title,
.vca-ator-title {
    position: absolute !important;
    left: 50% !important;
    bottom: 22px !important;
    z-index: 5 !important;
    width: calc(100% - 24px) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    text-align: center !important;
    font-size: clamp(12px, 1vw, 18px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, 10px) !important;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease !important;
    pointer-events: none !important;
}

body.post-type-archive-ator .entry-title a {
    color: inherit !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}

body.post-type-archive-ator .entries > article:hover .entry-title,
body.post-type-archive-ator .entry-card:hover .entry-title,
.vca-ator-card:hover .vca-ator-title {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
    body.post-type-archive-ator .entries,
    .vca-ator-board {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 800px) {
    body.post-type-archive-ator .entries,
    .vca-ator-board {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    body.post-type-archive-ator .entries,
    .vca-ator-board {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.post-type-archive-ator .entry-title,
    .vca-ator-title {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, 0) !important;
        font-size: 15px !important;
    }
}

/* ==========================================================================
   10. OVERRIDE FINAL: REMOVER ESPACOS DO BLOCKSY
   ========================================================================== */

body.post-type-archive-ator [data-archive],
body.post-type-archive-ator .entries,
body.post-type-archive-ator .entries > *,
body.post-type-archive-ator .entry-card,
body.post-type-archive-ator .card-content,
body.post-type-archive-ator .ct-media-container,
body.post-type-archive-ator figure,
.vca-ator-board,
.vca-ator-board > *,
.vca-ator-card,
.vca-ator-image {
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   11. OFF-CANVAS MENU: RIGHT-SIDE LAYOUT ONLY
   ========================================================================== */

body:has(.ct-header-trigger[aria-expanded="true"]) .ct-drawer-canvas,
body .ct-drawer-canvas.active,
body .ct-drawer-canvas[aria-hidden="false"] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 100000 !important;
    overflow-y: auto; /* Force vertical scrollbar when content overflows */
    -webkit-overflow-scrolling: touch !important; /* Ensures smooth inertia scrolling on iOS Safari */
    pointer-events: none !important;
}

body:has(.ct-header-trigger[aria-expanded="true"]) .ct-panel,
body .ct-drawer-canvas.active .ct-panel,
body .ct-drawer-canvas[aria-hidden="false"] .ct-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: min(390px, 86vw) !important;
    max-width: 86vw !important;
    height: auto !important;
    max-height: 100vh !important;
    z-index: 100001 !important;
    overflow-y: auto !important; /* Force vertical scrollbar when content overflows */
    -webkit-overflow-scrolling: touch !important; /* Ensures smooth inertia scrolling on iOS Safari */
    pointer-events: none !important;
}

body:has(.ct-header-trigger[aria-expanded="true"]) .ct-panel-inner,
body .ct-drawer-canvas.active .ct-panel-inner,
body .ct-drawer-canvas[aria-hidden="false"] .ct-panel-inner {
    position: relative !important;
    z-index: 100002 !important;
    pointer-events: auto !important;
}

body:has(.ct-header-trigger[aria-expanded="true"]) .ct-panel-close,
body:has(.ct-header-trigger[aria-expanded="true"]) .ct-toggle-close,
body .ct-drawer-canvas.active .ct-panel-close,
body .ct-drawer-canvas.active .ct-toggle-close,
body .ct-drawer-canvas[aria-hidden="false"] .ct-panel-close,
body .ct-drawer-canvas[aria-hidden="false"] .ct-toggle-close {
    pointer-events: auto !important;
}

/* ==========================================================================
   12. ADD Reckless font
   ========================================================================== */

@font-face {
    font-family: 'RecklessStandard';
    /* Double check that your folder path is correct */
    src: url('/wp-content/themes/blocksy-child/static/fonts/RecklessStandardXL-TRIAL-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Force the font onto your text body and content elements */
body, p, span, li, .entry-content {
    font-family: 'RecklessStandard', sans-serif !important;
}

/* Force the font onto your titles and headings */
h1, h2, h3, h4, h5, h6, .site-title {
    font-family: 'RecklessStandard', sans-serif !important;
}



/* Target the image inside the container for a smooth transition */
.wp-block-image.size-full.is-resized img {
    transition: transform .1s ease;
}

/* Scale the image up by 10% on hover */
.wp-block-image.size-full.is-resized:hover img {
    transform: scale(1.1);
}