/* ===================================== */
/*  HEADER OVERRIDES FROM SITE DEFAULTS  */
/* ===================================== */

.header-nav /* Class-wise styling and overrides. */
{
  display: flex; /* Switch to "flexible layout manager" mode. */
  flex-direction: row;
  justify-content: center; /* Center the links horizontally. */
  background-color: var(--color-black);
  text-align: center;
  padding: var(--space-m); /* Single argument: all (Top, Right, Bottom, Left) are the same. */
}

.header-nav a /* Class-wise styling and overrides. */
{
  font-size: var(--font-size-subtitle); 
  color: var(--color-white);
  font-weight: bold; 
  text-decoration: none; /* Remove underlines of links. */
  margin: var(--space-none) var(--space-l); /* No vertical spacing (or needed). Horizontal spacing only. */   
}

.header-nav a:hover, .header-nav a:focus /* Class-wise styling and overrides. */
{
  color: var(--color-accent-orange-light); /* Hover/Current page link is accented. */
}

.header-services-strip /* Class-wise styling and overrides. */
{
  background-color: var(--color-near-white);
  width: 100%; /* Take up all width space of parent. */
  display: flex; /* Switch to "flexible layout manager" mode. */
  justify-content: center;
  align-items: flex-start; /* "Start" contents at the top, not middle/center. */
}

.header-services-list /* Class-wise styling and overrides. */
{
  list-style: none;  
  display: flex; /* Switch to "flexible layout manager" mode. */  
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap; /* Prevent "text wrap" to next line. */
  padding: 0;
  margin: 0;
}

.header-services-list li /* Class-wise styling and overrides. */
{
  font-family: var(--font-base);
  color: var(--color-accent-orange);
  font-size: var(--font-size-section-heading); 
  font-weight: bold;
  font-style: normal;  
  text-align: center; /* Center the text within each item container (also handles multi-line wrap). */ 
  margin: 0;
  padding: var(--space-s);
}

.header-hero-banner /* Class-wise styling and overrides. */
{
  position: relative; /* Creates a positioning coordinate frame for the logo that will be overlaid. */
  width: 100%; /* Take up all width space of parent. */
  height: 330px; /* Fixed height. */
  background-color: var(--color-light-gray); /* A fallback color for the background if the image fails to load. */
  background-image: url("../images/shared/hero-banner-image.jpg");
  background-position: center; /* Center both vertically and horizontally. */
  background-size: cover; /* Cover the entire area (maintains aspect ratio and may crop). */
  background-repeat: no-repeat; /* No tiling allowed. */
  border-top: 2px solid var(--color-black);    /* Black line above. */
  border-bottom: 2px solid var(--color-black); /* Black line below. */
  margin-top: 80px; /* Add "buffer room" above as business name overlay will "overlap above". */
}

.header-hero-banner__logo /* Class-wise styling and overrides. */
{
  width: 475px; /* Fixed width. */
  height: auto; /* Preserve aspect ratio using auto. */
  position: absolute; /* Use absolute to allow movement "outside" the parent (banner image) border/container. */  
  z-index: 10; /* Place "higher" in z-axis so it's "on top" of other element layers. */
  left: 50%; /* Position left edge of logo at 50% (center) of parent. */
  top: 0; /* Position top edge exactly on the top edge of parent (will shift it next). */
  transform: translate(-50%, -50%); /* Translate the element half of width and height to have its center on the "top center" of its parent. */
}

/* ================================ */
/*  SMALL-SCREEN / MOBILE OVERRIDES */
/* ================================ */
/* Everything below adjusts this page's layout for small screens (phones).
   Desktop styling above remains the default; these rules only apply when triggered. */

@media (max-width: 1100px) /* Header navigation bar gets crammed below this level, early adjust. */
{
  .header-nav
  {
    flex-direction: column; /* Stack the nav links vertically. */
  }
}

@media (max-width: 767px) /* One px below the 768px iPad Mini / tablet standard — phones get mobile, tablets & up keep desktop. */
{
  .header-services-strip
  {
    display: none; /* Hide the services list on small screens to reduce clutter. */
  }

  .header-hero-banner
  {
    height: 180px; /* Shorter banner for small screens.*/
  }

  .header-hero-banner__logo
  {
    width: clamp(325px, calc(37vw + 192px), 475px); /* Apply linear map (saturated at ends) to down-scale logo image. */
  }
}