/* ============================================================
   Back Garden - Base Site Stylesheet
   ============================================================
   CSS custom properties are dynamically overridden by /api/style
   which reads values from the D1 database (Ufficio Stile).
   ============================================================ */

/* ── Custom Properties (defaults) ────────────────────────── */
:root {
  /* Page padding */
  --page-padding-top: 16px;
  --page-padding-right: 16px;
  --page-padding-bottom: 16px;
  --page-padding-left: 16px;

  /* Element spacing */
  --el-gap: 16px;
  --el-padding-top: 0px;
  --el-padding-right: 0px;
  --el-padding-bottom: 0px;
  --el-padding-left: 0px;

  /* Background */
  --bg-color: #ffffff;

  /* H1 */
  --h1-font-family: 'Times New Roman', Times, serif;
  --h1-font-size: 40px;
  --h1-font-weight: 700;
  --h1-font-style: normal;
  --h1-line-height: 48px;
  --h1-letter-spacing: 0px;
  --h1-color: #000000;
  --h1-text-align: left;
  --h1-text-decoration: none;
  --h1-text-indent: 0px;
  --h1-hover-color: inherit;
  --h1-hover-decoration: inherit;

  /* H2 */
  --h2-font-family: 'Times New Roman', Times, serif;
  --h2-font-size: 28px;
  --h2-font-weight: 600;
  --h2-font-style: normal;
  --h2-line-height: 36px;
  --h2-letter-spacing: 0px;
  --h2-color: #000000;
  --h2-text-align: left;
  --h2-text-decoration: none;
  --h2-text-indent: 0px;
  --h2-hover-color: inherit;
  --h2-hover-decoration: inherit;

  /* Body text */
  --body-font-family: 'Times New Roman', Times, serif;
  --body-font-size: 16px;
  --body-font-weight: 400;
  --body-font-style: normal;
  --body-line-height: 24px;
  --body-letter-spacing: 0px;
  --body-color: #000000;
  --body-text-align: left;
  --body-text-decoration: none;
  --body-text-indent: 0px;
  --body-hover-color: inherit;
  --body-hover-decoration: inherit;

  /* Caption */
  --caption-font-family: 'Times New Roman', Times, serif;
  --caption-font-size: 14px;
  --caption-font-weight: 400;
  --caption-font-style: normal;
  --caption-line-height: 20px;
  --caption-letter-spacing: 0px;
  --caption-color: #666666;
  --caption-text-align: left;
  --caption-text-decoration: none;
  --caption-text-indent: 0px;
  --caption-hover-color: inherit;
  --caption-hover-decoration: inherit;

  /* Link */
  --link-font-family: 'Times New Roman', Times, serif;
  --link-font-size: 16px;
  --link-font-weight: 400;
  --link-font-style: normal;
  --link-line-height: 24px;
  --link-letter-spacing: 0px;
  --link-color: #000000;
  --link-text-align: left;
  --link-text-decoration: underline;
  --link-text-indent: 0px;
  --link-hover-color: #555555;
  --link-hover-decoration: none;

  /* Button */
  --button-font-family: 'Times New Roman', Times, serif;
  --button-font-size: 16px;
  --button-font-weight: 500;
  --button-font-style: normal;
  --button-line-height: 22px;
  --button-letter-spacing: 0px;
  --button-color: #ffffff;
  --button-bg-color: #000000;
  --button-text-align: center;
  --button-text-decoration: none;
  --button-hover-color: #ffffff;
  --button-hover-bg-color: #333333;
  --button-hover-decoration: none;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Base ────────────────────────────────────────────────── */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--body-font-family), system-ui, -apple-system, sans-serif;
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--body-color);
  text-align: var(--body-text-align);
  text-decoration: var(--body-text-decoration);
  text-indent: var(--body-text-indent);
  background-color: var(--bg-color);
}

img, video { max-width: 100%; height: auto; display: block; }

/* ── Background media/YouTube ────────────────────────────── */
/* #siteBg is a direct child of body, position: fixed, z-index: 0.
   .page gets z-index: 1 → page content sits above the video.
   Header/footer (z:10) use .bg-reveal clones with clip: rect()
   to show the same video in their stacking contexts.
   For <video> clones, captureStream() pipes the exact same decoded
   frames → zero drift. For YouTube iframes the clone plays in sync. */
.site-bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.site-bg-media {
  width: 100%; height: 100%;
  object-fit: cover;
  border: none;
}
.site-bg iframe.site-bg-media {
  width: 115%; height: 115%;
  margin-left: -7.5%; margin-top: -7.5%;
  pointer-events: none;
  border: none;
}

/* Background reveal inside sticky header/footer */
.bg-reveal {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  clip: rect(auto, auto, auto, auto);
}
.bg-reveal .site-bg-media {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: none;
}
.bg-reveal iframe.site-bg-media {
  width: 115%; height: 115%;
  margin-left: -7.5%; margin-top: -7.5%;
  border: none;
}

/* ── Site Header / Footer ────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-direction: column; gap: var(--el-gap);
  padding: var(--page-padding-top) var(--page-padding-right) var(--page-padding-bottom) var(--page-padding-left);
  background-color: var(--bg-color);
}
.site-header[hidden], .site-footer[hidden] { display: none; }
.site-footer {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; flex-direction: column; gap: var(--el-gap);
  padding: var(--page-padding-top) var(--page-padding-right) var(--page-padding-bottom) var(--page-padding-left);
  background-color: var(--bg-color);
}
.site-header:not([hidden]) + .page { padding-top: 0; }
.page:has(+ .site-footer:not([hidden])) { padding-bottom: 0; }

/* ── Page Layout ─────────────────────────────────────────── */
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--el-gap);
  padding: var(--page-padding-top) var(--page-padding-right) var(--page-padding-bottom) var(--page-padding-left);
}

.element {
  padding: var(--el-padding-top) var(--el-padding-right) var(--el-padding-bottom) var(--el-padding-left);
}

/* ── Typography ──────────────────────────────────────────── */
h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  font-style: var(--h1-font-style);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  color: var(--h1-color);
  text-align: var(--h1-text-align);
  text-decoration: var(--h1-text-decoration);
  text-indent: var(--h1-text-indent);
}

h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  font-style: var(--h2-font-style);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  color: var(--h2-color);
  text-align: var(--h2-text-align);
  text-decoration: var(--h2-text-decoration);
  text-indent: var(--h2-text-indent);
}

p, li, blockquote, .text-style-body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  font-style: var(--body-font-style);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--body-color);
  text-align: var(--body-text-align);
  text-decoration: var(--body-text-decoration);
  text-indent: var(--body-text-indent);
}

.caption, figcaption {
  font-family: var(--caption-font-family);
  font-size: var(--caption-font-size);
  font-weight: var(--caption-font-weight);
  font-style: var(--caption-font-style);
  line-height: var(--caption-line-height);
  letter-spacing: var(--caption-letter-spacing);
  color: var(--caption-color);
  text-align: var(--caption-text-align);
  text-decoration: var(--caption-text-decoration);
  text-indent: var(--caption-text-indent);
}

a {
  font-family: var(--link-font-family);
  color: var(--link-color);
  text-decoration: var(--link-text-decoration);
  transition: color 150ms ease, text-decoration 150ms ease;
}

/* Row block */
.row-block {
  display: flex;
  align-items: center;
}
.row-cell {
  min-width: 0;
}

/* Image link wrapper: inherit caption style, not link style */
.image-block a, .video-block a {
  font-family: inherit; color: inherit;
  text-decoration: none;
}
.image-block a:hover, .video-block a:hover {
  color: inherit; text-decoration: none;
}

button, .btn {
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  font-style: var(--button-font-style);
  line-height: var(--button-line-height);
  letter-spacing: var(--button-letter-spacing);
  color: var(--button-color);
  background-color: var(--button-bg-color);
  text-align: var(--button-text-align);
  text-decoration: var(--button-text-decoration);
  border: none;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
button:hover, .btn:hover {
  background-color: var(--button-hover-bg-color);
}

/* ── Inline Text Styles (rich editor spans) ─────────────── */
.text-style-h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  font-style: var(--h1-font-style);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  color: var(--h1-color);
  text-decoration: var(--h1-text-decoration);
}
.text-style-h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  font-style: var(--h2-font-style);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  color: var(--h2-color);
  text-decoration: var(--h2-text-decoration);
}
.text-style-caption {
  font-family: var(--caption-font-family);
  font-size: var(--caption-font-size);
  font-weight: var(--caption-font-weight);
  font-style: var(--caption-font-style);
  line-height: var(--caption-line-height);
  letter-spacing: var(--caption-letter-spacing);
  color: var(--caption-color);
  text-decoration: var(--caption-text-decoration);
}

/* Link style class for <a> created by the rich editor */
a.text-style-link {
  font-family: var(--link-font-family);
  color: var(--link-color);
  text-decoration: var(--link-text-decoration);
}

/* ── Gallery Carousel ───────────────────────────────────── */
.gallery-carousel {
  position: relative;
  margin: 0;
}

.gallery-viewport {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.gallery-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Invisible click zones: left 50% / right 50% */
.gallery-zone {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  cursor: pointer;
  z-index: 1;
}
.gallery-zone-left { left: 0; }
.gallery-zone-right { right: 0; }

/* Optional hover hint */
.gallery-zone-left:hover { cursor: w-resize; }
.gallery-zone-right:hover { cursor: e-resize; }

.gallery-caption {
  margin-top: 0.4em;
  min-height: 1.2em;
}