/* =================================================================
   VICKY ARCHICAD COMPANY — style.css
   =================================================================
   This is the EXTERNAL CSS file. "External" means the styling
   rules live in their own .css file, separate from the HTML, and
   are pulled in through the <link rel="stylesheet" href="css/style.css">
   tag in index.html.

   WHY SEPARATE FILES?
   - index.html   -> structure & content (what exists on the page)
   - style.css    -> presentation (what it looks like)
   - js/script.js -> behavior (what it does when you interact with it)
   Keeping these apart means you can redesign the whole site by
   editing ONLY this file, without ever touching the HTML content.

   HOW A CSS RULE WORKS:
     selector {
       property: value;
     }
   The "selector" targets an HTML element (by tag, class ".name",
   or id "#name"). Everything inside the { } braces is a list of
   property:value pairs that style that element. Comments below
   explain each block as we go.
================================================================= */

/* -----------------------------------------------------------------
   1. DESIGN TOKENS (CSS variables)
   Defining colors/fonts once as variables (--name) means every
   other rule in this file can reuse them with var(--name). Change
   a value here and it updates everywhere, instantly.
----------------------------------------------------------------- */
:root {
  --navy: #1B2A3D;        /* primary dark background (blueprint navy) */
  --blue: #2E5F8A;        /* secondary blueprint blue */
  --paper: #F5F2EA;       /* light "drafting paper" background */
  --brass: #C08A3E;       /* warm accent, used sparingly */
  --grey: #8A94A6;        /* muted supporting text */
  --ink: #10192A;         /* near-black text on paper */

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Work Sans', sans-serif;

  --max-width: 1160px;
}

/* -----------------------------------------------------------------
   2. RESET & BASE
   Browsers apply their own default spacing to elements. This
   block strips that out so our own spacing choices are the only
   ones in effect.
----------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* padding/border no longer enlarge width */
}

html {
  scroll-behavior: smooth; /* smooth-scroll when clicking nav links */
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.6rem;
  font-weight: 600;
}

h1, h2 {
  font-family: var(--font-display);
  line-height: 1.1;
}

/* -----------------------------------------------------------------
   3. HEADER
----------------------------------------------------------------- */
.site-header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(245, 242, 234, 0.12);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.logo-mark {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--brass);
  color: var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.logo-mark.small { color: var(--paper); border-color: var(--paper); }

.logo-text {
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.logo-text em { color: var(--brass); font-style: normal; }

.site-nav {
  display: flex;
  gap: 1.8rem;
}
.site-nav a {
  color: var(--paper);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.site-nav a:hover {
  opacity: 1;
  color: var(--brass);
}

/* -----------------------------------------------------------------
   4. MARQUEE
   The "marquee" is a strip of text that scrolls sideways forever.
   Method: put TWO copies of the text in a row inside .marquee-track
   (already duplicated in the HTML), make that track twice as wide
   as the screen, then animate it sliding left by exactly 50% of
   its own width. Because the second half is an identical copy of
   the first, the moment it finishes, the loop looks seamless.
----------------------------------------------------------------- */
.marquee {
  background: var(--brass);
  overflow: hidden;           /* hide whatever scrolls outside the box */
  white-space: nowrap;
  border-bottom: 1px solid rgba(16,25,42,0.15);
}

.marquee-track {
  display: inline-flex;
  width: max-content;
  animation: scroll-marquee 22s linear infinite;
}

.marquee-track span {
  padding: 0.55rem 1.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--navy);
  text-transform: uppercase;
}

@keyframes scroll-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* exactly half = one full copy */
}

/* Pause on hover so visitors can read a specific word if they want */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* -----------------------------------------------------------------
   5. HERO
----------------------------------------------------------------- */
.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4.5rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  margin: 0.6rem 0 1.2rem;
}

.hero-sub {
  color: var(--grey);
  max-width: 42ch;
  margin-bottom: 1.8rem;
}

.btn {
  display: inline-block;
  background: var(--navy);
  color: var(--paper);
  padding: 0.85rem 1.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  border: 1px solid var(--navy);
  transition: background 0.2s ease, color 0.2s ease;
}
.btn:hover {
  background: transparent;
  color: var(--navy);
}

.hero-image {
  border: 6px solid var(--navy);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the frame without distorting the image */
}

/* -----------------------------------------------------------------
   6. SECTION HEADINGS (shared by gallery / slider sections)
----------------------------------------------------------------- */
.section-heading {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
.section-heading h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 0.7rem;
}
.section-sub {
  color: var(--grey);
  max-width: 52ch;
  margin: 0 auto;
}
.section-sub code {
  background: rgba(27,42,61,0.08);
  padding: 0.1rem 0.4rem;
  font-size: 0.9em;
}

/* -----------------------------------------------------------------
   7. GALLERY GRID ("the library")
   CSS Grid lays images out in responsive columns automatically —
   auto-fill + minmax means the browser fits as many 260px-minimum
   columns as will comfortably fit, then stretches them evenly.
----------------------------------------------------------------- */
.gallery-section {
  padding: 4.5rem 0 5rem;
}

.gallery-grid {
  max-width: var(--max-width);
  margin: 3rem auto 0;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.6rem;
}

.gallery-item {
  background: #fff;
  border: 1px solid rgba(27,42,61,0.1);
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.06); /* gentle zoom on hover */
}

.gallery-item figcaption {
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  color: var(--navy);
  border-top: 1px solid rgba(27,42,61,0.08);
}

.plate-no {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brass);
  margin-right: 0.5rem;
}

/* -----------------------------------------------------------------
   8. POGO SLIDER
   How it works: .pogo-track holds every .pogo-slide side by side
   (display:flex). Only ONE slide's width is visible at a time
   because .pogo-slider has overflow:hidden. To move to slide N,
   the JavaScript shifts .pogo-track left by N * 100% using
   transform: translateX(). The "pogoIn" keyframes add a small
   bounce/overshoot to that motion — like a pogo stick landing —
   instead of a flat linear slide.
----------------------------------------------------------------- */
.slider-section {
  background: var(--navy);
  padding: 4.5rem 0 5rem;
}
.slider-section .eyebrow { color: var(--brass); }
.slider-section h2, .slider-section .section-sub { color: var(--paper); }
.slider-section .section-sub { opacity: 0.75; }

.pogo-slider {
  position: relative;
  max-width: var(--max-width);
  margin: 3rem auto 0;
  overflow: hidden;
  border: 1px solid rgba(245,242,234,0.15);
  animation: pogoIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pogo-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* that cubic-bezier curve overshoots slightly then settles —
     it's what gives the slider its "pogo bounce" feel */
}

.pogo-slide {
  min-width: 100%;
  position: relative;
}

.pogo-slide img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}

.pogo-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(16,25,42,0.75);
  color: var(--paper);
  padding: 0.7rem 1.2rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.pogo-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--brass);
  color: var(--navy);
  border: none;
  width: 42px;
  height: 42px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.pogo-btn:hover {
  background: var(--paper);
  transform: translateY(-50%) scale(1.08);
}
.pogo-prev { left: 14px; }
.pogo-next { right: 14px; }

.pogo-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0;
  background: rgba(0,0,0,0.15);
}

.pogo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(245,242,234,0.35);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pogo-dot.active {
  background: var(--brass);
  transform: scale(1.2);
}

@keyframes pogoIn {
  0%   { transform: translateY(24px); opacity: 0; }
  60%  { transform: translateY(-6px); opacity: 1; }
  100% { transform: translateY(0); }
}

/* -----------------------------------------------------------------
   9. ABOUT
----------------------------------------------------------------- */
.about-section {
  padding: 5rem 1.5rem;
}
.about-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.about-inner h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-bottom: 1.2rem;
}
.about-inner p:last-child {
  color: var(--grey);
}

/* -----------------------------------------------------------------
   10. FOOTER
----------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 2.2rem 1.5rem;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-inner p { font-size: 0.85rem; opacity: 0.8; }
.footer-note { font-size: 0.78rem !important; opacity: 0.55 !important; }

/* -----------------------------------------------------------------
   11. RESPONSIVE — mobile layout
   A "media query" only applies the rules inside it when the
   browser window is narrower than the given width. This is how
   one CSS file serves both desktop and phone screens.
----------------------------------------------------------------- */
@media (max-width: 820px) {
  .site-nav { display: none; } /* simplest mobile approach: hide the nav */
  .hero {
    grid-template-columns: 1fr;
    padding-top: 3rem;
  }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  /* Respect visitors who've asked their OS to minimize motion */
  .marquee-track,
  .pogo-slider,
  .pogo-track,
  .gallery-item img {
    animation: none !important;
    transition: none !important;
  }
}