/* styles.css — external stylesheet for Critter Clash */

/* --- Brand variables --- */
:root{
  --brand-blue: #4994d0;
  --brand-yellow: #febe10;
  --bg: #fff;
  --muted: #666;
  --card-radius: 12px;
  --max-width: 1100px;
}

/* Fonts — Alphabet Soup for logo/headers, Myriad Pro for body */
/* The Adobe Fonts kit (typekit) should register these font names:
   alphabet-soup-pro and myriad-pro */
.logo-text, .splash-title, h1, h2, h3 {
  font-family: "alphabet-soup-pro", "Alphabet Soup", sans-serif;
  letter-spacing: 1px;
}
body, p, label, input, textarea, .muted {
  font-family: "myriad-pro", "Myriad Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-weight: 400;
  color: #111;
  line-height: 1.45;
  background: var(--bg);
}

/* Reset-ish */
* { box-sizing: border-box; }
img { max-width: 100%; display: block; height: auto; }

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

/* Header */
.site-header { border-bottom: 1px solid #eee; background: white; position: sticky; top:0; z-index: 50; }
.logo { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--brand-blue); }
.logo-mark { display:inline-block; font-size:1.2rem; background:var(--brand-yellow); padding:0.25rem 0.45rem; border-radius:6px; line-height:1; }
.logo-text { font-size:1.2rem; font-weight:700; }

/* Nav */
.main-nav a { margin-left: 1rem; color: #222; text-decoration:none; font-weight:600; padding:0.6rem 0.4rem; border-radius:6px; }
.main-nav a:hover { background: rgba(73,148,208,0.08); color:var(--brand-blue); }
.logo-icon {width: 120px; height: auto;margin-right: 0rem}
.logo {display: flex;align-items: center;text-decoration: none;}

/* Splash */
.splash { padding: 3rem 0; background: linear-gradient(180deg, rgba(255,202,79), rgba(0,21,8,0)); }
.splash-inner { display:grid; gap:1.5rem; align-items:center; grid-template-columns: 1fr 360px; }
.splash-title { font-size: clamp(2rem, 4vw, 3rem); margin:0; color:var(--brand-blue); }
.splash-sub { margin:0; color:var(--muted); font-size:1.05rem; background-color: transparent; }

/* CTA */
.cta-row { display:flex; gap:0.8rem; margin-top:0.8rem; }
.btn { display:inline-block; padding:0.6rem 1rem; border-radius:10px; text-decoration:none; font-weight:700; cursor:pointer; border: none; }
.btn-primary { background:var(--brand-blue); color:white; }
.btn-primary:hover { filter:brightness(.95); }
.btn-ghost { background:transparent; color:var(--brand-blue); border:2px solid rgba(73,148,208,0.12); }
.splash-art img { border-radius:12px; box-shadow: 0 8px 24px rgba(16,24,40,0.06); }

/* About */
.about { padding: 2.5rem 0; }

/* Gallery grid */
.gallery .grid { list-style:none; padding:0; margin:1.25rem 0 2rem 0; display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:1.25rem; }
.card { background: #fff; border:1px solid #eee; padding:0.8rem; border-radius:var(--card-radius); text-align:center; box-shadow:0 6px 18px rgba(16,24,40,0.04); }
.card h3 { margin:0.6rem 0 0 0; font-size:1rem; color:var(--brand-blue); }

/* Contact form */
.transparent-text-bg { background-color: transparent !important;}
.contact {
  padding: 2.5rem 0;
  background: linear-gradient(
    180deg,
    rgba(255,202,79,90) 0%,     /* brand yellow */
    rgba(254,190,16,0.35) 50%, /* soft fade */
    rgba(0,21,8,0) 100%        /* same transparent fade-out */);}
.contact-form { max-width:700px; display:grid; gap:0.8rem; }
.contact-form label { display:block; font-weight:600; color:#222;background-color: transparent; }
.contact-form input, .contact-form textarea {
  width:100%; padding:0.75rem; border-radius:8px; border:1px solid #ddd; font-size:1rem;
}
.form-row { display:flex; gap:0.8rem; align-items:center; }

/* Footer */
.site-footer { border-top:1px solid #eee; padding:1rem 0; margin-top:2rem; background:#fff; }

/* Small utilities */
.muted { color: var(--muted); }
.small { font-size:0.9rem; }

/* Responsive tweaks */
@media (max-width: 880px) {
  .splash-inner { grid-template-columns: 1fr; text-align:center; }
  .splash-art { margin:0 auto; width:80%; }
  .main-nav a { margin-left: .5rem; font-size:0.95rem; }
}