/*
Theme Name: Roni Eytan
Template: twentytwentyfive
Description: Child theme of Twenty Twenty-Five for roni eytan's website. Colours from the Melody People photo shoot; Literata stands in for ABC Laica until a Dinamo web licence exists.
Version: 0.7.6
Text Domain: roni
*/

/* Dropdowns: cream panel, roomy items, sentence case (the top bar stays uppercase). */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--accent-5) !important;
	border: 0 !important;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(28, 23, 20, 0.12);
	padding: 0.6rem 0;
	min-width: 13rem !important;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	font-weight: 500;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.45rem 1.25rem !important;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}

/* Header: socials + Subscribe pinned top right on wide screens. */
.roni-header { position: relative; z-index: 100; } /* dropdowns must sit above the page banners */
.roni-header-actions { position: absolute; top: 50%; right: var(--wp--preset--spacing--50); transform: translateY(-50%); }
.roni-subscribe .wp-block-button__link {
	border-radius: 999px !important;
	padding: 0.85rem 1.6rem;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	font-weight: 500;
}
@media (max-width: 1100px) {
	/* Not enough room beside the centred menu: tuck it under, centred. */
	.roni-header-actions { position: static; transform: none; margin-top: var(--wp--preset--spacing--20); }
}

/* Apple Music has no core social icon: reuse the "chain" link with a note glyph. */
.roni-applemusic svg { display: none; }
.roni-applemusic a::before { content: "\266B"; font-size: 0.95em; line-height: 1; }

/* Home hero: a wide landscape strip, framed on the face. */
.wp-block-cover.roni-hero { aspect-ratio: 21 / 9; min-height: 0 !important; padding: 0 !important; }
@media (max-width: 700px) { .wp-block-cover.roni-hero { aspect-ratio: 4 / 3; } }

/* Page transitions (cross-document View Transitions): the header stays put,
   the page content fades out and the new one fades in, rising slightly.
   Browsers without support just navigate normally. */
@view-transition { navigation: auto; }
.roni-header { view-transition-name: roni-header; }
::view-transition-old(root) { animation: roni-fade-out 220ms ease-in both; }
::view-transition-new(root) { animation: roni-fade-in 420ms cubic-bezier(.2,.7,.2,1) both; }
::view-transition-group(roni-header) { animation: none; }
@keyframes roni-fade-out { to { opacity: 0; } }
@keyframes roni-fade-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}

/* Page banners: the page's featured image as a wide strip under the header.
   Framing per page (page ids from the local build — see page-ids.txt). */
.wp-block-cover.roni-banner { aspect-ratio: 21 / 8 !important; min-height: 0 !important; }
@media (max-width: 700px) { .wp-block-cover.roni-banner { aspect-ratio: 4 / 3 !important; } }
.roni-banner .wp-block-cover__image-background { object-position: 50% 25%; }
.page-id-9  .roni-banner .wp-block-cover__image-background { object-position: 62% 38%; } /* Tour — 244 */
.page-id-10 .roni-banner .wp-block-cover__image-background { object-position: 55% 30%; } /* About — 103 */
.page-id-19 .roni-banner .wp-block-cover__image-background { object-position: 50% 14%; } /* Discography — 868 */
.page-id-20 .roni-banner .wp-block-cover__image-background { object-position: 45% 10%; } /* Quotes — 717 */
.page-id-22 .roni-banner .wp-block-cover__image-background,
.page-id-13 .roni-banner .wp-block-cover__image-background { object-position: 50% 18%; } /* Melody People, Shop — 405 */
.page-id-12 .roni-banner .wp-block-cover__image-background,
.page-id-23 .roni-banner .wp-block-cover__image-background { object-position: 55% 30%; } /* Media, Videos — 314 */
.page-id-24 .roni-banner .wp-block-cover__image-background { object-position: 45% 64%; } /* Images — 610 */
.page-id-14 .roni-banner .wp-block-cover__image-background { object-position: 50% 3%; } /* Booking — 051 */

/* Rounded dark "pill" buttons (Subscribe, Download Biography). */
.roni-pill .wp-block-button__link {
	border-radius: 999px !important; padding: 1rem 2rem;
	text-transform: none; letter-spacing: 0; font-size: 1.05rem; font-weight: 500;
}

/* Biography (About, id 10): wide two-column layout — title lines up with it. */
.page-id-10 .wp-block-post-title { max-width: var(--wp--style--global--wide-size) !important; }

/* Videos page (id 23): big, one per row, and the title lines up with them. */
.page-id-23 .wp-block-post-title { max-width: var(--wp--style--global--wide-size) !important; }
.page-id-23 .wp-block-embed { margin-bottom: var(--wp--preset--spacing--60); }

/* Dropdown parents (About, Projects, Media, Booking) have no page of their
   own: they only open their menu, so don't look like a link. */
.wp-block-navigation .has-child > a.wp-block-navigation-item__content:not([href]) { cursor: default; text-decoration: none !important; }

/* Concert list (Tour page + home): date · venue / city · tickets, hairlines between. */
.roni-shows { margin-top: var(--wp--preset--spacing--40); }
.roni-show { padding: var(--wp--preset--spacing--40) 0; margin: 0 !important; border-bottom: 1px solid var(--wp--preset--color--accent-6); gap: var(--wp--preset--spacing--40); }
.roni-show:first-child { border-top: 1px solid var(--wp--preset--color--accent-6); }
.roni-show p, .roni-show h3 { margin: 0; }
.roni-show-date p { font-family: var(--wp--preset--font-family--literata); font-size: 1.05rem; color: var(--wp--preset--color--accent-4); padding-top: 0.35rem; }
.roni-show-title { font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important; }
.roni-show-city { color: var(--wp--preset--color--accent-4); margin-top: 0.35rem !important; }
.roni-show-links p { padding-top: 0.45rem; }
.roni-show-links a { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--accent-1); }
.roni-show-links a:hover { color: var(--wp--preset--color--accent-3); }
.page-id-9 .wp-block-post-title { max-width: var(--wp--style--global--wide-size) !important; }
@media (max-width: 600px) { .roni-show-date { flex-basis: 22% !important; } .roni-show-links { flex-basis: 24% !important; } }

/* Gallery lightbox (assets/js/gallery-lightbox.js). */
.wp-block-gallery .wp-block-image a { cursor: zoom-in; }
.wp-block-gallery .wp-block-image img { transition: opacity .2s; }
.wp-block-gallery .wp-block-image a:hover img { opacity: .88; }
html.roni-lb-open { overflow: hidden; }
.roni-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(28, 23, 20, .94); display: flex; align-items: center; justify-content: center; }
.roni-lightbox[hidden] { display: none; }
.roni-lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 88vw; }
.roni-lightbox img { max-width: 88vw; max-height: 84vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.roni-lb-count { color: var(--wp--preset--color--base); opacity: .7; font-size: .85rem; margin-top: .9rem; letter-spacing: .08em; }
.roni-lightbox button { position: absolute; background: none; border: 0; color: var(--wp--preset--color--base); cursor: pointer; line-height: 1; padding: .5rem 1rem; opacity: .8; transition: opacity .15s; }
.roni-lightbox button:hover, .roni-lightbox button:focus-visible { opacity: 1; }
.roni-lb-close { top: 1rem; right: 1rem; font-size: 2.6rem; }
.roni-lb-prev, .roni-lb-next { top: 50%; transform: translateY(-50%); font-size: 3.6rem; }
.roni-lb-prev { left: .5rem; } .roni-lb-next { right: .5rem; }
@media (max-width: 700px) { .roni-lb-prev, .roni-lb-next { font-size: 2.6rem; top: auto; bottom: 1.2rem; transform: none; } .roni-lightbox img { max-width: 94vw; } }
.roni-lightbox button:focus { outline: none; }
.roni-lightbox button:focus-visible { outline: 1px solid rgba(244, 238, 230, .6); outline-offset: 2px; border-radius: 4px; }

/* Discography (id 19): reuses the concert-list rows. */
.page-id-19 .wp-block-post-title { max-width: var(--wp--style--global--wide-size) !important; }
.roni-disc-h { font-size: 1.5rem !important; margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--20) !important; }
.roni-shows:first-of-type .roni-disc-h { margin-top: 0 !important; }
.roni-disc { padding: var(--wp--preset--spacing--30) 0; }
.roni-disc-title { font-family: var(--wp--preset--font-family--literata); font-size: 1.2rem; font-weight: 500; }
.roni-disc-credit p { color: var(--wp--preset--color--accent-4); font-size: .95rem; padding-top: .2rem; text-align: right; }
@media (max-width: 700px) {
	/* phone: year | everything else stacked (artist, album · label, credit) */
	.roni-disc { display: grid !important; grid-template-columns: 3.6rem minmax(0, 1fr); column-gap: 1rem; row-gap: .25rem; }
	.roni-disc > .wp-block-column { flex-basis: auto !important; width: auto !important; min-width: 0; }
	.roni-disc > .roni-disc-credit { grid-column: 2; }
	.roni-disc-credit p { text-align: left; padding-top: 0; }
	.roni-disc-credit:has(p:empty) { display: none; }
}

/* Newsletter sign-up form (footer band). */
.roni-signup { max-width: 640px; margin: var(--wp--preset--spacing--40) auto 0; }
.roni-signup-fields { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.roni-signup input[type=text], .roni-signup input[type=email] {
	flex: 1 1 180px; min-width: 0; padding: .9rem 1.1rem; border: 1px solid rgba(251, 248, 244, .55); border-radius: 999px;
	background: rgba(251, 248, 244, .08); color: var(--wp--preset--color--accent-5); font: inherit;
}
.roni-signup input::placeholder { color: rgba(251, 248, 244, .75); }
.roni-signup input:focus { outline: none; border-color: var(--wp--preset--color--accent-5); background: rgba(251, 248, 244, .14); }
.roni-signup button {
	padding: .9rem 1.8rem; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600;
	background: var(--wp--preset--color--accent-5); color: var(--wp--preset--color--accent-1);
}
.roni-signup button:hover { background: var(--wp--preset--color--base); }
.roni-signup button:disabled { opacity: .6; cursor: default; }
.roni-signup-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.roni-signup-msg { min-height: 1.4em; margin: .9rem 0 0; text-align: center; font-size: .95rem; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* Phone menu (overlay) — full-screen cream page, large serif items with hairlines,
   accordion sub-menus: collapsed until the heading is tapped (core sets
   aria-expanded on the toggle button), chevron turns down when open. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: calc(var(--wp--preset--spacing--60) + env(safe-area-inset-top, 0px)) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) !important;
	animation: roni-menu-in .25s ease-out;
}
@keyframes roni-menu-in { from { opacity: 0; transform: translateY(-6px); } }
.is-menu-open .wp-block-navigation__responsive-container-close { top: calc(1.25rem + env(safe-area-inset-top, 0px)) !important; right: 1.25rem !important; }
.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding-top: var(--wp--preset--spacing--40) !important; }
.is-menu-open .wp-block-navigation__container {
	width: 100%; max-width: 420px; margin: 0 auto; gap: 0 !important; align-items: stretch !important;
}
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%; flex-direction: column; align-items: stretch !important;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child { border-top: 1px solid var(--wp--preset--color--accent-6); }
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex; justify-content: space-between; align-items: center; width: 100%;
	padding: 1.05rem .15rem !important; text-align: left;
	font-family: var(--wp--preset--font-family--literata); font-size: 1.65rem; font-weight: 500;
	text-transform: none; letter-spacing: -.01em; line-height: 1.2; color: var(--wp--preset--color--contrast);
}
/* chevron on the headings that have a sub-menu */
.is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }
.is-menu-open .has-child > .wp-block-navigation-item__content::after {
	content: ""; width: .5rem; height: .5rem; margin-left: 1rem; flex: none;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg); opacity: .7;
}
.is-menu-open .has-child.roni-sub-open > .wp-block-navigation-item__content::after { transform: rotate(45deg); }
/* sub-menus: hidden until opened */
.is-menu-open .wp-block-navigation__submenu-container {
	display: none !important; position: static !important; opacity: 1 !important; visibility: visible !important;
	width: auto !important; height: auto !important; min-width: 0 !important;
	background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
	padding: 0 0 .9rem .15rem !important; gap: 0 !important; align-items: flex-start !important;
}
.is-menu-open .has-child.roni-sub-open > .wp-block-navigation__submenu-container {
	display: flex !important; flex-direction: column; animation: roni-sub-in .2s ease-out;
}
@keyframes roni-sub-in { from { opacity: 0; transform: translateY(-4px); } }
.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .45rem 0 !important; font-size: 1.05rem; font-weight: 500; text-transform: none; letter-spacing: 0;
	color: var(--wp--preset--color--accent-4);
}
.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent-1); }
/* social icons inside the menu: phone overlay only */
.wp-block-navigation .roni-menu-social { display: none !important; }
.is-menu-open .roni-menu-social { display: flex !important; justify-content: center; gap: 1.5rem !important; margin-top: var(--wp--preset--spacing--50) !important; width: 100%; }
.wp-block-navigation a:focus, .wp-block-navigation button:focus { outline: none; }
.wp-block-navigation a:focus-visible, .wp-block-navigation button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; border-radius: 3px; }
/* overlay polish: no box around the auto-focused first item, no rule under the icons */
.is-menu-open .wp-block-navigation-item__content:focus-visible { outline: none; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:has(.roni-menu-social),
.is-menu-open .roni-menu-social, .is-menu-open .roni-menu-social .wp-block-navigation-item { border: 0 !important; }

/* ── Motion (assets/js/animations.js adds the classes) ─────────────────── */
@media (prefers-reduced-motion: no-preference) {
	/* page load, for browsers without cross-document View Transitions */
	html.roni-page-in main { animation: roni-page-in .5s cubic-bezier(.2,.7,.2,1) both; }
	@keyframes roni-page-in { from { opacity: 0; transform: translateY(14px); } }
	/* scroll reveal */
	.roni-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
	.roni-reveal.roni-in { opacity: 1; transform: none; }
	/* phone menu: items arrive one after another */
	.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item,
	.is-menu-open .roni-menu-social { animation: roni-item-in .4s cubic-bezier(.2,.7,.2,1) both; }
	.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: .04s; }
	.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: .08s; }
	.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: .12s; }
	.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: .16s; }
	.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: .20s; }
	.is-menu-open .roni-menu-social { animation-delay: .26s; }
	@keyframes roni-item-in { from { opacity: 0; transform: translateY(10px); } }
	/* accordion: arrow turns smoothly, sub-items slide in */
	.is-menu-open .has-child > .wp-block-navigation-item__content::after { transition: transform .22s ease; }
	.is-menu-open .has-child.roni-sub-open > .wp-block-navigation__submenu-container > .wp-block-navigation-item { animation: roni-item-in .3s ease-out both; }
	.is-menu-open .has-child.roni-sub-open > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(2) { animation-delay: .04s; }
	.is-menu-open .has-child.roni-sub-open > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(3) { animation-delay: .08s; }
}

/* Phone menu: no frame/box when a heading is tapped (focus ring / iOS tap
   highlight showed as a black square around "About"). Keyboard users still
   get an underline via :focus-visible above. */
.is-menu-open .wp-block-navigation-item__content,
.is-menu-open .wp-block-navigation-item__content:focus,
.is-menu-open .wp-block-navigation-item__content:active {
	outline: none !important; box-shadow: none !important; border: 0 !important;
	-webkit-tap-highlight-color: transparent;
}
.wp-block-navigation .wp-block-navigation-item__content { -webkit-tap-highlight-color: transparent; }
@media (max-width: 600px) {
	/* phone: name, email and button full width, one under the other */
	.roni-signup-fields { flex-direction: column; align-items: stretch; }
	.roni-signup input[type=text], .roni-signup input[type=email], .roni-signup button { flex: none; width: 100%; }
}
.roni-signup input, .roni-signup button { box-sizing: border-box; }

/* Core makes each dropdown row focusable (<li tabindex="-1">) and the parent
   theme outlines anything focused (:where(.wp-site-blocks :focus) 2px solid),
   so clicking/tapping "About" drew a black box around the whole row. The row
   is only focused programmatically — never needs a ring (keyboard focus on
   the links themselves still shows via :focus-visible). */
.wp-block-navigation .wp-block-navigation-item:focus,
.wp-block-navigation .wp-block-navigation-item:focus-visible,
.wp-block-navigation .wp-block-navigation-item:focus-within { outline: none !important; }