/* 
============================================
TALL PINE WATER & IMPROVEMENT ASSOCIATION
CONSOLIDATED STYLESHEET
============================================

This file contains all the CSS (styling) for your website.
Both index.html and archive.html use this same stylesheet.

HOW TO USE THIS FILE:
- To change colors, fonts, sizes, or spacing, find the section below that matches what you want to change
- Look for the comments that explain each section
- Make your changes and save the file
- Refresh your browser to see the changes

TIP: Always keep a backup copy before making major changes!
============================================
*/

/* 
============================================
COLOR VARIABLES
============================================
These are the main colors used throughout the site.
Change these values to change the color scheme everywhere at once!

To change a color:
1. Find the color variable you want to change (like --primary or --accent)
2. Replace the color code (the part after the colon) with your new color
3. You can use:
   - Color names: "red", "blue", "green"
   - Hex codes: "#FF5733", "#3498db" (use a color picker online to find codes)
   - RGB values: "rgb(255, 87, 51)"

Current colors:
- --primary: The main dark green color (navbar, headings, footer)
- --accent: The light blue/cyan color (highlights, links, borders)
- --light: The light gray background color
- --dark: The dark text color
============================================
*/
:root {
  --primary: #004d40;    /* Main dark green - change this to change navbar/headings color */
  --accent: #26c6da;     /* Light blue accent - change this for links and highlights */
  --light: #f5f5f5;      /* Light gray background - change this for page background */
  --dark: #222;          /* Dark text color - change this for all text color */
}

/* 
============================================
RESET & BASE STYLES
============================================
This section sets up the basic styling for the entire page.
You usually don't need to change this unless you want to adjust:
- Font family (the type of text)
- Overall spacing
- How the page is laid out
============================================
*/
* {
  margin: 0;           /* Removes default spacing around elements */
  padding: 0;          /* Removes default padding inside elements */
  box-sizing: border-box;  /* Makes sizing calculations easier */
}

body {
  font-family: "Inter", sans-serif;  /* The font used for all text - change "Inter" to another font name */
  color: var(--dark);                /* Text color uses the --dark variable */
  background-color: var(--light);    /* Background color uses the --light variable */
  line-height: 1.6;                  /* Space between lines of text (1.6 = 60% extra space) */
  min-height: 100vh;                 /* Makes sure page is at least full screen height */
  display: flex;                      /* Uses flexbox layout */
  flex-direction: column;             /* Stacks elements vertically */
}

/* 
============================================
NAVBAR (Navigation Bar)
============================================
This styles the navigation bar at the top of the page.

To change:
- Navbar background color: Change background-color in the header section
- Navbar height: Change padding values in the nav section
- Brand name size: Change font-size in .brand
- Link colors: Change color in nav a
- Link hover color: Change color in nav a:hover
============================================
*/
header {
  background-color: var(--primary);  /* Navbar background - uses --primary color */
  color: white;                       /* Text color in navbar */
  position: sticky;                   /* Navbar stays at top when scrolling */
  top: 0;                             /* Position at very top of page */
  z-index: 100;                       /* Keeps navbar above other content */
}

nav {
  max-width: 1200px;                  /* Maximum width of navbar content */
  margin: 0 auto;                     /* Centers the navbar */
  padding: 1rem 1.5rem;               /* Spacing inside navbar (top/bottom, left/right) */
  display: flex;                      /* Uses flexbox for layout */
  justify-content: space-between;     /* Puts brand on left, links on right */
  align-items: center;                /* Vertically centers items */
}

.brand {
  font-weight: 600;                   /* Makes brand name bold (400=normal, 600=semi-bold, 700=bold) */
  font-size: 1.2rem;                  /* Size of brand name text (1.2rem = 120% of normal size) */
  color: white;                       /* Brand name color */
  text-decoration: none;              /* Removes underline from link */
  cursor: pointer;                    /* Shows hand cursor on hover */
  transition: color 0.3s ease;        /* Smooth color change on hover (0.3 seconds) */
}

.brand:hover {
  color: var(--accent);               /* Brand name color when you hover over it */
}

nav ul {
  list-style: none;                   /* Removes bullet points from list */
  display: flex;                      /* Displays list items in a row */
  gap: 1.5rem;                        /* Space between menu items */
}

nav a {
  color: white;                       /* Menu link color */
  text-decoration: none;              /* Removes underline from links */
  font-weight: 500;                   /* Medium bold text */
  transition: color 0.3s ease;        /* Smooth color change on hover */
}

nav a:hover {
  color: var(--accent);               /* Menu link color when you hover over it */
}

/* 
============================================
DROPDOWN MENU
============================================
This styles dropdown menus in the navigation (if you add them later).

To change:
- Dropdown background: Change background-color in .dropdown-menu
- Dropdown width: Change min-width in .dropdown-menu
- Dropdown item spacing: Change padding in .dropdown-menu a
- Dropdown hover effect: Change background-color in .dropdown-menu a:hover
============================================
*/
.dropdown {
  position: relative;                 /* Allows dropdown to position relative to this */
}

.dropdown-toggle {
  display: flex;                      /* Uses flexbox layout */
  align-items: center;                /* Vertically centers items */
  gap: 0.5rem;                        /* Space between text and arrow */
  cursor: pointer;                    /* Shows hand cursor on hover */
}

.dropdown-toggle::after {
  content: "▼";                       /* Adds down arrow after dropdown text */
  font-size: 0.7rem;                  /* Size of arrow */
  transition: transform 0.3s ease;    /* Smooth rotation animation */
}

.dropdown.active .dropdown-toggle::after {
  transform: rotate(180deg);          /* Rotates arrow 180 degrees when dropdown is open */
}

.dropdown-menu {
  position: absolute;                 /* Positions dropdown below toggle */
  top: 100%;                          /* Starts right below the toggle */
  left: 0;                            /* Aligns to left edge */
  background-color: var(--primary);   /* Dropdown background color */
  min-width: 180px;                   /* Minimum width of dropdown */
  list-style: none;                   /* Removes bullet points */
  padding: 0;                         /* No padding on list */
  margin-top: 0.5rem;                 /* Space between toggle and dropdown */
  border-radius: 4px;                 /* Rounded corners (increase for more roundness) */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Shadow effect */
  opacity: 0;                         /* Hidden by default */
  visibility: hidden;                 /* Also hidden by default */
  transform: translateY(-10px);       /* Starts slightly above final position */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;  /* Smooth animation */
  display: flex;                      /* Uses flexbox */
  flex-direction: column;             /* Stacks items vertically */
  gap: 0;                             /* No gap between items */
}

.dropdown.active .dropdown-menu {
  opacity: 1;                         /* Fully visible when active */
  visibility: visible;                /* Also visible when active */
  transform: translateY(0);           /* Moves to final position */
}

.dropdown-menu li {
  margin: 0;                          /* No margin */
  padding: 0;                         /* No padding */
  display: block;                     /* Displays as block element */
  width: 100%;                        /* Full width */
}

.dropdown-menu a {
  display: block;                     /* Makes entire area clickable */
  padding: 0.75rem 1.5rem;            /* Spacing inside dropdown items (top/bottom, left/right) */
  color: white;                       /* Text color */
  text-decoration: none;              /* Removes underline */
  transition: background-color 0.3s ease, color 0.3s ease;  /* Smooth hover effects */
  margin: 0;                          /* No margin */
  border: none;                       /* No border */
}

.dropdown-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);  /* Light background on hover */
  color: var(--accent);               /* Accent color on hover */
}

/* 
============================================
MOBILE NAVIGATION (Hamburger Menu)
============================================
This styles the hamburger menu (three lines) that appears on mobile devices.

To change:
- Hamburger icon size: Change width and height in .bar
- Hamburger icon color: Change background-color in .bar
- Hamburger icon spacing: Change margin in .bar
============================================
*/
.menu-toggle {
  display: none;                      /* Hidden on desktop, shown on mobile */
  flex-direction: column;             /* Stacks the three lines vertically */
  cursor: pointer;                    /* Shows hand cursor */
}

.bar {
  height: 3px;                        /* Thickness of hamburger lines */
  width: 25px;                        /* Width of hamburger lines */
  background-color: white;            /* Color of hamburger lines */
  margin: 4px 0;                      /* Space between lines */
  border-radius: 2px;                 /* Slightly rounded lines */
}

/* 
============================================
RESPONSIVE DESIGN - TABLET SIZE
============================================
These styles apply when screen width is 950px or less.
This prevents the navbar from looking squished on medium screens.

To adjust:
- Change max-width value to adjust when these styles kick in
- Adjust font sizes and spacing as needed
============================================
*/
@media (max-width: 950px) {
  .brand {
    font-size: 1rem;                  /* Smaller brand name on tablets */
  }

  nav ul {
    gap: 1rem;                        /* Less space between menu items */
  }

  nav a {
    font-size: 0.9rem;                /* Slightly smaller menu text */
  }

  nav {
    padding: 1rem;                    /* Less padding on navbar */
  }
}

/* 
Ensure consistent alignment between navbar, main, and footer between 768px and 900px
The issue is main has max-width: 900px while navbar/footer have max-width: 1200px
Solution: Make navbar match main's max-width in this range
*/
@media (min-width: 768px) and (max-width: 900px) {
  nav {
    max-width: 900px;                 /* Match main container's max-width */
  }
}

/* 
============================================
RESPONSIVE DESIGN - MOBILE SIZE
============================================
These styles apply when screen width is 768px or less (phones).
This makes the menu collapse into a hamburger menu.

To adjust:
- Change max-width value to adjust when mobile menu appears
- Adjust spacing and sizes for different phone sizes
============================================
*/
@media (max-width: 768px) {
  nav ul {
    position: absolute;               /* Positions menu absolutely */
    top: 64px;                        /* Starts below navbar */
    right: 0;                         /* Aligns to right edge */
    background-color: var(--primary); /* Same background as navbar */
    width: 100%;                      /* Full width */
    flex-direction: column;           /* Stacks items vertically */
    align-items: center;              /* Centers items */
    gap: 1.2rem;                      /* Space between items */
    padding: 1.5rem 0;                /* Padding top and bottom */
    display: none;                    /* Hidden by default */
  }

  nav ul.active {
    display: flex;                    /* Shows when hamburger is clicked */
  }

  .menu-toggle {
    display: flex;                    /* Shows hamburger icon on mobile */
  }

  .dropdown-menu {
    position: static;                 /* Normal positioning on mobile */
    width: 100%;                      /* Full width */
    margin-top: 0.5rem;               /* Space above dropdown */
    opacity: 1;                       /* Always visible */
    visibility: visible;              /* Always visible */
    transform: none;                  /* No animation */
    box-shadow: none;                 /* No shadow */
    background-color: rgba(0, 0, 0, 0.2);  /* Darker background */
    border-radius: 4px;               /* Rounded corners */
    display: none;                    /* Hidden by default */
  }

  .dropdown.active .dropdown-menu {
    display: block;                   /* Shows when dropdown is active */
  }

  .dropdown-toggle::after {
    display: inline-block;            /* Shows arrow on mobile */
  }
}

/* 
============================================
HERO SECTION (Large Image at Top)
============================================
This styles the hero section with the background image.
Only used on index.html (main page).

HOW TO CHANGE THE HERO IMAGE:
1. Save your new image file in the same folder as your HTML files
2. Name it something like "hero.jpg" (or keep your current name)
3. Find the line below that says: background: url("hero.jpg")
4. Replace "hero.jpg" with your new image filename
   Example: background: url("my-new-image.jpg")
5. Save the file and refresh your browser

HOW TO CHANGE THE HERO IMAGE SIZE:
- Change height: 35vh to adjust how tall the hero section is
  (vh = viewport height, so 35vh = 35% of screen height)
  Examples: 30vh = shorter, 50vh = taller
- Change background-position: center 40% to adjust what part of image is visible
  Examples: "center top" = shows top of image, "center bottom" = shows bottom

TIP: For best results, use a wide image (landscape orientation)
============================================
*/
.hero {
  background: url("hero.jpg") center 40%/cover no-repeat;  /* Image path, position, and sizing */
  height: 35vh;                       /* Height of hero section (35% of screen height) */
  display: flex;                      /* Uses flexbox */
  align-items: center;                /* Centers content vertically */
  justify-content: center;            /* Centers content horizontally */
  color: white;                       /* Text color */
  text-align: center;                 /* Centers text */
  position: relative;                 /* Allows positioning of child elements */
}

.hero h1 {
  position: relative;                 /* Positions relative to hero */
  font-size: 2rem;                    /* Size of hero heading (2rem = 200% of normal) */
  z-index: 1;                         /* Keeps text above background */
  padding: 0 1rem;                    /* Horizontal padding */
  background-color: rgba(0, 0, 0, 0.7);  /* Semi-transparent black background behind text */
  align-self: end;                    /* Aligns to bottom of hero */
  margin-bottom: 4rem;                /* Space from bottom */
}

@media (max-width: 768px) {
  .hero {
    height: 30vh;                     /* Shorter hero on mobile (30% of screen height) */
  }

  .hero h1 {
    font-size: 1.4rem;                /* Smaller heading on mobile */
  }
}

/* 
============================================
MAIN CONTENT AREA
============================================
This styles the main content area where your sections appear.

To change:
- Maximum width: Change max-width in main (currently 900px)
- Spacing around content: Change margin and padding in main
- Background color: Add background-color property
============================================
*/
main {
  max-width: 900px;                   /* Maximum width of content (prevents text from being too wide) */
  margin: 2rem auto;                  /* Vertical spacing and centers content */
  padding: 0 1.5rem;                  /* Horizontal padding (left and right) */
  flex: 1;                            /* Takes up remaining space */
}

/* 
============================================
SECTIONS (Content Sections)
============================================
This styles the sections on the main page (index.html).

To change:
- Section spacing: Change margin-bottom in section
- Heading color: Change color in section h2
- Heading size: Change font-size in section h2
- Border color: Change border-bottom color in section h2
- Paragraph spacing: Change line-height in section p
============================================
*/
section {
  margin-bottom: 3rem;                /* Space between sections (3rem = 3x normal text size) */
  width: 100%;                        /* Ensure sections take full width of parent */
  max-width: 100%;                    /* Never exceed parent width */
}

section h2 {
  color: var(--primary);              /* Heading color uses --primary variable */
  border-bottom: 2px solid var(--accent);  /* Accent-colored underline (2px thick) */
  display: inline-block;              /* Makes border only as wide as text */
  margin-bottom: 1rem;                /* Space below heading */
  padding-bottom: 0.25rem;            /* Space between text and border */
  font-size: 1.5rem;                  /* Heading size (1.5rem = 150% of normal) */
}

section p {
  font-size: 1rem;                    /* Paragraph text size (1rem = normal size) */
  line-height: 1.7;                   /* Space between lines (1.7 = 70% extra space) */
}

@media (max-width: 768px) {
  section h2 {
    font-size: 1.25rem;               /* Smaller headings on mobile */
  }
  .archive-h2 {
    font-size: 1.25rem;               /* Smaller headings on mobile */
  }
  section p {
    font-size: 0.95rem;               /* Slightly smaller text on mobile */
  }
}

/* 
============================================
IFRAME CONTAINERS (Charts/Graphs)
============================================
This styles the containers that hold embedded charts from Google Sheets.
Used on both index.html and archive.html.

To change:
- Border: Change border property (color, width, style)
- Border radius: Change border-radius for more/less rounded corners
- Spacing: Change margin to adjust space around charts
- Aspect ratio: Change aspect-ratio to make charts wider or taller
  (4/3 = more square for mobile/tablet, 16/10 = slightly taller for desktop)
============================================
*/
.iframe-container {
  position: relative;                 /* Allows absolute positioning of iframe inside */
  width: 100%;                        /* Full width of container */
  max-width: 609px;                   /* Constrain to chart's natural width to prevent white space */
  margin: 1.5rem 0;                   /* Vertical spacing (top and bottom) */
  overflow: hidden;                   /* Hides anything that overflows */
  border: 1px solid #ccc;             /* Light gray border (1px thick) */
  border-radius: 4px;                 /* Slightly rounded corners */
  background-color: white;            /* White background */
  aspect-ratio: 4 / 3;                /* Default: taller aspect ratio for small screens */
  box-sizing: border-box;             /* Include border in width calculation */
}

.iframe-container iframe {
  position: absolute;                 /* Positions absolutely within container */
  top: 0;                             /* Starts at top */
  left: 0;                            /* Starts at left */
  width: 100%;                       /* Full width */
  height: 100%;                      /* Full height */
  border: none;                       /* No border on iframe */
  display: block;                     /* Displays as block element */
}

/* Responsive iframe sizing for different screen sizes */
@media (min-width: 650px) {
  .iframe-container {
    aspect-ratio: 16 / 10;            /* Wider aspect ratio for larger screens */
  }
}


/* 
============================================
ARCHIVE PAGE SPECIFIC STYLES
============================================
These styles are only used on archive.html.

To change:
- Page heading: Adjust h1 styles
- News item cards: Adjust .news-item styles (background, padding, shadow)
- News item spacing: Adjust margin-bottom in .news-item
- Back link color: Change color in .back-link
============================================
*/
h1 {
  color: var(--primary);              /* Page heading color */
  font-size: 1.75rem;                 /* Heading size (1.75rem = 175% of normal) */
  border-bottom: 2px solid var(--accent);  /* Accent-colored underline */
  padding-bottom: 0.25rem;            /* Space between text and border */
  margin-bottom: 2rem;                /* Space below heading */
}

.news-item {
  margin-bottom: 1.5rem;              /* Space between news items */
}

.news-item h3 {
  color: var(--primary);              /* News title color */
  margin-bottom: 0.5rem;              /* Space below title */
}

/* 
ARCHIVE PAGE H2 STYLING
This class makes h2 tags on the archive page look like the h2 tags on the index page.
Apply this class to any h2 tag on the archive page that you want styled like index page h2s.
Example: <h2 class="archive-h2">Your Heading</h2>
*/
.archive-h2 {
  color: var(--primary);              /* Heading color uses --primary variable */
  border-bottom: 2px solid var(--accent);  /* Accent-colored underline (2px thick) */
  display: inline-block;              /* Makes border only as wide as text */
  margin-bottom: 1rem;                /* Space below heading */
  padding-bottom: 0.25rem;            /* Space between text and border */
  font-size: 1.5rem;                  /* Heading size (1.5rem = 150% of normal) */
}

.news-item small {
  display: block;                     /* Displays date on its own line */
  color: gray;                        /* Gray color for date */
  margin-bottom: 0.5rem;              /* Space below date */
}

.news-item p {
  font-size: 1rem;                    /* News text size */
}

.back-link {
  display: inline-block;              /* Allows margin/padding */
  margin-bottom: 2rem;                /* Space below link */
  color: var(--accent);               /* Link color uses --accent variable */
  text-decoration: none;              /* Removes underline */
  font-weight: 500;                   /* Medium bold text */
  transition: color 0.3s ease;        /* Smooth color change on hover */
}

.back-link:hover {
  color: var(--primary);              /* Link color when you hover over it */
}

/* 
============================================
FOOTER
============================================
This styles the footer at the bottom of both pages.

To change:
- Footer background: Change background-color
- Footer text color: Change color
- Footer spacing: Change padding
- Footer text size: Add font-size property
============================================
*/
footer {
  background-color: var(--primary);   /* Footer background uses --primary color */
  color: white;                       /* Footer text color */
  text-align: center;                 /* Centers footer text */
  padding: 1.5rem;                    /* Spacing inside footer (all sides) */
}

footer small {
  opacity: 0.8;                       /* Makes small text slightly transparent (80% opacity) */
}

/* 
============================================
SMOOTH SCROLLING
============================================
This makes the page scroll smoothly when clicking anchor links.

To disable: Remove or comment out this entire section
============================================
*/
html {
  scroll-behavior: smooth;            /* Smooth scrolling animation */
  height: 100%;                       /* Full height */
}