/*
Theme Name: Tracey Allan-McWilliams
Theme URI: https://traceyallanmcwilliams.com
Version: 1.1
*/

:root {
    --bg: #fff;
    --text: #000;
    --ui: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
    --gap: 100px;
    --label-size: 32px;
    --counter-bg: rgba(255, 255, 255, 0);
    --counter-fg: #000;
    --reel-line: 32px;
}

html, body {
    margin: 0;
     margin-top: 0 !important;
    background: var(--bg);
    color: var(--text);
    font-family: var(--ui);
}

#wpadminbar {
    top: 0;
}

/* ONLY lock scroll on the homepage to allow other pages to work normally */
body.home {
    height: 100%;
    overflow: hidden;
}

/* ========================================== */
/* HOME PAGE ELEMENTS                         */
/* ========================================== */

/* Bottom-left ABOUT link */
/* Bottom-left ABOUT link */
//* ========================================== */
/* GLOBAL NAVIGATION (Vertical Left Side)     */
/* ========================================== */

header nav ul {
  position: fixed;
  left: 30px;
  bottom: 30px;
  transform-origin: left bottom;
  transform: rotate(-90deg);
}
header nav ul li a {
  font-size: 32px;
  mix-blend-mode: difference; /* The key for the inverted text effect */
}

header .nav-stack {
  position: fixed !important;
  left: 30px !important;
  bottom: 30px !important;
  z-index: 4000;
  display: flex;
  flex-direction: row;
  gap: 40px;
  mix-blend-mode: difference;
  transform-origin: left bottom;
  transform: rotate(-90deg);
  pointer-events: none;
}
header .nav-stack .nav-link {
  pointer-events: auto;
}

.nav-stack {
    position: fixed;
    left: 40px;
    bottom: 30px;
    display: flex;
    flex-direction: row;
    z-index: 4000;
    gap: 40px;
    mix-blend-mode: difference; 
    transform-origin: left bottom;
    transform: rotate(-90deg);
    pointer-events: none;
}

.nav-link {
    /* Retains the original ABOUT link styling and inverted effect */
    font-weight: 700;
    font-size: var(--label-size);
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 0;
    background: transparent;
    line-height: 1;
    color: #fff;
    mix-blend-mode: difference; /* The key for the inverted text effect */
    text-decoration: none;

    /* Cleanup: Removes individual rotation/margins and enables interactivity */
    transform: none; 
    margin: 0; 
    cursor: pointer;
    pointer-events: auto;
    will-change: opacity;
    transition: opacity 0.2s;
}

.nav-link:hover {
    opacity: 0.7;
}

/* Cleanup: Ensures old classes are fully disabled */
.about-trigger,
.home-trigger {
    display: none !important;
}

/* Horizontal rail */
.rail {
    display: flex;
    align-items: stretch;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    background: transparent;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; }

/* Hero split (50/50) */
.frame-hero {
    flex: 0 0 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: transparent;
}
.hero-left {
    background: transparent;
    display: grid;
    place-items: center;
    position: relative;
    padding: 0;
}
.hero-left .stack {
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 20px;
}
.hero-left .logo {
    width: min(460px, 52vw);
    height: auto;
    display: block;
}
.hero-right {
    position: relative;
    background: transparent;
    overflow: hidden;
}
.hero-right img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: transparent;
}

/* Gallery strip */
.strip {
    display: flex;
    align-items: center;
    height: 100vh;
    padding-inline: var(--gap);
    gap: var(--gap);
    background: transparent;
}
.tile {
    flex: 0 0 auto;
    display: grid;
    align-items: center;
    height: 100vh;
    background: transparent;
    will-change: transform;
}
.tile img {
    height: 75vh;
    width: auto;
    display: block;
    object-fit: contain;
    background: transparent;
}

/* End tile */
.tile.end-tile {
    width: min(60ch, 50vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    background: #fff;
}
.end-links { display: flex; flex-direction: column; gap: 10px; }
.end-link {
    font-weight: 700;
    font-size: var(--label-size);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    line-height: 1;
}
.end-link:hover { opacity: .7; }
.end-link.back { font-weight: 600; cursor: pointer; }

/* Counter */
.counter {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 2000;
    width: auto;
    height: var(--reel-line);
    display: grid;
    place-items: center;
    padding: 4px 10px;
    border-radius: 10px;
    background: transparent;
    color: var(--counter-fg);
    overflow: hidden;
    transform: rotate(-90deg);
    transform-origin: center;
    opacity: 0;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    font-weight: 700;
    font-size: var(--label-size);
    line-height: 1;
    will-change: opacity;
}
.counter-reel { display: flex; flex-direction: row; gap: 0; will-change: transform; }
.counter-line { height: var(--reel-line); display: grid; place-items: center; line-height: 1; }

/* ========================================== */
/* ABOUT PAGE STYLES                          */
/* ========================================== */

/* General About Styling */
body.page-template-template-about {
    overflow-y: auto !important; /* Ensure scrolling works */
    height: auto !important;
}

.home-trigger {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 2000;
    margin-left: 20px;
    font-weight: 700;
    font-size: var(--label-size);
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    color: #00000;
    mix-blend-mode: difference;
    text-decoration: none;
    transform-origin: left bottom;
    transform: rotate(-90deg);
}
.home-trigger:hover { opacity: .85; }

.instagram-link {
    display: inline-block;
    color: var(--text);
    transition: opacity 0.2s;
}
.instagram-icon { width: 40px; height: 40px; display: block; }
.instagram-icon:hover { opacity: 0.7; }

/* Text Content */
.text-container {
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 16px;
}
.text-container p { margin-bottom: 20px; }
.text-container h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 30px 0 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* About Desktop Grid */
@media screen and (min-width: 769px) {
    body.page-template-template-about { overflow: hidden !important; }
    
    .page-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: 100vh;
        overflow: hidden;
    }
    .page-grid .hero-left { height: 100vh; }
    .page-grid .about-right {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100vh;
        padding: 40px;
    }
}

/* Gallery Page Layout */
.gallery-page {
  min-height: 100vh;
}

/* ========================================== */
/* GALLERY PAGE (MASONRY FULL WIDTH) */
/* ========================================== */

/* 1. Remove padding from the main wrapper */
.gallery-wrapper {
    margin-left: 0;      /* Remove the left nav gap */
    padding: 0;          /* Remove all padding */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* 2. Force WPBakery rows to be full width with no gaps */
.gallery-wrapper .vc_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. Ensure columns inside rows have no padding */
.gallery-wrapper .vc_column_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* 4. Reset the inner column wrapper */
.gallery-wrapper .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Make sure the page scrolls vertically */
body.page-template-template-gallery {
  overflow-y: auto;
  height: auto;
}

body.page-template-template-about .about-right {
  box-sizing: border-box;
  max-width: 100vw;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Hide page title only on Gallery Page template */
body.page-template-template-gallery h1,
body.page-template-template-gallery .entry-title {
  display: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* 1. Target ALL known WPBakery grid wrappers */
    .gallery-wrapper .vc_grid-container,
    .gallery-wrapper .vc_masonry_media_grid,
    .gallery-wrapper .vc_grid,
    .gallery-wrapper .vc_pageable-slide-wrapper,
    .gallery-wrapper .vc_pageable-slide-default-wrapper {
        display: block !important;
        height: auto !important;
        /* Force 2 columns */
        column-count: 2 !important;
        column-gap: 0 !important;
        /* Reset transforms */
        transform: none !important;
    }

    /* 2. Reset the individual grid items */
    .gallery-wrapper .vc_grid-item, 
    .gallery-wrapper .vc_grid-item-mini,
    .gallery-wrapper .vc_masonry_grid_item {
        display: inline-block !important; /* Essential for column-count */
        width: 100% !important;
        
        /* KILL Javascript Positioning */
        position: static !important;
        left: auto !important;
        top: auto !important;
        
        /* Remove all margins/padding */
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        
        /* Prevent split images */
        break-inside: avoid !important;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        
        /* Ensure visibility */
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 3. Force images to touch */
    .gallery-wrapper .vc_gitem-zone,
    .gallery-wrapper .vc_gitem-zone-img {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 4. Hide the "Loading" spinner which often blocks content when we disable JS layout */
    .gallery-wrapper .vc_grid-loading {
        display: none !important;
    }
    
    .about-trigger { left: 30px; bottom: 16px; }
    .counter { right: 16px; bottom: 16px; }
        .nav-stack {
        left: 30px;
        bottom: 16px;
    }
    /* Home Mobile */
    .hero-left { width: 100vw; }
    .hero-left .logo { width: min(340px, 62vw); }
    .frame-hero { flex: 0 0 200vw; height: 100vh; }

    /* About Mobile */
    .page-grid { display: block; height: auto; width: 100%; }
    .page-grid .hero-left {
        width: 100%;
        height: auto;
        min-height: 300px;
        padding: 40px 20px;
    }
    .page-grid .about-right {
        width: 100%;
        height: auto;
        padding: 20px;
        padding-bottom: 100px;
    }
      body.page-template-template-about .page-grid .about-right {
    padding-left: 60px; /* adjust value to fit your nav */
    padding-right: 40px;
  }
    .home-trigger { left: 16px; bottom: 16px; }
}