/*
Theme Name: Kadence Child
Template: kadence
Version: 1.0.0
Description: Child theme for Kadence — davidbilow.us
Author: David Bilow
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400&display=swap');

/* TYPO GLOBALE */
body, h1, h2, h3, h4, h5, h6,
p, a, li, span, input, textarea, button, select {
    font-family: 'Outfit', sans-serif !important;
}

/* FOOTER — Masqué */
.site-footer { display: none !important; }

/* HEADER KADENCE — Masqué partout */
#masthead, .site-header { display: none !important; }

/* HEADER CUSTOM — blanc fixe partout */
#custom-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 0.5px solid rgba(0,0,0,0.08);
    transition: background 0.3s ease;
}

.custom-header-name {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-decoration: none;
    color: #111;
    transition: color 0.3s ease;
}

.custom-header-burger {
    position: absolute;
    right: 32px; top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex; flex-direction: column; gap: 5px;
}

.custom-header-burger div {
    width: 22px; height: 1px;
    background: #111;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* HOMEPAGE — hero sous le header, Kadence reset */
.home .content-container,
.home .site-content,
.home #primary,
.home #main,
.home .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* VIMEO HERO — commence sous le header (~72px) */
#hero {
    margin-top: 72px;
    height: calc(100vh - 72px) !important;
}

#vimeo-bg iframe, #vimeo-bg > div {
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    width: 100vw !important; height: 56.25vw !important;
    min-height: 100vh !important; min-width: 177.78vh !important;
    transform: translate(-50%, -50%) !important;
    border: 0 !important;
}

/* PROJECTS GRID */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px; padding: 4px; background: #fff;
}

.project-item {
    display: block; overflow: hidden;
    aspect-ratio: 16 / 9; background: #111;
}

.project-item img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    filter: grayscale(100%); transform: scale(1);
    transition: filter 0.4s ease, transform 0.5s ease;
}

.project-item:hover img { filter: grayscale(0%); transform: scale(1.04); }

@media (max-width: 1024px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .projects-grid { grid-template-columns: 1fr; } }

/* ABOUT PAGE */
.about-page {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; max-width: 1100px;
    margin: 100px auto 80px; padding: 0 40px;
}

.about-photo img { width: 100%; height: auto; display: block; filter: grayscale(20%); }

.about-content h1 {
    font-size: 28px; font-weight: 400;
    letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px 0;
}

.about-role {
    font-size: 12px; font-weight: 300;
    letter-spacing: 0.3em; text-transform: uppercase;
    color: #888; margin: 0 0 40px 0;
}

.about-content p {
    font-size: 15px; font-weight: 300;
    line-height: 1.8; color: #333; margin: 0 0 20px 0;
}

.about-location {
    font-size: 11px !important; font-weight: 400 !important;
    letter-spacing: 0.25em; text-transform: uppercase;
    color: #999 !important; margin-top: 40px !important;
}

@media (max-width: 768px) {
    .about-page { grid-template-columns: 1fr; gap: 40px; margin: 80px auto 60px; padding: 0 24px; }
}

/* ABOUT + CONTACT — Masquer le titre Kadence */
.page-id-35 .entry-title,
.page-id-40 .entry-title {
    display: none !important;
}

/* CONTACT PAGE */
.page-id-40 .site-content,
.page-id-40 #primary,
.page-id-40 #main,
.page-id-40 .content-wrap,
.page-id-40 .entry-content-wrap,
.page-id-40 .entry-content {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.page-id-40 .entry-content { margin-top: 100px !important; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%; border: none;
    border-bottom: 1px solid #ddd;
    padding: 12px 0; font-size: 15px; font-weight: 300;
    color: #333; background: transparent;
    outline: none; margin-bottom: 24px;
    display: block; box-sizing: border-box;
}

.wpcf7 textarea { height: 160px; resize: none; }

.wpcf7 input[type="submit"] {
    background: #111; color: #fff; border: none;
    padding: 14px 40px; font-size: 12px; font-weight: 300;
    letter-spacing: 0.2em; text-transform: uppercase;
    cursor: pointer; margin-top: 16px;
    transition: background 0.3s ease;
}

.wpcf7 input[type="submit"]:hover { background: #444; }

@media (max-width: 600px) {
    .page-id-40 .entry-content { padding: 0 24px !important; margin-top: 80px !important; }
}

/* NAV OVERLAY */
#nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.92);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#nav-overlay.open { display: flex; opacity: 1; }

#nav-overlay nav {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}

#nav-overlay nav a {
    font-size: 32px; font-weight: 200;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: #fff; text-decoration: none;
    padding: 12px 0;
    transition: opacity 0.2s ease;
}

#nav-overlay nav a:hover { opacity: 0.45; }

.overlay-social {
    position: absolute; bottom: 36px;
    font-size: 11px; font-weight: 300;
    letter-spacing: 0.35em; text-transform: uppercase;
    color: #555; text-decoration: none;
    transition: color 0.2s ease;
}

.overlay-social:hover { color: #fff; }

#burger-menu.open div:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#burger-menu.open div:nth-child(2) { opacity: 0; }
#burger-menu.open div:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }