/*
Theme Name: Releasing When
Theme URI: https://releasingwhen.com
Author: Releasing When
Author URI: https://releasingwhen.com
Description: Lightweight custom theme for Releasing When. Replaces Elementor for header and footer. Works with the RW Shortcode plugin for the release calendar. Clean, fast, and focused on performance and accessibility.
Version: 1.2.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: releasing-when
*/

/* =========================================
   Custom Theme Header 
   ========================================= */

/* Whole site backgrounds: white in lite, #232429 in dark.
   Helps eliminate old Elementor/gray bgs and ensures instant visible updates when combined with cache-busted CSS. */
html,
body {
	overflow-x: hidden;
}

body {
	background-color: #fff;
}
body.rw-dark-mode {
	background-color: #232429 !important;
}

.site-header {
    background: #000;
    color: #fff;
    width: 100%;
}

.header-brand {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 20px; /* thinner bar */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    display: block;
}

.site-logo img {
    width: 252px;
    height: 116px;
    display: block;
    transition: transform 0.2s ease;
}

.site-logo:hover img {
    animation: logo-bounce 1.5s infinite ease-in-out; /* even slower constant bounce */
}

@keyframes logo-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); } /* lower bounce */
}

.social-icons {
    display: flex;
    gap: 20px; /* more spread */
    align-items: center;
}

.social-icons a {
    display: block;
    color: #0A95AA;
}

.social-icons a:hover {
    color: #089A53;
}

.social-icons a svg {
    width: 40px;
    height: 40px;
    display: block;
    transition: color 0.2s ease;
}

.social-icons a:hover svg {
    animation: icon-pulse 1.1s infinite ease-in-out; /* pulse in and out */
}

@keyframes icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

.site-nav-bar {
    background: #E12929; /* true red, not orange */
    color: #fff;
    padding: 4px 0; /* even thinner */
    font-size: 13px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%; /* full width */
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.site-nav-bar::-webkit-scrollbar {
    display: none;
}

.site-nav-bar a {
    color: #fff;
    text-decoration: none;
    padding: 3px 10px;
    transition: color 1.2s ease-in-out; /* even slower fade */
    font-weight: bold;
    flex-shrink: 0;
    white-space: nowrap;
}

.site-nav-bar a:hover {
    color: #000; /* white to black, no background change */
}

@media (max-width: 768px) {
	.header-brand {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		padding: 12px 16px;
	}

	.site-logo img {
		width: auto;
		max-width: min(220px, 72vw);
		height: auto;
	}

	.social-icons {
		justify-content: center;
		flex-wrap: wrap;
		gap: 14px;
	}

	.social-icons a svg {
		width: 34px;
		height: 34px;
	}
}

/* Skip link: hidden until keyboard focus */
a.skip-link.screen-reader-text {
	position: absolute;
	top: -9999px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999999;
	padding: 10px 20px;
	background: #000;
	color: #fff;
	font-size: 16px;
	text-decoration: none;
	border: 2px solid #fff;
	white-space: nowrap;
}

a.skip-link.screen-reader-text:focus,
a.skip-link.screen-reader-text:active {
	top: 10px;
	clip: auto;
	width: auto;
	height: auto;
	overflow: visible;
}

/* Lite / Dark mode support */
body.rw-dark-mode .site-header {
  background: #000;
  color: #fff;
}

body:not(.rw-dark-mode) .site-header {
  background: #fff;
  color: #111;
}

body:not(.rw-dark-mode) .site-nav-bar {
  background: #b91c1c;
  color: #fff;
}

/* =========================================
   REFINECG Footer
   ========================================= */

.rw-footer {
  width: 100vw;
  max-width: 100vw;
  margin-top: 48px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  background:
    radial-gradient(circle at center top, rgba(255,255,255,0.04), transparent 38%),
    linear-gradient(180deg, #1b1b1f 0%, #101113 100%);
  color: #d2d2d2;
  font-size: 16px;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 20px 40px rgba(255,255,255,0.015);
}

.rw-footer-topbar {
  width: 100%;
  height: 55px;
  background: linear-gradient(90deg, #2f2f34 0%, #232327 50%, #2f2f34 100%);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.rw-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 351px minmax(160px, 1fr) minmax(220px, 1fr) minmax(220px, 1.1fr);
  gap: 40px;
  align-items: start;
  min-height: 340px;
}

.rw-footer-brand {
  position: relative;
  width: 351px;
  height: 340px;
  margin-top: -58px;
}

/* Desktop/tablet: orange diagonal wedge above brand block */
.rw-footer-brand::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 418px;
  height: 55px;
  background: linear-gradient(135deg, #D31717 0%, #F5612E 100%);
  clip-path: polygon(19% 0, 100% 0, 84% 100%, 0 100%);
  z-index: 3;
  display: block;
  line-height: 0;
}

.rw-footer-brand-link {
  position: absolute;
  top: 54px;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  width: 351px;
  height: auto;
  margin: 0;
  background: #F84103;
  text-decoration: none;
  box-shadow: 0 18px 32px rgba(0,0,0,0.35);
  overflow: hidden;
}

.rw-footer-brand-image {
  display: block;
  width: calc(100% - 10px);
  height: calc(100% - 0px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  padding: 0;
}

.rw-footer-col {
  padding: 96px 0 28px;
  font-size: 15px;
}

.rw-footer-sites,
.rw-footer-listen,
.rw-footer-community {
  margin-left: 40px;
}

.rw-footer-sites .rw-footer-links {
  width: fit-content;
  margin: 0 auto;
  text-align: left;
}

.rw-footer-title {
  margin: 18px 0 20px;
  color: #b8ff72;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow:
    0 0 6px rgba(184,255,114,0.45),
    0 0 14px rgba(184,255,114,0.2);
}

.rw-footer-links,
.rw-social-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rw-footer-links li,
.rw-social-grid li {
  margin: 0 0 14px;
}

.rw-footer-links li {
  position: relative;
  padding-left: 16px;
}

.rw-footer-links li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 8px;
  color: #ffffff;
}

.rw-footer .rw-footer-col a:link,
.rw-footer .rw-footer-col a:visited,
.rw-footer .rw-footer-bottom a:link,
.rw-footer .rw-footer-bottom a:visited {
  color: #ffffff !important;
  text-decoration: none;
}

.rw-footer .rw-footer-col a:hover,
.rw-footer .rw-footer-col a:focus,
.rw-footer .rw-footer-col a:active,
.rw-footer .rw-footer-col a:visited:hover,
.rw-footer .rw-footer-bottom a:hover,
.rw-footer .rw-footer-bottom a:focus,
.rw-footer .rw-footer-bottom a:active,
.rw-footer .rw-footer-bottom a:visited:hover {
  color: #F84103 !important;
  text-shadow: none;
}

.rw-footer-media {
  max-width: 250px;
}

.rw-footer-audio {
  display: block;
  width: 100%;
  min-height: 54px;
  filter: contrast(1.08) brightness(0.9);
}

.rw-social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  column-gap: 34px;
  row-gap: 4;
}

.rw-footer-bottom {
  width: 100%;
  background: #060606;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.rw-footer-bottom-inner {
  max-width: 1200px;
  min-height: 35px;
  margin: 0 auto;
  padding: 8px 24px 10px;
  display: grid;
  grid-template-columns: 351px 1fr;
  align-items: center;
  gap: 0;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.35;
}

.rw-footer-bottom-inner span {
  text-align: center;
}

.rw-footer-bottom-inner a {
  justify-self: end;
}

.rw-footer-bottom a {
  color: #8c8c8c;
  text-decoration: none;
}

.rw-footer-bottom a:hover {
  color: #ffffff;
}

@media (max-width: 1080px) and (min-width: 769px) {
  .rw-footer-inner {
    grid-template-columns: 190px 1fr 1fr;
    gap: 32px;
  }

  .rw-footer-community {
    grid-column: 2 / 4;
  }

  .rw-footer-brand-link {
    max-width: 190px;
  }
}

@media (max-width: 768px) {
  .rw-footer-topbar {
    height: 28px;
    position: relative;
    z-index: 1;
  }

  .rw-footer-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 0 20px;
    min-height: auto;
    justify-items: stretch;
    max-width: 320px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
  }

  .rw-footer-brand {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 280px;
    margin: -28px auto 0;
    padding: 0;
    overflow: visible;
    z-index: 3;
  }

  /*
   * Mobile wedge — lock to the orange box (not 100vw).
   * Same left edge + 418/351 width ratio as desktop so the diagonal meets the orange block.
   */
  .rw-footer-brand::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% * 418 / 351);
    height: 28px;
    transform: none;
    background: linear-gradient(135deg, #D31717 0%, #F5612E 100%);
    clip-path: polygon(19% 0, 100% 0, 84% 100%, 0 100%);
    z-index: 4;
    display: block;
    line-height: 0;
  }

  .rw-footer-brand-link {
    position: absolute;
    top: 27px;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 0;
    transform: none;
    margin: 0;
    max-width: 100% !important;
    justify-content: center;
    align-items: center;
    z-index: 2;
  }

  .rw-footer-brand-image {
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    margin: auto;
  }

  .rw-footer-col,
  .rw-footer-sites,
  .rw-footer-listen,
  .rw-footer-community {
    grid-column: auto;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    padding: 28px 20px 0;
    box-sizing: border-box;
    text-align: center;
  }

  .rw-footer-title {
    margin: 0 0 18px;
    font-size: 18px;
    text-align: center;
  }

  .rw-footer-sites .rw-footer-links {
    width: fit-content;
    margin: 0 auto;
    text-align: left;
  }

  .rw-footer-media {
    max-width: 100%;
    width: 100%;
  }

  .rw-footer-audio {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
  }

  .rw-footer-community {
    text-align: center;
  }

  .rw-social-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(92px, 120px));
    justify-content: center;
    justify-items: center;
    column-gap: 24px;
    row-gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .rw-social-grid li {
    width: 100%;
    text-align: center;
  }

  .rw-social-grid li a {
    display: inline-block;
    text-align: center;
  }

  .rw-footer-bottom-inner {
    max-width: 320px;
    width: 100%;
    min-height: auto;
    margin: 0 auto;
    padding: 12px 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    box-sizing: border-box;
  }

  .rw-footer-bottom-inner span,
  .rw-footer-bottom-inner a {
    width: 100%;
    text-align: center;
    justify-self: center;
  }
}

@media (max-width: 480px) {
  .rw-social-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/*NEW ADDITIONS*/
/* =========================================
   Social Icons - Fixed for Light + Dark
   ========================================= */
.header-brand .social-icons a,
.social-icons a,
body .social-icons a {
    color: #0A95AA !important;
    transition: color 0.25s ease;
}

.header-brand .social-icons a:hover,
.social-icons a:hover,
body .social-icons a:hover {
    color: #089A53 !important;
}

.social-icons a svg {
    fill: currentColor !important;
}

/* Dark Mode Specific */
body.rw-dark-mode .social-icons a,
body.rw-dark-mode .header-brand .social-icons a {
    color: #0A95AA !important;
}

body.rw-dark-mode .social-icons a:hover,
body.rw-dark-mode .header-brand .social-icons a:hover {
    color: #089A53 !important;
}
/* =========================================
   Red Nav Bar (Site Links)
   ========================================= */
.site-nav-bar {
    background: #E12929 !important;
    color: #fff !important;
}

@media (max-width: 900px) {
	.site-nav-bar {
		justify-content: flex-start !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		padding-left: 8px;
		padding-right: 8px;
		gap: 2px;
	}

	.site-nav-bar a {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* Red Nav Bar - Stronger Hover for All Links */
.site-nav-bar,
.site-nav-bar a,
.header-brand .site-nav-bar a,
.site-nav-bar a[href] {
    color: #fff !important;
    transition: color 1.2s ease-in-out !important;
}

.site-nav-bar a:hover,
.header-brand .site-nav-bar a:hover,
.site-nav-bar a[href]:hover {
    color: #000 !important;
}

/* Dark Mode */
body.rw-dark-mode .site-nav-bar {
    background: #E12929 !important; /* keep it red */
    color: #fff !important;
}

body.rw-dark-mode .site-nav-bar a {
    color: #fff !important;
}

body.rw-dark-mode .site-nav-bar a:hover {
    color: #000 !important;
}

/* =========================================
   Calendar layout (card sizing lives in RW plugin CSS)
   ========================================= */

/* 4-column grid with spacing — card size you approved on staging */
.rw-releases-grid {
	grid-template-columns: repeat(4, 1fr) !important;
	column-gap: 2rem !important;
	row-gap: 2.5rem !important;
	align-items: start !important;
}

@media (max-width: 900px) {
	.rw-releases-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 768px) {
	.rw-releases-grid {
		grid-template-columns: 1fr !important;
		column-gap: 1.25rem !important;
		row-gap: 1.75rem !important;
	}
}

/* Week headings visible on lite white page */
.rw-releases-shell.rw-force-light .rw-date-label,
.rw-releases-shell.rw-force-light h3.rw-date-label,
.rw-releases-shell.rw-force-light h4.rw-date-label {
	color: #222 !important;
}

.rw-date-label,
h3.rw-date-label,
h4.rw-date-label {
	font-size: 1.1rem !important;
	font-weight: 600 !important;
}

/* Lite glow is tuned in the RW plugin CSS (do not override box-shadow here — it kills the neon border) */