/*
Theme Name: Squatchwatchers
Theme URI: https://squatchwatchers.com
Author: Tom Snyder
Description: Custom theme for Squatchwatchers, a retro tabloid cryptid sighting archive and community site for Western NY. Built to match the Squatchwatchers brand mockup.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: squatchwatchers
*/

:root {
  --sw-paper: #efe6cf;
  --sw-paper-warm: #e4d8b6;
  --sw-card: #fbf6e6;
  --sw-ink: #1d1a15;
  --sw-ink-muted: #4a4335;
  --sw-red: #6b2b26;
  --sw-accent: #c98a2b;
  --sw-border: #cabb92;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Merriweather', Georgia, serif;
  background: var(--sw-paper);
  color: var(--sw-ink);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--sw-accent); }

.sw-headline { font-family: 'Anton', 'Arial Narrow', sans-serif; }
.sw-typewriter { font-family: 'Special Elite', 'Courier New', monospace; }

.sw-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Top strip */
.sw-topstrip {
  background: var(--sw-ink);
  color: var(--sw-paper);
  padding: 6px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: 1px;
  flex-wrap: wrap;
  gap: 6px;
}

/* Masthead */
.sw-masthead {
  padding: 20px 40px;
  border-bottom: 6px solid var(--sw-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.sw-masthead .sw-logo { font-size: 40px; letter-spacing: 1px; color: var(--sw-ink); }
.sw-masthead.sw-masthead-large .sw-logo { font-size: 72px; }
.sw-masthead-tagline {
  font-size: 15px;
  color: var(--sw-red);
  font-style: italic;
  text-align: center;
}

/* Nav */
.sw-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.sw-nav a { font-size: 14px; letter-spacing: 1px; }
.sw-nav-bar {
  background: var(--sw-accent);
  padding: 14px 40px;
  display: flex;
  justify-content: center;
  gap: 36px;
  align-items: center;
  flex-wrap: wrap;
}
.sw-nav-bar a { color: var(--sw-paper); font-size: 15px; letter-spacing: 1px; }
.sw-report-btn {
  background: var(--sw-ink);
  color: var(--sw-paper) !important;
  padding: 8px 18px;
  border-radius: 3px;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
}

/* Hero */
.sw-hero {
  display: flex;
  gap: 32px;
  padding: 40px;
  border-bottom: 3px solid var(--sw-ink);
  flex-wrap: wrap;
}
.sw-hero-image {
  flex: 1 1 420px;
  min-width: 320px;
  position: relative;
}
.sw-hero-image .sw-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, #cfc3a1, #cfc3a1 10px, #c2b48f 10px, #c2b48f 20px);
  border: 3px solid var(--sw-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sw-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.sw-exclusive-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--sw-red);
  color: var(--sw-paper);
  padding: 8px 14px;
  transform: rotate(6deg);
  font-size: 15px;
  letter-spacing: 1px;
  border: 2px solid var(--sw-ink);
}
.sw-hero-copy { flex: 1 1 420px; min-width: 320px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.sw-hero-copy h1 { font-size: 48px; line-height: 0.98; margin: 0; color: var(--sw-ink); }
.sw-hero-copy p { font-size: 17px; line-height: 1.6; color: #2b2620; margin: 0; }
.sw-hero-btn {
  display: inline-block;
  background: var(--sw-ink);
  color: var(--sw-paper);
  padding: 12px 24px;
  font-size: 15px;
  letter-spacing: 1px;
  border-radius: 3px;
}

/* Sections */
.sw-section { padding: 44px 40px; border-bottom: 3px solid var(--sw-ink); }
.sw-section-title { font-size: 34px; margin: 0 0 6px; color: var(--sw-ink); }
.sw-section-rule { width: 90px; height: 5px; background: var(--sw-accent); margin-bottom: 28px; }

/* Sighting / product grid */
.sw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .sw-grid { grid-template-columns: 1fr; } }

.sw-card { background: var(--sw-card); border: 2px solid var(--sw-ink); display: flex; flex-direction: column; }
.sw-card .sw-card-image {
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(135deg, #d8cdae, #d8cdae 8px, #cabb92 8px, #cabb92 16px);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sw-card .sw-card-image img { width: 100%; height: 100%; object-fit: cover; }
.sw-card .sw-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.sw-card .sw-card-title { font-size: 20px; color: var(--sw-ink); line-height: 1.05; margin: 0; }
.sw-card .sw-card-meta { font-size: 12px; color: var(--sw-red); }
.sw-card .sw-card-excerpt { font-size: 14px; color: #2b2620; line-height: 1.5; margin: 0; }
.sw-card .sw-card-reporter { font-size: 12px; color: var(--sw-ink-muted); }

/* Archive list (full-width rows) */
.sw-archive-row {
  background: var(--sw-card);
  border: 2px solid var(--sw-ink);
  display: flex;
  gap: 20px;
  padding: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.sw-archive-row.sw-community { background: #fff8e8; border: 2px dashed var(--sw-ink); }
.sw-badge {
  display: inline-block;
  background: var(--sw-red);
  color: var(--sw-paper);
  font-size: 11px;
  padding: 5px 10px;
  letter-spacing: 0.5px;
  font-family: 'Special Elite', monospace;
}
.sw-badge.sw-community-badge { background: var(--sw-accent); color: var(--sw-ink); }
.sw-archive-divider { text-align: center; font-size: 12px; color: var(--sw-ink-muted); padding: 6px 0; font-family: 'Special Elite', monospace; }

/* Filter bar */
.sw-filter-bar {
  margin-bottom: 32px;
  padding: 16px 20px;
  background: var(--sw-card);
  border: 2px solid var(--sw-ink);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.sw-filter-bar label { font-family: 'Special Elite', monospace; font-size: 11px; color: var(--sw-ink-muted); display: block; margin-bottom: 4px; }
.sw-filter-bar select, .sw-filter-bar input[type="text"] {
  padding: 8px 10px; border: 2px solid var(--sw-ink); background: #fff8e8; font-size: 14px; font-family: 'Merriweather', serif;
}
.sw-filter-bar button {
  background: var(--sw-red); color: var(--sw-paper); border: none; padding: 10px 20px;
  font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: 1px; border-radius: 3px; cursor: pointer;
}

/* Community/map section */
.sw-community-section { padding: 44px 40px; border-bottom: 3px solid var(--sw-ink); background: var(--sw-paper-warm); display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }

/* Forms */
.sw-report-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.sw-report-form label { font-family: 'Special Elite', monospace; font-size: 13px; color: var(--sw-ink-muted); }
.sw-report-form input[type="text"],
.sw-report-form input[type="email"],
.sw-report-form input[type="date"],
.sw-report-form select,
.sw-report-form textarea {
  padding: 10px 12px; border: 2px solid var(--sw-ink); background: #fff8e8; font-size: 15px; font-family: 'Merriweather', serif; width: 100%;
}
.sw-report-form button {
  align-self: flex-start; background: var(--sw-red); color: var(--sw-paper); border: none; padding: 12px 26px;
  font-family: 'Anton', sans-serif; font-size: 15px; letter-spacing: 1px; border-radius: 3px; cursor: pointer;
}
.sw-form-notice { padding: 14px 18px; border: 2px solid var(--sw-ink); background: var(--sw-card); font-size: 14px; }

/* Generic page content */
.sw-page-content { padding: 44px 40px; max-width: 860px; margin: 0 auto; font-size: 16px; line-height: 1.7; }
.sw-page-content h1 { font-size: 40px; margin-bottom: 20px; }

/* Pagination */
.sw-pagination { display: flex; justify-content: center; gap: 10px; padding: 30px 0; align-items: center; font-family: 'Special Elite', monospace; font-size: 13px; }
.sw-pagination a, .sw-pagination span { background: var(--sw-ink); color: var(--sw-paper); padding: 8px 16px; border-radius: 3px; }

/* Footer */
.sw-footer { background: var(--sw-ink); color: var(--sw-paper); padding: 18px 40px; text-align: center; font-size: 12px; letter-spacing: 0.5px; font-family: 'Special Elite', monospace; }