/* Custom overrides for logo size and hero brightness */

/* Remove dark overlay from hero image to restore original brightness */
.hero::before {
  background-color: rgba(0, 0, 0, 0);
}

/*
 * Logo styling for the home page navigation
 *
 * The company logo graphic is displayed above the text
 * within the navigation overlay on the home page. The image
 * width scales with the viewport while maintaining the
 * aspect ratio. The text sits below the image and uses a
 * bold weight to improve legibility, especially on mobile
 * screens.
 */

/* Position the logo wrapper elements in a vertical stack */
.nav-hero .logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}

/* Style the logo graphic */
.nav-hero .logo-wrapper img {
  width: 5rem;
  height: auto;
  margin-bottom: 0.25rem;
}

/* Style the text underneath the logo graphic */
/* Style the text underneath the logo graphic */
.nav-hero .logo-wrapper .logo-text {
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.1;
  /* Override the default white color set on .nav-hero so the text is readable */
  color: #374151; /* dark grey for better contrast */
}

/*
 * Navigation overlay refinements
 *
 * The default `.nav-hero` overlay positions the logo and menu directly
 * over the hero image, which can cause readability issues when the
 * underlying image has high contrast.  To improve legibility we add
 * subtle backgrounds behind the logo block and the navigation links.
 * These backgrounds use semi-transparent white and gradient fades so
 * they blend into the hero image while providing enough contrast for
 * the dark text defined below.  We also continue to set the text
 * colour to a dark grey for maximum contrast against the light
 * backgrounds.
 */

/* Darken nav text for readability */
.nav-hero {
  color: #374151;
}
.nav-hero .menu a,
.nav-hero .menu a.active,
.nav-hero .menu a:hover {
  color: #374151;
}
.nav-hero .mobile-toggle {
  color: #374151;
}

/*
 * Semi-transparent backgrounds for the logo and menu containers.
 *
 * To improve legibility of the logo and navigation links on top of
 * busy hero images, we apply a light coloured background behind the
 * logo block and the menu. The background uses a subtle gradient
 * that fades into transparency so the underlying image remains
 * visible at the edges. A blur via `backdrop-filter` further
 * integrates the overlay with the hero image. The same padding and
 * border-radius are applied to both containers for a cohesive look.
 */

.nav-hero .logo-wrapper,
.nav-hero .menu {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  /* A light gradient background that fades into the hero image */
  background: linear-gradient(to right, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0.0) 100%);
  backdrop-filter: blur(4px);
}

/* On large screens the menu sits on the right side, so flip the gradient
 * direction to fade leftwards.  We use a media query to override the
 * generic gradient above for `.menu` only. */
@media (min-width: 640px) {
  .nav-hero .menu {
    background: linear-gradient(to left, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0.0) 100%);
  }
}

/*
 * Mobile menu positioning and styling
 *
 * There are two types of navigation in our site: the overlay nav on the
 * home page (`.nav-hero`) and the fixed nav used on interior pages
 * (`.nav`). Each has a corresponding mobile menu that appears when
 * the hamburger button is toggled. We style them separately to
 * achieve the desired behaviour.
 */

/*
 * Base mobile menu styles (interior pages). We right-align the text
 * and keep the container relative to the page. The `.show` class
 * toggles the display from none to block.  Note: padding and
 * background colour remain defined in style.css; we only adjust
 * alignment here.
 */
.nav .mobile-menu {
  text-align: right;
}

.nav .mobile-menu a {
  text-align: right;
  color: #374151;
}

/* Overlay mobile menu (home page) – position under the hamburger on the right
 *
 * The mobile menu for the home page is hidden by default via the
 * `hidden` utility class from Tailwind.  We set the display to
 * `flex` here so that removing the `hidden` class via JavaScript
 * reveals the menu.  The menu is positioned absolutely relative to
 * the top right of the viewport, given a light background with
 * transparency and blur, and right‑aligned links.
 */
/*
 * Overlay mobile menu (home page) – default hidden state and styling.
 *
 * The `.nav-hero` overlay navigation uses a separate mobile menu that is
 * positioned under the hamburger icon.  The menu is hidden by default
 * and revealed when the `.show` class is added via JavaScript.  We
 * apply a light backdrop and blur to help the menu stand out against
 * the underlying hero image.  All links are right aligned.
 */
.nav-hero + .mobile-menu {
  /* hidden by default; shown via `.show` */
  display: none;
  position: absolute;
  right: 1rem;
  top: 4rem;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  flex-direction: column;
  align-items: flex-end;
  min-width: 10rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Show the mobile menu when the `.show` class is present */
.nav-hero + .mobile-menu.show {
  display: flex;
}

.nav-hero + .mobile-menu a {
  display: block;
  width: 100%;
  text-align: right;
  color: #374151;
}

.nav-hero + .mobile-menu a:hover {
  background-color: rgba(243, 244, 246, 0.5);
}

.nav-hero + .mobile-menu a.active {
  color: #1d4ed8;
  font-weight: 500;
}

/* Increase the logo size on larger screens */
@media (min-width: 640px) {
  .nav-hero .logo-wrapper img {
    width: 6rem;
  }
  .nav-hero .logo-wrapper .logo-text {
    font-size: 0.875rem;
  }
}

/*
 * Logo styling for interior pages
 *
 * On interior pages the navigation bar uses the `.nav` class. We want
 * to reuse the same logo graphic and text treatment as the home page
 * while keeping the navigation compact. We therefore stack the
 * graphic above the text in a column and adjust the image size to
 * fit within the fixed nav height.
 */
.nav .logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
}

.nav .logo-wrapper img {
  width: 3.5rem;
  height: auto;
  margin-bottom: 0.25rem;
}

.nav .logo-wrapper .logo-text {
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.1;
  color: #374151;
}

/* Override nav link colours on interior pages for better contrast.  The base
 * stylesheet defines `.nav .menu a` with a very dark tone (#1f2937).
 * Here we prefer a slightly softer dark grey (#374151) to match the
 * colour of the logo text and ensure readability against the light
 * background.  Hover and active states remain blue to indicate
 * interactivity and current page selection. */
.nav .menu a {
  color: #374151;
}
.nav .menu a:hover {
  color: #1d4ed8;
}
.nav .menu a.active {
  color: #1d4ed8;
  font-weight: 500;
}