/*
Theme Name: Blocksy Child - Wicuslab
Theme URI: https://wicuslab.com
Description: Child theme of Blocksy for the Wicuslab (Wicus Labuschagne) VFX portfolio site. Custom code lives here so Blocksy updates never overwrite it.
Author: Wicuslab
Template: blocksy
Version: 1.1.1
Text Domain: blocksy-child-wicuslab
*/

/* Custom CSS below this line. Site-wide styles can also go in
   Customizer > Additional CSS - use this file for anything substantial. */

/* ==========================================================================
   0. Self-hosted fonts (Latin-only). Libre Franklin is published as a
   variable font — Google's css2 API resolves both weight 400 and 600
   requests to the same file, so font-weight is a range here rather than
   one @font-face per weight (same pattern as MNVFX's Archivo). IBM Plex
   Mono is static, so 400/500 are genuinely separate files. Replaces the
   Google Fonts CDN link used during build — same files, served from our
   own domain: no extra DNS/connection to fonts.gstatic.com, and no
   visitor IPs sent to Google on every page load.
   ========================================================================== */
@font-face {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/libre-franklin-variable-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
    --wl-bg: #181818;
    --wl-bg-alt: #0e0e0e;
    --wl-nav-bg: #000000;
    --wl-text: #c5c5c5;
    --wl-text-dim: #999999;
    --wl-text-dimmer: #6b6b6b;
    --wl-white: #ffffff;
    --wl-accent: #5ab963;
    --wl-accent-dark: #48944f;
    --wl-footer-text: #4b4b4b;
    --wl-font-display: 'Libre Franklin', sans-serif;
    --wl-font-mono: 'IBM Plex Mono', monospace;
    --wl-max-width: 1170px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html {
    background-color: var(--wl-bg);
}

body {
    background-color: var(--wl-bg);
    color: var(--wl-text) !important;
    font-family: var(--wl-font-display);
}

a {
    color: var(--wl-white);
    text-decoration: none;
}

a:hover {
    color: var(--wl-accent);
}

/* ==========================================================================
   3. Header / nav (Blocksy Header Builder handles the actual markup —
   these rules just theme it dark to match the brand)
   ========================================================================== */
.wl-site {
    background-color: var(--wl-bg);
}

#header {
    background-color: var(--wl-nav-bg) !important;
}

/* Blocksy doesn't paint #header's own background — it paints an inner,
   classless [data-row] div per row (top/middle/bottom, plus a separate
   sticky-state variant), each driven by a dynamically-injected inline
   <style> tag bound to the Header Builder's palette-color Customizer
   setting (defaults to white). #header's own background-color is
   invisible behind it. Overriding every [data-row] descendant directly
   is more reliable than chasing that Customizer setting by hand.
   Same class of issue as the MNVFX build's sticky-header flash. */
#header [data-row] {
    background-color: var(--wl-nav-bg) !important;
}

/* Logo image only — the separate text site-title next to it is
   redundant on wicuslab.com's design (the logo already includes the
   wordmark), so it's hidden rather than shown twice. */
.site-title-container {
    display: none;
}

/* Blocksy's own default site footer ("Copyright © ... WordPress Theme
   by ...") is a separate element from our custom .wl-footer and would
   otherwise render twice. */
#footer.ct-footer {
    display: none;
}

/* Header search icon/modal — not part of wicuslab.com's design. */
#header .ct-header-search {
    display: none;
}

.ct-menu-link {
    font-family: var(--wl-font-display) !important;
    font-size: 11px !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #d9d9d9 !important;
}

.ct-menu-link:hover {
    color: var(--wl-accent) !important;
}

/* ==========================================================================
   4. Hero / intro
   ========================================================================== */
.wl-intro {
    padding-top: 20px;
    text-align: center;
}

.wl-intro__heading {
    max-width: 760px;
    margin: 0 auto 2rem;
    padding: 0 20px;
    color: var(--wl-white);
    font-family: var(--wl-font-display);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
    text-align: center;
}

.wl-video {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 20px;
}

.wl-video__embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.wl-video__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   5. Poster grid
   ========================================================================== */
.wl-grid {
    max-width: var(--wl-max-width);
    margin: 20px auto 0;
    padding: 0 20px;
}

.wl-grid__row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.wl-grid__poster {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   6. Bio / award blurb
   ========================================================================== */
.wl-bio {
    max-width: 940px;
    margin: 30px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 14px;
    line-height: 1.9;
}

.wl-bio a {
    color: var(--wl-white);
    text-decoration: underline;
}

.wl-bio a:hover {
    color: var(--wl-accent);
}

.wl-award {
    background-color: var(--wl-bg-alt);
    padding: 30px 0;
    margin-top: 30px;
}

.wl-award__inner {
    max-width: var(--wl-max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.wl-award__logo {
    width: 53px;
    flex-shrink: 0;
}

.wl-award__text {
    font-size: 14px;
    line-height: 1.9;
    text-align: left;
}

.wl-award__text a {
    color: var(--wl-white);
    text-decoration: underline;
}

.wl-award__text a:hover {
    color: var(--wl-accent);
}

/* ==========================================================================
   7. Showreel page
   ========================================================================== */
.wl-showreel {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

.wl-showreel__item {
    margin-bottom: 50px;
}

.wl-showreel__title {
    color: var(--wl-white);
    font-family: var(--wl-font-display);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 14px;
    text-align: center;
}

.wl-page-heading {
    text-align: center;
    color: var(--wl-white);
    font-family: var(--wl-font-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2rem 20px 2.5rem;
}

/* ==========================================================================
   8. Contact page
   ========================================================================== */
.wl-contact {
    max-width: var(--wl-max-width);
    margin: 0 auto;
    padding: 0 20px 60px;
}

.wl-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.wl-contact__block {
    margin-bottom: 30px;
}

.wl-contact__label {
    color: var(--wl-text-dimmer);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0 0 10px;
    padding-left: 26px;
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 18px;
}

.wl-contact__label--address {
    background-image: url('assets/images/map-icon.png');
}

.wl-contact__label--phone {
    background-image: url('assets/images/call-icon.png');
}

.wl-contact__label--email {
    background-image: url('assets/images/email-icon.png');
}

.wl-contact__text {
    color: var(--wl-text-dim);
    font-family: var(--wl-font-mono);
    font-size: 14px;
    line-height: 1.7;
}

.wl-contact__text a {
    color: var(--wl-text-dim);
}

.wl-contact__text a:hover {
    color: var(--wl-accent);
}

.wl-contact__map-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    text-decoration: underline;
    color: var(--wl-accent);
}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.wl-footer {
    background-color: var(--wl-nav-bg);
    color: var(--wl-white);
    padding: 20px 30px;
}

.wl-footer__inner {
    max-width: var(--wl-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.wl-footer__text {
    color: var(--wl-footer-text);
    font-size: 12px;
    line-height: 1.5;
}

.wl-footer__text a {
    color: var(--wl-footer-text);
}

.wl-footer__pride {
    width: 48px;
    opacity: 0.6;
    flex-shrink: 0;
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media screen and (max-width: 991px) {
    .wl-grid__row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .wl-contact__grid {
        grid-template-columns: 1fr;
    }

    .wl-award__inner {
        flex-direction: column;
        text-align: center;
    }

    .wl-award__text {
        text-align: center;
    }
}

@media screen and (max-width: 479px) {
    .wl-grid__row {
        grid-template-columns: repeat(2, 1fr);
    }

    .wl-footer__inner {
        flex-direction: column;
        text-align: center;
    }
}