/* 
  INTRODUCTION TO CSS

  This file is written in CSS.
  CSS stands for Cascading Style Sheets.

  We use CSS to tell the browser HOW the HTML should look:
    - colours
    - fonts
    - spacing
    - layout (where things sit on the page)

  CSS works in RULES:
    selector {
      property: value;
    }

  - The selector chooses which HTML elements to style (e.g. body, .header).
  - Inside the curly brackets { } we write one or more "property: value;" lines.
    Example:
      color: red;
      background-color: blue;

  When the browser loads the HTML page:
    1. It reads the HTML to know what is on the page.
    2. It then reads the CSS to know how to STYLE those things.
    3. It combines them and shows a nicely styled web page on the screen.
*/

/* ========== GLOBAL STYLES (AFFECT THE WHOLE PAGE) ========== */

/* 
  * means "select everything".
  box-sizing: border-box; makes width/height easier to work with.
*/
* {
  box-sizing: border-box;
}

/* 
  html and body are the main containers for the whole page.
  We set height, remove default margins, and choose the font.
*/
html,
body {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ffffff;    /* white background */
  color: #222;                  /* dark grey text colour */
  overflow: hidden;             /* stop the whole page scrolling;
                                   only the middle content area scrolls */
}

/* ========== HEADER + MENU BAR AT THE TOP ========== */

.header {
  position: fixed;              /* stays stuck to the top even when we scroll */
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background-color: #f1f1f1;    /* light grey background */
  z-index: 1000;                /* put header on top of other elements */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* soft shadow under header */

  /* Use flexbox to arrange the title and the menu neatly */
  display: flex;
  flex-direction: column;       /* stack items in a column (top to bottom) */
  align-items: center;          /* centre items horizontally */

  justify-content: space-between; /* title at the top, menu at the bottom */
  padding-top: 35px;              /* move the title down a bit */
  padding-bottom: 0;
}

/* Style for the main title text in the header */
.header-title {
  margin: 0;
  font-size: 2rem;             /* make it fairly big */
  line-height: 1;              /* control spacing above/below the text */
}

/* The navigation bar (menu) runs full width at the bottom of the header */
.nav-bar {
  width: 100%;
  background-color: #333;      /* dark background for the menu strip */
}

/* The list that holds the menu links */
.nav-bar ul {
  list-style: none;            /* remove bullet points */
  margin: 0;
  padding: 8px 0;

  display: flex;               /* put list items in a row */
  justify-content: center;     /* centre the menu links */
  gap: 20px;                   /* space between the links */
}

/* Style for each menu link */
.nav-bar a {
  text-decoration: none;       /* remove underlines */
  color: #ffffff;              /* white text */
  padding: 6px 16px;           /* space around the text */
  border-radius: 4px;          /* slightly rounded corners */
  font-weight: bold;
  font-size: 0.95rem;
}

/* When the mouse goes over a link, change the background colour */
.nav-bar a:hover {
  background-color: #555;
}

/* ========== SCROLLABLE CONTENT AREA IN THE MIDDLE ========== */

.content {
  position: absolute;
  top: 120px;                  /* start just below the header (same height) */
  bottom: 90px;                /* stop just above the footer (same height) */
  left: 0;
  right: 0;

  overflow-y: auto;            /* allow up-and-down scrolling inside this area */
  padding: 20px 10px 20px;
  background-color: #f5f5f5;   /* light grey behind the cards */
}

/* Each section-card is a "card" in the middle area */
.section-card {
  max-width: 1000px;           /* limit how wide the card can get */
  margin: 0 auto 20px;         /* centre the card and add space underneath */
  background-color: #ffffff;   /* white background for each card */
  padding: 25px;               /* space inside the card */
  border-radius: 6px;          /* rounded corners */
}

/* ========== SIMPLE GALLERY LAYOUT ========== */

/* Wrap for image + description next to each other */
.simple-gallery {
  display: flex;
  flex-wrap: wrap;             /* allow items to wrap onto next line on small screens */
  gap: 20px;                   /* space between image area and description panel */
  margin-top: 10px;
}

/* LEFT SIDE: big image area */
.gallery-image-area {
  flex: 3 1 60%;               /* take more space than the description */
  background-color: #000;      /* black background behind the image */
  border-radius: 6px;
  display: flex;
  justify-content: center;     /* centre the image horizontally */
  align-items: center;         /* centre the image vertically */
  min-height: 260px;
  max-height: 320px;
}

/* The image inside the image area */
.gallery-image-area img {
  max-width: 100%;             /* don't grow wider than the container */
  max-height: 100%;            /* don't grow taller than the container */
  object-fit: contain;         /* show the whole image (no stretching or cropping) */
  display: block;              /* remove extra space under the image */
}

/* RIGHT SIDE: description panel (title, text, buttons) */
.gallery-description {
  flex: 1 1 35%;               /* smaller than the image area */
  background-color: #f9f9f9;   /* very light grey background */
  border-radius: 6px;
  padding: 20px;

  display: flex;
  flex-direction: column;      /* stack text and buttons vertically */
  justify-content: space-between; /* push text to top and buttons to bottom */
}

/* Buttons container (for Previous / Next) */
.gallery-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;                   /* space between the two buttons */
}

/* Style for the individual buttons */
.gallery-buttons button {
  flex: 1;                     /* make buttons equal width */
  padding: 10px;
  background-color: #333;      /* dark background */
  color: #ffffff;              /* white text */
  border: none;                /* no border outline */
  border-radius: 4px;
  cursor: pointer;             /* mouse cursor becomes a hand when over the button */
  font-weight: bold;
}

/* Button hover effect */
.gallery-buttons button:hover {
  background-color: #555;
}

/* ========== FOOTER AT THE BOTTOM ========== */

.footer {
  position: fixed;             /* stays stuck to the bottom of the page */
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background-color: #222;      /* dark background */
  color: #ffffff;              /* white text */

  display: flex;
  flex-direction: column;      /* stack icons and text vertically */
  align-items: center;         /* centre everything */
  justify-content: center;     /* centre vertically inside the footer */
  padding: 8px 10px;
}

/* Social media icons (Instagram, YouTube, Facebook) */
.footer-socials {
  display: flex;
  gap: 18px;                   /* space between icons */
  margin-bottom: 4px;          /* small space above the copyright line */
}

/* Size and hover effect for the icons */
.footer-socials img {
  width: 28px;
  height: 28px;
  transition: opacity 0.3s;    /* smooth fade when hovering */
}

.footer-socials img:hover {
  opacity: 0.7;                /* make icon slightly see-through on hover */
}

/* Tiny copyright text */
.tiny-print {
  margin: 0;
}

/* Link style inside the tiny-print paragraph */
.tiny-print a {
  color: #ffffff;              /* keep link white */
  text-decoration: none;       /* remove underline */
  font-size: 0.8rem;           /* slightly smaller text */
}

.tiny-print a:hover {
  text-decoration: underline;  /* underline when mouse hovers */
}

/* ========== MOBILE TWEAKS (FOR SMALL SCREENS) ========== */
/* 
  @media (max-width: 700px) means:
  "Only use these styles when the screen is 700 pixels wide or less"
  (usually phones or small tablets).
*/
@media (max-width: 700px) {
  .header {
    height: 140px;             /* header a bit taller to fit wrapped menu */
  }

  .content {
    top: 140px;                /* match the new header height */
  }

  .nav-bar ul {
    flex-wrap: wrap;           /* menu items can move onto a second line */
    gap: 10px;                 /* slightly smaller gap */
  }

  .simple-gallery {
    flex-direction: column;    /* stack image and description on top of each other */
  }

  .gallery-image-area {
    min-height: 220px;
    max-height: 260px;         /* reduce height for smaller screens */
  }

  .gallery-description {
    flex: 1 1 auto;            /* let it stretch naturally */
  }
}