/* ------------------------------------------------------
   Project 2 – Stellar overrides (loaded AFTER assets/css/main.css)
   Author: Zadid Khan
   Purpose: Keep Stellar layout while adding course-required styling
            for figures, responsive video, and the contact form.
------------------------------------------------------- */

:root {
  --accent: #ff0000;   /* brand accent for buttons */
  --ink: #1b1f24;
}

/* Figures & images */
figure.image,
figure {
  text-align: center;
  margin: 1rem auto 1.25rem;
}
figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 8px; /* matches Stellar’s rounded motif */
}
figcaption {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

/* Responsive YouTube/Vimeo wrapper */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Contact form (Part #2 requires external CSS) */
.contact-form {
  display: grid;
  gap: 0.9rem;
  max-width: 520px;
  margin: 1rem auto 2rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.075);
  color: #fff;
  font: inherit;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #8cc9f0;
  box-shadow: 0 0 0 1px #8cc9f0;
  outline: none;
}
.contact-form button {
  justify-self: start;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.contact-form button[type="reset"] {
  background: #6c757d;
}

/* Minor nav enhancement: keep active pill visible */
#nav ul li a.active {
  background-color: #ffffff;
  box-shadow: none;
}

/* Accessibility: visible focus indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px dashed #8cc9f0;
  outline-offset: 2px;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* === Pokémon-themed customization pack (v1) ===============================
   Palette + components tuned for your site. Loaded after main.css.
============================================================================ */

:root {
  --brand-yellow: #FFCB05;  /* Pikachu */
  --brand-red:    #EE1515;  /* Poké Ball red */
  --brand-blue:   #3D7DCA;  /* Water/Team Mystic */
  --brand-navy:   #0A2E50;  /* Dark navy */
  --brand-green:  #4dad5b;  /* Grass */
}

/* Background: keep Stellar overlay but shift gradient to Pokémon palette */
body {
  background-image: url("images/overlay.png"),
    linear-gradient(45deg, var(--brand-yellow) 10%, var(--brand-red) 45%, var(--brand-blue) 90%);
}

/* Header accent */
#header.alt h1 { text-shadow: 0 2px 0 rgba(0,0,0,.15); }
#header.alt p  { opacity: .9; }

/* Nav: glass card with subtle blur */
#nav {
  background: rgba(255,255,255,.85) !important;
  color: #222 !important;
  backdrop-filter: saturate(125%) blur(6px);
  -webkit-backdrop-filter: saturate(125%) blur(6px);
}
#nav ul li a {
  border-radius: 8px;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
#nav ul li a:hover { background: rgba(0,0,0,.06); transform: translateY(-1px); }
#nav ul li a.active { background: #fff; color: #222; box-shadow: 0 1px 0 rgba(0,0,0,.06) inset; }

/* Buttons */
.button,
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  background: var(--brand-red) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover { background: #f73a3a !important; }

/* Cards for figures */
figure.image, figure {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: .65rem .75rem .85rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}

/* Type badges (use: <span class="type-chip" data-type="Electric">Electric</span>) */
.type-chip {
  display: inline-block; font-weight: 700; font-size: .8rem;
  padding: .25rem .55rem; border-radius: 999px; color: #111;
  margin: 0 .25rem .25rem 0; background: #ddd;
}
.type-chip[data-type="Electric"] { background: #F7D02C; }
.type-chip[data-type="Fire"]     { background: #EE8130; }
.type-chip[data-type="Water"]    { background: #6390F0; color:#fff; }
.type-chip[data-type="Grass"]    { background: #7AC74C; }
.type-chip[data-type="Ice"]      { background: #96D9D6; }
.type-chip[data-type="Dragon"]   { background: #6F35FC; color:#fff; }
.type-chip[data-type="Psychic"]  { background: #F95587; }
.type-chip[data-type="Dark"]     { background: #705746; color:#fff; }

/* Stronger hover for VanillaTilt targets */
figure img { will-change: transform; }
figure img:hover { filter: brightness(1.02) saturate(1.05); }

/* Footer clock styling */
#footer #now { opacity: .9; font-weight: 600; }

/* Small screens: tighten paddings */
@media (max-width: 480px) {
  #nav ul li a { padding: 0 .9em; }
  figure.image, figure { padding: .5rem .6rem .7rem; }
}

/* Updated-on date style */
#footer .updated-on {
  opacity: 0.9;
  font-size: 0.95rem;
  margin-top: .25rem;
}

/* Enable native smooth scrolling as a fallback */
html { scroll-behavior: smooth; }

/* Users who prefer reduced motion get instant jumps instead */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}