/* =====================================================================
   HEADER - FOOTER STYLESHEET
   File: /home/chelseac/public_html/public/frontend/assets/css/header-footer.css
   Linked in app.blade.php <head> so it applies site-wide
   (header.blade.php + footer.blade.php run on every page).

   Rule: All values, classes & IDs are UNCHANGED — only reordered
   and commented for clarity. All @media queries are combined into
   ONE single Media Query zone at the very end of this file.

   NOTE: Only header.blade.php styles are included below for now.
   Footer styles will be appended in their own clearly-commented
   section once footer.blade.php code is provided.
   ===================================================================== */


/* =====================================================================
   SECTION 0: GLOBAL RESET
   (Applies to the whole document — was originally the top-level
   "*" reset inside header.blade.php's <style> block)
   ===================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* =====================================================================
   SECTION 1: HEADER — BASE / STICKY STATE
   (<header id="header"> element — transparent by default,
   becomes solid + fixed once JS adds the "fixed" class on scroll)
   ===================================================================== */

header {
  position:relative;
  z-index: 999;
  background-color: transparent;
  color: white;
  padding: 0px;
  transition: background-color 0.3s ease;
}

header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color:  #00000057;
}


/* =====================================================================
   SECTION 2: NAVBAR CONTAINER
   (<nav class="navbar"> — wraps logo, links & toggle button)
   ===================================================================== */

.navbar {
  padding: 6px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}


/* =====================================================================
   SECTION 3: LOGO
   (<div class="logo"> — site logo image, links to home)
   ===================================================================== */

.logo {
  max-width: 200px;
  font-size: 1.5rem;
  font-weight: bold;
}

.logo img {
  max-width: 100%;
  height: auto;
}


/* =====================================================================
   SECTION 4: NAV LINKS
   (<div class="nav-links" id="navLinks"> — Home / About / Careers /
   Products / Connect with Chelsea menu items)
   ===================================================================== */

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  font-variant: small-caps;
  color: white;
  text-decoration: none;
  font-size: 20px;
  font-weight: 400;
}

.nav-links a:hover {
  color: #cbd5e0;
}


/* =====================================================================
   SECTION 5: WHATSAPP / CONTACT BUTTON
   (<a class="whatsapp-button"> inside .nav-links — WhatsApp icon +
   "Contact Us" label)
   ===================================================================== */

.whatsapp-button {
  background-color: transparent;
  border: 2px solid #fff;
  color: #000 ;
  padding: 4px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-size:16px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.whatsapp-button span{
  font-weight: 700;
  color:#fff;
}

.whatsapp-button p{
  font-size:14px;
}

.whatsapp-button img {
  width: 32px;
  height: 32px;
}


/* =====================================================================
   SECTION 6: MOBILE TOGGLE BUTTON (HAMBURGER ICON)
   (<div class="toggle-button" onclick="toggleMenu()"> — 3-bar icon
   that animates into an "X" via the .active class, controlled by
   the toggleMenu() script)
   ===================================================================== */

.toggle-button {
  display: none;
  width: 30px;
  height: 21px;
  cursor: pointer;
  position: relative;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: white;
  border-radius: 10px;
  position: absolute;
  transition: all 0.3s ease;
}

.toggle-button .bar:nth-child(1) {
  top: 0;
}

.toggle-button .bar:nth-child(2) {
  top: 9px;
}

.toggle-button .bar:nth-child(3) {
  top: 18px;
}

.toggle-button.active .bar:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
}

.toggle-button.active .bar:nth-child(2) {
  opacity: 0;
}

.toggle-button.active .bar:nth-child(3) {
  transform: rotate(-45deg);
  top: 9px;
}


/* =====================================================================
   =====================================================================
   RESPONSIVE / MEDIA QUERIES  —  ALL BREAKPOINTS COMBINED HERE
   Grouped by breakpoint, sequence-wise in the same order the
   sections appear above. Nothing here changes any value — only
   relocated + commented for readability.
   =====================================================================
   ===================================================================== */

/* ---------------------------------------------------------------------
   BREAKPOINT: max-width: 768px
   --------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* SECTION 6: Mobile Toggle Button — show hamburger on mobile */
  .toggle-button {
    display: block;
  }

  /* SECTION 4: Nav Links — collapse into a dropdown panel on mobile */
  .nav-links {
    display: none;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    background-color: #000000;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 9;
  }

  /* SECTION 1 + 4: Nav Links background when header is in fixed/sticky state */
  header.fixed .nav-links {
    background-color: #000000 ;
  }

  /* SECTION 4: Nav Links — open/active state (menu visible) */
  .nav-links.active {
    padding: 25px 20px;
    display: flex;
    transform: translateY(0);
    align-items: flex-start;
    gap: 10px;
  }

  .nav-links a {
    margin: 0.5rem 0;
    font-size: 1.2rem;
  }

  /* SECTION 5: WhatsApp / Contact Button — mobile layout */
  .whatsapp-button {
    margin: 0.5rem 0;
    font-size: 1.2rem;
    margin: 0 auto !important;
    justify-content: center;
    width: 370px;
    line-height: 35px;
  }

  .whatsapp-button p{
    Display:none;
  }
}





