/* White text for subtitle or tagline */
.white-title {
  color: #fff !important;
}
/* Global header color for all pages */
h1, h2, h3, h4, h5, h6 {
  color: #f5c6d6 !important;
}
/*
  Leah Cortez Studio Art - Global Stylesheet
  ---
  This file contains all the global styles that are applied across the entire website.
  This includes font imports, color variables, base element styling (body, headings, paragraphs),
  and styles for reusable components like the navigation and footer.
*/

/* --------------------
   1. FONT IMPORTS
   -------------------- */

/*
  We are importing the three fonts specified in the project brief from Google Fonts.
  - 'Pirata One' for headings
  - 'IM Fell English' for body text
  - 'IBM Plex Mono' for accent text
*/
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English&family=IBM+Plex+Mono:ital@0;1&family=Pirata+One&display=swap');

/* --------------------
   2. CSS VARIABLES (CUSTOM PROPERTIES)
   -------------------- */

/*
  Using CSS variables allows us to define our color palette and fonts in one central place.
  This makes it easy to maintain and update the site's design consistently.
  The ':root' selector applies these variables globally to the entire document.
*/
:root {
  /* --variable-name: value; */

  /* Color Palette */
  --color-background: #000000; /* Black for the site background */
  --color-text: #ffffff;       /* White for the main body text */
  --color-primary-accent: #f8c8d0; /* Soft pink for primary interactive elements */
  --color-secondary-accent: #7e1c2e; /* Deep red for secondary elements and highlights */

  /* Typography */
  --font-headings: 'Pirata One', cursive;      /* Themed, gothic-style font for all headings */
  --font-body: 'IM Fell English', serif;    /* Classic, readable serif for all paragraph text */
  --font-accent: 'IBM Plex Mono', monospace;  /* Monospaced font for captions or special text */

  /* Other Layout Variables */
  --nav-height: 80px; /* Standard height for the navigation bar */
  --footer-height: 60px; /* Standard height for the footer */
}

/* --------------------
   3. GENERAL BODY & RESET STYLES
   -------------------- */

/*
  These are foundational styles that reset default browser styling and set
  the base look and feel for the entire site.
*/

* {
  /*
    The 'box-sizing' property changes how the box model is calculated.
    'border-box' includes padding and border in the element's total width and height,
    which makes creating layouts much more intuitive.
  */
  box-sizing: border-box;

  /* Resetting default margin and padding for all elements */
  margin: 0;
  padding: 0;
}

html {
  /*
    Enables smooth scrolling for anchor links and accessibility features.
  */
  scroll-behavior: smooth;
}

body {
  /* Sets the background color for the entire site */
  background-color: var(--color-background);

  /* Sets the default text color */
  color: var(--color-text);

  /* Sets the default font for the body text */
  font-family: var(--font-body);

  /* A line height of 1.6 is generally good for readability */
  line-height: 1.6;

  /* Ensures the body takes up at least the full height of the viewport */
  min-height: 100vh;

  /*
    Uses a flexbox layout to push the footer to the bottom of the page,
    even on pages with little content.
  */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Add floating icons to all pages - Now handled by JavaScript for random generation */
/*
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background-image: 
    url('../icons/flower.svg'),
    url('../icons/star.svg'),
    url('../icons/starburst.svg'),
    url('../icons/flower.svg'),
    url('../icons/star.svg'),
    url('../icons/starburst.svg');
  background-size: 
    20px 20px,
    35px 35px,
    50px 50px,
    20px 20px,
    35px 35px,
    20px 20px;
  background-position:
    15% 15%,
    88% 30%,
    10% 75%,
    92% 60%,
    15% 55%,
    85% 80%;
  background-repeat: no-repeat;
  filter: brightness(3) invert(0.8) opacity(0.4);
  animation: 
    floatingIcon1 6s ease-in-out infinite,
    floatingIcon2 8s ease-in-out infinite 1s,
    floatingIcon3 10s ease-in-out infinite 2s,
    floatingIcon4 7s ease-in-out infinite 3s,
    floatingIcon5 9s ease-in-out infinite 4s,
    floatingIcon6 5s ease-in-out infinite 2.5s;
}

@keyframes floatingIcon1 {
  0% { transform: rotate(0deg) translateY(0px); }
  25% { transform: rotate(3deg) translateY(-4px); }
  50% { transform: rotate(0deg) translateY(-6px); }
  75% { transform: rotate(-3deg) translateY(-4px); }
  100% { transform: rotate(0deg) translateY(0px); }
}

@keyframes floatingIcon2 {
  0% { transform: rotate(0deg) translateY(0px); }
  30% { transform: rotate(-2deg) translateY(-3px); }
  60% { transform: rotate(4deg) translateY(-5px); }
  90% { transform: rotate(-1deg) translateY(-2px); }
  100% { transform: rotate(0deg) translateY(0px); }
}

@keyframes floatingIcon3 {
  0% { transform: rotate(0deg) translateY(0px); }
  20% { transform: rotate(5deg) translateY(-2px); }
  40% { transform: rotate(-3deg) translateY(-7px); }
  70% { transform: rotate(2deg) translateY(-4px); }
  100% { transform: rotate(0deg) translateY(0px); }
}

@keyframes floatingIcon4 {
  0% { transform: rotate(0deg) translateY(0px); }
  35% { transform: rotate(-4deg) translateY(-5px); }
  65% { transform: rotate(2deg) translateY(-3px); }
  85% { transform: rotate(-1deg) translateY(-6px); }
  100% { transform: rotate(0deg) translateY(0px); }
}

@keyframes floatingIcon5 {
  0% { transform: rotate(0deg) translateY(0px); }
  25% { transform: rotate(1deg) translateY(-4px); }
  50% { transform: rotate(-5deg) translateY(-2px); }
  75% { transform: rotate(3deg) translateY(-5px); }
  100% { transform: rotate(0deg) translateY(0px); }
}

@keyframes floatingIcon6 {
  0% { transform: rotate(0deg) translateY(0px); }
  40% { transform: rotate(-2deg) translateY(-6px); }
  70% { transform: rotate(4deg) translateY(-3px); }
  90% { transform: rotate(-3deg) translateY(-4px); }
  100% { transform: rotate(0deg) translateY(0px); }
}
*/

/* --------------------
   4. GLOBAL IMAGE OPTIMIZATION
   -------------------- */

img {
  /* Prevent images from being pixelated when scaled */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: optimizeQuality;
  -ms-interpolation-mode: bicubic;
  
  /* Enable hardware acceleration for smoother transforms */
  backface-visibility: hidden;
  transform: translateZ(0);
  
  /* Ensure images are responsive by default */
  max-width: 100%;
  height: auto;
  
  /* Improve image loading performance */
  will-change: transform;
}

/* High-DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: crisp-edges;
  }
}

main {
  /*
    This makes the main content area expand to fill the available space,
    pushing the footer to the bottom.
  */
  flex: 1;
  position: relative;
  z-index: 10;
}

/* --------------------
   4. TYPOGRAPHY
   -------------------- */

/*
  Defining consistent styles for all headings (h1-h6).
*/
h1, h2, h3, h4, h5, h6 {
  /* Applies the custom heading font */
  font-family: var(--font-headings);

  /* Letter spacing can improve the readability of stylized fonts */
  letter-spacing: 1.5px;

  /* A slightly increased line height for headings */
  line-height: 1.3;

  /* A standard margin below headings to create space */
  margin-bottom: 1rem; /* 1rem = 16px by default */
}

p {
  /* Standard margin below paragraphs for spacing */
  margin-bottom: 1rem;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

a {
  /* Adds a smooth transition effect for hover states */
  transition: color 0.3s ease;
}

a:hover, a:focus {
  /* Darkens the link color on hover/focus for visual feedback */
  color: var(--color-secondary-accent);
}

/* --------------------
   5. GLOBAL NAVIGATION
   -------------------- */

.main-header {
  /* Sets the height of the header area */
  height: var(--nav-height);
  /* Ensures the header has a solid background color */
  background-color: var(--color-background);
  /* A subtle bottom border to separate it from the main content */
  border-bottom: 1px solid var(--color-secondary-accent);
  /* Makes the header stay at the top of the viewport when scrolling */
  position: sticky;
  top: 0;
  /* A high z-index ensures it stays above other content */
  z-index: 1000;
}

nav {
  /*
    Flexbox is used here for a powerful and simple alignment of nav items.
  */
  display: flex;
  /* Pushes the logo to the left, hamburger to the right */
  justify-content: space-between;
  /* Vertically centers the items within the nav bar */
  align-items: center;
  /* Adds padding inside the nav bar */
  padding: 0 2rem;
  /* Ensures the nav takes the full height of its parent header */
  height: 100%;
}

.main-logo {
  height: 35px; /* Smaller size to fit better with navigation */
  width: auto; /* Maintains aspect ratio */
  display: block;
  filter: brightness(0) invert(1); /* Makes the logo white */
  transition: transform 0.4s ease-in-out;
  cursor: pointer;
}

.hamburger img {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0;
  filter: brightness(0) invert(1); /* Makes the icon white */
  /* Prevent SVG stretching and maintain aspect ratio */
  object-fit: contain;
  object-position: center;
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
  overflow: hidden;
}

/* Base navigation styles */
.nav-links {
  /* Removes default list styling (bullets) */
  list-style: none;
  /* Uses flexbox to lay out the list items horizontally */
  display: flex;
}

.nav-links li {
  /* Adds space between the navigation links */
  margin-left: 2rem;
}

.nav-links a {
  font-family: var(--font-accent);
  text-transform: uppercase;
  color: #f5c6d6;
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover {
  color: #7e1c2e;
  border-bottom-color: #7e1c2e;
  /* Remove text-decoration to prevent double underline */
  text-decoration: none;
}

/* Styles for the mobile hamburger menu icon */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 15px;
  margin-left: auto;
  margin-right: 0;
  position: absolute;
  right: 0;
  top: 0;
  height: var(--nav-height);
  /* Remove all extra right space, make it flush with right edge */
}

.hamburger img {
    /* Sets the size of the custom flower icon - made bigger */
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
    /* Prevent SVG stretching and maintain aspect ratio */
    object-fit: contain;
    object-position: center;
}
/* Remove hover effects on hamburger */

/* --------------------
   6. GLOBAL FOOTER
   -------------------- */

.main-footer {
  /* Sets the height of the footer */
  height: auto;
  /* Sets the background color of the footer */
  background-color: var(--color-background);
  /* A top border to separate it from the main content */
  border-top: 1px solid var(--color-secondary-accent);
  /* Uses flexbox to center the content */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Reduced padding inside the footer */
  padding: 1rem 2rem;
}

.footer-content {
  /* Centers the logo and copyright text */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* No gap between logo and text */
}

.footer-logo {
  /* Logo styling in footer - sized to match text width */
  height: auto;
  width: 180px; /* Slightly smaller width */
  max-width: 90%; /* Responsive safety for small screens */
  opacity: 1.0; /* Full opacity for maximum visibility */
  margin-bottom: 0; /* Ensure no bottom margin */
  /* Ensure logo is bright and visible on dark background */
  filter: brightness(1.2) contrast(1.1);
}

.copyright {
  /* Copyright text styling */
  margin: 0;
  margin-top: -40px; /* Reduced negative margin */
  padding: 0; /* Remove any padding */
  font-family: var(--font-accent);
  font-size: 0.9rem;
  color: var(--color-text);
  opacity: 0.7;
}

.social-links {
  /* Removes default list styling */
  list-style: none;
  /* Uses flexbox for horizontal layout */
  display: flex;
}

.social-links li {
  /* Adds space between the social media icons */
  margin: 0 1rem;
}

.social-links a {
  /* Sets the font size for the icons (if using a font icon) or text */
  font-size: 1.5rem;
  /* Applies a light pink filter to icons/images inside links */
  filter: invert(86%) sepia(10%) saturate(500%) hue-rotate(310deg) brightness(1.1);
  /* For SVG icons, also set color */
  color: var(--color-primary-accent);
  transition: filter 0.3s, color 0.3s;
}

.social-links a:hover,
.social-links a:focus {
  /* Slightly darken on hover/focus for feedback */
  filter: invert(36%) sepia(80%) saturate(800%) hue-rotate(330deg) brightness(0.9);
  color: var(--color-secondary-accent);
}

/* --------------------
   7. MEDIA QUERIES (for Responsive Design)
   -------------------- */

/*
  This media query targets screens with a maximum width of 768px (common for tablets and mobile).
*/
@media (max-width: 768px) {
  .nav-links {
    /*
      Right-side sliding menu panel for mobile
    */
    display: none;
    /* Fixed positioning to cover screen */
    position: fixed;
    top: 0;
    right: 0;
    /* Full height, partial width */
    width: 280px;
    height: 100vh;
    /* Dark background with backdrop blur */
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(15px);
    /* Vertical layout */
    flex-direction: column;
    /* Right-align content */
    align-items: flex-end;
    justify-content: center;
    /* Generous padding */
    padding: 2rem;
    /* Subtle border */
    border-left: 1px solid rgba(248, 200, 208, 0.2);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
    /* Slide animation - start off-screen */
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Ensure it appears above everything */
    z-index: 1000;
  }

  /*
    When active, slide the menu in from the right
  */
  .nav-links.active {
    display: flex;
    transform: translateX(0);
    opacity: 1;
  }

  .nav-links li {
    /* Remove default margins */
    margin: 0;
    /* Full width for touch targets */
    width: 100%;
    /* Vertical spacing between links */
    margin-bottom: 1.5rem;
  }

  .nav-links a {
    /* Simple text links - no button styling */
    display: block;
    width: 100%;
    padding: 1.2rem 2rem;
    text-align: right;
    /* Larger font for mobile */
    font-size: 1.2rem;
    letter-spacing: 2px;
    /* Simple text styling */
    color: var(--color-primary-accent);
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 0;
    transition: all 0.3s ease;
    text-transform: uppercase;
  }

  .nav-links a:hover,
  .nav-links a:focus {
    color: #7e1c2e;
    text-decoration: underline;
    background: none;
    transform: none;
    box-shadow: none;
  }

  /* Backdrop overlay when menu is open */
  .nav-links.active::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100vw - 280px);
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: -1;
  }

  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: 0;
    padding: 15px;
    border-radius: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
    position: relative;
    z-index: 1001; /* Above the menu */
  }

  /* Remove hover background */

  .hamburger img {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
    /* Prevent SVG stretching and maintain aspect ratio */
    object-fit: contain;
    object-position: center;
  }

  /* Rotate hamburger icon when menu is open */
  .nav-links.active ~ .hamburger img {
    transform: rotate(180deg);
  }
}

/* --------------------
   FLOATING BACKGROUND ICONS
   -------------------- */

.floating-icons {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.floating-icon {
  position: absolute;
  opacity: 0.3;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

.floating-icon img {
  width: 100%;
  height: 100%;
  filter: brightness(5) invert(1) opacity(1);
  /* Prevent SVG stretching and maintain aspect ratio */
  object-fit: contain;
  object-position: center;
}

/* Icon sizes */
.floating-icon.small {
  width: 20px;
  height: 20px;
}

.floating-icon.medium {
  width: 35px;
  height: 35px;
}

.floating-icon.large {
  width: 50px;
  height: 50px;
}

/* Subtle floating rotation animations on child elements */
@keyframes subtleFloat1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes subtleFloat2 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes subtleFloat3 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.floating-icon.rotate-1 > * {
  animation: subtleFloat1 20s linear infinite;
}

.floating-icon.rotate-2 > * {
  animation: subtleFloat2 25s linear infinite;
}

.floating-icon.rotate-3 > * {
  animation: subtleFloat3 30s linear infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .floating-icon {
    opacity: 0.05;
  }
  
  .floating-icon.large {
    width: 35px;
    height: 35px;
  }
  
  .floating-icon.medium {
    width: 25px;
    height: 25px;
  }
  
  .floating-icon.small {
    width: 15px;
    height: 15px;
  }
}

/* --------------------
   ACCENT BUTTON STYLES
   -------------------- */

/*
  These styles are for buttons that need to stand out as primary actions,
  such as "View More" buttons.
*/

/* Accent button style for View More */
.view-more-btn {
  display: block;
  margin: 2rem auto;
  text-align: center;
  font-family: var(--font-accent);
  font-size: 1.2rem;
  color: var(--color-primary-accent);
  background: rgba(126,28,46,0.07);
  border: 2px solid var(--color-primary-accent);
  padding: 0.75rem 2rem;
  border-radius: 2rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(126,28,46,0.08);
  max-width: fit-content;
}

.view-more-btn:hover,
.view-more-btn:focus {
  background: #7e1c2e;
  color: #f8c8d0;
  border-color: #7e1c2e;
  box-shadow: 0 4px 16px rgba(126,28,46,0.15);
  transform: translateY(-2px) scale(1.04);
}