/*
Theme Name:  Select/Reject
Theme URI:   https://selectreject.nicholasshore.eu
Author:      Select/Reject
Description: Official website theme for Select/Reject — a three-piece rock band from Vienna. Built on the Select/Reject Design System v1.0.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: selectreject
Tags:        music, band, dark, custom-menu, featured-images, translation-ready
*/

/*
 * Design tokens are loaded separately from assets/css/sr-design-tokens.css
 * This file contains theme layout and component styles only.
 * ════════════════════════════════════════════════════════════════════════════
 */

/* ── WordPress admin bar offset ─────────────────────────────────────────── */
.admin-bar .sr-site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .sr-site-header {
    top: 46px;
  }
}

/* ── Skip link (accessibility) ───────────────────────────────────────────── */
.sr-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sr-skip-link:focus {
  left: var(--sr-sp-3);
  top: var(--sr-sp-3);
  width: auto;
  height: auto;
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wide);
  text-transform: uppercase;
  background: var(--sr-amber);
  color: var(--sr-ink);
  padding: 0.5rem 1rem;
  z-index: var(--sr-z-modal);
  text-decoration: none;
}

/* ── Site header ─────────────────────────────────────────────────────────── */
.sr-site-header {
  position: sticky;
  top: 0;
  z-index: var(--sr-z-above);
  background: var(--sr-ink);
  border-bottom: 1px solid #1a1a1a;
  padding-block: var(--sr-sp-2);
}
.sr-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-sp-4);
  max-width: var(--sr-container);
  margin-inline: auto;
  padding-inline: var(--sr-gutter);
}
.sr-site-header__logo {
  text-decoration: none;
  flex-shrink: 0;
}

/* ── Primary navigation ──────────────────────────────────────────────────── */
.sr-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--sr-sp-4);
  align-items: center;
}
.sr-nav__list a {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wider);
  text-transform: uppercase;
  color: var(--sr-muted-dark);
  text-decoration: none;
  transition: var(--sr-transition);
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}
.sr-nav__list a:hover,
.sr-nav__list .current-menu-item > a,
.sr-nav__list .current-page-item > a,
.sr-nav__list .current-menu-ancestor > a {
  color: var(--sr-amber);
  border-bottom-color: var(--sr-amber);
}

/* Dropdown sub-menus */
.sr-nav__list .menu-item-has-children {
  position: relative;
}
.sr-nav__list .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--sr-surface);
  border: 1px solid #333;
  border-top: 2px solid var(--sr-amber);
  padding: var(--sr-sp-1) 0;
  min-width: 180px;
  list-style: none;
  margin: 0;
  z-index: var(--sr-z-overlay);
}
.sr-nav__list .menu-item-has-children:hover > .sub-menu,
.sr-nav__list .menu-item-has-children:focus-within > .sub-menu {
  display: block;
}
.sr-nav__list .sub-menu a {
  display: block;
  padding: 0.5rem 1.25rem;
  border-bottom: none;
  color: var(--sr-muted-dark);
  white-space: nowrap;
}
.sr-nav__list .sub-menu a:hover {
  color: var(--sr-amber);
  background: rgba(201, 168, 76, 0.05);
  border-bottom: none;
}

/* Hamburger toggle (mobile) */
.sr-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: 4px;
}
.sr-nav-toggle span {
  display: block;
  height: 2px;
  background: var(--sr-bone);
  transition: var(--sr-transition);
  transform-origin: center;
}
.sr-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.sr-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.sr-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .sr-nav-toggle {
    display: flex;
  }
  .sr-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sr-ink);
    border-top: 2px solid var(--sr-amber);
    padding: var(--sr-sp-3) var(--sr-sp-5);
    z-index: var(--sr-z-above);
  }
  .sr-nav.is-open {
    display: block;
  }
  .sr-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .sr-nav__list > li {
    width: 100%;
    border-bottom: 1px solid #1a1a1a;
  }
  .sr-nav__list > li:last-child {
    border-bottom: none;
  }
  .sr-nav__list a {
    display: block;
    padding-block: var(--sr-sp-2);
    border-bottom: none;
  }
  .sr-nav__list .sub-menu {
    position: static;
    border: none;
    border-top: none;
    padding: 0 0 0 var(--sr-sp-3);
    background: transparent;
    display: block;
  }
  .sr-nav__list .sub-menu a {
    padding: var(--sr-sp-1) 0;
    font-size: 0.625rem;
  }
}

/* ── Main content ────────────────────────────────────────────────────────── */
.sr-main {
  min-height: 60vh;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.sr-page-header {
  padding-block: var(--sr-sp-10) var(--sr-sp-6);
  border-bottom: 1px solid #1a1a1a;
}
.sr-page-content {
  padding-block: var(--sr-sp-8) var(--sr-sp-12);
}

/* ── Content area (WP block editor output) ───────────────────────────────── */
.sr-content-area {
  color:     var(--sr-bone);
  max-width: 100%; /* fills the container; see single.php for post prose width */
}
/* Narrower prose width only on single blog posts for readability */
.single .sr-content-area {
  max-width: 720px;
}
.sr-content-area p {
  margin-bottom: var(--sr-sp-3);
  line-height: var(--sr-leading-relaxed);
}
.sr-content-area a {
  color: var(--sr-amber);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sr-content-area a:hover {
  color: var(--sr-amber-light);
}
.sr-content-area h1,
.sr-content-area h2,
.sr-content-area h3,
.sr-content-area h4 {
  font-family: var(--sr-font-display);
  line-height: var(--sr-leading-tight);
  color: var(--sr-bone);
  margin-top: var(--sr-sp-6);
  margin-bottom: var(--sr-sp-2);
}
.sr-content-area h1 { font-size: var(--sr-text-3xl); }
.sr-content-area h2 { font-size: var(--sr-text-2xl); }
.sr-content-area h3 { font-size: var(--sr-text-xl); }
.sr-content-area ul,
.sr-content-area ol {
  padding-left: 1.5rem;
  margin-bottom: var(--sr-sp-3);
  color: var(--sr-bone);
}
.sr-content-area li {
  margin-bottom: var(--sr-sp-1);
}
.sr-content-area blockquote {
  border-left: var(--sr-stroke-amber);
  padding: var(--sr-sp-3) var(--sr-sp-5);
  margin-block: var(--sr-sp-6);
  background-color: var(--sr-surface);
  font-style: italic;
  font-size: var(--sr-text-lg);
  color: var(--sr-bone);
}
.sr-content-area img {
  max-width: 100%;
  height: auto;
}
.sr-content-area figure {
  margin: var(--sr-sp-4) 0;
}
.sr-content-area figcaption {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wide);
  text-transform: uppercase;
  color: var(--sr-muted-dark);
  margin-top: var(--sr-sp-1);
}

/* WP block editor embed wrapper */
.sr-content-area .wp-block-embed__wrapper {
  position: relative;
  padding-top: 56.25%;
}
.sr-content-area .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ── Hero section ────────────────────────────────────────────────────────── */
.sr-hero {
  padding-block: var(--sr-sp-12);
}
.sr-hero__wordmark {
  font-size: clamp(3.5rem, 14vw, 9rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  color: var(--sr-bone);
  margin-bottom: var(--sr-sp-6);
}
.sr-hero__tagline {
  font-family: var(--sr-font-punk);
  font-size: var(--sr-text-xl);
  color: var(--sr-amber-light);
  margin-bottom: var(--sr-sp-4);
}
.sr-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-sp-1);
  margin-bottom: var(--sr-sp-6);
}
.sr-hero__bio {
  font-style: italic;
  font-size: var(--sr-text-lg);
  color: var(--sr-muted-dark);
  max-width: 680px;
  margin-bottom: 0;
}

/* ── Section blocks ──────────────────────────────────────────────────────── */
.sr-section-block {
  padding-block: var(--sr-sp-10);
  border-top: 1px solid #1a1a1a;
}
.sr-section-block__header {
  margin-bottom: var(--sr-sp-6);
}

/* ── Blog post cards ─────────────────────────────────────────────────────── */
.sr-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sr-sp-4);
}
.sr-post-card {
  background: var(--sr-surface);
  padding: var(--sr-sp-4);
  border-top: 2px solid transparent;
  transition: var(--sr-transition);
}
.sr-post-card:hover {
  border-top-color: var(--sr-amber);
}
.sr-post-card__date {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wide);
  text-transform: uppercase;
  color: var(--sr-amber);
  margin-bottom: var(--sr-sp-2);
}
.sr-post-card__title {
  font-family: var(--sr-font-display);
  font-size: var(--sr-text-xl);
  line-height: var(--sr-leading-tight);
  margin-bottom: var(--sr-sp-2);
}
.sr-post-card__title a {
  color: var(--sr-bone);
  text-decoration: none;
  transition: var(--sr-transition);
}
.sr-post-card__title a:hover {
  color: var(--sr-amber);
}
.sr-post-card__excerpt {
  color: var(--sr-muted-dark);
  font-size: 0.9375rem;
  line-height: var(--sr-leading-relaxed);
  margin-bottom: var(--sr-sp-3);
}
.sr-post-card__more {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wider);
  text-transform: uppercase;
  color: var(--sr-amber);
  text-decoration: none;
}
.sr-post-card__more:hover {
  color: var(--sr-amber-light);
}

/* Single post */
.sr-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-sp-3);
  align-items: center;
  margin-bottom: var(--sr-sp-6);
  padding-bottom: var(--sr-sp-4);
  border-bottom: 1px solid #1a1a1a;
}
.sr-post-meta__date {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wide);
  text-transform: uppercase;
  color: var(--sr-amber);
}
.sr-post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sr-sp-4);
  padding-block: var(--sr-sp-8);
  border-top: 1px solid #1a1a1a;
  margin-top: var(--sr-sp-8);
}
.sr-post-nav a {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wide);
  text-transform: uppercase;
  color: var(--sr-muted-dark);
  text-decoration: none;
  transition: var(--sr-transition);
}
.sr-post-nav a:hover {
  color: var(--sr-amber);
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.nav-links,
.posts-navigation .nav-links {
  display: flex;
  gap: var(--sr-sp-1);
  flex-wrap: wrap;
  padding-block: var(--sr-sp-6);
}
.nav-links a,
.nav-links span.current,
.posts-navigation .nav-links a {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wide);
  text-transform: uppercase;
  color: var(--sr-muted-dark);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid #333;
  transition: var(--sr-transition);
}
.nav-links a:hover {
  border-color: var(--sr-amber);
  color: var(--sr-amber);
}
.nav-links span.current {
  border-color: var(--sr-amber);
  color: var(--sr-amber);
}

/* ── Site footer ─────────────────────────────────────────────────────────── */
.sr-site-footer {
  background: var(--sr-ink);
  border-top: 1px solid #1a1a1a;
  padding-top: var(--sr-sp-3);
  padding-bottom: var(--sr-sp-8);
  margin-top: var(--sr-sp-12);
}
.sr-footer-wave {
  display: block;
  overflow: visible;
  margin-bottom: var(--sr-sp-6);
}
.sr-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--sr-sp-6);
  align-items: start;
}
.sr-footer__brand {
  grid-column: 1;
  grid-row: 1;
}
.sr-footer__social {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sr-sp-1);
}
.sr-footer__nav {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}
.sr-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-sp-3);
  justify-content: flex-end;
}
.sr-footer__nav-list a {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wide);
  text-transform: uppercase;
  color: var(--sr-muted-dark);
  text-decoration: none;
  transition: var(--sr-transition);
}
.sr-footer__nav-list a:hover {
  color: var(--sr-amber);
}
.sr-footer__legal {
  grid-column: 1 / -1;
  border-top: 1px solid #1a1a1a;
  padding-top: var(--sr-sp-3);
}

@media (max-width: 640px) {
  .sr-footer__inner {
    grid-template-columns: 1fr;
  }
  .sr-footer__nav {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }
  .sr-footer__nav-list {
    justify-content: flex-start;
  }
}

/* ── 404 page ─────────────────────────────────────────────────────────────── */
.sr-404 {
  padding-block: var(--sr-sp-12);
  text-align: center;
}
.sr-404__code {
  font-family: var(--sr-font-display);
  font-size: clamp(6rem, 20vw, 14rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: #1a1a1a;
  user-select: none;
}
.sr-404__message {
  font-style: italic;
  font-size: var(--sr-text-lg);
  color: var(--sr-muted-dark);
  margin-bottom: var(--sr-sp-6);
}
.sr-back-link {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-2xs);
  letter-spacing: var(--sr-tracking-wider);
  text-transform: uppercase;
  color: var(--sr-amber);
  text-decoration: none;
  border-bottom: 1px solid var(--sr-amber);
  padding-bottom: 2px;
}
.sr-back-link:hover {
  color: var(--sr-amber-light);
  border-color: var(--sr-amber-light);
}

/* ── Hero with background image ──────────────────────────────────────────── */
.sr-hero--has-bg {
  position:            relative;
  background-size:     cover;
  background-position: center top;
  background-repeat:   no-repeat;
  min-height:          85vh;
  display:             flex;
  align-items:         center; /* centre content vertically in the gradient mid-zone */
}

/* Gradient overlay: darker overall so bright daylight photos still look moody.
   Top is substantially dark so the big wordmark is always readable. */
.sr-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    rgba(14, 14, 14, 0.60) 0%,
    rgba(14, 14, 14, 0.55) 35%,
    rgba(14, 14, 14, 0.80) 70%,
    rgba(14, 14, 14, 1.00) 100%
  );
  pointer-events: none;
}

.sr-hero__content {
  position: relative;
  z-index:  1;
  width:    100%;
}

/* Without a background image the hero keeps its original padding */
.sr-hero:not(.sr-hero--has-bg) {
  padding-block: var(--sr-sp-12);
}

/* ── Page header with background image ───────────────────────────────────── */
.sr-page-header--has-bg {
  position:            relative;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  padding-block:       var(--sr-sp-14) var(--sr-sp-10);
}

/* Dark gradient overlay keeps heading text readable over any photo */
.sr-page-header__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    rgba(14, 14, 14, 0.55) 0%,
    rgba(14, 14, 14, 0.85) 100%
  );
  pointer-events: none;
}

/* Add amber left-border accent to the heading when there is a bg image */
.sr-page-header--has-bg h1.sr-heading-display {
  border-left:  var(--sr-stroke-amber);
  padding-left: var(--sr-sp-4);
}

/* ── Member photo cards (homepage) ───────────────────────────────────────── */
.sr-member-grid {
  display:     grid;
  grid-template-columns: repeat(3, 1fr);
  gap:         var(--sr-sp-6);
  margin-top:  var(--sr-sp-8);
}

.sr-member-card {
  display:        flex;
  flex-direction: column;
}

/* Photo wrapper — clips the image on hover zoom */
.sr-member-card__photo-wrap {
  display:    block;
  overflow:   hidden;
  position:   relative;
  /* aspect ratio applied via the img / placeholder inside */
}

/* Photo */
.sr-member-card__photo {
  width:        100%;
  aspect-ratio: 3 / 4;
  object-fit:   cover;
  display:      block;
  filter:       grayscale(25%);
  transition:   filter 0.35s ease, transform 0.35s ease;
}

a.sr-member-card__photo-wrap:hover .sr-member-card__photo {
  filter:    grayscale(0%);
  transform: scale(1.04);
}

/* Placeholder shown before a photo is uploaded */
.sr-member-card__placeholder {
  width:           100%;
  aspect-ratio:    3 / 4;
  background:      var(--sr-surface, #141414);
  border:          1px solid #1a1a1a;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.sr-member-card__placeholder span {
  font-family: var(--sr-font-display, 'Bowlby One', sans-serif);
  font-size:   6rem;
  color:       var(--sr-amber, #C9A84C);
  opacity:     0.25;
  line-height: 1;
  user-select: none;
}

/* Small hint text below placeholder (hidden once a photo is set) */
.sr-member-card__placeholder-hint {
  font-family:  var(--sr-font-mono, 'Space Mono', monospace);
  font-size:    0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:        var(--sr-muted-dark, #888);
  text-align:   center;
  margin-top:   var(--sr-sp-1);
  padding-inline: var(--sr-sp-1);
}

/* Name + role area */
.sr-member-card__info {
  padding-top: var(--sr-sp-2);
  flex:        1;
}

.sr-member-card .sr-member-name a {
  color:           var(--sr-bone, #F2EFE8);
  text-decoration: none;
  transition:      color 0.2s;
}

.sr-member-card .sr-member-name a:hover {
  color: var(--sr-amber, #C9A84C);
}

/* Mobile: single column, capped width so portrait photos don't go huge */
@media (max-width: 640px) {
  .sr-member-grid {
    grid-template-columns: 1fr;
    max-width:   360px;
    margin-inline: auto;
  }
}