/* FGT Golf Theme - Header Navigation Menu Styles */

/* Header Container Structure*/
/* Note: background-image is set dynamically via inline styles in functions.php
   to support theme defaults and customizer options */
.site-header {
  background-color: #1e4d2b; /* Fallback color */
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: none;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  z-index: 1;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  z-index: 3;
  pointer-events: none;
} 
.header-grid-row {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 4; /* ensure above overlay */
}
/* Flex row for header */
.header-row {
  display: flex; /* use flexbox for layout */
  align-items: center; /* vertically center items */
  justify-content: space-between; /* space out items */
  max-width: 1200px; /* max width of header content */
  margin: 0 auto; /* center header content */
  padding: 0 2em; /* horizontal padding */
  min-height: 90px; /* minimum height of header */

}
.header-section {
  display: flex; /* use flexbox for layout */
  align-items: center; /* vertically center items */
 }
.header-section-left { 
  flex: 1;  /* take up equal space */
  justify-content: flex-start;  /* align left */
}
.header-section-center { 
  flex: 2; /* take up more space */
  justify-content: center; /* center align */
}
.header-section-right { 
  flex: 1; /* take up equal space */
  justify-content: flex-end; /* align right */
}

/* Site Title / Logo Styles */
.site-title {
    font-size: 1.4rem; /* larger font size equivalent to 22.4px */
    font-weight: bold; /* bold font weight */
    letter-spacing: 0.01em; /* slight letter spacing */
    line-height: 1.1; /* tighter line height */
    margin: 0; /* remove default margin */
    padding: 0; /* remove default padding */
    white-space: nowrap; /* prevent wrapping */
    overflow: hidden; /* hide overflow */
    text-overflow: ellipsis; /* add ellipsis for overflow */
    max-width: 100%; /* ensure it doesn't exceed container width */
  }
  .site-title a {
    color: var(--fgt-black); /* text color from CSS variable */
    text-decoration: none; /* remove underline */
    padding: 0.2em 0.1em; /* padding around text */
    border-radius: 2px; /* slight rounding of corners */
    transition: color 0.2s; /* smooth color transition on hover */
  }
  .site-title a:hover {
    color: var(--fgt-primary-color); /* change text color on hover */
  }
  /* Ensure logo image behaves like site title */
.site-logo img {
  max-height: 120px;   /* adjust as needed */
  height: auto;
  width: auto;
  display: block;
}

.site-logo {
  margin-right: 2.5em; /* keep same spacing as .site-branding */
}
  .site-branding {
  margin-right: 2.5em;
}


/* Navigation Menu Styles */
.nav-menu { 
  display: flex; /* use flexbox for layout */ 
  justify-content: center; /* center items horizontally */
}

.nav-menu-header {
    display: flex;              /* turn the list into a flexbox container */
    gap: 1.4rem;                /* evenly space items apart by 1.4rem */
    list-style: none;           /* remove default bullets from the list */
    padding: 0;                 /* strip default list padding */
    margin: 0;                  /* strip default list margin */
    z-index: 2; /* ensure above background overlay */
}

.nav-menu-item a {
    color: var(--fgt-white);       /* text color from a CSS variable */
    font-weight: 500;              /* medium font weight */
    font-size: 1.08rem;               /* standard text size */
    padding: 0.1em 0.56em;         /* small padding around text */
    border-radius: 4px;              /* no rounded corners */
    border: none;                  /* no border */
    background: none;              /* no background fill */
    transition: color 0.18s;       /* smooth color change on hover/focus */
    display: block;                /* make the link a block for clickable area */
    position: relative;            /* establish positioning context (for pseudo-elements, if used later) */
}

.nav-menu-item a:hover,
.nav-menu-item a:focus {
  color: var(--fgt-accent-color);   /* accent color for hover */
  /*background: rgba(255,255,255,0.18);  lighter background on hover */
}

.nav-menu-item.active a,
.nav-menu-item a[aria-current="page"] {
    color: var(--fgt-accent-color);   /* primary brand color for active item */
    font-weight: 600;            /* slightly bolder font */
}

  /* Highlight the active menu item */
.nav-page-ancestor > a {
  color: #015516 !important;         /* text color when active */
  background-color: #ffffff;      /* highlight background */
  border-radius: 4px;
  padding: 4px 8px;
}



/* Members Area Button Styles */
.member-button-link {
    text-decoration: none; /* remove underline from link */
  }
  .member-button {
    background: var(--fgt-white); /* Sets backgroud colour */
    color: var(--fgt-primary-color); /* Sets text colour */
    border: 2px solid var(--fgt-primary-color); /* Border colour and thickness */
    border-radius: 8px; /* Rounded corners */
    padding: 0.77em 1.32em; /* Padding inside button */
    font-weight: 500; /* Medium font weight */
    font-size: 1rem; /* Standard font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background 0.2s, color 0.2s; /* Smooth transition for background and text color */
    text-align: center; /* Center text */
    display: inline-block; /* Inline-block display */
    box-shadow: none; /* No box shadow */
  }
  /* Disabled Members Area button for launch */
  .member-button-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    border-style: solid;
    position: relative;
  }
  .member-button-disabled .coming-soon {
    font-size: 0.95em;
    color: #b00;
    font-weight: 600;
    margin-left: 0.5em;
    opacity: 0.85;
  }
  .member-button-link:hover .member-button {
    background: var(--fgt-primary-color); /* Change background on hover */
    color: var(--fgt-white); /* Change text color on hover */
  }

  /* Account dropdown (compact) - uses same base button styles */
  .member-account { position: relative; display: inline-block; }
  .member-account-toggle { appearance: none; border: none; padding: 0; margin: 0; }
  /* Ensure the account button uses the same visual treatment as the Members Area button */
  .member-account .member-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--fgt-white);
    color: var(--fgt-primary-color);
    border: 2px solid var(--fgt-primary-color);
    border-radius: 8px;
    padding: 0.77em 1.32em;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
  }
  .member-account .member-button::after {
    content: '';
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-left: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
  }
  .member-account.open .member-button::after { transform: rotate(-135deg); }
  .member-account.open .member-account-menu { display: block; }
  .member-account-menu { position: absolute; right: 0; /* place just below the button but overlap slightly to avoid pointer gap */ top: calc(100% - 6px); background: var(--fgt-white); border: 1px solid rgba(0,0,0,0.06); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); min-width: 140px; display: none; z-index: 40; }
  .member-account-item { display: block; padding: 10px 12px; color: var(--fgt-primary-color); text-decoration: none; font-weight: 500; }
  .member-account-item:hover, .member-account-item:focus { background: rgba(0,0,0,0.03); color: var(--fgt-primary-color); }
  /* Show menu on hover/focus-within for keyboard accessibility */
  .member-account:hover .member-account-menu, .member-account:focus-within .member-account-menu { display: block; }

/* ================================
   Mobile Menu Overrides
   ================================ */
@media (max-width: 768px) {
  /* Hide menu by default on mobile - override the desktop display:flex */
  .nav-menu-header {
    display: none !important;
  }
  /* Show menu when .open class is added by JS */
  .nav-menu-header.open {
    display: flex !important;
    flex-direction: column;
  }
}