/*
  css/styles.css
  Global Stylesheet for Ozman Studio Website
  Author: Jules
*/

/* ------------------- */
/* --- CSS Variables --- */
/* ------------------- */
/*
  Using CSS variables (custom properties) allows for easy management of the color
  palette and fonts. If the client wants to change a color, we only need to
  update it in one place.
*/
:root {
  /* Color Palette */
  --background-color: #041A2F; /* Blackish-blue */
  --primary-text-color: #FF4500;   /* Bright Orange */
  --secondary-text-color: #FFFFFF; /* White */
  --primary-accent-color: #FF4500; /* Bright Orange */
  --secondary-accent-color: #FFFFFF; /* White */

  /* Typography */
  --heading-font: 'Montserrat', sans-serif;
  --body-font: 'Roboto', sans-serif;

  /* Spacing */
  --spacing-unit: 1rem;
  --spacing-small: calc(var(--spacing-unit) * 0.5);
  --spacing-medium: var(--spacing-unit);
  --spacing-large: calc(var(--spacing-unit) * 2);
  --spacing-xlarge: calc(var(--spacing-unit) * 4);
}

/* ------------------- */
/* --- Global Reset & Base --- */
/* ------------------- */
/*
  A simple reset to ensure consistent styling across different browsers.
  box-sizing: border-box is crucial for intuitive layout calculations.
*/
*,
*::before,
*::after {
  box-sizing: border-box; /* Includes padding and border in the element's total width and height. */
  margin: 0; /* Removes default browser margins. */
  padding: 0; /* Removes default browser padding. */
}

/*
  Sets base styles for the entire document.
*/
html {
  scroll-behavior: smooth; /* Enables smooth scrolling for anchor links. */
  font-size: 16px; /* Sets a base font size for the document. 1rem = 16px. */
}

body {
  background-color: var(--background-color); /* Sets the site-wide background color. */
  color: var(--secondary-text-color); /* Sets the default text color. */
  font-family: var(--body-font); /* Sets the default font for body text. */
  line-height: 1.6; /* Improves readability by setting a comfortable line spacing. */
  -webkit-font-smoothing: antialiased; /* Improves font rendering on WebKit browsers. */
  -moz-osx-font-smoothing: grayscale; /* Improves font rendering on Firefox. */
}

/* ------------------- */
/* --- Typography --- */
/* ------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font); /* Applies the heading font. */
  color: var(--primary-text-color); /* Applies the primary color to headings. */
  font-weight: 700; /* Uses the bold version of Montserrat. */
  margin-bottom: var(--spacing-medium); /* Adds space below headings. */
  line-height: 1.2; /* Tighter line spacing for headings. */
}

p {
  margin-bottom: var(--spacing-medium); /* Adds space between paragraphs. */
}

a {
  color: var(--primary-text-color); /* Sets the link color to the primary orange. */
  text-decoration: none; /* Removes the default underline from links. */
  transition: color 0.3s ease; /* Adds a smooth transition effect on hover. */
}

a:hover, a:focus {
  color: var(--secondary-accent-color); /* Changes link color on hover/focus for visual feedback. */
  text-decoration: underline; /* Adds an underline on hover for better accessibility. */
}

/* ------------------- */
/* --- Layout & Helpers --- */
/* ------------------- */
.container {
  width: 90%; /* Restricts the content width. */
  max-width: 1200px; /* Sets a maximum width for large screens. */
  margin-left: auto; /* Centers the container horizontally. */
  margin-right: auto; /* Centers the container horizontally. */
  padding: var(--spacing-large) 0; /* Adds vertical padding. */
}

img, video {
  max-width: 100%; /* Ensures images and videos are responsive and don't overflow their containers. */
  height: auto; /* Maintains the aspect ratio. */
  display: block; /* Removes the small space below the image. */
}

/* ------------------- */
/* --- Header & Navigation --- */
/* ------------------- */
.site-header {
  padding: var(--spacing-medium) 0; /* Adds padding to the top and bottom of the header. */
  border-bottom: 5px solid var(--primary-accent-color); /* Adds a thicker border to separate the header. */
}

.header-container {
  display: flex; /* Enables flexbox for alignment. */
  justify-content: space-between; /* Pushes the logo and nav to opposite ends. */
  align-items: center; /* Vertically centers the items. */
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  font-family: var(--heading-font); /* Uses the heading font for the logo. */
  font-size: 1.5rem; /* Makes the logo text larger. */
  font-weight: 700; /* Bold weight. */
  color: var(--primary-text-color); /* Uses the primary orange color. */
  text-transform: uppercase; /* Makes the logo text uppercase. */
}

.nav-links {
  list-style: none; /* Removes bullet points from the list. */
  display: flex; /* Lines up the links horizontally. */
  gap: var(--spacing-large); /* Adds space between the links. */
}

.nav-links a {
  font-family: var(--heading-font); /* Uses the heading font for navigation links. */
  font-weight: 700; /* Bold weight. */
  text-transform: uppercase; /* Uppercase text for a stylized look. */
}

/* Hamburger Menu for Mobile */
.hamburger-icon {
  display: none; /* Hidden by default on larger screens. */
  cursor: pointer; /* Changes the cursor to indicate it's clickable. */
  flex-direction: column; /* Stacks the bars vertically. */
  gap: 5px; /* Space between the bars. */
}

.hamburger-icon .bar {
  width: 25px; /* Width of each bar. */
  height: 3px; /* Height of each bar. */
  background-color: var(--primary-text-color); /* Color of the bars. */
  transition: all 0.3s ease-in-out; /* Smooth transition for animations. */
}

/* ------------------- */
/* --- Footer --- */
/* ------------------- */
.site-footer {
  padding: var(--spacing-large) 0; /* Adds padding to the footer. */
  border-top: 5px solid var(--primary-accent-color); /* Adds a thicker border to separate the footer. */
  text-align: center; /* Centers the footer content. */
  margin-top: var(--spacing-xlarge); /* Adds significant space above the footer. */
}

.social-links {
  list-style: none; /* Removes bullet points. */
  display: flex; /* Enables flexbox. */
  justify-content: center; /* Centers the icons horizontally. */
  gap: var(--spacing-medium); /* Adds space between icons. */
  margin-bottom: var(--spacing-medium); /* Adds space below the social links. */
}

.social-links a {
  font-size: 1.5rem; /* Increases the size of the social media icons (if using an icon font). */
  display: inline-flex; /* Allows proper alignment of SVG icons. */
  align-items: center; /* Vertically centers the icons. */
  justify-content: center; /* Horizontally centers the icons. */
  padding: var(--spacing-small); /* Adds padding around icons for better touch targets. */
  border-radius: 50%; /* Makes icons circular. */
  transition: all 0.3s ease; /* Smooth transitions on hover. */
  color: var(--primary-text-color); /* Icon color. */
}

.social-links a:hover {
  color: var(--primary-accent-color); /* Changes color on hover. */
  background-color: rgba(255, 255, 255, 0.1); /* Subtle background on hover. */
  transform: translateY(-2px); /* Slight lift effect on hover. */
}

.social-links svg {
  width: 32px; /* Sets consistent width for all icons. */
  height: 32px; /* Sets consistent height for all icons. */
  fill: currentColor; /* Uses the parent's color for the icon. */
}

.copyright {
  font-size: 0.9rem; /* Makes the copyright text slightly smaller. */
  color: var(--secondary-accent-color); /* Uses the secondary white color. */
}

/* ------------------- */
/* --- Buttons --- */
/* ------------------- */
.btn {
  display: inline-block; /* Allows setting padding and margin. */
  padding: var(--spacing-small) var(--spacing-large); /* Adds padding inside the button. */
  background-color: var(--primary-accent-color); /* Sets the background color. */
  color: var(--background-color); /* Sets the text color. */
  font-family: var(--heading-font); /* Uses the heading font. */
  font-weight: 700; /* Bold text. */
  text-transform: uppercase; /* Uppercase text. */
  border: 2px solid var(--primary-accent-color); /* Adds a border. */
  cursor: pointer; /* Indicates the element is clickable. */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition on hover. */
}

.btn:hover, .btn:focus {
  background-color: transparent; /* Makes the background transparent on hover. */
  color: var(--primary-accent-color); /* Changes the text color to orange. */
  text-decoration: none; /* Ensures no underline on hover. */
}

/* ------------------- */
/* --- Media Queries for Responsiveness --- */
/* ------------------- */
/*
  This media query targets screens smaller than 768px (common for tablets and phones).
*/
/* ------------------- */
/* --- Animations --- */
/* ------------------- */
/*
  These classes are used by the Intersection Observer in main.js
  to fade and slide in elements as they enter the viewport.
*/
.animate-on-scroll {
  opacity: 0; /* Start with the element being invisible. */
  transform: translateY(20px); /* Start with the element slightly moved down. */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition for the animation. */
}

.animate-on-scroll.visible {
  opacity: 1; /* Fade the element in to be fully visible. */
  transform: translateY(0); /* Move the element to its original position. */
}


/* ------------------- */
/* --- Media Queries for Responsiveness --- */
/* ------------------- */
/*
  This media query targets screens smaller than 768px (common for tablets and phones).
*/
@media (max-width: 768px) {
  .nav-links {
    display: none; /* Hides the regular navigation links. */
    flex-direction: column; /* Stacks the links vertically. */
    width: 100%; /* Takes up the full width. */
    position: absolute; /* Takes the nav out of the document flow. */
    top: 80px; /* Positions it below the header. */
    left: 0;
    background-color: var(--background-color); /* Gives it a solid background. */
    text-align: center; /* Centers the link text. */
    padding: var(--spacing-large) 0; /* Adds vertical padding. */
    z-index: 1000; /* Ensures the nav appears above other content. */
  }

  .nav-links.active {
    display: flex; /* Shows the navigation when the 'active' class is added by JS. */
  }

  .hamburger-icon {
    display: flex; /* Shows the hamburger icon on small screens. */
    z-index: 1001; /* Ensures hamburger is above the nav menu. */
  }

  /* Animation for the hamburger icon to turn into an 'X' */
  .hamburger-icon.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .hamburger-icon.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger-icon.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
}