/*
Theme Name:  Baucraft Child – Hogerwal
Description: Child theme voor Festival Hogerwal. Past jaar-navigatie, lightbox en meta-info aan zonder de parent theme aan te raken.
Template:    baucraft
Version:     3.3.4
*/

/* ═══════════════════════════════════════════════
   JAAR-NAVIGATIE  (.hogerwal-menu)
   Verschijnt op de collectiepagina en jaarpagina's
   ═══════════════════════════════════════════════ */

ul.hogerwal-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0 0 40px;
    padding: 20px 0 0;
}

/* Verberg submenus als die er ooit in terechtkomen */
ul.hogerwal-menu .sub-menu {
    display: none;
}

/* Baucraft voegt via CSS '/ ' toe aan alle a span elementen in de navigatie.
   Dat willen we niet in onze jaar-knoppen. */
ul.hogerwal-menu li > a span::before,
ul.hogerwal-menu li > a span::after {
    content: none !important;
}

ul.hogerwal-menu li {
    margin: 0;
    padding: 0;
}

ul.hogerwal-menu li a {
    display: inline-block;
    padding: 7px 18px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

ul.hogerwal-menu li a:hover {
    background-color: #333;
    color: #fff;
}

/* Actief jaar: goud (automatisch via WordPress current-menu-item) */
ul.hogerwal-menu li.current-menu-item > a,
ul.hogerwal-menu li.current-menu-ancestor > a,
ul.hogerwal-menu li.current-menu-parent > a {
    background-color: #ffd700;
    color: #000;
}

/* Zet de menu-container (div) op volledige breedte zodat hij klopt met de layout */
div[class*="menu-"][class*="-container"]:has(ul.hogerwal-menu) {
    padding: 0 var(--baucraft-padding, 30px);
}


/* ═══════════════════════════════════════════════
   META-INFO LINKS  (project detailpagina)
   Jaar, locatie en artiest zijn nu klikbare links
   ═══════════════════════════════════════════════ */

.fn__project_info_holder .info_value a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fn__project_info_holder .info_value a:hover {
    color: #ffd700;
    text-decoration: none;
}


/* ═══════════════════════════════════════════════
   GLIGHTBOX – kleine aanpassingen op huisstijl
   ═══════════════════════════════════════════════ */

/* Cursor aanpassen voor klikbare galerij-afbeeldingen */
.fn__project_gallery .gallery__item a.glightbox {
    display: block;
    cursor: zoom-in;
}

/* Lichte hover-overlay als feedback */
.fn__project_gallery .gallery__item a.glightbox::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s ease;
    pointer-events: none;
}

.fn__project_gallery .gallery__item a.glightbox:hover::after {
    background: rgba(0, 0, 0, 0.12);
}

/* Zorg dat .item_in position:relative heeft zodat overlay werkt */
.fn__project_gallery .gallery__item .item_in {
    position: relative;
    overflow: hidden;
}

/* GLightbox close-knop: gebruik huisstijlkleur bij hover */
.glightbox-container .gclose:hover svg path {
    fill: #ffd700;
}


/* ═══════════════════════════════════════════════
   ARTIESTEN TYPE-FILTER  (archive-hogerwal_artiest.php)
   ═══════════════════════════════════════════════ */

.hogerwal-type-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0 32px;
}

.hogerwal-filter-btn {
    display: inline-block;
    padding: 7px 18px;
    background-color: #000;
    border: 1px solid #333;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hogerwal-filter-btn:hover {
    background-color: #222;
    border-color: #555;
    color: #fff;
}

.hogerwal-filter-btn.active {
    background-color: #ffd700;
    border-color: #ffd700;
    color: #000;
}


/* ═══════════════════════════════════════════════
   ARTIESTEN LIJST  (archive-hogerwal_artiest.php)
   Alfabetische lijst – # / Artist / Years
   ═══════════════════════════════════════════════ */

.hogerwal-artist-list {
    padding: 20px 0 60px;
}

.hogerwal-list-head,
.hogerwal-list-row {
    display: grid;
    grid-template-columns: 60px 1fr minmax(120px, 0.5fr) 110px;
    align-items: center;
    gap: 16px;
}

.hogerwal-list-head {
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.hogerwal-list-head span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}

.hogerwal-list-head .sort-link {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.15s ease;
}

.hogerwal-list-head .sort-link:hover {
    color: #fff;
}

.hogerwal-list-head .sort-link.is-active {
    color: #ffd700;
}

.hogerwal-list-head .sort-arrow {
    display: inline-block;
    font-size: 9px;
}

/* Neerwaartse driehoek heeft z'n massa bovenaan en oogt te hoog – iets omlaag */
.hogerwal-list-head .sort-arrow--down {
    position: relative;
    top: 1px;
}

.hogerwal-list-row {
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.hogerwal-list-row .col-letter {
    font-size: 16px;
    font-weight: 700;
    text-transform: lowercase;
    color: #fff;
}

/* Verticale scheidingslijnen tussen de kolommen (zoals de awards-pagina) */
.hogerwal-list-row .col-name,
.hogerwal-list-row .col-years,
.hogerwal-list-row .col-insta {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    padding-left: 24px;
}

.hogerwal-list-row .col-name a {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    text-decoration: none;
    transition: color 0.15s ease;
}

.hogerwal-list-row .col-name a:hover {
    color: #ffd700;
}

.hogerwal-list-row .col-years {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.hogerwal-list-row .col-insta {
    display: flex;
    align-items: center;
}

.hogerwal-list-row .col-insta .ig-link {
    display: inline-flex;
    color: #fff;
    transition: color 0.15s ease;
}

.hogerwal-list-row .col-insta .ig-link:hover {
    color: #ffd700;
}

@media (max-width: 600px) {
    .hogerwal-list-head,
    .hogerwal-list-row {
        grid-template-columns: 28px 1fr auto 40px;
        gap: 10px;
    }
    .hogerwal-list-row .col-name,
    .hogerwal-list-row .col-years,
    .hogerwal-list-row .col-insta {
        padding-left: 12px;
    }
    .hogerwal-list-row .col-name a { font-size: 16px; }
    .hogerwal-list-row .col-years  { font-size: 13px; }
}


/* ═══════════════════════════════════════════════
   ARTIESTEN OVERZICHT  (page-artiesten.php)
   Compact tegels-grid – 3 kolommen, overlay-stijl
   ═══════════════════════════════════════════════ */

.hogerwal-artist-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 40px 0 60px;
}

@media (max-width: 900px) {
    .hogerwal-artist-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    .hogerwal-artist-tiles { grid-template-columns: 1fr; }
}

/* Variatie in tegelgrootte: elke 5e-plus-1e tegel is breed (2 kolommen) */
/* Patroon: [breed][smal] / [smal][smal][smal] / [breed][smal] / ... */
@media (min-width: 901px) {
    .hogerwal-artist-tile:nth-child(5n+1) {
        grid-column: span 2;
        aspect-ratio: 16 / 9;
    }
}

.hogerwal-artist-tile {
    display: block;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: #111;
    border-radius: 6px;
}

.hogerwal-artist-tile .tile-image {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.hogerwal-artist-tile .tile-image img,
.hogerwal-artist-tile .tile-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.hogerwal-artist-tile .tile-placeholder {
    background-color: #1a1a1a;
}

.hogerwal-artist-tile:hover .tile-image img {
    transform: scale(1.04);
}

/* Gradient overlay – altijd zichtbaar onderaan */
.hogerwal-artist-tile .tile-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 48px 20px 18px;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hogerwal-artist-tile .tile-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
}

.hogerwal-artist-tile .tile-count {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #ffd700;
    text-transform: none;
}

/* ═══════════════════════════════════════════════
   ARTIEST ARCHIEFPAGINA – bio + links
   ═══════════════════════════════════════════════ */

.hogerwal-artist-bio {
    margin-top: 16px;
    max-width: 680px;
}

.hogerwal-artist-profile-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.hogerwal-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #000;
    border: 1px solid #333;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hogerwal-profile-link:hover {
    background: #ffd700;
    border-color: #ffd700;
    color: #000;
}

.hogerwal-profile-link svg {
    flex-shrink: 0;
}


/* Gouden lijn aan de onderkant bij hover */
.hogerwal-artist-tile::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #ffd700;
    transition: width 0.25s ease;
}

.hogerwal-artist-tile:hover::after {
    width: 100%;
}


/* ═══════════════════════════════════════════════
   AANMELDFORMULIEREN  (HOF Artiest + Open Call)
   ═══════════════════════════════════════════════ */

.hogerwal-page-content {
    max-width: 680px;
    padding: 32px 0 8px;
    font-size: 15px;
    line-height: 1.7;
    color: #fff;
}

.hogerwal-submission-form {
    max-width: 680px;
    padding: 40px 0 60px;
}

.hogerwal-form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
}

.hogerwal-form-row label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

.hogerwal-form-row label span {
    color: #ffd700;
}

.hogerwal-form-row input[type="text"],
.hogerwal-form-row input[type="email"],
.hogerwal-form-row input[type="url"],
.hogerwal-form-row textarea {
    background: #111;
    border: 1px solid #333;
    color: #fff;
    font-size: 15px;
    padding: 12px 16px;
    width: 100%;
    transition: border-color 0.15s ease;
    font-family: inherit;
}

.hogerwal-form-row input:focus,
.hogerwal-form-row textarea:focus {
    outline: none;
    border-color: #ffd700;
}

.hogerwal-form-row input[type="file"] {
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
}

.hogerwal-form-row small {
    font-size: 12px;
    color: #888;
}

.hogerwal-form-row--submit {
    margin-top: 8px;
}

.hogerwal-submit-btn {
    display: inline-block;
    padding: 14px 36px;
    background: #ffd700;
    color: #000;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: inherit;
}

.hogerwal-submit-btn:hover {
    background: #e6c200;
}

.hogerwal-form-notice {
    max-width: 680px;
    padding: 20px 24px;
    margin: 32px 0;
    font-size: 15px;
    font-weight: 600;
}

.hogerwal-form-notice--success {
    background: rgba(255, 215, 0, 0.12);
    border-left: 4px solid #ffd700;
    color: #fff;
}

.hogerwal-form-notice--error {
    background: rgba(255, 80, 80, 0.1);
    border-left: 4px solid #ff5050;
    color: #fff;
}


/* ═══════════════════════════════════════════════
   HOF OVERZICHT – Works grid  (archive-hogerwal_hof_artist.php)
   ═══════════════════════════════════════════════ */

.hogerwal-view-nav {
    padding: 0 var(--baucraft-padding, 30px);
}

.hof-works-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 40px 0 60px;
}

@media (max-width: 1100px) {
    .hof-works-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
    .hof-works-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
    .hof-works-grid { grid-template-columns: 1fr; }
}

.hof-work-item {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #111;
    text-decoration: none;
}

.hof-work-image {
    width: 100%;
    height: 100%;
}

.hof-work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.hof-work-item:hover .hof-work-image img {
    transform: scale(1.05);
}

.hof-work-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 14px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hof-work-item:hover .hof-work-label {
    opacity: 1;
}

.hof-work-label span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}


/* ═══════════════════════════════════════════════
   HOF ARTIEST PROFIEL  (single-hogerwal_hof_artist.php)
   ═══════════════════════════════════════════════ */

.hof-date-badge {
    display: inline-block;
    margin-top: 12px;
    margin-bottom: 4px;
    padding: 4px 12px;
    background: #000;
    border: 1px solid #333;
    color: #ffd700;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hof-artist-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 40px 0 60px;
}

@media (max-width: 900px) {
    .hof-artist-photos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    .hof-artist-photos { grid-template-columns: 1fr; }
}

.hof-photo-item {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.hof-photo-item .item_in {
    width: 100%;
    height: 100%;
    position: relative;
}

.hof-photo-item .item_in a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.hof-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.hof-photo-item:hover img {
    transform: scale(1.04);
}