/* Hides the logo element specifically on the homepage (index.html) */
.hide-on-homepage {
  display: none;
}
/*
 * Global Stylesheet for cheyennehorman.art
 *
 * This file contains the foundational styles for the entire website,
 * including variable definitions, typography, color schemes, and layout resets.
 * Every page should link to this stylesheet first.
 */

/* ------------------- */
/* CSS Variables       */
/* ------------------- */
/*
 * Using CSS variables (custom properties) allows for centralized control over repeating values.
 * This makes it easy to update the site's color scheme or typography in one place.
 */
:root {
  /* Color Palette */
  --color-background: #efe7d3; /* Updated: Soft neutral background */
  --color-text: #1a0089;       /* Updated: Deep blue text color */
  --color-primary-accent: #ff5e33; /* Updated: Vibrant orange for highlights */
  --color-secondary-accent: #b7cf4f; /* Updated: Fresh green for secondary elements */
  --color-third-accent: #ff5e33;    /* Updated: Use new primary accent for tertiary details */

  /* Typography */
  --font-headings: 'Playfair Display', serif; /* Elegant, high-contrast serif for titles */
  --font-body: 'Quattrocento Sans', sans-serif; /* Clean, readable sans-serif for body text */

  /* Other global properties */
  --nav-height: 80px; /* Standard height for the navigation bar */
  --footer-height: 120px; /* Standard height for the footer */
}

/* ------------------- */
/* Global Resets       */
/* ------------------- */
/*
 * Applying a reset ensures a consistent starting point across different browsers.
 * box-sizing: border-box is a more intuitive way to size elements.
 * margin: 0 removes default browser margins.
 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
 * Sets the base font size and line height for the whole document.
 * Using a percentage for font-size allows users to scale the text in their browser settings.
 */
html {
  font-size: 100%; /* Base font size (usually 16px) */
  scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

/*
 * Sets the default styles for the body, including the background color and font.
 */
body {
  /* Homepage background cleared to primary color only */
  background-color: #efe7d3;
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6; /* Improves readability */
  -webkit-font-smoothing: antialiased; /* Improves font rendering on macOS/iOS */
  -moz-osx-font-smoothing: grayscale; /* Improves font rendering on Firefox */
}

/* ------------------- */
/* Typography          */
/* ------------------- */
/*
 * Defines styles for heading elements.
 * They use the Playfair Display font, are bold, and have a clear margin at the bottom.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  font-weight: 700; /* Bold weight for strong headings */
  margin-bottom: 0.75rem; /* Space below headings */
  line-height: 1.2; /* Tighter line height for headings */
}

/*
 * Defines styles for paragraphs.
 */
p {
  margin-bottom: 1rem; /* Standard space between paragraphs */
}

/*
 * Defines styles for links.
 * They inherit the text color and have a subtle underline that becomes more prominent on hover.
 */
a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 2px solid var(--color-primary-accent);
  transition: all 0.3s ease;
}

a:hover, a:focus {
  color: var(--color-primary-accent);
  border-bottom-color: var(--color-secondary-accent);
}

/* ------------------- */
/* Layout & Global UI  */
/* ------------------- */
/*
 * A container class to center content and provide a max-width.
 * This prevents content from becoming too wide on large screens.
 */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto; /* Centers the container horizontally */
}

/*
 * Styles for the main header of each page.
 */
.site-header {
  padding: 1rem 0;
  background-color: var(--color-background);
  border-bottom: 3px solid var(--color-text);
}

/*
 * Main navigation styles.
 * Uses flexbox to align the logo and navigation links.
 */
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--nav-height);
}

/* Styles for the logo in the navigation */
.nav-logo a {
  font-size: 1.5rem;
  font-weight: bold;
  border: none; /* Remove underline from logo link */
}

.nav-logo img {
  height: 60px; /* Adjust as needed */
  vertical-align: middle;
}

/*
 * Navigation links styling.
 * The vine/leaf motif will require more specific CSS, likely with pseudo-elements.
 */
.nav-links ul {
  list-style: none;
  display: flex;
  /* Copilot: Remove excessive gap to prevent oversized navigation bar */
  gap: 0.5vw;
}

.nav-links a {
  /* Copilot: Remove text styling for navigation links since they are now images */
  border: none;
  position: relative;
  /* Copilot: Remove padding to prevent oversized navigation buttons */
  padding: 0;

/* Copilot: Resize navigation image buttons so the menu occupies less than 75vw and images scale responsively */
.main-nav {
  /* Copilot: Ensure navigation bar never exceeds viewport width */
  max-width: 100vw;
  width: 100%;
  margin: 0 auto;
}
.main-nav .nav-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5vw;
}
.main-nav .nav-links ul li a img {
  /* Custom navigation button sizing for homepage header */
  height: 48px; /* Ensures buttons fit within header height */
  max-height: 60px;
  width: auto;
  max-width: 60px;
  min-width: 16px;
  aspect-ratio: 1/1; /* Maintain square aspect ratio for icons */
  display: block;
  margin: 0 0.25vw;
}
@media (max-width: 900px) {
  .main-nav {
    max-width: 90vw;
  }
  .main-nav .nav-links ul li a img {
    height: 36px;
    max-height: 40px;
    max-width: 40px;
    min-width: 12px;
    aspect-ratio: 1/1;
  }
}
@media (max-width: 600px) {
  .main-nav {
    max-width: 98vw;
  }
  .main-nav .nav-links ul li a img {
    height: 24px;
    max-height: 28px;
    max-width: 28px;
    min-width: 8px;
    aspect-ratio: 1/1;
  }
/* End Copilot navigation button resizing */
/* End Copilot navigation button resizing */
}
/* End Copilot navigation button resizing */
}

/*
 * Main content area styling.
 * Provides padding to separate content from the header and footer.
 */
main {
  min-height: calc(100vh - var(--nav-height) - var(--footer-height));
  padding: 2rem 0;
}

/*
 * Site footer styling.
 */
.site-footer {
  padding: 2rem 0;
  background-color: var(--color-text);
  color: var(--color-background);
  text-align: center;
  border-top: 3px solid var(--color-text);
}

.social-links a {
  margin: 0 0.5rem;
  border: none;
}

.social-links img {
  height: 24px;
  filter: invert(1); /* Makes icons white to contrast with dark footer */
}

/* ------------------- */
/* Accessibility       */
/* ------------------- */
/*
 * "Skip to content" link for keyboard and screen reader users.
 * It's hidden by default and becomes visible on focus.
 */
.skip-to-content {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-to-content:focus {
  position: static;
  width: auto;
  height: auto;
}

/* ------------------- */
/* Utility Classes     */
/* ------------------- */
/*
 * A simple class to visually hide elements while keeping them accessible to screen readers.
 */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}