/*
 Theme Name:   Ocean Springs Specials
 Theme URI:    https://oceanspringsspecials.com
 Description:  Custom child theme for the Ocean Springs daily specials directory.
 Author:       OceanSpringsSpecials.com
 Template:     kadence
 Version:      1.5.0
*/

:root {
  --os-bg-primary: #0b0e13;
  --os-bg-card: #12161f;
  --os-bg-controls: #10141c;
  --os-bg-input: #181d28;
  --os-text-primary: #f0ece2;
  --os-text-secondary: #8faab8;
  --os-text-muted: #3e5565;
  --os-accent: #38bdf8;
  --os-accent-hover: #0ea5e9;
  --os-accent-glow: rgba(56, 189, 248, 0.3);
  --os-sunset-gold: #f0c060;
  --os-sunset-orange: #e8944a;
  --os-border: rgba(255, 255, 255, 0.05);
  --os-border-hover: rgba(56, 189, 248, 0.18);
  --os-radius: 14px;
  --os-radius-sm: 8px;
  --os-font-display: 'Newsreader', Georgia, serif;
  --os-font-body: 'DM Sans', -apple-system, sans-serif;
}

/* ----- Global ----- */
body, body.flavor-flavor {
  background-color: var(--os-bg-primary) !important;
  color: var(--os-text-primary);
  font-family: var(--os-font-body);
}
body .site, body.page, body.home, body.archive, body.single {
  background-color: var(--os-bg-primary) !important;
}
body .entry-content, body .site-main, body .content-area,
body .site-content, body article .entry-content {
  background: transparent !important;
  color: var(--os-text-secondary) !important;
}

/* ----- Header ----- */
.site-header {
  background: var(--os-bg-controls) !important;
  border-bottom: 1px solid var(--os-border);
}
.site-header .site-title, .site-header .site-title a {
  font-family: var(--os-font-display) !important;
  color: var(--os-text-primary) !important;
  font-weight: 700;
}

/* ----- Hero ----- */
.os-hero {
  background: linear-gradient(180deg,
    #1a1225 0%, #2d1a3a 15%, #5c2d4f 30%, #c4583a 48%,
    #e8944a 56%, #f0c060 62%, #d4a855 68%, #4a7a8a 78%,
    #1a3545 88%, #0b0e13 100%);
  border-bottom: 1px solid rgba(56,189,248,0.1);
  padding: 60px 20px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.os-hero-eyebrow {
  font-family: var(--os-font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--os-sunset-gold);
  text-shadow: 0 1px 12px rgba(0,0,0,0.7);
  position: relative; z-index: 2;
}
.os-hero-title {
  font-family: var(--os-font-display);
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 700; color: var(--os-text-primary);
  line-height: 1.05;
  text-shadow: 0 2px 24px rgba(0,0,0,0.8);
  position: relative; z-index: 2; margin-top: 8px;
}
.os-hero-title span { color: var(--os-accent); }
.os-hero-tagline {
  font-family: var(--os-font-display);
  font-style: italic; font-size: 17px; color: #e0d0c0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.7);
  position: relative; z-index: 2; margin-top: 10px;
}

/* ----- Day Filter ----- */
.os-day-filter {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 18px 20px;
  scrollbar-width: none;
  max-width: 900px; margin: 0 auto;
}
.os-day-filter::-webkit-scrollbar { display: none; }
.os-day-btn {
  font-family: var(--os-font-body);
  font-size: 13px; font-weight: 600;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px; background: transparent;
  color: var(--os-text-muted);
  cursor: pointer; white-space: nowrap;
  transition: all 0.2s;
}
.os-day-btn:hover {
  border-color: var(--os-accent-glow);
  color: var(--os-text-secondary);
}
.os-day-btn.active {
  background: linear-gradient(135deg, var(--os-accent), var(--os-accent-hover));
  color: var(--os-bg-primary); border-color: transparent;
  box-shadow: 0 2px 16px var(--os-accent-glow);
}

/* ----- Custom Specials Cards ----- */
.os-specials-list {
  padding: 8px 20px 40px;
  max-width: 900px;
  margin: 0 auto;
}
.os-special-card {
  background: var(--os-bg-card);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius);
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}
.os-special-card:hover {
  border-color: var(--os-border-hover);
  box-shadow: 0 4px 30px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}
.os-special-card.os-featured {
  border-color: var(--os-sunset-gold) !important;
  box-shadow: 0 0 20px rgba(240,192,96,0.15);
}
.os-featured-badge {
  position: absolute; top: 12px; right: 12px;
  background: linear-gradient(135deg, var(--os-sunset-gold), var(--os-sunset-orange));
  color: var(--os-bg-primary);
  font-family: var(--os-font-body);
  font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 12px;
  letter-spacing: 0.5px; text-transform: uppercase; z-index: 5;
}
.os-card-header {
  padding: 18px 20px 8px;
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 10px;
}
.os-card-title {
  font-family: var(--os-font-display) !important;
  font-size: 22px !important; font-weight: 700 !important;
  color: var(--os-text-primary) !important;
  line-height: 1.15; text-decoration: none !important;
}
.os-card-title:hover { color: var(--os-accent) !important; }
.os-card-town {
  font-family: var(--os-font-body);
  font-size: 11px; font-weight: 700;
  color: var(--os-accent);
  background: rgba(56,189,248,0.1);
  padding: 4px 10px; border-radius: 12px;
  white-space: nowrap; flex-shrink: 0;
}
.os-card-address {
  font-family: var(--os-font-body);
  font-size: 13px; color: var(--os-text-muted);
  padding: 0 20px 14px;
}
.os-card-special {
  padding: 14px 20px;
  display: flex; gap: 14px; align-items: flex-start;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.os-card-icon {
  font-size: 20px; flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
}
.os-card-details { flex: 1; min-width: 0; }
.os-cat-badge {
  display: inline-block; padding: 2px 8px;
  border-radius: 5px;
  font-family: var(--os-font-body);
  font-size: 11px; font-weight: 600;
  border: 1px solid; margin-right: 8px;
}
.os-card-days {
  font-family: var(--os-font-body);
  font-size: 12px; font-weight: 600;
  color: var(--os-accent); margin-right: 8px;
}
.os-card-time {
  font-family: var(--os-font-body);
  font-size: 12px; color: #506878;
}
.os-card-desc {
  font-family: var(--os-font-body);
  font-size: 14px; color: var(--os-text-secondary);
  margin-top: 8px; line-height: 1.5;
}
.os-card-phone {
  font-family: var(--os-font-body);
  font-size: 13px; color: #506878;
  padding: 8px 20px 14px;
}

/* ----- Forms ----- */
input[type="text"], input[type="email"], input[type="search"],
input[type="url"], select, textarea {
  font-family: var(--os-font-body); font-size: 13px;
  padding: 10px 14px;
  background: var(--os-bg-input) !important;
  color: var(--os-text-secondary) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: var(--os-radius-sm) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(56,189,248,0.4) !important;
}

/* ----- Buttons ----- */
.wp-block-button__link, button[type="submit"],
input[type="submit"], .geodir-button {
  background: linear-gradient(135deg, var(--os-accent), var(--os-accent-hover)) !important;
  color: var(--os-bg-primary) !important;
  font-family: var(--os-font-body) !important;
  font-weight: 600; padding: 10px 20px;
  border-radius: var(--os-radius-sm); border: none;
  cursor: pointer; box-shadow: 0 2px 12px var(--os-accent-glow);
}

/* ----- Footer ----- */
.site-footer {
  background: var(--os-bg-primary) !important;
  border-top: 1px solid var(--os-border);
  color: var(--os-text-muted);
  text-align: center; padding: 30px 20px; font-size: 13px;
}
.site-footer a { color: var(--os-accent); }

/* ----- Responsive ----- */
@media (max-width: 768px) {
  .os-hero { padding: 40px 16px 32px; min-height: 220px; }
  .os-hero-title { font-size: 30px; }
  .os-specials-list { padding: 8px 12px 40px; }
  .os-card-header { flex-direction: column; gap: 6px; }
}

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,700;1,6..72,400&family=DM+Sans:wght@400;500;600;700&display=swap');