/*
Theme Name: Kiki Cubb
Theme URI: https://kikicubb.com
Author: Kiki Cubb
Author URI: https://kikicubb.com
Description: A professional musician portfolio theme for Kiki Cubb — pianist, composer, and classically trained artist.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kiki-cubb
*/

/* ========== CSS CUSTOM PROPERTIES ========== */
:root {
  --off-white: #f0ede8;
  --true-black: #000000;
  --electric-burgundy: #a4133c;
  --cool-gray: #d4d4d8;
  --content-size: 800px;
  --wide-size: 1280px;
}

/* ========== GLOBAL RESETS ========== */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: clip;
}

.wp-site-blocks > footer,
.wp-site-blocks > main {
  margin-block-start: 0;
}

/* ========== HEADER ========== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 100;
  padding: 1.25rem 2rem;
  background: rgba(240, 237, 232, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  animation: headerSlideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(-100%);
}

.header-inner {
  max-width: var(--wide-size);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  display: flex;
  align-items: center;
}

.header-logo .logo-link {
  margin: 0;
  display: flex;
  align-items: center;
  line-height: 0;
}

.header-logo a {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.header-logo img {
  width: 200px;
  height: auto;
  display: block;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0 !important;
}

/* ===== Core Navigation block — header nav ===== */
.header-nav.wp-block-navigation {
  font-family: 'Syne', sans-serif;
  animation: navItemDrop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
  opacity: 0;
  transform: translateY(-20px);
}

.header-nav .wp-block-navigation__container {
  align-items: center;
  gap: 0.25rem;
}

.header-nav .wp-block-navigation-item__content {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--true-black);
  padding: 0.5rem 1rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-nav .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  bottom: 0.25rem;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--electric-burgundy);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-nav .wp-block-navigation-item__content:hover {
  color: var(--electric-burgundy);
}

.header-nav .wp-block-navigation-item__content:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-nav .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--electric-burgundy);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== Core Social Links block — header social icons =====
   Spacing: EPK has 1rem right padding from .nav-item-content. To balance the
   gap on both sides of the vertical divider, the social block uses
   margin-left: 0.5rem (giving 1.5rem total on the left of the divider) and
   padding-left: 1.5rem on the right of the divider. */
.header-social.wp-block-social-links {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  gap: 0.65rem !important;
  animation: navItemDrop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
  opacity: 0;
  transform: translateY(-20px);
}

.header-social .wp-block-social-link {
  background: transparent !important;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  color: var(--true-black);
}

.header-social .wp-social-link {
  background: transparent !important;
  color: var(--true-black) !important;
  opacity: 0.5;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.header-social .wp-social-link:hover {
  opacity: 1;
  color: var(--electric-burgundy) !important;
  transform: none;
}

.header-social .wp-social-link a {
  padding: 0;
}

.header-social .wp-social-link svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.header-social a:hover {
  opacity: 1;
  color: var(--electric-burgundy);
}

.header-social a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

/* ========== HERO ========== */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
  background: var(--off-white);
  margin-top: 0 !important;
}

/* Override WordPress block-spacing default on the first content element */
.wp-site-blocks > .hero-section,
.wp-site-blocks > .page-title-banner {
  margin-block-start: 0 !important;
}

.hero-text-side {
  position: relative;
  width: 55%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 4rem 4rem 4rem;
  z-index: 2;
}

.hero-text-inner {
  max-width: 600px;
}

.hero-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--true-black);
  margin-left: -0.05em;
}

.hero-name-line {
  display: block;
  overflow: hidden;
}

.hero-name-line-1 {
  font-size: clamp(4rem, 9vw, 8rem);
  animation: textSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  transform: translateY(100%);
}

.hero-name-line-2 {
  font-size: clamp(4rem, 9vw, 8rem);
  animation: textSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
  transform: translateY(100%);
}

.hero-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--true-black);
  margin-top: 2rem;
  max-width: 400px;
  line-height: 1.6;
  animation: fadeSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
  opacity: 0;
  transform: translateY(24px);
}

.hero-cta {
  margin-top: 2.5rem;
  animation: fadeSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.05s forwards;
  opacity: 0;
  transform: translateY(24px);
}

.hero-cta .wp-block-button__link,
.hero-cta a {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary,
.hero-cta .wp-block-button:first-child .wp-block-button__link {
  background: var(--electric-burgundy) !important;
  color: var(--off-white) !important;
  border: 2px solid var(--electric-burgundy);
  border-radius: 0 !important;
}

.btn-primary:hover,
.hero-cta .wp-block-button:first-child .wp-block-button__link:hover {
  background: var(--true-black) !important;
  border-color: var(--true-black);
  color: var(--off-white) !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.btn-secondary,
.hero-cta .wp-block-button:last-child .wp-block-button__link {
  background: transparent !important;
  color: var(--true-black) !important;
  border: 2px solid var(--true-black);
  border-radius: 0 !important;
}

.btn-secondary:hover,
.hero-cta .wp-block-button:last-child .wp-block-button__link:hover {
  background: var(--true-black) !important;
  color: var(--off-white) !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Hero news area */
.hero-news {
  margin-top: 2rem;
  padding-top: 1rem;
  max-width: 22rem;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  animation: fadeSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.25s forwards;
  opacity: 0;
  transform: translateY(24px);
}

.hero-news .wp-block-query,
.hero-news .wp-block-post-template {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-news .hero-news-title {
  font-family: 'Syne', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

.hero-news .hero-news-title a {
  color: var(--electric-burgundy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.hero-news .hero-news-title a:hover {
  border-bottom-color: var(--electric-burgundy);
}

.hero-news-link {
  font-family: 'Syne', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.hero-news-link a {
  color: var(--true-black);
  text-decoration: none;
}

.hero-news-link a:hover {
  color: var(--electric-burgundy);
}

/* Hero photo side */
.hero-photo-side {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  z-index: 3;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
  animation: photoSlideIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  opacity: 0;
  transform: translateX(80px);
}

.hero-photo-side .wp-block-image,
.hero-photo-side figure {
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
}

.hero-photo-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

.hero-photo-side::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 60%);
  pointer-events: none;
}

/* ========== PIANO KEY ACCENTS ========== */
/* Layered backgrounds matching the approved design:
   - 14 equal-width sections alternating black bars and "white key" gaps
   - The white key gaps have 1px cool-gray top + bottom edges (the borders from the original design) */
.geo-keys {
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 25%;
  z-index: 1;
  height: 50px;
  background-color: transparent;
  background-image:
    /* TOP edge of white keys (1px gray strip in even positions only) */
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(100% / 14),
      var(--cool-gray) calc(100% / 14),
      var(--cool-gray) calc(2 * 100% / 14)
    ),
    /* BOTTOM edge of white keys (1px gray strip in even positions only) */
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(100% / 14),
      var(--cool-gray) calc(100% / 14),
      var(--cool-gray) calc(2 * 100% / 14)
    ),
    /* Black bars in odd positions */
    repeating-linear-gradient(
      to right,
      var(--true-black) 0,
      var(--true-black) calc(100% / 14),
      transparent calc(100% / 14),
      transparent calc(2 * 100% / 14)
    );
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 1px, 100% 1px, 100% 100%;
  background-position: top left, bottom left, top left;
  animation: keysSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
  opacity: 0;
  transform: translateY(60px);
}

/* Top-right geometric blocks */
.geo-blocks-top {
  position: absolute;
  top: 80px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 15;
}

.geo-block {
  height: 8px;
  background: var(--true-black);
  transform-origin: right;
  animation: blockSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform: scaleX(0);
}

.geo-block:nth-child(1) { width: 120px; animation-delay: 0.8s; }
.geo-block:nth-child(2) { width: 80px; animation-delay: 0.9s; }
.geo-block:nth-child(3) { width: 50px; animation-delay: 1.0s; background: var(--electric-burgundy); }

/* ========== SECTION STYLES ========== */
.section-dark {
  background: var(--true-black);
  color: var(--off-white);
}

.section-dark .wp-block-heading {
  color: var(--off-white);
}

.section-dark p {
  color: var(--cool-gray);
}

.section-label {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--electric-burgundy);
  margin-bottom: 1rem;
}

.section-heading {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.burgundy-line {
  width: 60px;
  height: 3px;
  background: var(--electric-burgundy);
  margin-bottom: 2rem;
}

.burgundy-line-center {
  width: 60px;
  height: 3px;
  background: var(--electric-burgundy);
  margin: 0 auto 2rem;
}

/* ========== CARD LAYOUTS ========== */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}

.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.equal-cards .cta-bottom {
  margin-top: auto;
  justify-content: center;
}

/* Composition cards */
.composition-card {
  background: var(--off-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 2rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.composition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.composition-card .wp-block-heading {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.composition-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.65);
}

.card-number {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--electric-burgundy);
  opacity: 0.2;
  line-height: 1;
  margin-bottom: 1rem;
}

/* Service cards */
.service-card {
  padding: 2.5rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--electric-burgundy);
}

.service-card .wp-block-heading {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--off-white);
  margin-bottom: 0.75rem;
}

.service-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--cool-gray);
}

.service-icon {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--electric-burgundy);
  font-family: 'Syne', sans-serif;
  font-weight: 800;
}

/* ========== TESTIMONIAL / QUOTE ========== */
.quote-section {
  position: relative;
}

.quote-mark {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(6rem, 12vw, 10rem);
  line-height: 0.8;
  color: var(--electric-burgundy);
  opacity: 0.12;
}

.quote-text {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-style: italic;
  line-height: 1.6;
  max-width: 700px;
}

.quote-attribution {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--electric-burgundy);
  margin-top: 1.5rem;
}

/* ========== FINAL CTA ========== */
.final-cta-heading {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ========== PAGE TITLE BANNER ========== */
.page-title-banner {
  position: relative;
  width: 100%;
  padding: 8rem 2rem 2.5rem;
  background: var(--true-black);
  overflow: hidden;
  margin-block-start: 0 !important;
}

.page-title-banner::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--electric-burgundy);
  animation: lineExtend 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  transform: scaleX(0);
  transform-origin: left;
}

.page-title-banner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--true-black) 0px,
    var(--true-black) 24px,
    rgba(255,255,255,0.06) 24px,
    rgba(255,255,255,0.06) 48px
  );
  opacity: 0.5;
}

.page-title-inner {
  max-width: var(--wide-size);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.page-title-inner .wp-block-post-title,
.page-title-inner h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5.5rem);
  color: var(--off-white);
  line-height: 0.95;
  letter-spacing: -0.02em;
  clip-path: inset(0 100% 0 0);
  animation: clipReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.page-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.125rem;
  color: var(--cool-gray);
  margin-top: 1rem;
  animation: fadeSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
  opacity: 0;
  transform: translateY(20px);
}

/* ========== PAGE CONTENT ========== */
.page-content-area {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2.5rem 2rem 6rem;
  margin-block-start: 0 !important;
}

.page-content-area p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--true-black);
  margin-bottom: 1.5rem;
}

/* Drop cap on the first paragraph after the featured image — pages only */
body:not(.single) .page-content-area .wp-block-post-content > p:first-of-type::first-letter,
body:not(.single) .page-content-area > p:first-of-type::first-letter {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 3.5rem;
  float: left;
  line-height: 0.85;
  margin-right: 0.5rem;
  margin-top: 0.15rem;
  color: var(--electric-burgundy);
}

/* Opt-out: add the "no-dropcap" class (Advanced → Additional CSS class(es))
   to a paragraph or to any wrapping group to suppress the drop cap. */
.no-dropcap::first-letter,
.no-dropcap > p:first-of-type::first-letter,
.no-dropcap p:first-of-type::first-letter {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  float: none !important;
  line-height: inherit !important;
  margin: 0 !important;
  color: inherit !important;
}

.page-content-area h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: var(--true-black);
  position: relative;
  padding-left: 1rem;
}

.page-content-area h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  background: var(--electric-burgundy);
}

/* Article-title H2 (single post template) — distinct from body H2s */
.page-content-area > .wp-block-post-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding-left: 0;
  color: var(--true-black);
}
.page-content-area > .wp-block-post-title::before { content: none; }

.page-content-area > .wp-block-post-date {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4a4a4a;
  margin-bottom: 2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-content-area blockquote {
  border-left: 3px solid var(--electric-burgundy);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  background: rgba(0, 0, 0, 0.03);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.7;
}

/* Featured image float — overlaps the bottom of the page-title-banner via negative top margin */
.wp-block-post-featured-image.featured-image-wrap {
  float: right !important;
  width: 420px !important;
  height: 420px !important;
  margin: -6rem -3rem 1.5rem 2rem !important;
  position: relative;
  z-index: 2;
  shape-outside: margin-box;
}

/* Override WordPress flow-root on the post content wrapper so text wraps around the floated featured image */
.page-content-area .entry-content,
.page-content-area .wp-block-post-content {
  display: block !important;
}

.wp-block-post-featured-image.featured-image-wrap a,
.wp-block-post-featured-image.featured-image-wrap {
  display: block;
}

.wp-block-post-featured-image.featured-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: fadeSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  opacity: 0;
  transform: translateY(20px);
  border-radius: 0;
}

/* ========== POSTS ARCHIVE (News) ========== */
.archive-main {
  padding: 0 var(--wp--preset--spacing--40, 2rem) var(--wp--preset--spacing--40, 2rem);
}

.post-archive-item {
  padding-bottom: var(--wp--preset--spacing--50, 3rem);
}

.post-archive-item__date-row {
  border-bottom: 4px solid var(--true-black);
  padding: var(--wp--preset--spacing--30, 1.5rem) 0;
}

.post-archive-item__date {
  font-family: 'Syne', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--true-black);
  margin: 0;
}

.post-archive-item__title {
  font-family: 'Syne', sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.1;
  padding-top: var(--wp--preset--spacing--30, 1.5rem);
  margin: 0;
}

.post-archive-item__title a {
  color: var(--electric-burgundy);
  text-decoration: none;
}

.post-archive-item__title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.post-archive-pagination {
  padding: var(--wp--preset--spacing--40, 2rem);
  margin: 0;
}

.post-archive-pagination .wp-block-query-pagination-previous,
.post-archive-pagination .wp-block-query-pagination-next {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: capitalize;
}

/* ========== MUSIC PAGE GRID ========== */
/* Scoped to page-id-14 so the Apple/Google banner and other pages are untouched.
   :not(.has-background) skips the banner columns which set their own background. */
.page-id-14 .wp-block-columns {
  gap: 1rem;
}

.page-id-14 .wp-block-column:not(.has-background) > .wp-block-image {
  margin: 0 auto;
  max-width: 280px;
  width: 100%;
}

.page-id-14 .wp-block-column:not(.has-background) > .wp-block-image a {
  display: block;
  line-height: 0;
}

.page-id-14 .wp-block-column:not(.has-background) > .wp-block-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.page-id-14 .wp-block-column:not(.has-background) > .wp-block-image a:hover img {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.page-id-14 .wp-block-column > .wp-block-video {
  margin: 0;
}

.page-id-14 .wp-block-column > .wp-block-video video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--true-black);
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.page-id-14 .wp-block-column .wp-element-caption,
.page-id-14 .wp-block-column figcaption {
  font-family: 'Syne', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--true-black);
  text-align: center;
  margin-top: 0.75rem;
}

.page-id-14 .wp-block-column:empty {
  display: none;
}

/* ========== SCROLL REVEAL ========== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* First visible section should not be hidden */
.no-animate {
  opacity: 1 !important;
  transform: none !important;
}

/* ========== FOOTER ========== */
.site-footer {
  background: var(--true-black);
  color: var(--cool-gray);
  padding: 3rem 2rem;
  text-align: center;
}

.footer-inner {
  max-width: var(--wide-size);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.footer-social {
  display: flex;
  gap: 1.5rem;
}

.footer-social .footer-social-list {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  line-height: 1;
}

.footer-social a {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cool-gray);
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

.footer-social a:hover {
  color: var(--electric-burgundy);
  transform: translateY(-2px);
}

.footer-copyright {
  font-size: 0.875rem;
  color: rgba(212, 212, 216, 0.6);
}

/* ========== BUTTON HOVER LIFT ========== */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* ========== KEYFRAMES ========== */
@keyframes headerSlideDown {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes navItemDrop {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes photoSlideIn {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes textSlideUp {
  to { transform: translateY(0); }
}

@keyframes fadeSlideUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes keysSlideUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes blockSlideIn {
  to { transform: scaleX(1); }
}

@keyframes lineExtend {
  to { transform: scaleX(1); }
}

@keyframes clipReveal {
  to { clip-path: inset(0 0% 0 0); }
}

/* ========== EDITOR VISIBILITY ========== */
.editor-styles-wrapper .site-header,
.editor-styles-wrapper .header-nav,
.editor-styles-wrapper .header-social,
.editor-styles-wrapper .hero-name-line-1,
.editor-styles-wrapper .hero-name-line-2,
.editor-styles-wrapper .hero-tagline,
.editor-styles-wrapper .hero-cta,
.editor-styles-wrapper .hero-photo-side,
.editor-styles-wrapper .geo-keys,
.editor-styles-wrapper .geo-block,
.editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .page-subtitle,
.editor-styles-wrapper .featured-image-wrap img,
.editor-styles-wrapper .page-title-inner .wp-block-post-title,
.editor-styles-wrapper .page-title-inner h1 {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  clip-path: none !important;
}

.editor-styles-wrapper .page-title-banner::before {
  animation: none !important;
  transform: scaleX(1) !important;
}

/* ========== FOCUS INDICATORS ==========
   Keyboard-only focus (not shown on mouse click) for every interactive element
   the theme styles. The header nav already has its own rule further up — these
   are the elements that were falling back to the browser default. */
.wp-block-button__link:focus-visible,
.hero-cta a:focus-visible,
.footer-social a:focus-visible,
.footer-nav .wp-block-navigation-item__content:focus-visible,
.hero-news-title a:focus-visible,
.hero-news-link a:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--electric-burgundy);
  outline-offset: 3px;
  border-radius: 2px;
}

/* On the dark footer the burgundy ring on a black background is too low
   contrast — use off-white there. */
.site-footer a:focus-visible,
.footer-social a:focus-visible,
.footer-nav .wp-block-navigation-item__content:focus-visible {
  outline-color: var(--off-white);
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .site-header,
  .header-nav,
  .header-social,
  .hero-photo-side,
  .hero-name-line-1,
  .hero-name-line-2,
  .hero-tagline,
  .hero-cta,
  .geo-keys,
  .geo-block,
  .animate-on-scroll,
  .page-subtitle,
  .featured-image-wrap img {
    opacity: 1 !important;
    transform: none !important;
  }

  .page-title-inner .wp-block-post-title,
  .page-title-inner h1 {
    clip-path: none !important;
  }

  .page-title-banner::before {
    transform: scaleX(1) !important;
  }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .hero-text-side {
    width: 60%;
    padding: 7rem 2.5rem 3rem 2.5rem;
  }

  .hero-photo-side {
    width: 50%;
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 5% 100%);
  }

  .geo-keys {
    right: 30%;
  }
}

@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    min-height: auto;
  }

  .hero-photo-side {
    position: relative;
    width: 100%;
    height: 65vh;
    clip-path: polygon(0 0, 100% 0, 100% 98%, 0% 100%);
    order: -1;
  }

  /* Keep hand on knee in-frame: extra height + gentler bottom slant gives the
     full hand room below the angle cut. */
  .hero-photo-side img {
    object-position: center bottom;
  }

  /* Mobile header: hamburger moves to far right, social icons move left.
     transform: none is critical — otherwise the overlay's position:fixed is
     relative to .header-nav (24×24) instead of the viewport. */
  .header-right {
    gap: 0.25rem !important;
  }

  .header-nav.wp-block-navigation {
    order: 2;
    opacity: 1;
    transform: none !important;
    animation: none !important;
    margin-left: 0.25rem;
  }

  .header-right .wp-block-template-part {
    order: 1;
  }

  .header-social.wp-block-social-links {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    gap: 0.5rem !important;
  }

  .header-social .wp-social-link {
    width: 22px;
    height: 22px;
  }

  .header-social .wp-social-link svg {
    width: 20px;
    height: 20px;
  }

  /* 3-line burgundy hamburger icon (replaces the default 2-line SVG) */
  .wp-block-navigation__responsive-container-open {
    padding: 0 !important;
    background: transparent !important;
    border: 0;
    width: 30px;
    height: 22px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
  }

  .wp-block-navigation__responsive-container-open svg {
    display: none;
  }

  .wp-block-navigation__responsive-container-open::before,
  .wp-block-navigation__responsive-container-open::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    height: 3px;
    border-radius: 2px;
    background: var(--electric-burgundy);
  }

  .wp-block-navigation__responsive-container-open::before {
    top: 2px;
    box-shadow: 0 8px 0 var(--electric-burgundy);
  }

  .wp-block-navigation__responsive-container-open::after {
    bottom: 2px;
  }

  /* Overlay menu: readable items, burgundy close-X.
     The header's backdrop-filter and the slide-down animation's end transform
     both create a containing block that traps the fixed-position overlay at
     header size. Disable both while the menu is open. Also force opacity: 1 —
     the header's declared opacity is 0 (the animation fills it to 1), so
     killing the animation without overriding opacity makes the whole overlay
     invisible. */
  .has-modal-open .site-header {
    opacity: 1 !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--off-white) !important;
  }

  .wp-block-navigation__responsive-container-close {
    color: var(--electric-burgundy) !important;
  }

  .wp-block-navigation__responsive-container-close svg {
    fill: var(--electric-burgundy);
    width: 32px;
    height: 32px;
  }

  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    font-size: 1.25rem !important;
    padding: 0.75rem 0 !important;
    color: var(--true-black) !important;
  }

  /* Center menu items horizontally — the nav block's is-content-justification-right
     setting aligns them flex-end by default, which puts them flush against the
     right edge of the viewport. */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__container {
    align-items: center !important;
    text-align: center !important;
  }

  .hero-text-side {
    width: 100%;
    min-height: auto;
    padding: 2rem 1.5rem 4rem 1.5rem;
  }

  .hero-name-line-1,
  .hero-name-line-2 {
    font-size: clamp(3.5rem, 15vw, 6rem) !important;
  }

  .geo-blocks-top {
    display: none;
  }

  .geo-keys {
    height: 40px;
    right: 0;
  }

  .site-header {
    padding: 1rem 1.5rem;
    /* Respect iPhone safe-area so the hamburger doesn't sit under the curved
       edge on notched devices. */
    padding-right: max(1.5rem, env(safe-area-inset-right));
    padding-left: max(1.5rem, env(safe-area-inset-left));
  }

  .header-nav .wp-block-navigation-item__content {
    font-size: 0.7rem;
    padding: 0.5rem 0.6rem;
  }

  .header-logo img {
    width: 110px;
  }

  .page-title-banner {
    padding: 7rem 1.5rem 2rem;
  }

  /* Desktop floats the featured image at 420×420 with negative margins so it
     overlaps the page title banner — that's a deliberate design effect. On
     mobile there's no room to overlap cleanly, so drop the float and render
     the image below the banner. !important is required because the desktop
     rule uses it. */
  .wp-block-post-featured-image.featured-image-wrap {
    float: none !important;
    width: 100% !important;
    height: 280px !important;
    margin: 1.5rem 0 !important;
  }

  /* In-content social icon blocks (e.g. on /contact) ship with is-nowrap,
     which keeps every icon on one row and overflows narrow viewports. Allow
     them to wrap — scoped to page content so the header social block keeps
     its single-row layout. */
  .page-content-area .wp-block-social-links,
  .entry-content .wp-block-social-links {
    flex-wrap: wrap !important;
    row-gap: 0.75rem;
  }

  .page-content-area {
    padding: 2rem 1.5rem 4rem;
  }
}

@media (max-width: 480px) {
  .hero-name-line-1,
  .hero-name-line-2 {
    font-size: clamp(2.8rem, 18vw, 4.5rem) !important;
  }

  .hero-tagline {
    font-size: 1rem;
  }

  .hero-cta {
    flex-direction: column;
  }

  .hero-cta a,
  .hero-cta .wp-block-button__link {
    text-align: center;
  }
}