/* PirloTV — ports pirlotv.la/style1.css onto theme.json tokens and adds modern UX (details accordion, focus states, fluid type). */

html { scroll-behavior: smooth; interpolate-size: allow-keywords; }
body { margin: 0; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > footer { margin-top: auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }

/* ---------- header / footer ---------- */
header.wp-block-template-part { position: sticky; top: 0; z-index: 20; }
.pirlo-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; box-shadow: 0 4px 6px rgba(0, 0, 0, .1); background: var(--wp--preset--color--red); }
.pirlo-logo { margin: 0; font-family: "DIN Condensed", "Bebas Neue", "Oswald", "Roboto Condensed", "Arial Narrow", "Arial", sans-serif; font-size: 2.1rem; font-weight: 700; font-stretch: condensed; line-height: 1; letter-spacing: .015em; text-transform: uppercase; }
.pirlo-logo a, .pirlo-logo a:hover { color: var(--wp--preset--color--logo); text-decoration: none; }
.pirlo-header .wp-block-navigation { font-weight: 700; font-size: 20px; }
.pirlo-header .wp-block-navigation a { color: #fff; }
.pirlo-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; min-height: 40px; padding: 16px 24px; font-size: 13px; background: var(--wp--preset--color--red); color: #fff; }
.pirlo-footer p { margin: 0; }
.pirlo-footer a { color: #fff; }

/* ---------- main column ---------- */
.pirlo-main { width: 100%; max-width: 900px; margin: 10px auto; padding-bottom: 12px; background: var(--wp--preset--color--panel); }
.pirlo-main > * { max-width: none; }
.pirlo-main h1 { margin: 10px 0 15px; padding: 0 14px; text-align: center; }
.pirlo-main h2 { margin: 12px 0 2px; padding: 2px 8px; text-align: center; }
.pirlo-main h3 { margin: 12px 14px 4px; font-size: 1rem; }
.seo-description, .pirlo-context, .pirlo-main > p { padding: 0 14px; }
.seo-description { margin: 0 0 15px; font-size: .95rem; }
.pirlo-context { margin: 10px 0; font-size: .95rem; line-height: 1.6; }
.pirlo-context p { margin: 0 0 .6em; }
.pirlo-empty { padding: 14px; text-align: center; }
@media (max-width: 650px) { .pirlo-main { font-size: .92rem; } .pirlo-header .wp-block-navigation { font-size: 16px; } }

/* ---------- breadcrumb ---------- */
.pirlo-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .3em; margin: 0; padding: 8px 14px; list-style: none; font-size: .85rem; color: #bbb; }
.pirlo-breadcrumb li + li::before { content: "›"; margin-right: .3em; opacity: .6; }
.pirlo-breadcrumb a { color: #ddd; }

/* ---------- agenda accordion (original .menu look) ---------- */
.pirlo-agenda, .pirlo-agenda ul { margin: 0; padding: 0; list-style: none; }
.pirlo-agenda { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .73), 0 0 18px 0 rgba(0, 0, 0, .1); }
.pirlo-event details::details-content { block-size: 0; overflow: clip; transition: block-size .2s ease, content-visibility .2s allow-discrete; }
.pirlo-event details[open]::details-content { block-size: auto; }
.pirlo-event summary { position: relative; display: flex; align-items: center; gap: .8em; min-height: 2.6em; padding: .55em 2.4em .55em .4em; cursor: pointer; list-style: none; background: #fff; box-shadow: inset 0 1px 0 0 #878e98; color: var(--wp--preset--color--row-text); font: 600 1.04em/1.35 Arial, Helvetica, sans-serif; }
.pirlo-event summary::-webkit-details-marker { display: none; }
.pirlo-event summary::after { content: "▾"; position: absolute; right: 1em; top: 50%; translate: 0 -50%; opacity: .55; transition: rotate .15s; }
.pirlo-event details[open] > summary::after { rotate: 180deg; }
.pirlo-event summary:hover, .pirlo-event details[open] > summary { background: var(--wp--preset--color--green-light); box-shadow: inset 0 1px 0 0 #404040; }
.pirlo-event .t { flex: 0 0 auto; min-width: 4.8em; padding: .3em .7em; border-radius: .57em; background: #fff; box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, .16), 0 1px 0 0 rgba(63, 68, 74, .1); color: #222d36; font-weight: 500; line-height: 1.1; text-align: center; white-space: nowrap; }
.pirlo-event__name { flex: 1 1 auto; min-width: 0; }
.pirlo-badge { display: none; flex: none; margin-left: .2em; white-space: nowrap; padding: .15em .55em; border-radius: 99px; background: var(--wp--preset--color--red); color: #fff; font-size: .68em; letter-spacing: .04em; line-height: 1.5; }
.pirlo-event[data-status="live"] .pirlo-badge { display: inline-block; }
.pirlo-event[data-status="finished"] summary { opacity: .6; }
.pirlo-event details > ul a { position: relative; display: flex; align-items: center; box-sizing: border-box; min-height: 2.8em; padding: .35em 1em .35em 3.75em; background: #fff; border-bottom: 1px solid #efeff0; color: var(--wp--preset--color--sub-text); font: 500 1em/1.3 Arial, Helvetica, sans-serif; }
.pirlo-event details > ul a::before { content: "►"; position: absolute; left: 1.3em; top: 50%; translate: 0 -50%; font-size: 9px; color: var(--wp--preset--color--sub-text); }
.pirlo-event details > ul li:last-child a { border-bottom: 1px solid #33373d; }
.pirlo-event details > ul a:hover, .pirlo-event details > ul a:hover::before { color: var(--wp--preset--color--accent); text-decoration: none; }
.pirlo-event .pirlo-more a { font-style: italic; }

/* ---------- player ---------- */
.pirlo-player { margin: 0 0 12px; }
.pirlo-when { margin: .4em 14px; font-size: .9rem; color: #bbb; }
.pirlo-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; }
.pirlo-tab { min-height: 44px; padding: .5em 1.1em; border: 0; border-radius: 6px; background: #fff; color: var(--wp--preset--color--row-text); font: 600 .9rem Arial, Helvetica, sans-serif; cursor: pointer; }
.pirlo-tab:hover { background: var(--wp--preset--color--green-light); }
.pirlo-tab.is-active { background: var(--wp--preset--color--green); color: #fff; }
.pirlo-tab:disabled { opacity: .4; cursor: not-allowed; }
.pirlo-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.pirlo-stage > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pirlo-facade { display: flex; align-items: center; justify-content: center; gap: .5em; background: radial-gradient(circle at center, #2b2b2b, #000 70%); color: #fff; font: 700 1.3rem Arial, Helvetica, sans-serif; cursor: pointer; }
.pirlo-facade:hover { color: var(--wp--preset--color--gold); }
.pirlo-player--empty { padding: 20px 14px; }

/* ---------- leagues / channels / related ---------- */
.pirlo-leagues ul, .pirlo-channels, .pirlo-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 6px 14px; list-style: none; }
.pirlo-leagues li a, .pirlo-channels li a { display: block; padding: .45em .9em; border-radius: 6px; background: #333; font-size: .9rem; }
.pirlo-leagues li a:hover, .pirlo-channels li a:hover { background: var(--wp--preset--color--red); color: #fff; text-decoration: none; }
.pirlo-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pirlo-links { display: block; }
.pirlo-links li { padding: .35em 0; border-bottom: 1px solid #333; }
.pirlo-links time { display: inline-block; min-width: 3.6em; margin-right: .5em; color: var(--wp--preset--color--green-light); font-weight: 700; }
.pirlo-more-link { padding: 4px 14px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.pirlo-event details::details-content, .pirlo-event summary::after { transition: none; }
}

/* Minimal navigation (replaces the core navigation stylesheet, see Setup::slim). */
.pirlo-header .wp-block-navigation__container { display: flex; flex-wrap: wrap; gap: 0 1rem; list-style: none; margin: 0; padding: 0; }
.pirlo-header .wp-block-navigation-item { list-style: none; }

/* Text under the player: schedule table, copy, FAQ */
.pirlo-guide { padding: 4px 14px 14px; background: var(--wp--preset--color--panel); line-height: 1.6; }
.pirlo-guide p { margin: .6em 0; }
.pirlo-guide h2 { margin: 1.1em -14px .5em; padding: 6px 14px; text-align: center; }
.pirlo-zones { width: 100%; border-collapse: collapse; margin: .6em 0; font-size: .95em; }
.pirlo-zones th, .pirlo-zones td { padding: 6px 8px; border-bottom: 1px solid #333; text-align: left; }
.pirlo-zones thead th { color: var(--wp--preset--color--green-light); }
.pirlo-faq__item { border-bottom: 1px solid #333; }
.pirlo-faq__item summary { cursor: pointer; padding: 10px 0; font-weight: 700; list-style-position: inside; }
.pirlo-faq__item p { margin: 0 0 10px; color: #d0d0d0; }
.pirlo-next { margin: .4em 0; padding-left: 1.2em; }
.pirlo-next li { margin: .3em 0; }