/**
 * @file theme.css
 * Stachebone token overlay. Mercury loads this instead of src/theme.css
 * when it sits next to index.php. No Tailwind rebuild required.
 *
 * Type: Inter (body), IBM Plex Mono (headlines, tracklists, technical).
 * Space: named phi scale (--space-*) sits beside Mercury's 4px --spacing
 * so contrib components keep their layout.
 */

:root {
  color-scheme: dark;

  /* Dark-only. Cards are charcoal; accent is flyer red. Fonts unchanged. */
  --background: oklch(0 0 0);
  --foreground: oklch(1 0 0);
  --card: oklch(0.16 0.01 20);
  --card-foreground: oklch(1 0 0);
  --primary: oklch(1 0 0);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.22 0.02 20);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.2 0.015 20);
  --muted-foreground: oklch(0.72 0 0);
  --accent: oklch(0.55 0.19 22);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.42 0.01 20);
  --input: oklch(0.42 0.01 20);

  --font-sans: "IBM Plex Mono", ui-monospace, "Menlo", "Consolas", monospace;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Menlo", "Consolas", monospace;
  --font-body: "Inter", Arial, Helvetica, sans-serif;

  /* Overridden by stachebone_theme when those settings are saved. */
  --stachebone-headline-weight: 600;
  --stachebone-body-weight: 400;
  --stachebone-headline-tracking: -0.04em;
  --stachebone-nav-font: var(--font-body);
  --stachebone-nav-weight: 400;
  --stachebone-nav-tracking: 0em;

  /* Accent-derived field colors. Follow --accent when the picker changes it. */
  --accent-hot: oklch(from var(--accent) 0.47 c h);
  --accent-hot-mid: oklch(from var(--accent) 0.3 c h / 0.55);
  --accent-wash: oklch(from var(--accent) 0.31 c h);
  --accent-ember: oklch(from var(--accent) 0.32 c h / 0.8);
  --field-top: oklch(from var(--accent) 0.1 calc(c * 0.21) h);
  --field-mid: oklch(from var(--accent) 0.05 calc(c * 0.06) h);
  --field-bottom: oklch(from var(--accent) 0.14 calc(c * 0.32) h);

  /* Die-cut flyers have no round corners. rounded-* utilities read this. */
  --radius: 0px;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;

  /* Mercury layout unit. Do not retarget this to phi — navbar/gap utilities use it. */
  --spacing: 0.25rem;

  /* Modular scale, base 1rem × φ (1.6180339887). Use in custom CSS / later SDCs. */
  --ratio: 1.6180339887;
  --space-base: 1rem;
  --space-3xs: calc(var(--space-base) / var(--ratio) / var(--ratio) / var(--ratio)); /* ~0.236rem */
  --space-2xs: calc(var(--space-base) / var(--ratio) / var(--ratio)); /* ~0.382rem */
  --space-xs: calc(var(--space-base) / var(--ratio)); /* ~0.618rem */
  --space-sm: var(--space-base); /* 1rem */
  --space-md: calc(var(--space-base) * var(--ratio)); /* ~1.618rem */
  --space-lg: calc(var(--space-md) * var(--ratio)); /* ~2.618rem */
  --space-xl: calc(var(--space-lg) * var(--ratio)); /* ~4.236rem */
  --space-2xl: calc(var(--space-xl) * var(--ratio)); /* ~6.854rem */
  --space-3xl: calc(var(--space-2xl) * var(--ratio)); /* ~11.090rem */

  /* Flyer sheet tokens. */
  --flyer-fill: oklch(0.15 0.012 22);
  --flyer-panel: oklch(0.21 0.015 20);
  /* Light from bottom-left. Peak is the old hairline; values descend toward top-right. */
  --flyer-stroke-hot: oklch(0.78 0.03 22 / 0.92);   /* BL clip, faces the light */
  --flyer-stroke-lit: oklch(0.64 0.012 20 / 0.82);  /* bottom + left edges */
  --flyer-stroke-shade: oklch(0.46 0.008 20 / 0.72); /* top + right edges */
  --flyer-stroke-dark: oklch(0.32 0.006 20 / 0.65);  /* TR clip, in shadow */
  --flyer-stroke: var(--flyer-stroke-hot);
  --clip: var(--space-sm);      /* small corner cut: headings, header card */
  --cut-sm: 0.875rem;           /* leftover small cut; corners use --cut-lg */
  --cut-lg: 2.625rem;           /* 45° cut leg; overridden by Stachebone Settings */
  --notch: var(--cut-lg);       /* left-edge notch depth = same 45° leg */
  /* Shared content gutter inside header + main cards. Sized to clear
     the left-edge notch even when heading cuts hang into the gutter. */
  --sheet-inset: max(var(--space-lg), calc(var(--cut-lg) + var(--clip) + 0.5rem));

  /* Photocopy grain: white speckle with noisy alpha, tiled. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* 1px silhouette, lit from the bottom-left bloom. */
  --flyer-outline:
    drop-shadow(1px -1px 0 var(--flyer-stroke-dark))
    drop-shadow(1px 0 0 var(--flyer-stroke-shade))
    drop-shadow(0 -1px 0 var(--flyer-stroke-shade))
    drop-shadow(-1px 0 0 var(--flyer-stroke-lit))
    drop-shadow(0 1px 0 var(--flyer-stroke-lit))
    drop-shadow(-1px 1px 0 var(--flyer-stroke-hot));

  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.dark {
  --background: oklch(0 0 0);
  --foreground: oklch(1 0 0);
  --card: oklch(0.16 0.01 20);
  --card-foreground: oklch(1 0 0);
  --primary: oklch(1 0 0);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.22 0.02 20);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.2 0.015 20);
  --muted-foreground: oklch(0.72 0 0);
  --accent: oklch(0.55 0.19 22);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.42 0.01 20);
  --input: oklch(0.42 0.01 20);
  --font-sans: "IBM Plex Mono", ui-monospace, "Menlo", "Consolas", monospace;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Menlo", "Consolas", monospace;
  --font-body: "Inter", Arial, Helvetica, sans-serif;
  --radius: 0px;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
}

/* Mono at display size reads loose; tracking is a token so Inter/Metropolitan can relax it. */
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: var(--stachebone-headline-tracking, -0.04em);
  font-weight: var(--stachebone-headline-weight, 600);
}

/* In-page links. Top nav is in the header and is left alone. */
main a,
footer[role="contentinfo"] a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
}

main a:hover,
footer[role="contentinfo"] a:hover {
  color: var(--muted-foreground, oklch(0.78 0 0));
}

main a:has(> img:only-child),
main a:has(> img:only-child):hover {
  text-decoration: none;
  color: inherit;
}

/* Hook for setlists / technical blocks until those SDCs exist. */
.tracklist {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/*
 * 90s rave flyer field: black with blood-red bleeding in from the top
 * and blooming from the bottom-left, film grain over everything, and a
 * die-cut charcoal sheet floating in the foreground. Fonts untouched.
 */
html {
  min-height: 100%;
  overflow-x: clip;
  background-color: var(--field-mid);
  background-attachment: fixed;
  background-image:
    /* hot bloom, bottom-left */
    radial-gradient(ellipse 75% 55% at 10% 102%, var(--accent-hot) 0%, var(--accent-hot-mid) 38%, transparent 66%),
    /* wash along the top edge */
    radial-gradient(ellipse 130% 42% at 50% -12%, var(--accent-wash) 0%, transparent 68%),
    /* ember, right side */
    radial-gradient(ellipse 55% 45% at 103% 60%, var(--accent-ember) 0%, transparent 58%),
    linear-gradient(180deg, var(--field-top) 0%, var(--field-mid) 45%, var(--field-bottom) 100%);
}

body {
  min-height: 100vh;
  overflow-x: clip;
  background-color: transparent;
  background-image: none;
  font-weight: var(--stachebone-body-weight, 400);
}

/* Grain pass over the whole poster, glow and sheet alike. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 260px 260px;
  opacity: 0.14;
}

.layout-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 80rem;
  margin-inline: auto;
  padding: var(--space-md);
  min-width: 0;
}

/* Header: clipped card sits behind the nav so menus are not clipped. */
header[role="banner"] {
  position: relative;
  isolation: isolate;
  min-width: 0;
  width: 100%;
  padding: var(--space-xs) var(--sheet-inset);
}

header[role="banner"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--flyer-fill);
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg))
  );
  filter: var(--flyer-outline);
}

/*
 * The sheet. 45° clips on top-right and bottom-left, square on the
 * other two corners, plus a left-edge notch whose ramps are the same
 * 45° / same leg as the corners.
 */
main[role="main"] {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: var(--space-lg) var(--sheet-inset);
  background-color: var(--flyer-fill);
  /* faint top-light so the sheet reads as paper, not flat fill */
  background-image: linear-gradient(
    160deg,
    oklch(0.17 0.014 22) 0%,
    var(--flyer-fill) 55%,
    oklch(0.16 0.022 24) 100%
  );
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut-lg)) 0,
    100% var(--cut-lg),
    100% 100%,
    var(--cut-lg) 100%,
    0 calc(100% - var(--cut-lg)),
    0 calc(50% + var(--space-lg) + var(--cut-lg)),
    var(--cut-lg) calc(50% + var(--space-lg)),
    var(--cut-lg) calc(50% - var(--space-lg)),
    0 calc(50% - var(--space-lg) - var(--cut-lg))
  );
  filter: var(--flyer-outline);
}

/*
 * Headline slabs: cut + red band hang into the gutter so the glyphs
 * sit on --sheet-inset with the site name / breadcrumbs / body.
 * Skip screen-reader headings (breadcrumb "Breadcrumb" was painting
 * as an empty cut bar on Canvas pages).
 */
.region-content h1:not(.sr-only):not(.visually-hidden),
.region-content h2:not(.sr-only):not(.visually-hidden) {
  --heading-hang: calc(var(--clip) + 0.35rem);
  position: relative;
  width: fit-content;
  max-width: calc(100% + var(--heading-hang));
  box-sizing: border-box;
  padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--heading-hang);
  margin-inline-start: calc(-1 * var(--heading-hang));
  background-color: var(--flyer-panel);
  background-image: linear-gradient(
    135deg,
    var(--accent) calc(var(--clip) + 0.3rem),
    transparent calc(var(--clip) + 0.3rem)
  );
  clip-path: polygon(
    var(--clip) 0,
    100% 0,
    100% calc(100% - var(--clip)),
    calc(100% - var(--clip)) 100%,
    0 100%,
    0 var(--clip)
  );
  filter: var(--flyer-outline);
  overflow-wrap: anywhere;
  white-space: normal;
}

.region-content h2:not(.sr-only):not(.visually-hidden) {
  margin-block: var(--space-sm) var(--space-xs);
}

.region-content h1 a,
.region-content h2 a {
  white-space: inherit;
}

/* Blog listing titles: no flyer slab. Same column as the page title. */
.region-content .views-row h2:not(.sr-only):not(.visually-hidden) {
  --heading-hang: 0;
  width: auto;
  max-width: 100%;
  padding: 0;
  margin-inline-start: 0;
  background-color: transparent;
  background-image: none;
  clip-path: none;
  filter: none;
}

.path-blog .views-row h2 a,
.path-blog .views-row h2 a:hover {
  text-decoration: none;
}

/* Drupal node links ship as a ul; Mercury does not reset the marker. */
.region-content ul.links {
  list-style: none;
  padding-inline-start: 0;
  margin-inline-start: 0;
}

.region-content ul.links li {
  list-style: none;
}

/* Buttons: white slabs with two corners lopped off, like flyer call-outs. */
.region-content button,
.region-content a.button,
.region-content input[type="submit"] {
  clip-path: polygon(
    0.5rem 0,
    100% 0,
    100% calc(100% - 0.5rem),
    calc(100% - 0.5rem) 100%,
    0 100%,
    0 0.5rem
  );
}

/* Mercury .container / px-4 gutters would stack on --sheet-inset. */
header[role="banner"] .container,
main[role="main"] .container {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

/*
 * Canvas Utility pages wrap the node in mercury:section (cq-full +
 * inner container + lg:max-w-3/4). Flatten that so About body/title
 * share the same column as the header wordmark.
 */
.region-content .cq-full,
.region-content section.cq-full > .container,
.region-content section.cq-full > .container > div {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Breadcrumbs + page title in the body card, not the header. */
.page-masthead {
  margin-block-end: var(--space-md);
}

.page-masthead h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Canvas Utility templates reprint the node title in a section header. */
main:has(.page-masthead) .region-content > section.cq-full > .container > div > header {
  display: none;
}

main:has(.page-masthead) .region-content > section.cq-full {
  margin-block-start: 0;
}

/* Content-region breadcrumb blocks duplicate the page masthead trail. */
.region-content nav[aria-label="breadcrumb"] {
  display: none;
}

/* Site name in the navbar logo slot: Mercury's branding template uses a 4xl heading. */
.navbar--logo a,
.navbar--modal-logo a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.navbar--logo .heading-responsive-4xl,
.navbar--modal-logo .heading-responsive-4xl {
  font-family: var(--font-sans);
  font-size: 2.5rem;
  font-weight: var(--stachebone-headline-weight, 600);
  letter-spacing: var(--stachebone-headline-tracking, -0.04em);
  line-height: 1;
  text-transform: uppercase;
}

.navbar nav ul,
.navbar--dropdown-menu ul {
  font-family: var(--stachebone-nav-font, var(--font-body));
  font-weight: var(--stachebone-nav-weight, 400);
  letter-spacing: var(--stachebone-nav-tracking, 0em);
}

/*
 * Home Canvas image: 600×600. Mercury's Image wrapper is .cq-full, which
 * is width: 100cqw of .layout-content — so max-width on the figure alone
 * leaves a full-bleed square overflowing the cap.
 */
.path-frontpage .layout-content figure {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  overflow: hidden;
}

.path-frontpage .layout-content figure .cq-full {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-inline: 0;
  aspect-ratio: 1 / 1;
}

/* Empty footer chrome was drawing two rules across the field. */
footer[role="contentinfo"] .border-t {
  border-color: transparent;
}

/* Mercury's cq-full uses 100cqw; on small screens that can overflow the viewport. */
@media (max-width: 40rem) {
  .cq-full {
    width: auto;
    margin-inline: 0;
  }

  .layout-container {
    padding: var(--space-xs);
    gap: var(--space-2xs);
  }

  :root {
    --clip: var(--space-xs);
    --cut-sm: 0.625rem;
  }

  header[role="banner"] {
    padding: var(--space-xs) var(--sheet-inset);
  }

  main[role="main"] {
    padding: var(--space-md) var(--sheet-inset);
  }

  body.canvas-page h1 {
    font-size: 2.25rem;
    line-height: 1.1;
  }
}

/*
 * Mercury turns .region-content into a centered, padded column
 * (px-4 + max-width 40rem+). That sat inward of .page-masthead.
 * Keep the body card as one column with the breadcrumbs and title.
 */
.layout-content,
.region-content {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.layout-content,
.region-content,
.region-content section,
.region-content .container,
.region-content .font-body,
.region-content p,
body.canvas-page .region-content > section > div {
  min-width: 0;
  max-width: none;
}

.region-content p,
body.canvas-page h1 {
  overflow-wrap: anywhere;
  white-space: normal;
}