/* ===============================================================
   Simple theme — colours
   Change these to restyle the whole site.
   =============================================================== */
:root {
  --page-bg: #1c2e17;
  --page-bg-top: #0f1c0c;
  --content-bg: #000000;
  --text: #e2e8dc;
  --muted: #a8b3a0;
  --faint: #7f8a78;
  --title: #e0546b;
  --section-title: #BB906D;
  --highlight: #e0546b;
  --link: #8ccf6e;
  --link-visited: #8ccf6e;
  --link-hover: #BB906D;
  --rule: #2a3826;
  --footer-bg: #18231a;
  --tabs-bg: #1a261a;
  --tabs-border: #2a3826;
  --widget-title: #eef3e8;
  --status-bg: #1f2c1e;
  --input-border: #3b4d36;
  --shadow: rgba(0, 0, 0, 0.5);
  --font: Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  --page-bg-image: url("/assets/img/background.jpg");
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page-bg: #1c2e17;
    --page-bg-top: #0f1c0c;
    --content-bg: #000000;
    --text: #e2e8dc;
    --muted: #a8b3a0;
    --faint: #7f8a78;
    --title: #e0546b;
    --section-title: #eef3e8;
    --highlight: #e0546b;
    --link: #8ccf6e;
    --link-visited: #8ccf6e;
    --link-hover: #BB906D;
    --rule: #2a3826;
    --footer-bg: #18231a;
    --tabs-bg: #1a261a;
    --tabs-border: #2a3826;
    --widget-title: #eef3e8;
    --status-bg: #1f2c1e;
    --input-border: #3b4d36;
    --shadow: rgba(0, 0, 0, 0.5);
  }
}

html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: 12px/1.4 var(--font);
  color: var(--text);
  background: var(--page-bg) var(--page-bg-image) repeat;
  background-size: 300px auto; /* width of one tile: smaller = more repeats */
  min-height: 100vh;
}

a { color: var(--link); text-decoration: none; }
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--link-hover);
  outline-offset: 2px;
}
img { max-width: 100%; height: auto; }

/* Outer box with the soft shadow */
.content-outer {
  max-width: 1000px;
  margin: 30px auto;
  background: var(--content-bg);
  box-shadow: 0 0 40px var(--shadow);
}

/* Header */
.header { padding: 22px 30px 18px; }
.header h1 {
  margin: 0;
  font: normal normal 60px/1.1 var(--font);
  text-shadow: 1px 2px 3px var(--shadow);
  word-break: break-word;
}
.header h1 a, .header h1 a:visited { color: var(--title); }
.header h1 a:hover { text-decoration: none; }
.header .description { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

/* Menu bar */
.tabs {
  background: var(--tabs-bg);
  border-top: 1px solid var(--tabs-border);
  border-bottom: 1px solid var(--tabs-border);
  overflow-x: auto;
}
.tabs ul { list-style: none; margin: 0; padding: 0 15px; display: flex; }
.tabs a, .tabs a:visited {
  display: block;
  padding: 8px 15px;
  color: var(--text);
  white-space: nowrap;
}
.tabs a:hover { background: var(--content-bg); text-decoration: none; }
.tabs .selected a { background: var(--content-bg); }

/* Two columns */
.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 0 30px;
  padding: 20px 30px 30px;
}

/* Sections on menu pages */
.label-section { margin-top: 10px; }
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 15px;
  padding-bottom: 4px;
  font: normal normal 22px/1.3 var(--font);
  color: var(--section-title);
}
.section-all { font-size: 11px; white-space: nowrap; }
.page-intro { margin-bottom: 20px; }
.solo-mobile { display: none; }
.empty { color: var(--faint); }

.status-msg {
  margin: 0 0 20px;
  padding: 6px 10px;
  background: var(--status-bg);
  text-align: center;
}

/* Posts */
.date-header {
  margin: 0 0 6px;
  font: normal bold 11px var(--font);
  color: var(--faint);
}
.pinned {
  display: inline-block;
  margin-right: 8px;
  padding: 0 5px;
  color: var(--content-bg);
  background: var(--title);
  font-weight: bold;
  border-radius: 2px;
}
.post { margin: 0 0 25px; }
.post-title { margin: 0 0 10px; font: normal normal 20px/1.3 var(--font); }
.post-title a, .post-title a:visited { color: var(--link); }
.post-body { font-size: 13px; line-height: 1.5; }
.post-body p { margin: 0 0 1em; max-width: 72ch; }
.post-body h2, .post-body h3 { font-family: var(--font); }
.more-link { font-weight: bold; }
/* Thumbnail of excerpts: mobile only (see the media query) */
.estratto-img { display: none; }

.post-list { margin: 0 0 25px; padding-left: 18px; font-size: 13px; }
.post-list li { padding: 3px 0; }
.post-list-date { color: var(--faint); font-size: 11px; }

.luogo-concerto {color: var(--highlight); font-weight: bold;}

/* Captioned image (Blogger style) */
/* Square artwork: crops the image to the centre when it isn't square */
.artwork-img {
  width: 400px;
  max-width: 90%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.tr-caption-container { margin: 1em auto; border-collapse: collapse; text-align: center; }
.tr-caption-container td { padding: 4px; }
.tr-caption-container img {
  display: block;
  margin: 0 auto;
  padding: 4px;
  background: var(--content-bg);
  border: 1px solid var(--rule);
  box-shadow: 1px 1px 5px var(--shadow);
}
.tr-caption { font-size: 11px; color: var(--muted); }

.post-footer {
  margin: 20px -2px 0;
  padding: 6px 10px;
  background: var(--footer-bg);
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}
.share-buttons { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; margin-left: 0px; }
.share-buttons a, .share-buttons a:visited {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--input-border);
  background: var(--content-bg);
  color: var(--muted);
  font-size: 10px;
  border-radius: 2px;
}
.share-buttons a:hover { color: var(--link); text-decoration: none; }

.share-buttons button {
  padding: 0 5px;
  border: 1px solid var(--input-border);
  background: var(--content-bg);
  color: var(--muted);
  font-size: 10px;
  line-height: inherit;
  border-radius: 2px;
}
.share-buttons button:hover { color: var(--link); }

.blog-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 25px 0 8px;
  padding: 6px 0;
}
.feed-links { font-size: 11px; color: var(--muted); }

button {
  font: inherit;
  padding: 3px 10px;
  color: var(--text);
  background: var(--tabs-bg);
  border: 1px solid var(--input-border);
  border-radius: 2px;
  cursor: pointer;
}
button:hover { background: var(--content-bg); }

/* Sidebar */
.sidebar .widget { margin: 0 0 30px; }
.sidebar h2 {
  margin: 0 0 1em;
  font: normal bold 11px var(--font);
  color: var(--widget-title);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { padding: 0.25em 0; }
.count { color: var(--faint); }

.search-form { display: flex; gap: 4px; }
.search-form input {
  flex: 1;
  min-width: 0;
  padding: 3px 5px;
  font: inherit;
  color: var(--text);
  background: var(--content-bg);
  border: 1px solid var(--input-border);
}

.archive summary { cursor: pointer; padding: 0.25em 0; list-style: none; }
.archive summary::-webkit-details-marker { display: none; }
.archive summary::before {
  content: "\25BA";
  display: inline-block;
  width: 1.4em;
  font-size: 9px;
  color: var(--faint);
}
.archive details[open] > summary::before { content: "\25BC"; }
.archive details details { margin-left: 1.4em; }
.archive ul { margin-left: 1.4em; }

.attribution {
  padding: 12px 30px 18px;
  text-align: center;
  font-size: 11px;
  color: var(--faint);
  border-top: 1px solid var(--rule);
}

@media (max-width: 760px) {
  /* Safe-area space (notch, browser bars) goes inside the content box,
     so browsers that draw under their bars (e.g. DuckDuckGo) show the
     content colour there instead of the background image */
  :root { padding-top: 0; padding-bottom: 0; }
  .content-outer {
    margin: 0;
    box-shadow: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .solo-desktop { display: none; }
  .solo-mobile { display: block; }

  /* Excerpts as cards: thumbnail | text, the whole card is a link,
     a line under each one separates them */
  .post-estratto {
    position: relative;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--input-border);
  }
  /* Tight spacing inside and around excerpts */
  .post-estratto .post-title { margin-bottom: 4px; }
  .post-estratto .date-header { margin-bottom: 2px; }
  /* The tap area (title link stretched) and the press background both reach
     the screen edges (-15px = the side padding of .columns) and go up to the
     line of the previous excerpt (-8px = the margin below each excerpt) */
  .post-estratto { isolation: isolate; }
  .post-estratto .post-title a::after { content: ""; position: absolute; inset: -8px -15px 0; }
  .post-estratto::before { content: ""; position: absolute; inset: -8px -15px 0; z-index: -1; }
  /* On press only the card background changes; the title stays as it is */
  /* Appears only after holding a bit (0.15s), disappears at once */
  .post-estratto:active::before {
    background-color: color-mix(in srgb, var(--link-hover) 25%, transparent);
    transition: background-color 0.1s ease 0.15s;
  }
  .post-estratto .post-title a { -webkit-tap-highlight-color: transparent; }
  .post-estratto .post-title a:hover,
  .post-estratto .post-title a:active { color: var(--link); text-decoration: none; }
  /* Every excerpt is as tall as the thumbnail (80px), with or without one */
  .estratto { display: flex; align-items: center; gap: 12px; height: 80px; }
  /* The text may not be taller than the thumbnail: 4 lines (13px x 1.5 = ~78px), then "…" */
  .estratto .post-body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    max-height: 80px;
  }
  .estratto .post-body p { margin: 0; }
  .estratto .post-body { flex: 1; min-width: 0; }
  .estratto-img {
    display: block;
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid var(--rule);
    border-radius: 2px;
  }
  /* Posts without images: the site's background image as thumbnail */
  .estratto-img-sfondo { background: var(--page-bg-image) center / cover; }
  .post-estratto .more-link { display: none; }
  /* "There's more to read": arrow after the title (on the h3, the link's ::after is the tap area) */
  .ha-seguito .post-title::after { content: " --->"; color: var(--link); white-space: nowrap; }
  /* Images in the excerpt text are replaced by the thumbnail */
  .post-estratto .post-body img,
  .post-estratto .post-body .tr-caption-container { display: none; }
  .header { padding: 18px 15px 14px; }
  .header h1 { font-size: 40px; }

  /* The sidebar's widgets are placed straight into the page grid:
     pages on top, then posts, search, and labels | archive side by side. */
  .columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "pagine    pagine"
      "main      main"
      "cerca     cerca"
      "etichette archivio";
    gap: 0 20px;
    padding: 15px;
  }
  .columns > main { grid-area: main; }
  .sidebar { display: contents; }
  .widget-pagine { grid-area: pagine; }
  .sidebar .widget-cerca { grid-area: cerca; border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 10px; }
  .widget-etichette { grid-area: etichette; }
  .sidebar .archive { grid-area: archivio; }

  /* Pages: one line of links, no heading */
  .sidebar .widget-pagine {
    margin: 0 0 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule);
    overflow-x: auto;
  }
  .widget-pagine h2 { display: none; }
  /* Full width with the links spread evenly; if they don't fit, it scrolls */
  .sidebar .widget-pagine ul {
    display: flex;
    justify-content: space-evenly;
    gap: 18px;
    white-space: nowrap;
    width: max-content;
    min-width: 100%;
  }
  .widget-pagine li { padding: 0; }
  .widget-pagine .selected a { font-weight: bold; color: var(--text); }
  .attribution { padding: 12px 15px 18px; }
}