/*
Theme Name: Von Atria 2026
Theme URI: https://www.vonatria.com/
Author: Von Atria
Author URI: https://www.vonatria.com/
Description: Custom theme for Von Atria — independent rock and Latin soul by Ricard Adrianza.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Unlicense
License URI: https://unlicense.org/
Text Domain: vona
*/

html { scroll-behavior: smooth; }
body { margin: 0; }

.vona-theme {
  --vona-radius: 0.75rem;
  --vona-color-bg: oklch(0.94 0.012 280);
  --vona-color-fg: oklch(0.22 0.03 270);
  --vona-color-fg-80: oklch(0.22 0.03 270 / 0.8);
  --vona-color-fg-70: oklch(0.22 0.03 270 / 0.7);
  --vona-color-surface: oklch(0.98 0.006 280);
  --vona-color-surface-muted: oklch(0.91 0.018 278);
  --vona-color-band: oklch(0.74 0.035 278);
  --vona-color-card: oklch(0.985 0.005 280);
  --vona-color-primary: oklch(0.28 0.05 270);
  --vona-color-primary-fg: oklch(0.98 0.005 280);
  --vona-color-muted-fg: oklch(0.48 0.025 270);
  --vona-color-accent: oklch(0.42 0.16 274);
  --vona-color-accent-fg: oklch(0.98 0.005 280);
  --vona-color-destructive: oklch(0.577 0.245 27.325);
  --vona-color-border: oklch(0.86 0.018 278);
  --vona-gradient-band: linear-gradient(110deg, transparent 0%, transparent 8%, var(--vona-color-band) 14%, var(--vona-color-band) 70%, transparent 78%, transparent 100%);
  --vona-gradient-sun: radial-gradient(circle at 50% 55%, oklch(0.85 0.16 60), oklch(0.55 0.18 35) 60%, oklch(0.25 0.06 280) 100%);
  --vona-shadow-elegant: 0 30px 60px -30px oklch(0.22 0.03 270 / 0.35);
  --vona-shadow-soft: 0 10px 30px -15px oklch(0.22 0.03 270 / 0.25);
  --vona-font-display: "Cormorant Garamond", ui-serif, Georgia, serif;
  --vona-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  display: block;
  min-height: 100vh;
  background-color: var(--vona-color-bg);
  color: var(--vona-color-fg);
  font-family: var(--vona-font-body);
  font-feature-settings: "ss01", "cv11";
}

.vona-container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

.vona-eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4em; color: var(--vona-color-muted-fg); margin: 0; }
.vona-heading { margin: 0.5rem 0 0; font-family: var(--vona-font-display); font-weight: 500; font-size: 1.875rem; color: var(--vona-color-fg); letter-spacing: -0.01em; }
@media (min-width: 768px) { .vona-heading { font-size: 2.25rem; } }

/* header */
.vona-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; width: 100%; }
.vona-nav { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0; }
.vona-logo-link { color: var(--vona-color-fg-80); text-decoration: none; transition: color 0.2s; }
.vona-logo-link:hover { color: var(--vona-color-fg); }
.vona-wordmark { font-family: var(--vona-font-display); letter-spacing: 0.35em; font-size: 1.125rem; }
.vona-nav-list { display: none; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; font-size: 0.875rem; color: var(--vona-color-fg-70); }
@media (min-width: 768px) { .vona-nav-list { display: flex; } }
.vona-nav-list li { list-style: none; }
.vona-nav-list a { position: relative; color: inherit; text-decoration: none; transition: color 0.2s; padding-bottom: 4px; }
.vona-nav-list a:hover { color: var(--vona-color-fg); }
.vona-nav-list a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--vona-color-accent); transition: width 0.2s; }
.vona-nav-list a:hover::after { width: 100%; }

/* hero */
.vona-hero { position: relative; overflow: hidden; padding: 7rem 0 6rem; }
.vona-hero-band { pointer-events: none; position: absolute; left: 0; right: 0; top: 50%; z-index: -1; height: 55%; transform: translateY(-50%) rotate(-8deg) scale(1.1); background-image: var(--vona-gradient-band); }
.vona-hero-grid { display: grid; grid-template-columns: 1fr; align-items: center; gap: 3rem; }
@media (min-width: 768px) { .vona-hero-grid { grid-template-columns: 1fr 1fr; } }
.vona-hero-title { margin: 0; font-family: var(--vona-font-display); font-weight: 300; font-size: 3.5rem; line-height: 0.95; letter-spacing: -0.01em; color: var(--vona-color-fg); }
@media (min-width: 768px) { .vona-hero-title { font-size: 4.5rem; } }
.vona-hero-desc { margin: 1.5rem 0 0; max-width: 28rem; font-size: 1rem; line-height: 1.65; color: var(--vona-color-muted-fg); }
.vona-hero-platforms { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding: 0; list-style: none; }
.vona-platform-link { color: var(--vona-color-fg-80); transition: transform 0.2s, color 0.2s; display: inline-flex; }
.vona-platform-link:hover { transform: translateY(-2px); color: var(--vona-color-fg); }
.vona-platform-icon { height: 2rem; width: auto; display: block; }
.vona-hero-visual { display: flex; justify-content: center; }
@media (min-width: 768px) { .vona-hero-visual { justify-content: flex-end; } }
.vona-vinyl { position: relative; height: 18rem; width: 18rem; }
@media (min-width: 768px) { .vona-vinyl { height: 20rem; width: 20rem; } }
.vona-vinyl-glow { position: absolute; inset: 0; border-radius: 9999px; background-image: var(--vona-gradient-sun); filter: blur(40px); opacity: 0.4; }
.vona-vinyl-svg { position: relative; height: 100%; width: 100%; display: block; animation: vonaFloat 6s ease-in-out infinite; }
.vona-vinyl-spin { animation: vonaSpin 28s linear infinite; transform-origin: 100px 100px; }
@keyframes vonaSpin { to { transform: rotate(360deg); } }
@keyframes vonaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* video feature */
.vona-video-feature { padding: 4rem 0; }
.vona-video-feature-head { margin-bottom: 2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vona-video-feature-link { display: none; font-size: 0.875rem; color: var(--vona-color-muted-fg); text-decoration: none; }
@media (min-width: 768px) { .vona-video-feature-link { display: inline; } }
.vona-video-feature-link:hover { color: var(--vona-color-fg); }
.vona-frame-wrap { overflow: hidden; border-radius: 1rem; box-shadow: var(--vona-shadow-elegant); border: 1px solid var(--vona-color-border); }
.vona-frame-inner { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vona-frame-inner iframe { position: absolute; inset: 0; height: 100%; width: 100%; border: 0; }

/* media placeholder fallback */
.vona-media-missing { position: relative; background-image: linear-gradient(135deg, var(--vona-color-surface-muted), var(--vona-color-band)); }
.vona-media-missing::after {
  content: attr(data-fallback-label);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 1rem; text-align: center; font-family: var(--vona-font-display); font-size: 0.875rem;
  color: var(--vona-color-fg-70);
}

/* albums */
.vona-albums { padding: 4rem 0; }
.vona-albums-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .vona-albums-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .vona-albums-grid { grid-template-columns: repeat(3, 1fr); } }
.vona-album-card { position: relative; display: block; overflow: hidden; border-radius: 1rem; background: var(--vona-color-card); box-shadow: var(--vona-shadow-soft); border: 1px solid var(--vona-color-border); text-decoration: none; color: inherit; transition: transform 0.25s, box-shadow 0.25s; }
.vona-album-card:hover { transform: translateY(-4px); box-shadow: var(--vona-shadow-elegant); }
.vona-album-cover-wrap { aspect-ratio: 1 / 1; overflow: hidden; background: var(--vona-color-surface-muted); }
.vona-album-cover { height: 100%; width: 100%; object-fit: cover; display: block; transition: transform 0.7s; }
.vona-album-card:hover .vona-album-cover { transform: scale(1.05); }
.vona-album-info { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1.25rem; }
.vona-album-title { margin: 0; font-family: var(--vona-font-display); font-weight: 500; font-size: 1.25rem; color: var(--vona-color-fg); }
.vona-album-subtitle { margin: 0; font-size: 0.875rem; color: var(--vona-color-muted-fg); }
.vona-album-play { flex-shrink: 0; display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px; background: var(--vona-color-accent); color: var(--vona-color-accent-fg); transition: transform 0.2s; }
.vona-album-card:hover .vona-album-play { transform: scale(1.1); }
.vona-album-play svg { height: 1.25rem; width: 1.25rem; fill: currentColor; }

/* planeta 9 */
.vona-planeta { padding: 4rem 0; }
.vona-planeta-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .vona-planeta-grid { grid-template-columns: 320px 1fr; align-items: start; } }
.vona-planeta-cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 1rem; box-shadow: var(--vona-shadow-elegant); display: block; }
.vona-planeta-desc { margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.65; color: var(--vona-color-muted-fg); }
.vona-planeta-embed-wrap { overflow: hidden; border-radius: 1rem; box-shadow: var(--vona-shadow-soft); border: 1px solid var(--vona-color-border); }
.vona-planeta-embed-wrap iframe { display: block; border: 0; width: 100%; height: 500px; }

/* listen platforms band */
.vona-listen { padding: 5rem 0; background-color: #a5a9c1; }
.vona-listen-inner { text-align: center; }
.vona-listen-grid { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; list-style: none; padding: 0; }
@media (min-width: 768px) { .vona-listen-grid { gap: 3.5rem; } }
.vona-listen-link { transition: transform 0.2s; display: inline-flex; }
.vona-listen-link:hover { transform: translateY(-2px); }
.vona-listen-icon { height: 2.5rem; width: auto; display: block; }
@media (min-width: 768px) { .vona-listen-icon { height: 3rem; } }

/* video grid */
.vona-videogrid { padding: 4rem 0; }
.vona-videogrid-head { margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .vona-videogrid-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.vona-videogrid-copy { max-width: 42rem; }
.vona-videogrid-desc { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.65; color: var(--vona-color-muted-fg); }
@media (min-width: 768px) { .vona-videogrid-desc { font-size: 1rem; } }
.vona-videogrid-cta { display: inline-flex; width: fit-content; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid var(--vona-color-border); padding: 0.5rem 1.25rem; font-size: 0.875rem; color: var(--vona-color-fg); text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.vona-videogrid-cta:hover { background: var(--vona-color-accent); color: var(--vona-color-accent-fg); }
.vona-videogrid-list { display: grid; grid-template-columns: 1fr; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .vona-videogrid-list { grid-template-columns: repeat(2, 1fr); } }
.vona-video-card { overflow: hidden; border-radius: 1rem; box-shadow: var(--vona-shadow-soft); border: 1px solid var(--vona-color-border); transition: box-shadow 0.25s; margin: 0; }
.vona-video-card:hover { box-shadow: var(--vona-shadow-elegant); }
.vona-video-card-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vona-video-card-frame iframe { position: absolute; inset: 0; height: 100%; width: 100%; border: 0; }
.vona-video-card-caption { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; margin: 0; }
.vona-video-card-title { font-family: var(--vona-font-display); font-size: 1rem; color: var(--vona-color-fg); }
.vona-video-card-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--vona-color-muted-fg); }

/* song grid */
.vona-songs { padding: 4rem 0; }
.vona-songs-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .vona-songs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vona-songs-grid { grid-template-columns: repeat(3, 1fr); } }
.vona-songs-intro { display: flex; flex-direction: column; justify-content: center; }
.vona-songs-heading { margin: 0.5rem 0 0; font-family: var(--vona-font-display); font-weight: 500; font-size: 1.875rem; line-height: 1.1; color: var(--vona-color-fg); }
@media (min-width: 768px) { .vona-songs-heading { font-size: 2.25rem; } }
.vona-songs-desc { margin-top: 1rem; font-size: 0.875rem; color: var(--vona-color-muted-fg); }
.vona-song-embed { width: 100%; height: 152px; border: 0; border-radius: 0.75rem; display: block; }

/* playlists */
.vona-playlists { padding: 4rem 0; background: var(--vona-color-surface-muted); }
.vona-playlists-desc { margin-top: 1rem; max-width: 36rem; font-size: 0.875rem; color: var(--vona-color-muted-fg); }
.vona-playlists-grid { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .vona-playlists-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vona-playlists-grid { grid-template-columns: repeat(4, 1fr); } }
.vona-playlist-embed { width: 100%; height: 235px; border: 0; border-radius: 0.75rem; display: block; }

/* about */
.vona-about { padding: 4rem 0; }
.vona-about-grid { display: grid; grid-template-columns: 1fr; align-items: center; gap: 3rem; }
@media (min-width: 768px) { .vona-about-grid { grid-template-columns: 1fr 1fr; } }
.vona-about-bio { margin-top: 1.5rem; font-size: 1rem; line-height: 1.65; color: var(--vona-color-muted-fg); white-space: pre-line; }
.vona-about-portraits { position: relative; margin: 0 auto; aspect-ratio: 1 / 1; width: 100%; max-width: 32rem; }
.vona-portrait { position: absolute; overflow: hidden; border-radius: 9999px; box-shadow: var(--vona-shadow-soft); border: 4px solid var(--vona-color-surface); }
.vona-portrait img { height: 100%; width: 100%; object-fit: cover; display: block; }
.vona-portrait-ra { left: 0; top: 0; height: 58%; width: 58%; z-index: 20; box-shadow: var(--vona-shadow-elegant); }
.vona-portrait-c2 { right: 0; top: 6%; height: 60%; width: 60%; z-index: 10; }
.vona-portrait-c1 { bottom: 0; left: 50%; height: 42%; width: 42%; transform: translateX(-25%); z-index: 30; }

/* gallery */
.vona-gallery { padding: 4rem 0; }
.vona-gallery-rows { display: flex; flex-direction: column; gap: 1.5rem; }
.vona-gallery-row { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .vona-gallery-row { flex-direction: row; height: 280px; } }
.vona-gallery-item { overflow: hidden; border-radius: 1rem; }
.vona-gallery-item img { height: 100%; width: 100%; object-fit: cover; display: block; }
.vona-gallery-narrow { aspect-ratio: 4 / 5; }
@media (min-width: 768px) { .vona-gallery-narrow { aspect-ratio: auto; width: 24%; } }
.vona-gallery-wide { aspect-ratio: 16 / 9; }
@media (min-width: 768px) { .vona-gallery-wide { aspect-ratio: auto; flex: 1 1 0%; } }
.vona-gallery-med { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .vona-gallery-med { aspect-ratio: auto; width: 37%; } }

/* booklets */
.vona-booklets { padding: 5rem 0; background: var(--vona-color-bg); }
.vona-booklets-inner { display: flex; flex-direction: column; align-items: center; gap: 5rem; }
.vona-booklet { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vona-booklet-preview-wrap { width: 100%; max-width: 56rem; overflow: hidden; border-radius: 1rem; aspect-ratio: 4 / 3; }
.vona-booklet-preview-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vona-booklet-info { margin-top: 2.5rem; max-width: 36rem; }
.vona-booklet-title { margin: 0; font-family: var(--vona-font-display); font-weight: 500; font-size: 1.5rem; color: var(--vona-color-fg); }
@media (min-width: 768px) { .vona-booklet-title { font-size: 1.875rem; } }
.vona-booklet-desc { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.65; color: var(--vona-color-muted-fg); }
.vona-booklet-btn { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; background: var(--vona-color-primary); color: var(--vona-color-primary-fg); padding: 0.75rem 1.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; border: 0; cursor: pointer; transition: transform 0.2s; font-family: var(--vona-font-body); text-decoration: none; }
.vona-booklet-btn:hover { transform: translateY(-2px); }

/* footer */
.vona-footer { border-top: 1px solid var(--vona-color-border); background: var(--vona-color-surface-muted); }
.vona-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 3rem 0; text-align: center; }
.vona-footer-wordmark { font-size: 1rem; color: var(--vona-color-fg-70); }
.vona-social-list { display: flex; align-items: center; gap: 1.25rem; color: var(--vona-color-muted-fg); list-style: none; margin: 0; padding: 0; }
.vona-social-link { color: inherit; transition: color 0.2s; display: inline-flex; }
.vona-social-link:hover { color: var(--vona-color-fg); }
.vona-social-icon { height: 1.25rem; width: 1.25rem; fill: currentColor; }
.vona-copyright { font-size: 0.75rem; color: var(--vona-color-muted-fg); margin: 0; }

/* generic wordpress page content (booklet pages, contact page, etc.) */
.vona-page { padding: 9rem 0 5rem; }
.vona-page-title { margin: 0 0 2rem; font-family: var(--vona-font-display); font-weight: 500; font-size: 2.25rem; color: var(--vona-color-fg); letter-spacing: -0.01em; }
.vona-page-content { font-size: 1rem; line-height: 1.7; color: var(--vona-color-fg); max-width: 42rem; }
.vona-page-content p { margin: 0 0 1.25rem; }
.vona-page-content a { color: var(--vona-color-accent); }
.vona-page-content img { max-width: 100%; height: auto; border-radius: 0.75rem; }
.vona-page-content ul, .vona-page-content ol { padding-left: 1.25rem; }
.vona-page-content .wpcf7-form p { margin: 0 0 1rem; }
.vona-page-content .wpcf7-form input[type="text"],
.vona-page-content .wpcf7-form input[type="email"] {
  margin-top: 0.5rem; width: 100%; max-width: 28rem; border-radius: 0.5rem; border: 1px solid var(--vona-color-border);
  background: var(--vona-color-surface); padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--vona-color-fg);
  outline: none; transition: border-color 0.2s; box-sizing: border-box; font-family: var(--vona-font-body);
}
.vona-page-content .wpcf7-form input[type="text"]:focus,
.vona-page-content .wpcf7-form input[type="email"]:focus { border-color: var(--vona-color-accent); }
.vona-page-content .wpcf7-form input[type="submit"] {
  border-radius: 9999px; background: var(--vona-color-primary); color: var(--vona-color-primary-fg);
  padding: 0.75rem 1.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; border: 0;
  cursor: pointer; transition: transform 0.2s; font-family: var(--vona-font-body);
}
.vona-page-content .wpcf7-form input[type="submit"]:hover { transform: translateY(-2px); }