/*
Theme Name: Unicord Child
Theme URI: https://balladistuidos.com/unicord-child
Description: Child theme for Unicord
Author: Jeeva K k
Template: unicord
Version: 1.0.0
*/

/* ------------------------------
   Custom Fonts
------------------------------ */
@font-face {
    font-family: 'BalladiFont1';
    src: url('https://balladistudios.com/wp-content/uploads/2025/08/BalladiFont-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BalladiFont2';
    src: url('https://balladistudios.com/wp-content/uploads/2025/09/balladidi-testfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Balladi';
    src: url('https://balladistudios.com/wp-content/uploads/2025/09/Century-Gothic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'balladimenu';
    src: url('https://balladistudios.com/wp-content/uploads/2025/10/menu.woff2') format('woff2');
    font-weight: 100; /* Lighter weight (300 is typically 'light') */
    font-style: normal;
}



/* ------------------------------
   Global Page Styling
------------------------------ */


/*preloader text color*/

.preloader .typewriter {

    color: black;
    padding-top: 15px !important;
    font-family: Balladi;
}


.navbar .email-us a {

    pointer-events: none;
}


nav.navbar{
    padding: 30px 30px !important;
}


.page-header .inner h2 {
    font-size: 50px !important;
}


.case-details {
    padding: 0px !important;
}

.case-details .content-section {
    padding: 0px !important;
}

.header .slider:after {
    display: none !important;
    background: none;
}

.page-header:after {
    background: none;
}

.video-bg video {
    opacity: 1;
    mix-blend-mode: initial;
}

.navbar .sandwich-nav b{
    font-family: Balladi !important;
}


/* ------------------------------
   Header Gallery
------------------------------ */
    /* Font size Base: small phones (<30em) */
    .header .gallery-thumbs .swiper-slide {
      font-family: 'BalladiFont1', sans-serif;
      font-size: 22px !important;
      width: 100vw !important;
    }
    /* ≥20em (~3200px) — larger phones */
    @media (min-width: 20em) {
      .header .gallery-thumbs .swiper-slide {
        font-size: 36px !important;
      }
    }
    
    /* ≥30em (~480px) — larger phones */
    @media (min-width: 30em) {
      .header .gallery-thumbs .swiper-slide {
        font-size: 42px !important;
      }
    }
    
    /* ≥48em (~768px) — tablet (portrait) */
    @media (min-width: 48em) {
      .header .gallery-thumbs .swiper-slide {
        font-size: 55px !important; /* keep for tablet & up */
      }
    }
    
    /* ≥64em (~1024px) — tablet (landscape) / small laptop */
    @media (min-width: 64em) {
      .header .gallery-thumbs .swiper-slide {
        font-size: 55px !important;
      }
    }
    
    /* ≥80em (~1280px) — desktop */
    @media (min-width: 80em) {
      .header .gallery-thumbs .swiper-slide {
        font-size: 55px !important;
      }
    }


body .header .gallery-thumbs .swiper-slide a {
    color: white !important;
    font-family: Balladi;
}

.header .gallery-thumbs .swiper-slide a {
    padding-top: 20px !important;
}


    /* ≥64em (~1024px) — tablet (landscape) / small laptop */
    @media (min-width: 64em) {
      .header .gallery-thumbs .swiper-slide a {
    padding-top: 10px !important;
      }
    }


.header .gallery-thumbs .swiper-slide a .plus {
    display: none;
}







/* ------------------------------
   Logo
------------------------------ */
.navbar .logo img {
    width: 60px;
    height: auto;
    display: block;
}

/* ------------------------------
   Hamburger Button
------------------------------ */
.navbar .sandwich-nav .circle {
    border-color: #F5B544;
    background-color: rgb(245, 181, 68);
}

/* ------------------------------
   Address
------------------------------ */
address {
    margin-left: 30px;
    margin-top: 50px !important;
    text-align: left;
    font-family: Balladi !important;
}

/* ------------------------------
   Navigation Menu
------------------------------ */
/* Hide flashing menu items */
.navigation-menu:not(.open) .inner {
    transition: none !important;
}

.transition-overlay .black-layer {
    display: none !important;
}









/* ===================================================
   Navigation Menu — Chevron Background + Responsive Grid
   ---------------------------------------------------
   - Grid anchored to chevron stack (no magic numbers)
   - Unified gutters/max width via --page-gutter / --content-max
   - Chevron size: desktop/laptop = tablet × 1.2
   - Slightly more tile padding (more on mobile/tablet)
   - Address font size mirrors menu item size at each breakpoint
   - Menu item font sizes increased by 1.5×
   - Clapperboard spans/borders unchanged
   =================================================== */

/* ---------- Tokens (colors, sizes, layout) ---------- */



.navigation-menu.open .inner ul li:nth-child(5) {
    pointer-events: none; /* Disables mouse interaction */
    cursor: default; /* Changes the cursor to the default arrow (optional) */
}



.navigation-menu.open .inner ul {

    font-family: balladimenu;
}


.navigation-menu .inner {
  z-index: 3 !important;   /* ensures text & links stay on top of overlay */
}

:root {
  /* Chevron sizes/positions (very small defaults) */
  --chev-gold-w: 70px;
  --chev-period: 140px;
  --chev-h: 60px;      /* height of each chevron band */
  --chev-pos-2: 70px;  /* start of second chevron band */
  --shadow-h: 18px;    /* height of shadow gradient */
  --shadow-pos: 130px; /* = chev-pos-2 + chev-h */

  /* Spacing: buffer between chevrons and menu grid */
  --menu-buffer: clamp(12px, 2.5vh, 28px);

  /* Layout gutters & max width (applied to grid + address) */
  --page-gutter: clamp(24px, 4vw, 60px);
  --content-max: min(1180px, 92vw);

  /* Tile padding (slightly increased) */
  --tile-pad: clamp(14px, 4vw, 30px);

  /* Colors */
  --chev-gold: #F5B544;
  --chev-dark: #1f1f1f;
  --bg: #4a4646;

  /* Grid border (menu tile outlines) */
  --grid-border: 5px solid #fff;

  /* Typography (base for smallest screens) */
  /* 1.35rem × 1.5 = 2.025rem */
  --menu-fs: 2.025rem;
  --address-fs: var(--menu-fs);
  
    /* Metallic gold gradient used inside the chevron bands */
  --gold-metal: linear-gradient(
    90deg,
    #5a3b00 0%,
    #b27900 10%,
    #e7b24a 18%,
    #ffd977 24%,
    #fff3c2 28%,
    #ffd977 33%,
    #e2ad42 42%,
    #b27900 55%,
    #e7b24a 65%,
    #fff1bd 70%,
    #e2ad42 75%,
    #a06e00 88%,
    #4a3100 100%
  );
}

/*  existing, working background (now uses the variables) */
.navigation-menu .black-layer {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;

  background:
    repeating-linear-gradient(135deg,
      var(--chev-gold) 0 var(--chev-gold-w),
      var(--chev-dark) var(--chev-gold-w) var(--chev-period)
    ),
    repeating-linear-gradient(225deg,
      var(--chev-gold) 0 var(--chev-gold-w),
      var(--chev-dark) var(--chev-gold-w) var(--chev-period)
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% var(--chev-h), 100% var(--chev-h), 100% var(--shadow-h);
  background-position: left 0, left var(--chev-pos-2), left var(--shadow-pos);
  background-color: var(--bg);
}

/* to add metallic finish (masks now use variables too) */
.navigation-menu .black-layer::before {
  content: "";
  position: absolute;   /* still relative to nearest positioned ancestor */
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--chev-pos-2) + var(--chev-h));
  pointer-events: none;

  background-image: var(--gold-metal), var(--gold-metal);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% var(--chev-h), 100% var(--chev-h);
  background-position: left 0, left var(--chev-pos-2);

  /* mask so the metallic gradient shows only on the gold stripes */
  -webkit-mask-image:
    repeating-linear-gradient(135deg, #000 0 var(--chev-gold-w), transparent var(--chev-gold-w) var(--chev-period)),
    repeating-linear-gradient(225deg, #000 0 var(--chev-gold-w), transparent var(--chev-gold-w) var(--chev-period));
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: 100% var(--chev-h), 100% var(--chev-h);
  -webkit-mask-position: left 0, left var(--chev-pos-2);

  mask-image:
    repeating-linear-gradient(135deg, #000 0 var(--chev-gold-w), transparent var(--chev-gold-w) var(--chev-period)),
    repeating-linear-gradient(225deg, #000 0 var(--chev-gold-w), transparent var(--chev-gold-w) var(--chev-period));
  mask-repeat: no-repeat, no-repeat;
  mask-size: 100% var(--chev-h), 100% var(--chev-h);
  mask-position: left 0, left var(--chev-pos-2);
}

/* sheen */
.navigation-menu .black-layer::after{
  content:"";
  position:absolute; top:0; left:0; width:100%;
  height:calc(var(--chev-pos-2) + var(--chev-h));
  pointer-events:none; z-index:1;
  background:linear-gradient(0deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0) 70%
  );
  mix-blend-mode:soft-light;
}




/* ===================================================
   GRID: Base menu layout (Mobile-first: 2 columns)
   - Anchored top margin: chevrons + shadow + buffer
   - Unified gutters and max width
   =================================================== */
.navigation-menu.open .inner ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  /* Anchor grid below chevrons; auto-updates at breakpoints */
  margin-top: calc(var(--chev-pos-2) + var(--chev-h) + var(--shadow-h) + var(--menu-buffer));

  /* Unified gutters + width */
  margin-left: var(--page-gutter);
  margin-right: var(--page-gutter);
  width: min(var(--content-max), calc(100% - (2 * var(--page-gutter))));

  /* Bottom space below grid */
  margin-bottom: clamp(24px, 8vh, 96px);

  box-sizing: border-box;
  align-content: start;
}

.navigation-menu.open .inner ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--tile-pad);
  box-sizing: border-box;
}

/* Menu link typography */
ul#menu-main-menu a,
.navigation-menu.open .inner ul li a {
  width: auto;
  font-size: var(--menu-fs);
  line-height: 1.15;
}

/* ---------- Tiles/borders/spans (clapperboard look unchanged) ---------- */
/* Tile 1: top/right/bottom */
.navigation-menu.open .inner ul li:nth-child(1) {
  border-top: var(--grid-border);
  border-right: var(--grid-border);
  border-bottom: var(--grid-border);
  border-left: 0;
}

/* Tile 2: top/bottom only */
.navigation-menu.open .inner ul li:nth-child(2) {
  border-top: var(--grid-border);
  border-right: 0;
  border-bottom: var(--grid-border);
  border-left: 0;
}

/* Tiles 3 & 5: bottom-only divider */
.navigation-menu.open .inner ul li:nth-child(3),
.navigation-menu.open .inner ul li:nth-child(5) {
  border-top: 0;
  border-right: 0;
  border-bottom: var(--grid-border);
  border-left: 0;
}

/* Tile 3 spans full row on small screens */
.navigation-menu.open .inner ul li:nth-child(3) {
  grid-column: span 2;
}

/* Tile 4: right + bottom; single column on small screens */
.navigation-menu.open .inner ul li:nth-child(4) {
  border-top: 0;
  border-right: var(--grid-border);
  border-bottom: var(--grid-border);
  border-left: 0;
  grid-column: span 1;
}

/* Ensure Tile 5 is single column at small screens */
.navigation-menu.open .inner ul li:nth-child(5) {
  grid-column: span 1;
}

/* ===================================================
   ADDRESS: aligned with grid gutters/max width
   - Font size mirrors menu item size at each breakpoint
   =================================================== */
address {
  margin-top: 50px !important;                 /* your original top margin */
  margin-left: var(--page-gutter);
  margin-right: var(--page-gutter);
  width: min(var(--content-max), calc(100% - (2 * var(--page-gutter))));
  max-width: var(--content-max);

  text-align: left;
  font-style: normal;
  font-size: var(--address-fs); /* equals --menu-fs */
  line-height: 1.4;
}

/* ===================================================
   ≥ 30em (~480px) — larger phones
   - Slightly enlarge chevrons & text
   - A bit more tile padding to fill space
   =================================================== */
@media (min-width: 30em) {
  :root {
    --chev-h: 70px;
    --chev-pos-2: 80px;
    --shadow-h: 20px;
    --shadow-pos: 150px;

    /* 1.5rem × 1.5 = 2.25rem */
    --menu-fs: 2.25rem;
    --address-fs: var(--menu-fs);

    /* increased padding on larger phones */
    --tile-pad: clamp(16px, 4.5vw, 34px);
  }
}

/* ===================================================
   ≥ 48em (~768px) — tablet (portrait)
   - Switch to 3-column layout
   - Tablet chevrons (baseline for larger screens)
   - Slightly more tile padding to reduce empty space
   =================================================== */
@media (min-width: 48em) {
  :root {
    --chev-h: 85px;
    --chev-pos-2: 95px;
    --shadow-h: 30px;
    --shadow-pos: 180px;  /* = 95 + 85 */

    /* 1.75rem × 1.5 = 2.625rem */
    --menu-fs: 2.625rem;
    --address-fs: var(--menu-fs);

    /* slightly increased tiles on tablets */
    --tile-pad: clamp(18px, 4.2vw, 40px);
  }

  .navigation-menu.open .inner ul {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Desktop-style tiles from this width up */
  .navigation-menu.open .inner ul li:nth-child(1),
  .navigation-menu.open .inner ul li:nth-child(2) {
    border-top: var(--grid-border);
    border-right: var(--grid-border);
    border-bottom: var(--grid-border);
    border-left: 0;
  }

  .navigation-menu.open .inner ul li:nth-child(3) {
    border-top: var(--grid-border);
    border-right: 0;
    border-bottom: var(--grid-border);
    border-left: 0;
    grid-column: auto; /* reset span from mobile */
  }

  .navigation-menu.open .inner ul li:nth-child(4) {
    border-top: 0;
    border-right: var(--grid-border);
    border-bottom: var(--grid-border);
    border-left: 0;
    grid-column: span 2;
  }

  .navigation-menu.open .inner ul li:nth-child(5) {
    border-top: 0;
    border-right: 0;
    border-bottom: var(--grid-border);
    border-left: 0;
    grid-column: span 1;
  }
}

/* ===================================================
   ≥ 64em (~1024px) — tablet (landscape) / small laptop
   - Chevrons = tablet × 1.2
   - Slight bump in padding, but leaner than tablet
   =================================================== */
@media (min-width: 64em) {
  :root {
    --chev-h: 102px;     /* 85 * 1.2 */
    --chev-pos-2: 114px; /* 95 * 1.2 */
    --shadow-h: 36px;    /* 30 * 1.2 */
    --shadow-pos: 216px; /* = 114 + 102 */

    /* 2rem × 1.5 = 3rem */
    --menu-fs: 3rem;
    --address-fs: var(--menu-fs);

    /* modest padding on small laptops */
    --tile-pad: clamp(16px, 3vw, 34px);
  }
}

/* ===================================================
   ≥ 80em (~1280px) — desktop
   - Same chevron size as 64em (tablet × 1.2)
   - Slight increase over previous desktop padding, but still tighter than tablet
   =================================================== */
@media (min-width: 80em) {
  :root {
    --chev-h: 102px;
    --chev-pos-2: 114px;
    --shadow-h: 36px;
    --shadow-pos: 216px;

    /* 2.25rem × 1.5 = 3.375rem */
    --menu-fs: 3.375rem;
    --address-fs: var(--menu-fs);

    --tile-pad: clamp(13px, 2.2vw, 30px);
  }
}














/*hide footer for custom pages*/
/* ------------------------------
   Footer
------------------------------ */
.footer {
    width: 100%;
    display: flex;
    color: #fff;
    background: url('http://balladistudios.com/wp-content/uploads/2025/02/Balladi-Logo-Final-4K.mp4') center no-repeat;
    text-align: center;
    padding: 100px 0;
    position: relative;
    z-index: 6;
}


.home {
    overflow: hidden !important;
}

footer.footer {
  display: none;
}






/*menu hover animation*/
.navigation-menu a {
    transition: none !important;
}
body .navigation-menu .inner ul li a:before {
    background: none !important;
}

.navigation-menu a:hover {
    transform: scale(1.2) !important;
    color: white !important;
}