/* ================================================================
   style.css — Mchoro Artstore
   All visual styling lives here.
   CSS works by: SELECTOR { property: value; }
   The selector targets HTML elements, then the rules style them.
================================================================ */


/* ----------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Variables)
   Defined inside :root so they're available everywhere in the file.
   Use variables for colours / fonts you repeat often — change once,
   updates everywhere.
---------------------------------------------------------------- */
:root {
  /* Colour palette */
  --color-bg:        #0d0d0d;   /* near-black page background         */
  --color-surface:   #161616;   /* slightly lighter surface for cards  */
  --color-border:    #2a2a2a;   /* subtle border colour                */
  --color-gold:      #c9a84c;   /* warm gold accent — feels artistic   */
  --color-gold-lt:   #e8c97a;   /* lighter gold for hover states       */
  --color-text:      #f0ece4;   /* off-white body text (easier on eyes)*/
  --color-muted:     #888888;   /* grey for secondary / hint text      */
  --color-white:     #ffffff;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  /* Playfair Display — an elegant serif font, loaded from Google Fonts below */
  --font-body:    'DM Sans', Arial, sans-serif;
  /* DM Sans — a clean, modern sans-serif for body text */

  /* Spacing scale — keeps padding/margin consistent across the page */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  2rem;     /* 32px */
  --space-lg:  4rem;     /* 64px */
  --space-xl:  7rem;     /* 112px */

  /* Border radius — how rounded the corners are */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Transition — reusable smooth animation timing */
  --transition: 0.3s ease;
}


/* ----------------------------------------------------------------
   2. GOOGLE FONTS IMPORT
   Loads the two fonts from Google's CDN.
   Must come before any rule that uses them.
---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500;600&display=swap');


/* ----------------------------------------------------------------
   3. CSS RESET & BASE STYLES
   Browsers add their own default margins/padding. We zero them out
   for a consistent starting point across all browsers.
---------------------------------------------------------------- */

/* The * selector targets EVERY element on the page */
*,
*::before,  /* ::before pseudo-element (decorative content added via CSS) */
*::after {  /* ::after  pseudo-element */
  margin: 0;           /* remove browser default margins  */
  padding: 0;          /* remove browser default padding  */
  box-sizing: border-box;
  /* box-sizing: border-box means padding + border are INCLUDED in width/height.
     Without this, adding padding makes elements wider than expected. */
}

/* Smooth scroll behaviour for the whole page */
html {
  scroll-behavior: smooth;
  /* When a nav link is clicked (e.g. #gallery), the page glides there
     instead of jumping instantly. */
}

/* Base body styles */
body {
  font-family: var(--font-body);    /* use our DM Sans variable */
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  /* line-height: 1.7 means each line of text is 1.7× the font size tall.
     This gives text more breathing room and improves readability. */
  overflow-x: hidden;
  /* Prevent horizontal scroll — caused by elements that are slightly too wide */
}

/* Remove default underline + colour from all links */
a {
  text-decoration: none;
  color: inherit; /* inherit means use whatever colour the parent element has */
}

/* Remove bullet points from lists */
ul {
  list-style: none;
}

/* Make images responsive by default */
img {
  max-width: 100%;   /* image never wider than its container */
  display: block;    /* removes the small gap below images (inline default) */
}


/* ----------------------------------------------------------------
   4. REUSABLE UTILITY CLASSES
   Small classes applied to many elements across different sections.
---------------------------------------------------------------- */

/* Section label — the small decorative text above headings */
.section-label {
  display: inline-block;
  font-size: 0.75rem;         /* 12px — small */
  font-weight: 600;
  letter-spacing: 0.15em;     /* spread letters apart — looks refined */
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}

/* Section header wrapper — centres the heading block */
.section-header {
  text-align: center;
  margin-bottom: var(--space-md);
}

/* Section description paragraph */
.section-desc {
  color: var(--color-muted);
  max-width: 540px;           /* stop it getting too wide on large screens */
  margin: var(--space-xs) auto 0;
  /* margin: top auto left/right → centres horizontally */
}

/* H2 headings used in each section */
h2 {
  font-family: var(--font-display);  /* Playfair Display serif */
  font-size: clamp(2rem, 5vw, 3.5rem);
  /* clamp(min, preferred, max):
       - minimum 2rem
       - scales with viewport (5vw)
       - maximum 3.5rem
     This makes font size fluid and responsive without media queries. */
  font-weight: 700;
  line-height: 1.1;
}


/* ----------------------------------------------------------------
   5. HEADER
---------------------------------------------------------------- */

header {
  /* Full-screen hero with a background image */
  min-height: 100vh;
  /* 100vh = 100% of the viewport height — fills the whole screen */

  background-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.55) 0%,    /* dark overlay at the top   */
      rgba(0,0,0,0.75) 100%   /* darker overlay at the bottom */
    ),
    url('img/hero.jpg');
  /* Two layers:
     1. A semi-transparent gradient overlay (so text stays readable)
     2. The background hero image from /img/hero.jpg
     If hero.jpg doesn't exist, a dark background still shows.  */

  background-size: cover;     /* image covers the full area, no gaps */
  background-position: center;/* centre the image within the area */
  background-attachment: fixed;
  /* Parallax effect: image stays fixed while content scrolls over it */

  display: flex;              /* flexbox layout */
  align-items: center;        /* vertically centre children */
  justify-content: center;    /* horizontally centre children */
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}

.header-content {
  max-width: 700px; /* stop text getting too wide */
}

/* Small eyebrow label above the h1 */
.header-eyebrow {
  color: var(--color-gold);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

/* Main site title */
header h1 {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 10vw, 7rem);
  font-weight: 900;
  line-height: 0.95;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  /* text-shadow adds a soft glow behind the letters for depth */
  text-shadow: 0 4px 40px rgba(0,0,0,0.6);
}

.header-tagline {
  color: rgba(240, 236, 228, 0.75);  /* slightly translucent off-white */
  font-size: 1.1rem;
  font-weight: 300;
  margin-bottom: var(--space-md);
}

/* Call-to-action button */
.cta-button {
  display: inline-block;
  padding: 0.9rem 2.5rem;
  background-color: var(--color-gold);
  color: #0d0d0d;              /* dark text on gold background */
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), transform var(--transition);
  /* transition: smoothly animates background-color and scale changes */
}

.cta-button:hover {
  /* :hover applies when the mouse is over the element */
  background-color: var(--color-gold-lt);  /* lighter gold */
  transform: translateY(-3px);
  /* translateY(-3px) moves the button 3px upward — subtle lift effect */
}


/* ----------------------------------------------------------------
   6. NAVIGATION BAR
---------------------------------------------------------------- */

nav {
  position: fixed;
  /* fixed positioning: the nav stays at the same place on screen
     even when the user scrolls. */
  top: 0;       /* glued to the very top */
  left: 0;
  right: 0;     /* stretches full width */
  z-index: 1000;
  /* z-index controls stacking order. 1000 puts the nav above everything else.
     Higher number = on top. */

  background-color: rgba(13, 13, 13, 0.85);
  /* Semi-transparent black background.
     rgba(r, g, b, alpha) — alpha 0.85 means 85% opaque */

  backdrop-filter: blur(12px);
  /* Blurs whatever is behind the nav bar — a frosted glass effect.
     Works in modern browsers (Chrome, Safari, Firefox). */

  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition);
}

/* Shadow added by JavaScript when the user scrolls down */
nav.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.nav-container {
  max-width: 1200px;  /* cap the nav width on very wide screens */
  margin: 0 auto;     /* centre it horizontally */
  padding: 1.1rem var(--space-md);

  display: flex;           /* flex row: logo left, links right */
  align-items: center;     /* vertically centre logo and links */
  justify-content: space-between; /* push logo to left, links to right */
}

/* Site logo / name in the nav bar */
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.05em;
}

/* Nav links list */
.nav-links {
  display: flex;       /* horizontal row */
  gap: var(--space-md); /* space between each link */
  align-items: center;
}

/* Individual nav link */
.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.05em;
  position: relative; /* needed for the ::after underline trick */
  padding-bottom: 3px;
  transition: color var(--transition);
}

/* Animated underline on hover */
.nav-link::after {
  content: '';            /* empty pseudo-element */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;             /* starts with zero width (invisible) */
  height: 2px;
  background-color: var(--color-gold);
  transition: width var(--transition); /* animates width on hover */
}

.nav-link:hover {
  color: var(--color-gold);
}

.nav-link:hover::after {
  width: 100%; /* expands underline to full width on hover */
}

/* ---- HAMBURGER BUTTON (mobile only) ---- */
.hamburger {
  display: none; /* hidden on desktop — shown via media query on mobile */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;   /* remove default button background */
  border: none;       /* remove default button border */
  cursor: pointer;    /* pointer cursor on hover */
  padding: 6px;
}

/* Each of the three lines in the hamburger icon */
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* Animate hamburger into an X when menu is open */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }             /* middle line disappears */
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ----------------------------------------------------------------
   7. GALLERY SECTION
---------------------------------------------------------------- */

#gallery {
  padding: var(--space-xl) var(--space-md);
  max-width: 1200px;
  margin: 0 auto; /* centre section on large screens */
}

/* Filter buttons row */
.gallery-filters {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  flex-wrap: wrap;  /* wrap buttons to next line on small screens */
  margin-bottom: var(--space-md);
}

/* Individual filter button */
.filter-btn {
  padding: 0.5rem 1.4rem;
  border: 1px solid var(--color-border);
  border-radius: 100px;   /* pill shape */
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
}

.filter-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* Active filter button (currently selected) */
.filter-btn.active {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: #0d0d0d;
  font-weight: 600;
}

/* Gallery grid — CSS Grid layout */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* auto-fill: create as many columns as fit
     minmax(280px, 1fr): each column is at least 280px, grows to fill space
     This makes the grid automatically responsive! */
  gap: 1.5rem;  /* space between grid cells */
}

/* Individual artwork card */
.gallery-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;   /* clips the image to the card's rounded corners */
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.gallery-card:hover {
  transform: translateY(-6px);  /* lift card on hover */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Image container (maintains aspect ratio) */
.card-img-wrap {
  aspect-ratio: 4/3;
  /* aspect-ratio forces the container to always be 4:3 (landscape)
     regardless of the image size, keeping the grid uniform. */
  overflow: hidden;
  background-color: var(--color-border); /* placeholder colour if image missing */
  position: relative;
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-fit: cover fills the container without distorting the image.
     It crops instead of squishing. */
  transition: transform 0.5s ease;
}

.gallery-card:hover .card-img-wrap img {
  transform: scale(1.06); /* slight zoom on the image when card is hovered */
}

/* Card text area below the image */
.card-body {
  padding: 1rem 1.2rem 1.3rem;
}

.card-category {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 4px;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.card-artist {
  font-size: 0.82rem;
  color: var(--color-muted);
}

/* Hidden class — used by JS to hide filtered-out cards */
.gallery-card.hidden {
  display: none;
}


/* ----------------------------------------------------------------
   8. ABOUT SECTION
---------------------------------------------------------------- */

#about {
  background-color: var(--color-surface); /* slightly lighter than the page */
  padding: var(--space-xl) var(--space-md);
}

.about-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Two equal columns side by side — image left, text right */
  gap: var(--space-lg);
  align-items: center; /* vertically centre both columns */
}

/* Image block (left column) */
.about-image-block {
  position: relative; /* needed so the badge can be positioned inside it */
}

.about-img-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;   /* clip image to rounded corners */
  border: 1px solid var(--color-border);
  aspect-ratio: 3/4;  /* portrait orientation — taller than wide */
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--color-border); /* shown if image doesn't load */
}

/* "Est. 2018" badge overlapping the bottom-right of the image */
.about-badge {
  position: absolute;
  bottom: -1rem;       /* slightly below the frame */
  right: -1rem;        /* slightly to the right of the frame */
  background-color: var(--color-gold);
  color: #0d0d0d;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* Text column (right side) */
.about-text h2 {
  margin: var(--space-xs) 0 var(--space-sm);
}

.about-text p {
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}

/* Statistics row */
.about-stats {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border); /* dividing line above stats */
}

.stat {
  display: flex;
  flex-direction: column; /* stack number above label */
  gap: 4px;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
}

.stat-label {
  font-size: 0.78rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* ----------------------------------------------------------------
   9. CONTACT SECTION
---------------------------------------------------------------- */

#contact {
  padding: var(--space-xl) var(--space-md);
  max-width: 1100px;
  margin: 0 auto;
}

.contact-container {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  /* Left column (info cards) is narrower; right column (form) is wider */
  gap: var(--space-lg);
  align-items: start; /* align tops, not centres */
}

/* Info cards column */
.contact-info {
  display: flex;
  flex-direction: column; /* stack cards vertically */
  gap: var(--space-sm);
}

.contact-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  transition: border-color var(--transition);
}

.contact-card:hover {
  border-color: var(--color-gold);
}

.contact-icon {
  font-size: 1.8rem;
  margin-bottom: var(--space-xs);
}

.contact-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 4px;
}

.contact-card p {
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* Contact form */
.contact-form {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Row with two inputs side by side */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

/* Each label + input pair */
.form-group {
  display: flex;
  flex-direction: column; /* label above input */
  gap: 6px;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Shared styles for <input> and <textarea> */
.form-group input,
.form-group textarea {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color var(--transition);
  resize: vertical; /* allow only vertical resize on textarea */
}

.form-group input:focus,
.form-group textarea:focus {
  /* :focus applies when the user clicks into / tabs to the input */
  outline: none;                    /* remove browser's blue outline */
  border-color: var(--color-gold);  /* replace with our gold border */
}

/* Submit button */
.submit-btn {
  padding: 0.9rem 2rem;
  background-color: var(--color-gold);
  color: #0d0d0d;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
  align-self: flex-start; /* don't stretch the button to full width */
}

.submit-btn:hover {
  background-color: var(--color-gold-lt);
  transform: translateY(-2px);
}

/* Success message shown after form is submitted */
.form-success {
  display: none;          /* hidden by default */
  color: #6fcf97;         /* green text */
  font-size: 0.875rem;
  padding: 0.75rem;
  background-color: rgba(111, 207, 151, 0.1);
  border-radius: var(--radius-sm);
}

.form-success.visible {
  display: block; /* shown when JavaScript adds the "visible" class */
}


/* ----------------------------------------------------------------
   10. FOOTER
---------------------------------------------------------------- */

footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-md);
}

.footer-content {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap; /* wrap on small screens */
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-xs);
}

.footer-brand p {
  color: var(--color-muted);
  font-size: 0.875rem;
  max-width: 260px;
}

/* Footer quick links — horizontal row */
.footer-links {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}

.footer-links a {
  color: var(--color-muted);
  font-size: 0.875rem;
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--color-gold);
}

/* Copyright bar at the very bottom */
.footer-bottom {
  max-width: 1100px;
  margin: var(--space-sm) auto 0;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.8rem;
}


/* ----------------------------------------------------------------
   11. RESPONSIVE DESIGN — MEDIA QUERIES
   @media rules apply ONLY when the screen width matches the condition.
   We use "max-width" to override styles for SMALLER screens (mobile-first
   overrides for tablet/mobile).
---------------------------------------------------------------- */

/* TABLET — screens 900px wide or narrower */
@media (max-width: 900px) {

  /* Stack the about section vertically instead of side by side */
  .about-container {
    grid-template-columns: 1fr; /* single column */
  }

  /* Shrink the image frame on tablet */
  .about-img-frame {
    aspect-ratio: 16/9; /* wider landscape ratio */
    max-height: 320px;
  }

  /* Stack the contact layout too */
  .contact-container {
    grid-template-columns: 1fr;
  }

  /* Contact info cards become a row on tablet */
  .contact-info {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .contact-card {
    flex: 1 1 200px; /* grow & shrink, minimum 200px each */
  }
}


/* MOBILE — screens 640px wide or narrower */
@media (max-width: 640px) {

  /* Show hamburger button on mobile */
  .hamburger {
    display: flex;
  }

  /* Mobile nav: full-width dropdown list */
  .nav-links {
    display: none;          /* hidden by default */
    position: absolute;     /* float below the nav bar */
    top: 100%;              /* directly below the nav */
    left: 0;
    right: 0;
    background-color: rgba(13, 13, 13, 0.98);
    flex-direction: column; /* stack links vertically */
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
  }

  /* Show nav links when JavaScript adds "open" class */
  .nav-links.open {
    display: flex;
  }

  /* Stack the form's two-column row into one column on mobile */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Footer links stack vertically */
  .footer-content {
    flex-direction: column;
  }

  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}