/*
Theme Name: Beyond Hippodrome 09-2025 
Theme URI: http://www.beyondhippodrome.com/
Description: This wordpress theme was created for Beyond Hippodrome.
Version: 1.0
Author: Ben Wundersitz
Author URI: http://beyondhippodrome.com/

 Beyond Hippodrome September 2025
    This theme was designed and built by Ben Wundersitz,
  http://beyondhippodrome.com/
*/


    :root {
      --primary: #4a90e2;
      --secondary: #50e3c2;
      --text-dark: #222;
      --text-light: #FFF;
      --bg-light: #f9f9f9;
      --bg-white: #fff;
      --bg-dark: #222;
      --pink:#38FFB9;
      --blue:#7CD7F8;
      --green:#FF9CBB;
      --radius: 12px;
      --shadow: 0 2px 6px rgba(0,0,0,0.1);
      --container-margin: 3rem;
    }



    @font-face {
      font-family: 'Barnegat Regular';
      src: url('fonts/barnegat-regular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
    }

    @font-face {
      font-family: 'N27';
      src: url('fonts/n27-regular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
    }



    * {margin:0;padding:0;box-sizing:border-box;}

    /* Temp */
    html, body {
      overflow-x: hidden;
    }

    body {font-family: "neue-haas-grotesk-display", sans-serif; /* ✅ Neue Haas */
      font-weight: 400; /* Regular by default */
      line-height: 1.6;
      color: var(--text-dark);
      background: var(--bg-light);}
    
    a {text-decoration: none; color: inherit;}
    p, a {font-size:2rem; font-weight:100; line-height: 1.1}
    h3 {margin: 0; font-size: 1.75rem; font-weight:600;}
    h4 {font-family: 'Barnegat Regular', Arial, sans-serif; font-size:.65rem; font-weight: 400; line-height:1; color:var(--text-dark);}

    /* Navbar */
    .navbar {
      position: sticky;
      top: 0; left: 0; right: 0;
      background: var(--bg-dark);
      z-index: 1000;
    }
    .navbar-stripe {display: flex; padding:0 3rem;}
    .navbar-stripe span {width:33.3%; height:8px;}
    .navbar-container {padding: 1.5rem 3rem;display:flex; justify-content: space-between; align-items: center;}

    .navbar-brand {display: flex; align-items: center;}
    .navbar-brand img{width: 60px; height:25px}
    .navbar-brand span {opacity: 0; visibility: hidden; transition: 0.3s}
    .scrolled .navbar-container .navbar-brand span{margin-left:20px; opacity: 1; visibility: visible; font-weight:600; color: white}
    .hamburger {display: flex; flex-direction: column; gap: 6px; cursor: pointer;}
    .hamburger span {
      width: 25px; height: 2px; background: var(--text-light); border-radius: 2px;
      transition: all 0.3s;}
    .hamburger.active span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
    .hamburger.active span:nth-child(2) {opacity: 0;}
    .hamburger.active span:nth-child(3) {transform: rotate(-45deg) translate(6px, -6px);}
    .menu-overlay {
      position: fixed; inset: 0;
      background: var(--bg-dark);
      /*display: flex; flex-direction: column; justify-content: center; align-items: center;*/
      opacity: 0; visibility: hidden; transition: 0.3s;
      z-index:1; height:100vh;
      overflow-y: auto;       /* Enables vertical scrolling */
      overflow-x: hidden;   
    }
    .menu-container {display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin:10rem 3rem; gap:5rem 3rem;}
    .menu-overlay.active {opacity:1; visibility: visible;}
    .menu-overlay a {
      color: #fff; font-size: 1.5rem; padding:3rem 0; 
    }
    .menu-overlay h4 {
      color: #fff;}

    /* Image Blocks with overlay */
    .image-block, .image-grid-item, .image-block-color {
      position: relative;
      overflow: hidden;
    }
    .image-block img, .image-grid-item img, video {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }


    /* Caption */  
    .image-caption, .image-caption-post {
      position: absolute; top: 0; left: 0; right: 0;
      color: #fff; 
      padding: var(--container-margin);
    }

    .image-caption {
      right: 50%;
    }

    /* .image-caption h3 {margin: 0; font-size: 1.75rem;} */
    .image-caption p {margin: 0.25rem 0 0; font-size: 0.9rem; opacity: 0.9;}

    .image-caption-post {display: flex; gap: 10px; align-items: center;padding: var(--container-margin);}

    .image-caption-post span {
      height: 1.5rem;
      border-radius: 12px;
      background-color: #7CD7F8;
      padding: 4px 16px 4px 8px;
      display: flex;
      align-items: center;
      gap:8px;
    }

    .image-caption-post h4 {
      font-size:.65rem;
    }
    .image-caption h4 {
      font-size: .65rem;
      padding-bottom: .5rem;
    
    }
    .image-caption h3, .image-caption-post h3 {
      font-size: 1.25rem;
      line-height: 1;
    }

    .menu-categories .tags,
    .image-caption .tags {
        display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start; margin-top: 1rem;
    }
    .menu-categories .tags .tag,
    .image-caption .tags .tag {
        padding: 0.5rem; border-radius: 50px;font-size: 0.9rem;
    }

    .tag-green, .cat-user-experience {background: #38FFB9;}
    .tag-blue, .cat-user-interface {background:#7CD7F8;}
    .tag-pink, .cat-visual-design {background:#FF9CBB;}

    /* Full width image with margin */
    .image-block {
        aspect-ratio: 16 / 9; /* Flexible, standard ratio */
        /*min-height: 250px;    /* Reasonable baseline */
        /* Responsive adjustments for smaller screens 
        margin: var(--container-margin); */
    }

    /* Full width image with transparency */
    .image-block-color {
        aspect-ratio: 16 / 9;
        background:#DFDBD6;
    }
    .image-block-color img{
      width: 100%; height: 100%; object-fit: contain; display: block;
    }


    /* Two-column image blocks */
    .image-grid {
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 0; /* ✅ no gap between columns */
    }
    .image-grid-item {
      aspect-ratio: 1 / 1; /* ✅ force square shape */
    }
    .image-grid-item img {
      border-radius: 0; /* flush edges */
      box-shadow: none;
    }

    /* Two-column text blocks */
    .text-grid, footer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      /*gap: 2rem;*/
    }
    .text-grid {
      background: var(--bg-white);

    }
    .text-block {
      display: flex;
      flex-direction: column;
      aspect-ratio: 1/1;
      padding: clamp(2rem, 10rem, 12rem) clamp(2rem, 3rem, 3vw);
      justify-items: start;}

    .text-block h4 {margin-bottom: 1rem;}
    .bold {font-weight:600;}

    .text-block-stat {
      font-family: 'N27';
      font-size: clamp(140px, 15vw, 400px);
      font-weight: 500;
      line-height: 0.8;
      letter-spacing: -0.05em;
      position: relative;
    }


    /* Change Colours */
    /* @media (min-width: 1024px) { */
      .dark-image .image-caption h3,
      .dark-image .image-caption h4,      
      .dark-image .image-caption-post h3 {
        color:#555;
      }

      .light-image .image-caption h3,
      .light-image .image-caption h4,
      .light-image .image-caption-post h3 {
        color:#FFF;
      }


    

    /* Footer */
    footer {
       background: var(--bg-light);

    }
    footer div {font-size: 0.9rem; color: var(--text-dark);}
    footer h4 {margin-bottom: 1rem;}

    .footer-labels {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(80px, 180px));
      gap: 1rem;
      margin-top: 2rem;
    }

    .footer-labels > div {
      padding: 12px 4px 12px 40px;
      background-position: 12px center;
      border-radius: 40px;
      display: grid;
      align-items: center;
      background-size: 20px;
    }
    .footer-labels > div h4 {
      margin: 0;
    }