@charset "UTF-8";                           /* Declares the character encoding for the stylesheet */

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* THIS IS THE MAIN STYLESHEET FOR HEADER AND FOOTER AS WELL AS RESETTING STYLES 
(RESETTING STYLES BORROWED FROM MIDTERM DUE TO ISSUES IT FIXED) */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */

/* This stylesheet only contains styles for the header, navigation, and footer. */
/* Other styles (main content, sections, articles, etc.) are in page_body.css or in page specific stylesheets */

/* STYLESHEET BY: Willow Poortenga */
/* NOTE: Comments throughout the stylesheet explain each section and style for clarity and maintainability and some 
were autocompleted from VSCode while writing to help me keep track of "What does what". This stlyesheet took me forever
to make, and I'm going to be applying most of what I'm doing on here to my own personal site - so that's why I went a little bit
overboard with the styling rules. No AI was used in the making of the rules themselves, only in helping make the descriptions of
rules I made and forgot the purpose of, or to help me get a better understanding of what order certain rules should be in / what would
be a better fit for my usecase (most of the time it was a google search with my own research that led to the answer I needed and for
this assignment, the book was heavily used or stackoverflow). Before submitting my final, I will be reaching out to
classmates and the professor for feedback. According to VSCode by the time I submit this assignment there shouldn't be any
errors in the CSS and this has been ran through the validation tool at "https://jigsaw.w3.org/css-validator/" */

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* START OF STYLES.CSS */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */

/* Reset default styles (removes browser defaults for margin/padding and sets box-sizing to border-box) */
* {
  margin: 0;                                /* Removes default margin from all elements */
  padding: 0;                               /* Removes default padding from all elements */
  box-sizing: border-box;                   /* Includes padding and border in element width/height calculations */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* THEME COLORS (MATCH JBL LOGO) */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
:root {
  --header-bg: #222;                      /* Deep charcoal to complement dark logo tones */
  --nav-bg: #2a2a2a;                      /* Slightly lighter charcoal for dropdown */
  --text: #ffffff;                        /* White for primary text */
  --accent-gold: #c8a045;                 /* Gold accent echoing “AND CO.” in the JBL logo */
  --accent-olive: #5a6b4f;                /* Olive accent echoing laurel branches */
  --container-max: 1200px;                  /* Increased max-width so footer has more room */
  --gutter: 18px;                           /* Slightly reduced gutter to gain horizontal space */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* HEADER AND NAVIGATION (MOBILE-FIRST — KEEP AS-IS) */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */

header {
  background-color: var(--header-bg);       /* Header bar background */
  color: var(--text);                       /* Header text color */
  padding: 12px 0;                          /* Vertical padding in the header bar */
  text-align: center;                       /* Center text baseline */
  width: 100%;                              /* Full-bleed header */
  position: relative;                       /* Anchor for dropdown overlay on mobile */
  z-index: 5;                               /* Keep header above page content */
}

/* Mobile header: branding centered, hamburger on the right */
header .header-content {
  display: grid;                            /* Grid for precise spacing */
  grid-template-columns: 1fr auto 1fr;      /* Left spacer, branding center, hamburger right */
  align-items: center;                      /* Vertically center everything */
  max-width: var(--container-max);          /* Comfortable max width */
  margin: 0 auto;                           /* Center the row */
  padding: 0 var(--gutter);                 /* Horizontal breathing room */
}

/* Branding: site title and tagline stacked and centered */
.branding {
  grid-column: 2;                           /* Middle column */
  display: flex;                            /* Stack title/tagline */
  flex-direction: column;
  gap: 6px;                                 /* Vertical rhythm */
  text-align: center;                       /* Center text within block */
}

header h1 {
  font-size: 1.55em;                        /* Mobile title size */
  font-weight: 700;                         /* Bold title */
  letter-spacing: 0.25px;                   /* Subtle letter spacing */
}

header p {
  font-size: 0.95em;                        /* Tagline size */
  color: var(--accent-olive);               /* Olive accent for tagline */
}

/* Hamburger: remains top-right on mobile, toggles menu below */
.menu-toggle {
  display: none;                            /* Checkbox hidden (pure CSS toggle present but JS-driven) */
}

.hamburger {
  grid-column: 3;                           /* Right column position */
  justify-self: end;                        /* Push to far right */
  cursor: pointer;                          /* Pointer on hover */
  font-size: 1.8em;                         /* Icon size */
  color: var(--text);                       /* Icon color */
  background: none;                         /* No button chrome */
  border: none;
  line-height: 1;                           /* Avoid clipping */
}

/* Fixes issue I had with the screen reader not recognizing the hamburger menu properly - so I had to manually hide everything*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Mobile dropdown menu BELOW the header (JS adds .is-open on #primary-nav) */
#primary-nav ul {
  list-style: none;                         /* No bullets */
  padding: 0;                               /* Reset spacing */
  margin: 0;                                /* Reset spacing */
  display: none;                            /* Hidden until JS toggles class */
  text-align: center;                       /* Centered links */
  background-color: var(--nav-bg);          /* Dropdown background */
}

#primary-nav.is-open ul {
  display: block;                           /* Reveal mobile menu panel */
  position: absolute;                       /* Overlay panel under header bar */
  left: 0;                                  /* Full-bleed under header */
  right: 0;                                 /* Full-bleed under header */
  top: 100%;                                /* Directly beneath the header */
  z-index: 999;                             /* Above main content */
  padding: 10px 0;                          /* Comfortable vertical spacing */
}

#primary-nav ul li {
  border-bottom: 1px solid rgba(255,255,255,0.15); /* Soft dividers */
}

#primary-nav ul li:last-child {
  border-bottom: none;                      /* Clean end */
}

#primary-nav ul li a {
  display: inline-block;                    /* Makes centering work nicely */
  color: var(--text);                       /* Link color */
  text-decoration: none;                    /* No underline */
  padding: 12px 18px;                       /* Tap-friendly */
}

#primary-nav ul li a:hover {
  color: var(--accent-gold);                /* Gold hover accent */
}

/* ------------------------------------------------------------------- */
/* MEDIA QUERY — TABLET (CENTERED NAV UNDER BRANDING) */
/* ------------------------------------------------------------------- */

@media screen and (min-width: 640px) {
  /* Hide mobile toggle hardware on tablet */
  .hamburger,
  .menu-toggle {
    display: none;                          /* No toggle on tablet */
  }

  /* Header content: single centered column and ensure branding is centered */
  header .header-content {
    display: grid;                          /* Ensure grid layout */
    grid-template-columns: 1fr;             /* Single centered column */
    justify-items: center;                  /* Center children horizontally */
    row-gap: 8px;                           /* Space to the nav row */
    max-width: var(--container-max);        /* Constrain row width */
    margin: 0 auto;                         /* Center within header */
    padding: 0 var(--gutter);               /* Padding harmony */
  }

  /* Explicitly center the branding block on tablet */
  .branding {
    grid-column: 1;
    justify-self: center;                   /* Center the branding within the grid cell */
    text-align: center;                     /* Keep text centered */
  }

  header h1 { font-size: 1.8em; }           /* Slightly larger title */
  header p  { font-size: 1.05em; }          /* Slightly larger tagline */

  /* Tablet nav: inline, centered within the header bar */
  #primary-nav {
    max-width: var(--container-max);        /* Match header row width */
    margin: 0 auto;                         /* Center the nav block */
    padding: 0 var(--gutter);               /* Left/right balance */
    position: static;                       /* Cancel absolute mobile dropdown positioning */
  }

  #primary-nav ul {
    display: flex;                          /* Horizontal list */
    justify-content: center;                /* Centered in header */
    gap: 22px;                              /* Comfortable spacing */
    background: transparent;                /* No dropdown panel */
    padding: 0;                             /* Reset dropdown padding */
    border: 0;                              /* No separators */
    position: static;                       /* Ensure inline flow on tablet */
  }

  #primary-nav ul li { border: 0; }
  #primary-nav ul li a {
    padding: 10px 14px;                     /* Compact tablet padding */
    font-weight: 600;                       /* Slightly bold */
    white-space: nowrap;                    /* Prevent nav link wrapping */
  }
}

/* ------------------------------------------------------------------- */
/* MEDIA QUERY — DESKTOP (CENTERED HEADER ROW, LEFT BRANDING, RIGHT NAV) */
/* ------------------------------------------------------------------- */

@media screen and (min-width: 1024px) {
  /* Make the header a two-column grid to place branding and nav side-by-side
     while constraining each item within a centered max-width row. */
  header {
    display: grid;                          /* Grid on outer header to define two columns */
    grid-template-columns: 1fr 1fr;         /* Left column for branding, right for nav */
    align-items: center;                    /* Vertically align both columns */
  }

  /* Branding column: centered container, left-aligned content */
  header .header-content {
    grid-column: 1;                         /* Occupies left header column */
    max-width: var(--container-max);        /* Constrain width to keep nav near branding */
    margin: 0 auto;                         /* Center the inner row within its column */
    padding: 0 var(--gutter);               /* Horizontal padding harmony */
    display: block;                         /* Collapse inner grid to block for clean left align */
  }

  .branding {
    text-align: left;                       /* Left-align site title/tagline */
    align-items: flex-start;                /* Left-align block content */
    gap: 4px;                               /* Tight spacing on desktop */
  }

  header h1 { 
    font-size: 2.1em;                       /* Desktop title size */
    letter-spacing: 0.3px;                  /* Slightly more spacing */
  }

  header p  { 
    font-size: 1.05em;                      /* Desktop tagline size */
    color: var(--accent-olive);             /* Keep olive accent consistent */
  }

  /* Hide mobile controls on desktop */
  .hamburger,
  .menu-toggle { 
    display: none; 
  }

  /* Nav column: centered container, pushed to the right within its column */
  #primary-nav {
    grid-column: 2;                         /* Occupies right header column */
    max-width: var(--container-max);        /* Constrain width to match branding column */
    margin: 0 auto;                         /* Center nav container within its column */
    padding: 0 var(--gutter);               /* Horizontal padding harmony */
    justify-self: end;                      /* Align nav to the right edge of the centered container */
  }

  #primary-nav ul {
    display: flex;                          /* Horizontal nav */
    gap: 28px;                              /* Spacious desktop gap */
    background: transparent;                /* No dropdown panel */
    padding: 0;                             /* Remove mobile dropdown padding */
    border: 0;                              /* No separators */
    position: static;                       /* Ensure inline flow on desktop */
  }

  #primary-nav ul li { border: 0; }

  #primary-nav ul li a {
    color: var(--text);                     /* White links */
    padding: 10px 16px;                     /* Desktop padding */
    font-weight: 700;                       /* Bold nav */
    white-space: nowrap;                    /* Keep nav links on one line */
  }

  #primary-nav ul li a:hover {
    color: var(--accent-gold);              /* Gold hover accent */
    text-decoration: underline;             /* Subtle underline on hover */
  }
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* FOOTER STYLES (NO TRUNCATION; ALLOW WRAPPING TO SHOW FULL TEXT ON MOBILE) */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */

/* Mobile-first footer: stack and center items vertically */
footer {
  background-color: var(--header-bg);       /* Match header background for visual continuity */
  color: var(--text);                       /* Footer text color */
  padding: 16px var(--gutter);              /* Footer padding */
  font-size: 0.95em;                        /* Footer base size */
  margin-top: 24px;                         /* Spacing above footer */
  width: 100%;                              /* Full-bleed footer */
  text-align: center;                       /* Center text on mobile */
}

/* Default: stack items vertically and center them for mobile */
footer .footer-content {
  display: flex;                            /* Flex layout */
  flex-direction: column;                   /* Stack vertically on mobile */
  justify-content: center;                  /* Center vertically if needed */
  align-items: center;                      /* Center horizontally */
  gap: 8px;                                 /* Small gap between items */
  max-width: var(--container-max);          /* Keep same max width as header */
  margin: 0 auto;                           /* Center the block */
  padding: 0 var(--gutter);                 /* Horizontal padding */
}

/* Footer children: allow wrapping and full display of content */
footer .footer-content > * {
  min-width: 0;                             /* Allow flex children to shrink below content width */
  width: 100%;                              /* Full width in stacked mobile layout */
  white-space: normal;                      /* Allow wrapping so full text is visible */
  overflow: visible;                        /* Do not hide overflow */
  text-overflow: clip;                      /* No ellipsis */
  display: block;                           /* Ensure block-level behavior */
  text-align: center;                       /* Center text inside each block */
  padding: 2px 0;                           /* Small vertical padding for breathing room */
  word-break: break-word;                   /* Break long words if necessary to avoid overflow */
}

/* Links in footer remain visible and centered on mobile */
footer a {
  color: var(--accent-gold);                /* Gold accent for links (logo tie-in) */
  text-decoration: none;                    /* Clean default */
}

footer a:hover {
  text-decoration: underline;               /* Underline on hover for clarity */
}

/* ------------------------------------------------------------------- */
/* MEDIA QUERY — DESKTOP (SPREAD ITEMS HORIZONTALLY BUT ALLOW WRAPPING IF NEEDED) */
/* ------------------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  footer .footer-content {
    flex-direction: row;                     /* Horizontal layout on desktop */
    justify-content: space-between;          /* Spread items across the row */
    align-items: center;                     /* Vertical alignment */
    gap: 10px;                               /* Breathing room */
  }

  /* Footer children become flexible columns and will wrap lines as needed */
  footer .footer-content > * {
    width: auto;                             /* Let items size to content on desktop */
    white-space: normal;                     /* Allow wrapping to show full text */
    overflow: visible;                       /* Do not hide overflow */
    text-overflow: clip;                     /* No ellipsis */
    min-width: 0;                            /* Allow flex item to shrink */
    text-align: left;                        /* Left-align in desktop layout */
    padding: 0;                              /* Reset mobile padding */
    word-break: normal;                      /* Prefer natural wrapping on desktop */
  }

  /* Restore small vertical rhythm for desktop */
  footer p,
  footer address {
    margin: 5px 0;
  }
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* END OF STYLES.CSS - I'm still confused as to why some of these css rules 
worked, but I'm not going to second guess anything at this point */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */