/* ==========================================================================
   CiaoComo — skin per il sito pubblico Castopod (podcast.ciaocomoradio.it)
   Iniettato da Nginx Proxy Manager (sub_filter) — non tocca il container.
   Token dal design system CiaoComo (colors_and_type.css).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@500;700;800&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap");

:root {
  --cc-yellow: #FDC300;
  --cc-cyan: #00B1EB;
  --cc-green: #80BC00;
  --cc-gray: #3C3C3B;
  --cc-black: #1D1D1B;
  --cc-cyan-deep: #008BBA;
  --cc-yellow-deep: #E0AC00;
  --cc-n-50: #F7F7F6;
  --cc-n-100: #EEEEEC;
  --cc-n-200: #DDDDD9;
  --cc-n-500: #6A6A66;
  --border: var(--cc-n-200);
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-1: 0 1px 2px rgba(29,29,27,.06), 0 1px 1px rgba(29,29,27,.04);
  --shadow-2: 0 4px 12px rgba(29,29,27,.08), 0 1px 2px rgba(29,29,27,.04);
  --font-condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-semi: "Barlow Semi Condensed", "Barlow", sans-serif;
  --font-body: "Barlow", Arial, system-ui, sans-serif;
  --cc-ribbon: linear-gradient(90deg, var(--cc-green) 0 25%, var(--cc-yellow) 25% 50%, var(--cc-cyan) 50% 75%, var(--cc-gray) 75% 100%);
}

/* --- Palette Castopod → brand (i temi usano triplette HSL) --------------- */
body.theme-lake, body[class*="theme-"] {
  --color-accent-base: 195 100% 46%;        /* cyan  #00B1EB */
  --color-accent-hover: 195 100% 36%;       /* cyan deep #008BBA */
  --color-accent-muted: 60 4% 11%;          /* black #1D1D1B */
  --color-accent-contrast: 0 0% 100%;
  --color-heading-foreground: 60 4% 11%;
  --color-heading-background: 46 100% 50%;  /* yellow #FDC300 */
  --color-background-elevated: 0 0% 100%;
  --color-background-base: 60 6% 97%;       /* #F7F7F6 */
  --color-background-navigation: 60 4% 11%;
  --color-background-header: 60 4% 11%;
  --color-background-highlight: 60 5% 93%;  /* #EEEEEC */
  --color-background-backdrop: 60 4% 11%;
  --color-border-subtle: 60 6% 86%;         /* #DDDDD9 */
  --color-border-contrast: 60 4% 11%;
  --color-text-base: 60 4% 11%;
  --color-text-muted: 60 2% 41%;            /* #6A6A66 */
}

/* --- Tipografia ---------------------------------------------------------- */
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* nastro a quattro colori: il segno distintivo del brand */
  border-top: 6px solid transparent;
  border-image: var(--cc-ribbon) 1;
  border-bottom-width: 0; border-left-width: 0; border-right-width: 0;
}
.font-display { font-family: var(--font-condensed) !important; font-weight: 700; letter-spacing: -.003em; }
.font-sans { font-family: var(--font-body) !important; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cc-cyan); outline-offset: 2px; }

/* --- Header della home e delle pagine istituzionali ---------------------- */
body > header.py-8 {
  background: #fff;
  color: var(--cc-black);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
body > header.py-8 h1 { padding-top: 0; padding-bottom: 0; }
body > header.py-8 h1 > a {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 0; line-height: 1; color: var(--cc-black);
}
body > header.py-8 h1 > a::before {
  content: ""; display: block; width: 94px; height: 76px;
  background: url("logo-color.png") left center / contain no-repeat;
}
body > header.py-8 h1 > a::after {
  content: "Podcast";
  font: 800 30px/1 var(--font-condensed);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--cc-black);
  padding-left: 16px; border-left: 2px solid var(--border);
}

/* --- Titoli di sezione ("Tutti i podcast") ------------------------------- */
h2.text-heading-foreground {
  font-family: var(--font-condensed) !important;
  font-size: 28px !important; line-height: 1 !important;
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  padding-left: 18px;
}
h2.text-heading-foreground::before {
  width: 6px !important; height: 100% !important; bottom: 0 !important;
  border-radius: 0 !important; background: var(--cc-cyan) !important;
}
main > div.border-b.border-subtle { border-bottom: 1px solid var(--border); padding-bottom: 14px; }
#sortby-dropdown, #episode-lists-dropdown {
  font: 700 13px/1 var(--font-condensed); text-transform: uppercase; letter-spacing: .08em;
}

/* --- Griglia podcast (home) ---------------------------------------------- */
.grid-cols-cards { gap: 20px; }
.grid-cols-cards > a {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-1) !important;
  transition: box-shadow 150ms ease-out;
}
.grid-cols-cards > a:hover, .grid-cols-cards > a:focus { box-shadow: var(--shadow-2) !important; }
.grid-cols-cards > a img { transition: transform 250ms cubic-bezier(.2,.6,.2,1) !important; }
.grid-cols-cards > a:hover img { transform: scale(1.03) !important; }
.grid-cols-cards h3 {
  font: 700 21px/1.05 var(--font-condensed) !important;
  margin-bottom: 3px;
}
.grid-cols-cards > a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.grid-cols-cards p { font: 500 13px/1.2 var(--font-body); opacity: .8 !important; }

/* --- Footer (home) ------------------------------------------------------- */
body > footer {
  max-width: none !important; width: 100%;
  margin-top: 48px;
  background: var(--cc-black); color: rgba(255,255,255,.6);
  border-top: 6px solid transparent !important;
  border-image: var(--cc-ribbon) 1;
  padding: 22px max(24px, calc((100% - 1280px) / 2)) !important;
  font: 400 13px/1.4 var(--font-body);
  align-items: center;
}
body > footer a { color: rgba(255,255,255,.8); text-decoration: none !important; }
body > footer a:hover { color: #fff; text-decoration: underline !important; text-underline-offset: 3px; }
body > footer nav a {
  font: 700 13px/1 var(--font-condensed); text-transform: uppercase; letter-spacing: .1em;
  padding: 6px 16px 6px 0 !important;
}

/* --- Pagina podcast: testata con banner ---------------------------------- */
body > header.bg-header h1 { font-size: clamp(22px, 3vw, 34px) !important; line-height: 1 !important; }
body > header.bg-header h1 span { font-family: var(--font-body) !important; font-size: 14px !important; opacity: .8; }
header a[href$="/follow"] {
  background: var(--cc-yellow) !important; color: var(--cc-black) !important;
  font-family: var(--font-semi) !important; font-weight: 700 !important; letter-spacing: .05em !important;
  border-radius: var(--radius-sm) !important; box-shadow: none !important;
}
header a[href$="/follow"]:hover { background: var(--cc-yellow-deep) !important; }

/* Tab: Attività / Episodi / Info */
nav.sticky > a.uppercase {
  font: 700 15px/1.4 var(--font-condensed) !important; letter-spacing: .08em;
}
nav.sticky > a.uppercase.border-accent-base { color: var(--cc-black) !important; }
.rounded-conditional-b-xl { border-radius: 0 0 var(--radius-md) var(--radius-md) !important; }

/* Card post ed episodi */
main article.bg-elevated {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-1) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}
main article.bg-elevated:hover { box-shadow: var(--shadow-2) !important; }
main article h2 { font: 700 19px/1.15 var(--font-condensed) !important; }
main article a.font-semibold.line-clamp-2 { font: 700 18px/1.15 var(--font-condensed); }
main article header span.font-semibold { font-family: var(--font-semi); font-weight: 700; }
main article img.rounded-lg { border-radius: var(--radius-sm) !important; }
main h1.font-semibold { font: 700 22px/1 var(--font-condensed); text-transform: uppercase; letter-spacing: .02em; }

/* Badge stagione/episodio (S02:E09) */
abbr[title^="Season"], abbr[title^="Stagione"] {
  font: 700 11px/1 var(--font-condensed) !important; letter-spacing: .08em !important;
  padding: 4px 7px !important; border: 0 !important; border-radius: var(--radius-xs);
  background: var(--cc-n-100); color: var(--cc-gray) !important;
}
header abbr[title^="Season"], header abbr[title^="Stagione"] { background: var(--cc-yellow); color: var(--cc-black) !important; }
time.bg-black\/75 { font-family: var(--font-condensed); font-weight: 700; letter-spacing: .03em; border-radius: var(--radius-xs) !important; }

/* Pagina episodio: testata nera "on air" invece dell'azzurro al 75% */
header[class*="bg-accent-base/75"] { background-color: rgba(29,29,27,.88) !important; }
header[class*="bg-accent-base/75"] h1 { font-size: clamp(26px, 3.4vw, 40px) !important; line-height: 1.02 !important; }
header[class*="bg-accent-base/75"] img.rounded-md { border-radius: var(--radius-sm) !important; }
.prose-sm, .prose { font-family: var(--font-body); }
div.bg-header > h2.uppercase.font-display { font: 700 13px/1 var(--font-condensed) !important; letter-spacing: .12em !important; color: var(--cc-yellow); }

/* Sidebar */
aside h2.font-display { font: 700 13px/1 var(--font-condensed) !important; text-transform: uppercase; letter-spacing: .12em; }
aside footer { font-family: var(--font-body); }

/* Menu a tendina */
[data-dropdown="menu"] { border-width: 1px !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-2); }

/* --- Pagina programma: tab "Info" ---------------------------------------- */
main span.bg-highlight.border-subtle {
  background: var(--cc-black) !important; color: #fff;
  border: 0 !important; border-radius: var(--radius-xs) !important;
  font: 700 12px/1 var(--font-condensed) !important;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 7px 10px !important;
}
main h2.border-b-2 {
  font: 700 13px/1 var(--font-condensed) !important;
  letter-spacing: .12em !important; color: var(--cc-black) !important;
  padding-bottom: 8px; border-bottom: 2px solid var(--cc-black) !important;
}
main h2.border-b-2 + div span { font: 500 15px/1.3 var(--font-body); padding: 10px 0 !important; }
main .prose { font-size: 17px; line-height: 1.6; color: var(--cc-black); }

/* Piattaforme d'ascolto: diventano azzurre al passaggio */
aside a[data-tooltip] { transition: color 150ms ease-out; }
aside a[data-tooltip]:hover { color: var(--cc-cyan) !important; }

@media (max-width: 640px) {
  body > header.py-8 h1 > a::before { width: 64px; height: 52px; }
  body > header.py-8 h1 > a::after { font-size: 22px; padding-left: 12px; }
  h2.text-heading-foreground { font-size: 22px !important; }
  .grid-cols-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .grid-cols-cards h3 { font-size: 16px !important; }
  .grid-cols-cards p { font-size: 11px; }
  .grid-cols-cards > a article > div.absolute.z-20 { padding: 0 10px 8px !important; }
  /* tab: niente allargamento della pagina, scorrono in orizzontale */
  nav.sticky { overflow-x: auto; scrollbar-width: none; max-width: 100vw; }
  nav.sticky::-webkit-scrollbar { display: none; }
  nav.sticky > a.uppercase { font-size: 13px !important; letter-spacing: .05em; padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap; flex: none; }
  body > footer { flex-direction: column; gap: 10px; text-align: center; }
}