/**
 * Theme Name: Tusant SecondLine Child
 * Description: This is a child theme of Tusant SecondLine.
 * Author: <a href="https://secondlinethemes.com/">SecondLineThemes</a>
 * Template: tusant-secondline
 * Version: 1.5.3
 */

/* =====================================================
   ACCIDENTAL VIBES — Brand CSS
   Palette confirmed May 2026
   ===================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Color Variables ── */
:root {
  --av-midnight:  #050505;
  --av-graphite:  #1A1A1A;
  --av-green:     #39FF14;
  --av-gold:      #F5C400;
  --av-red:       #FF3131;
  --av-gray:      #888888;
  --av-white:     #F5F5F5;
}

/* ── Global Background & Text ── */
body {
  background-color: var(--av-midnight);
  color: var(--av-white);
  font-family: 'Inter', sans-serif;
}

/* ── Typography: Headings → Bebas Neue ── */
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.page-title,
.secondline-podcast-title,
.secondline-section-title,
.widget-title,
.wp-block-heading {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--av-white);
}

/* ── Typography: Body / Captions → Inter ── */
body,
p,
li,
.entry-content,
.widget,
input,
textarea,
select,
button,
.secondline-podcast-description {
  font-family: 'Inter', sans-serif;
}

/* ── Hero H1 accent ── */
.entry-title em,
h1 em,
h2 em {
  font-style: normal;
  color: var(--av-red);
}

/* ── Site Header ── */
#masthead,
.site-header,
.secondline-header {
  background-color: var(--av-graphite);
  border-bottom: 2px solid var(--av-red);
}

/* ── Navigation ── */
.main-navigation a,
.secondline-nav a {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--av-white);
  transition: color 0.2s ease;
}

.main-navigation a:hover,
.secondline-nav a:hover,
.main-navigation .current-menu-item > a {
  color: var(--av-green);
}

/* ── Links ── */
a {
  color: var(--av-gold);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--av-green);
}

/* ── Buttons ── */
.wp-block-button__link,
.button,
.btn,
input[type="submit"],
.secondline-button,
.secondline-subscribe-button {
  background-color: var(--av-red);
  color: var(--av-white) !important;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
  font-size: 1rem;
  border: none;
  border-radius: 3px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button__link:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover,
.secondline-button:hover,
.secondline-subscribe-button:hover {
  background-color: var(--av-gold);
  color: var(--av-midnight) !important;
}

/* ── Accent / Highlight Color ── */
.secondline-primary-color,
.accent,
::selection {
  background-color: var(--av-red);
  color: var(--av-white);
}

/* ── Episode / Podcast Cards ── */
.secondline-podcast-episode,
.secondline-episodes-list li,
.podcast-episode-item {
  background-color: var(--av-graphite);
  border-left: 3px solid var(--av-green);
  border-radius: 4px;
}

/* ── Footer ── */
#colophon,
.site-footer,
.secondline-footer {
  background-color: var(--av-graphite);
  border-top: 2px solid var(--av-red);
  color: var(--av-gray);
}

#colophon a,
.site-footer a,
.secondline-footer a {
  color: var(--av-gold);
}

#colophon a:hover,
.site-footer a:hover,
.secondline-footer a:hover {
  color: var(--av-green);
}

/* ── Tagline ── */
.site-description,
.secondline-tagline {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--av-gold);
}

/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--av-graphite); }
::-webkit-scrollbar-thumb { background: var(--av-red); border-radius: 3px; }

/* ── About Page: Host Card Layout ── */
.host-card {
  align-items: flex-start;
  margin-bottom: 40px;
}

.host-card .wp-block-image img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 4px 24px rgba(255, 49, 49, 0.18);
}

.host-card h3 {
  margin-top: 0;
  color: var(--av-white);
  font-size: 2rem;
}

.host-card p em {
  color: var(--av-gold);
  font-style: italic;
  font-size: 1.05rem;
  display: block;
  margin-bottom: 12px;
}

/* ── Responsive: stack host cards on mobile ── */
@media (max-width: 600px) {
  .host-card.wp-block-columns {
    flex-direction: column;
  }
  .host-card .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* ── Header Logo Size ── */
.secondline-themes-default-logo,
.custom-logo,
.site-logo img {
  max-height: 60px !important;
  width: auto !important;
}

/* ── Page Title Banner ── */
/* Hero texture: banner only, nowhere else */
#page-title-slt {
  background-image: url("https://accidentalvibes.com/wp-content/uploads/2026/05/av-hero-texture-1920x1080-1.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
}

/* Dark overlay so text is always readable */
#page-title-slt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.62);
  z-index: 0;
}

/* Keep all banner content above the overlay */
#page-title-slt > * {
  position: relative;
  z-index: 1;
}

/* Banner text: gold with subtle shadow */
#page-title-slt h1,
#page-title-slt h2,
#page-title-slt h3,
#page-title-slt h4,
#page-title-slt .page-title,
#page-title-slt #secondline-themes-page-title-container * {
  color: var(--av-white) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* Nav links inside banner (if theme renders them there) */
#page-title-slt a,
#page-title-slt .main-navigation a,
#page-title-slt .secondline-nav a,
#page-title-slt nav a {
  color: var(--av-white) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
/* ============================================================
   CONTACT PAGE
   ============================================================ */
.av-contact-intro {
  font-size: 1.15rem;
  color: var(--av-gray);
  margin-bottom: 2.5rem;
  max-width: 640px;
}

.av-contact-cards {
  gap: 1.5rem !important;
}

.av-contact-card {
  background: var(--av-graphite);
  border-top: 3px solid var(--av-red);
  border-radius: 6px;
  padding: 1.75rem !important;
}

.av-contact-card h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--av-white);
  margin-bottom: 0.25rem;
}

.av-contact-card p em {
  color: var(--av-gold);
  font-style: normal;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.av-contact-card a {
  color: var(--av-green);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  word-break: break-all;
  transition: color 0.2s ease;
}

.av-contact-card a:hover {
  color: var(--av-white);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .av-contact-cards.wp-block-columns {
    flex-direction: column;
  }
}