/*
Theme Name: Alex Henley Modern
Theme URI: https://www.alexhenley.com/
Author: OpenAI
Author URI: https://openai.com/
Description: A responsive, Customizer-driven music website theme for Alex Henley with editable homepage sections, media, typography, SEO fields, and shortcode/HTML areas.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.8
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: alex-henley-modern
Tags: custom-logo, custom-menu, featured-images, responsive-layout, one-column, two-columns, custom-colors, custom-background, editor-style
*/

:root {
  --ah-bg: #050505;
  --ah-panel: #101010;
  --ah-cream: #f5f0e8;
  --ah-cream-soft: #ebe3d7;
  --ah-text: #ffffff;
  --ah-dark-text: #151515;
  --ah-muted: #d9d2c8;
  --ah-gold: #c8963f;
  --ah-gold-dark: #9f732e;
  --ah-border: rgba(200,150,63,.35);
  --ah-radius: 14px;
  --ah-shadow: 0 24px 70px rgba(0,0,0,.35);
  --ah-heading-font: 'Playfair Display', serif;
  --ah-body-font: 'Inter', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* background: var(--ah-bg); */
  background: url('http://www.alexhenley.com/wp-content/uploads/2026/06/Alex-Henley-BG.png') no-repeat center center fixed;
  background-size: cover;
  color: var(--ah-text);
  font-family: var(--ah-body-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
.skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; background: #fff; color: #000; padding: 10px 14px; z-index: 10000; left: 8px; top: 8px; }

.ah-site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ah-border);
}
.admin-bar .ah-site-header { top: 32px; }
.ah-header-inner { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.ah-logo { flex: 0 0 auto; }
.ah-logo img { width: 132px; max-height: 112px; object-fit: contain; }
.ah-menu-toggle { display: none; margin-left: auto; width: 46px; height: 42px; border: 1px solid var(--ah-border); background: transparent; color: #fff; padding: 9px 10px; border-radius: 8px; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.ah-menu-toggle-line { display: block; width: 100%; height: 2px; background: #fff; border-radius: 999px; transition: transform .2s ease, opacity .2s ease; }
.ah-menu-toggle[aria-expanded="true"] .ah-menu-toggle-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ah-menu-toggle[aria-expanded="true"] .ah-menu-toggle-line:nth-child(2) { opacity: 0; }
.ah-menu-toggle[aria-expanded="true"] .ah-menu-toggle-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.ah-navigation { flex: 1; display: flex; justify-content: flex-end; }
.ah-menu, .ah-menu ul { margin: 0; padding: 0; list-style: none; }
.ah-menu { display: flex; align-items: center; gap: 34px; }
.ah-menu a { text-decoration: none; font-weight: 650; letter-spacing: .01em; padding: 12px 0; display: block; font-size: var(--ah-nav-size, 16px); }
.ah-menu > li { position: relative; }
.ah-menu > li.current-menu-item > a,
.ah-menu > li.current_page_item > a,
.ah-menu > li.current-menu-ancestor > a { color: var(--ah-gold); border-bottom: 2px solid var(--ah-gold); }
.ah-menu .sub-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 220px; display: none; background: #101010; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: var(--ah-shadow); padding: 10px 0; }
.ah-menu li:hover > .sub-menu, .ah-menu li:focus-within > .sub-menu { display: block; }
.ah-menu .sub-menu a { padding: 9px 18px; color: #fff; font-weight: 500; border: 0; }
.ah-menu .sub-menu a:hover { color: var(--ah-gold); background: rgba(255,255,255,.04); }

.ah-hero { position: relative; overflow: hidden; background: #030303; isolation: isolate; }
.ah-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 78% 28%, rgba(200,150,63,.14), transparent 30%); }
.ah-hero::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #030303 0%, rgba(3,3,3,.98) 19%, rgba(3,3,3,.90) 34%, rgba(3,3,3,.62) 47%, rgba(3,3,3,.22) 63%, rgba(3,3,3,.06) 100%); }
.ah-hero-inner { position: relative; z-index: 3; max-width: 1180px; min-height: 680px; margin: 0 auto; padding: 70px 24px 54px; display: grid; grid-template-columns: minmax(300px, 535px) 1fr; gap: 30px; align-items: center; }
.ah-hero-copy { position: relative; z-index: 5; max-width: 535px; }
.ah-hero h1 { font-family: var(--ah-hero-heading-font, var(--ah-heading-font)); font-size: clamp(2.75rem, 5vw, var(--ah-hero-heading-size, 74px)); line-height: .98; margin: 0 0 24px; color: #fff; max-width: 9.5ch; }
.ah-hero-text { font-family: var(--ah-hero-text-font, var(--ah-body-font)); font-size: var(--ah-hero-text-size, 1rem); color: var(--ah-muted); max-width: 500px; }
.ah-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 0; border-radius: 8px; background: var(--ah-button-color, var(--ah-gold)); color: var(--ah-button-text-color, #fff); padding: 15px 24px; font-family: var(--ah-button-font, var(--ah-body-font)); font-size: var(--ah-button-size, 16px); font-weight: 800; margin-top: 22px; box-shadow: 0 10px 24px rgba(200,150,63,.24); transition: transform .2s ease, background .2s ease; }
.ah-button:hover, .ah-button:focus { transform: translateY(-1px); background: var(--ah-gold-dark); }
.ah-hero-visual { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; min-height: 100%; display: block; }
.ah-hero-visual::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #030303 0%, rgba(3,3,3,.98) 18%, rgba(3,3,3,.88) 34%, rgba(3,3,3,.58) 49%, rgba(3,3,3,.20) 66%, rgba(3,3,3,.04) 100%); }
.ah-hero-photo { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: .9; border-radius: 0; }
.ah-hero-album-row { position: absolute; z-index: 2; right: 3%; bottom: 34px; display: flex; align-items: center; justify-content: flex-end; width: min(45vw, 520px); }
.ah-hero-album-row > a { display: block; line-height: 0; flex: 0 0 auto; }
.ah-album-cover { width: min(320px, 64%); border: 1px solid rgba(255,255,255,.35); box-shadow: var(--ah-shadow); z-index: 2; position: relative; }
.ah-vinyl { width: min(235px, 45%); border-radius: 50%; margin-left: -46px; filter: drop-shadow(0 20px 42px rgba(0,0,0,.48)); position: relative; z-index: 1; }
.ah-hero-album-row a .ah-album-cover { width: min(320px, 100%); }
.ah-hero-album-row a .ah-vinyl { width: min(235px, 100%); }

.ah-section-light { background: linear-gradient(180deg, var(--ah-cream), var(--ah-cream-soft)); color: var(--ah-dark-text); }
.ah-about-inner { max-width: 1180px; margin: 0 auto; padding: 64px 24px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; }
.ah-about-image img { border-radius: var(--ah-radius); box-shadow: 0 16px 50px rgba(0,0,0,.18); width: 100%; object-fit: cover; }
.ah-about-content { position: relative; z-index: 2; }
.ah-about-content h2, .ah-section-title { font-family: var(--ah-about-heading-font, var(--ah-heading-font)); font-size: clamp(2rem, 3.4vw, var(--ah-about-heading-size, 48px)); line-height: 1.1; margin: 0 0 22px; }
.ah-about-text { font-family: var(--ah-about-text-font, var(--ah-body-font)); font-size: var(--ah-about-text-size, 1rem); }
.ah-watermark { position: absolute; right: -70px; top: 30px; width: 320px; opacity: .08; pointer-events: none; filter: grayscale(1); }

.ah-player-section { background: #050505; padding: 38px 24px; }
.ah-player-inner { max-width: 1180px; margin: 0 auto; border: 1px solid var(--ah-border); border-radius: var(--ah-radius); padding: 24px; }
.ah-player-inner h2 { font-family: var(--ah-player-heading-font, var(--ah-heading-font)); font-size: var(--ah-player-heading-size, 2.4rem); margin: 0 0 18px; color: #fff; }
.ah-rich-area { font-family: var(--ah-body-font); }
.ah-spotify-card { border-radius: 12px; background: linear-gradient(135deg, #222, #080808); border: 1px solid rgba(255,255,255,.1); padding: 18px; display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; align-items: center; }
.ah-spotify-card img { width: 92px; height: 92px; object-fit: cover; border-radius: 6px; }
.ah-spotify-card h3 { margin: 0 0 2px; font-size: 1.25rem; }
.ah-spotify-card p { margin: 0 0 8px; color: #ddd; }
.ah-save { color: #ddd; font-size: .9rem; }
.ah-playbar { grid-column: 2 / 4; display: flex; align-items: center; gap: 12px; }
.ah-play { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-weight: 900; }
.ah-bar { height: 5px; background: rgba(255,255,255,.35); border-radius: 999px; flex: 1; }
.ah-spotify-brand { color: #fff; font-weight: 800; }
.ah-listen { color: var(--ah-gold); text-align: center; margin-top: 16px; border-top: 1px solid var(--ah-border); padding-top: 10px; }
.ah-player-inner iframe { max-width: 100%; border: 0; }

.ah-shows-section { background: linear-gradient(180deg, var(--ah-cream), var(--ah-cream-soft)); color: var(--ah-dark-text); padding: 54px 24px; }
.ah-shows-inner { max-width: 1180px; margin: 0 auto; }
.ah-shows-title-row { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; }
.ah-shows-title-row h2 { font-family: var(--ah-shows-heading-font, var(--ah-heading-font)); font-size: var(--ah-shows-heading-size, 2.6rem); margin: 0; white-space: nowrap; }
.ah-title-line { height: 1px; background: var(--ah-gold); flex: 1; opacity: .65; }
.ah-event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ah-event-card { background: rgba(255,255,255,.48); border: 1px solid rgba(120,90,40,.18); border-radius: 10px; padding: 18px; display: grid; grid-template-columns: 70px 1fr; gap: 14px; align-items: start; }
.ah-date-badge { background: #050505; color: #fff; border-radius: 6px; width: 64px; height: 72px; display: grid; place-items: center; line-height: 1; text-align: center; }
.ah-date-badge span { display:block; font-size:.82rem; }
.ah-date-badge strong { display:block; font-size:1.8rem; }
.ah-event-card h3 { margin: 0 0 2px; font-size: 1.05rem; }
.ah-event-card p { margin: 4px 0; }
.ah-shows-cta { text-align: center; margin-top: 26px; }
.ah-outline-button { display: inline-flex; padding: 11px 42px; border: 1px solid var(--ah-gold); color: var(--ah-gold-dark); border-radius: 7px; text-decoration: none; font-weight: 750; }

.ah-follow-section { background: #050505; color: #fff; position: relative; overflow: hidden; }
.ah-follow-inner { max-width: 1180px; margin: 0 auto; padding: 52px 24px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; position: relative; z-index: 2; }
.ah-follow-content h2 { font-family: var(--ah-follow-heading-font, var(--ah-heading-font)); font-size: var(--ah-follow-heading-size, 2.8rem); margin: 0 0 12px; }
.ah-follow-content p { color: var(--ah-muted); max-width: 420px; font-size: var(--ah-follow-text-size, 16px); }
.ah-social-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.ah-social-links a { text-decoration: none; padding: 14px 8px; border-left: 1px solid rgba(255,255,255,.16); }
.ah-social-icon { display: block; color: var(--ah-gold); font-size: 2.3rem; line-height: 1; font-weight: 900; margin-bottom: 8px; }
.ah-footer { background: #0b0b0b; border-top: 1px solid rgba(255,255,255,.08); text-align: center; color: #ddd; padding: 14px 24px; font-size: .9rem; }

.ah-lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 24px; }
.ah-lightbox-overlay.is-open { display: flex; }
.ah-lightbox-overlay img { max-height: 90vh; max-width: 92vw; box-shadow: var(--ah-shadow); }
.ah-lightbox-close { position: absolute; top: 18px; right: 18px; background: #fff; border: 0; border-radius: 50%; width: 42px; height: 42px; font-size: 24px; cursor: pointer; }

.ah-page-content { max-width: 900px; margin: 0 auto; padding: 60px 24px; /* background: #fff; */ color: #fff; }

@media (max-width: 900px) {
  .admin-bar .ah-site-header { top: 46px; }
  .ah-header-inner { padding: 10px 18px; }
  .ah-logo img { width: 94px; }
  .ah-menu-toggle { display: inline-flex; }
  .ah-navigation { position: absolute; left: 0; right: 0; top: 100%; background: #050505; display: none; padding: 18px 24px; border-bottom: 1px solid var(--ah-border); }
  .ah-navigation.is-open { display: block; }
  .ah-menu { display: block; }
  .ah-menu .sub-menu { position: static; display: block; box-shadow: none; border: 0; background: rgba(255,255,255,.04); margin: 4px 0 12px; }
  .ah-hero-inner { min-height: auto; grid-template-columns: 1fr; padding: 48px 24px 0; }
  .ah-hero::after { background: linear-gradient(180deg, rgba(3,3,3,.92) 0%, rgba(3,3,3,.75) 44%, rgba(3,3,3,.48) 76%, rgba(3,3,3,.84) 100%); }
  .ah-hero-copy { max-width: 100%; padding-bottom: 30px; }
  .ah-hero h1 { max-width: 12ch; }
  .ah-hero-visual { position: relative; left: auto; right: auto; top: auto; bottom: auto; min-height: 460px; margin: 0 -24px; order: 2; }
  .ah-hero-visual::before { background: linear-gradient(180deg, rgba(3,3,3,.06) 0%, rgba(3,3,3,.16) 38%, rgba(3,3,3,.62) 100%); }
  .ah-hero-photo { inset: 0; width: 100%; border-radius: 0; object-position: right center; }
  .ah-hero-album-row { width: min(68vw, 360px); right: 24px; bottom: 24px; }
  .ah-about-inner, .ah-follow-inner { grid-template-columns: 1fr; }
  .ah-event-grid { grid-template-columns: 1fr; }
  .ah-social-links { grid-template-columns: repeat(2, 1fr); }
  .ah-spotify-card { grid-template-columns: 74px 1fr; }
  .ah-spotify-brand { display:none; }
  .ah-playbar { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .ah-hero h1 { font-size: 2.6rem; max-width: none; }
  .ah-hero-inner { padding-left: 20px; padding-right: 20px; }
  .ah-hero-visual { min-height: 360px; margin-left: -20px; margin-right: -20px; }
  .ah-hero-album-row { width: 220px; right: 16px; bottom: 16px; }
  .ah-album-cover { width: 150px; }
  .ah-vinyl { width: 110px; margin-left: -28px; }
  .ah-shows-title-row { display: block; }
  .ah-title-line { display:none; }
  .ah-social-links { grid-template-columns: 1fr; }
}


/* Header shrink and responsive refinements.
   Keep vertical padding at 0 so the header does not create empty bands above/below the logo.
   The scroll effect now changes logo size only, which prevents layout jitter. */
.ah-site-header,
.ah-logo img {
  transition: background .28s ease, box-shadow .28s ease, width .28s ease, max-height .28s ease, transform .28s ease;
}
.ah-header-inner {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 152px;
  transition: min-height .28s ease;
}
.ah-logo img {
  width: 152px;
  max-height: 138px;
}
.ah-site-header.ah-is-scrolled {
  background: rgba(0,0,0,.96);
  box-shadow: 0 10px 32px rgba(0,0,0,.22);
}
.ah-site-header.ah-is-scrolled .ah-header-inner {
  min-height: 88px;
}
.ah-site-header.ah-is-scrolled .ah-logo img {
  width: 84px;
  max-height: 74px;
}

@media (max-width: 900px) {
  .ah-header-inner,
  .ah-site-header.ah-is-scrolled .ah-header-inner {
    min-height: 92px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .ah-logo img,
  .ah-site-header.ah-is-scrolled .ah-logo img {
    width: 92px;
    max-height: 84px;
  }
  .ah-menu-toggle { display: inline-flex; }
  .ah-navigation { z-index: 100; }
  .ah-menu a { padding: 10px 0; }
  .ah-menu > li.current-menu-item > a,
  .ah-menu > li.current_page_item > a,
  .ah-menu > li.current-menu-ancestor > a { display: inline-block; }

  .ah-hero-inner {
    display: flex;
    flex-direction: column;
    padding: 0 24px 44px;
  }
  .ah-hero-visual {
    order: 1;
    width: calc(100% + 48px);
    margin: 0 -24px;
    min-height: 440px;
  }
  .ah-hero-copy {
    order: 2;
    padding: 34px 0 0;
  }
  .ah-hero h1 {
    max-width: 12ch;
  }
  .ah-hero-photo {
    object-position: center center;
  }
}
@media (max-width: 520px) {
  .ah-hero-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .ah-hero-visual {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    min-height: 340px;
  }
  .ah-hero-copy {
    padding-top: 28px;
  }
}