/*
Theme Name:   Essential Design Studio — Child (Block)
Theme URI:    https://essentialdesign.co.uk
Description:  Child theme for EDS built on Twenty Twenty-Four
Author:       EDS
Template:     twentytwentyfour
Version:      1.0.0
Requires at least: 6.8
Tested up to: 6.8.3
Text Domain:  eds-child-block
*/

/* Cross-browser normalisation */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
header, nav, main, section, footer {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Kill WP 6.9 root padding */
.wp-site-blocks {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body {
  margin: 0;
  padding: 0;
}
.wp-block-post-content {
  padding: 0 !important;
}

/* Transparent fixed header - clean version */
.wp-site-blocks header.wp-block-template-part {
  background: rgba(0, 0, 0, 0.65); /* semi-transparent only on header */
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  transition: background-color 0.3s ease;
}

/* Navigation link colors */
.wp-block-navigation a {
  color: #fdf9c4;
  font-family: 'Afacad', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color 0.25s ease;
  font-size: 1.1rem;
}
.wp-block-navigation__container a:hover,
.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__label:hover {
  color: #b43a37 !important;
}
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation  .wp-block-navigation-item__content[aria-current="page"] {
  color: #fdf9c4;
}

/* remove extra space above tiles */
.wp-site-blocks > header.wp-block-template-part {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Override inner group padding from template (was 20px/15px, reduced for ~75% header) */
.wp-site-blocks header.wp-block-template-part .wp-block-group {
  padding-top: 4px !important;
  padding-bottom: 8px !important;
}
/* remove the default vertical gap TT4 adds */
.wp-site-blocks {
  padding-top: 0 !important;
}
/* make header fixed without pushing content down */
.wp-site-blocks header.wp-block-template-part {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.65);
}
/* tidy nav links */
.wp-block-navigation__container {
  gap: 2rem;
  padding-right: 4rem;
}
@media (max-width: 1100px) {
  .wp-block-navigation__container {
    padding-right: 0;
  }
}
/* Double the spacing between logo and nav */
.wp-block-group.is-content-justification-space-between {
  gap: 2.4rem !important; /* doubled from 1.2rem */
}
/* =======================================
   SHRINK HEADER ON SCROLL
   ======================================= */

/* Base header */
.wp-site-blocks header.wp-block-template-part {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.65);
  transition: all 0.4s ease;
  padding-block: 0.6rem; /* top/bottom padding — reduced 75% of original */
}

/* Base logo size */
.wp-site-blocks header.wp-block-template-part .wp-block-site-logo img {
  width: 85px;
  height: auto;
  border-radius: 8px;
  transition: width 0.4s ease;
}

/* When scrolled */
.wp-site-blocks header.wp-block-template-part.shrink {
  padding-block: 0.2rem;
  background: rgba(0, 0, 0, 0.85); /* opaque enough without blur on mobile */
}
/* backdrop-filter only on desktop — on mobile it creates a containing block
   that traps WP's position:fixed menu overlay inside the header bar */
@media (min-width: 1101px) {
  .wp-site-blocks header.wp-block-template-part.shrink {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
  }
}

.wp-site-blocks header.wp-block-template-part.shrink .wp-block-site-logo img {
  width: 60px;
}
.wp-site-blocks :where(.is-layout-flow) > *,
:where(.wp-site-blocks) > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Larger hamburger icon */
.wp-block-navigation__responsive-container-open svg {
  width: 48px;
  height: 48px;
}

/* Override the default WordPress navigation breakpoint and srhink the logo */
@media (max-width: 1100px)
{
  .wp-block-navigation__responsive-container-open {
    display: block !important;
  }
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  .wp-site-blocks header.wp-block-template-part.shrink .wp-block-site-logo img {
  width: 55px;
}
}