/* 
Bill's style guide that we have to maintain.

Sections are comments tabbed one in for easy scanning.
*/

	/* Fonts - Externally hosted */

@font-face {
  font-family: 'Glacial Indifference';
  src: url('https://cdn.jsdelivr.net/gh/fontalternative/glacial-indifference@main/woff2/GlacialIndifference-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('https://cdn.jsdelivr.net/gh/fontalternative/glacial-indifference@main/woff2/GlacialIndifference-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('https://cdn.jsdelivr.net/gh/fontalternative/glacial-indifference@main/woff2/GlacialIndifference-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}

	/* Colouring & Theme Variables */

:root {
  --interactive-accent: #d92525; 
  --interactive-accent-hover: #b01a1a;
  --text-accent: #d92525;
  --text-accent-hover: #b01a1a;
  
  --font-text: 'Glacial Indifference', 'Montserrat', 'Futura', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui: 'Glacial Indifference', 'Montserrat', 'Futura', -apple-system, BlinkMacSystemFont, sans-serif;

  --line-width: 850px !important; 
  --line-width-adaptive: 850px !important; 
  --file-line-width: 850px !important;
}

	/* Light Theme Defaults */

body,
body.theme-light,
.theme-light {
  --bg-primary: #BDE9FF !important;
  --text-normal: #000000 !important; 
  background-color: #BDE9FF !important;
  color: #000000 !important;
}

	/* Dark Theme - Vivid Royal Blue Canvas */

body.theme-dark,
.theme-dark {
  --bg-primary: #1413fa !important; 
  --text-normal: #ffffff !important; 
  background-color: #1413fa !important;
  color: #ffffff !important;
}

	/* Brand Yellow Left Sidebar with Crisp Divider */

.site-body-left-column {
  background-color: #FFD400 !important;
  border-right: 3px solid #000000 !important;
  box-sizing: border-box !important;
}

	/* Force left sidebar text to remain black in dark mode */

.site-body-left-column,
.site-body-left-column a,
.site-body-left-column .nav-view-item,
.site-body-left-column .site-header-title,
.site-body-left-column .site-header-text {
  color: #000000 !important;
}

	/* Right Column / "ON THIS PAGE" Outline Text in Dark Mode */

.theme-dark .site-body-right-column,
.theme-dark .site-body-right-column *,
.theme-dark .site-body-right-column a,
.theme-dark .published-section-outline,
.theme-dark .published-section-outline *,
.theme-dark .outline-view-container,
.theme-dark .outline-view-container *,
.theme-dark .outline-view-item,
.theme-dark .outline-view-item-text,
.theme-dark .tree-item-inner,
.theme-dark .tree-item-self {
  color: #ffffff !important;
  opacity: 1 !important;
}

.theme-dark .site-body-right-column a:hover,
.theme-dark .outline-view-item:hover,
.theme-dark .outline-view-item-text:hover,
.theme-dark .tree-item-self:hover {
  color: #FFD400 !important;
}

	/* Make sure we can see through the background colour to other shapes */

.site-body,
.site-body-main-column,
.site-body-right-column,
.published-container,
.markdown-rendered,
.markdown-preview-sizer {
  background-color: transparent !important;
}

	/* Constrain content sizer */

.markdown-preview-sizer {
  max-width: min(850px, 100%) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

	/* Responsive sidebar visibility */

@media screen and (max-width: 1300px) {
  .site-body-right-column,
  .outline-view-container,
  .published-section-outline {
    display: none !important;
  }
}

	/* Remove site title on mobile formating */

@media screen and (max-width: 750px) {
  .site-header-title,
  .site-header-text {
    display: none !important;
  }
}

	/* Header & Navigation Layout */

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.site-header-logo img {
  max-width: 140px; 
  margin-bottom: 10px;
}

.site-footer a { 
  display: none; 
}

	/* Text Links (Cobalt Blue in Light Mode, Sky Blue in Dark Mode) */

.markdown-rendered a:not(.btn) {
  color: #0011ff !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  font-weight: 700;
}

.markdown-rendered a:not(.btn):hover {
  color: #d92525 !important;
}

.theme-dark .markdown-rendered a:not(.btn) {
  color: #BDE9FF !important;
}

.theme-dark .markdown-rendered a:not(.btn):hover {
  color: #FFD400 !important;
}

	/* Black & White Pill Headers */

.markdown-rendered h1,
.markdown-rendered h2 {
  background-color: #000000 !important;
  color: #ffffff !important; 
  border-radius: 999px !important;
  padding: 0.35em 1.1em !important;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.25 !important;
  text-align: left;
}

.theme-dark .markdown-rendered h1,
.theme-dark .markdown-rendered h2 {
  border: 2px solid #ffffff !important;
}

/* Hide Obsidian internal anchor icons */
.markdown-rendered h1 .heading-anchor,
.markdown-rendered h2 .heading-anchor,
.markdown-rendered h1 a.heading-anchor,
.markdown-rendered h2 a.heading-anchor,
.markdown-rendered h1 .anchor-link,
.markdown-rendered h2 .anchor-link,
.markdown-rendered h1 .heading-collapse-indicator,
.markdown-rendered h2 .heading-collapse-indicator,
.markdown-rendered h1 svg,
.markdown-rendered h2 svg {
  display: none !important;
}

/* Header image sizing */
.markdown-rendered h1 img,
.markdown-rendered h2 img {
  height: 64px !important;
  width: 64px !important;
  margin: 0 8px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  image-rendering: pixelated;
}

.markdown-rendered h3 {
  margin-top: 1.5em;
  font-weight: 800;
  border-bottom: 3px solid #000000 !important;
  padding-bottom: 0.2em;
  width: fit-content;
}

.theme-dark .markdown-rendered h3 {
  border-bottom: 3px solid #ffffff !important;
  color: #ffffff !important;
}

	/* Action Buttons */

.markdown-rendered a.btn,
.markdown-rendered a.btn:visited,
a.btn,
a.btn:visited {
  display: inline-block;
  background-color: #d92525 !important;
  color: #ffffff !important;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none !important;
  margin: 4px 0;
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease !important;
}

.theme-dark .markdown-rendered a.btn,
.theme-dark .markdown-rendered a.btn:visited,
.theme-dark a.btn,
.theme-dark a.btn:visited {
  border: 2px solid #ffffff !important;
  box-shadow: 4px 4px 0px #ffffff !important;
  background-color: #d92525 !important;
  color: #ffffff !important;
}

.markdown-rendered a.btn:hover,
.markdown-rendered a.btn:visited:hover,
a.btn:hover,
a.btn:visited:hover {
  background-color: #b01a1a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0px #000000 !important;
}

.theme-dark .markdown-rendered a.btn:hover,
.theme-dark .markdown-rendered a.btn:visited:hover,
.theme-dark a.btn:hover,
.theme-dark a.btn:visited:hover {
  background-color: #b01a1a !important;
  box-shadow: 2px 2px 0px #ffffff !important;
}

.markdown-rendered a.btn:active,
.markdown-rendered a.btn:visited:active,
a.btn:active,
a.btn:visited:active {
  transform: translate(4px, 4px) !important;
  box-shadow: 0px 0px 0px #000000 !important;
}

.theme-dark .markdown-rendered a.btn:active,
.theme-dark .markdown-rendered a.btn:visited:active,
.theme-dark a.btn:active,
.theme-dark a.btn:visited:active {
  box-shadow: 0px 0px 0px #ffffff !important;
}


	/* High-Contrast Tables */

.markdown-rendered table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.5em 0 !important;
  border: 2px solid #000000 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
}

.markdown-rendered th,
.markdown-rendered td {
  border: 2px solid #000000 !important;
  padding: 10px 14px !important;
  color: #000000 !important;
  text-align: left !important;
}

.markdown-rendered th {
  background-color: #FFD400 !important;
  font-weight: 800 !important;
}

/* Dark Mode Table Override */
.theme-dark .markdown-rendered table {
  border: 2px solid #ffffff !important;
  background-color: #FFBB00 !important;
  box-shadow: 4px 4px 0px #ffffff !important;
}

.theme-dark .markdown-rendered th,
.theme-dark .markdown-rendered td {
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}

.theme-dark .markdown-rendered th {
  background-color: #FFD400 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

.theme-dark .markdown-rendered td {
  background-color: #000000 !important;
  color: #ffffff !important;
}

	/* Horizontal Divider Rules (---) */

.markdown-rendered hr {
  border: none !important;
  height: 6px !important;
  background-color: #000000 !important;
  border-radius: 999px !important;
  margin: 1.8em 0 0.2em 0 !important;
  opacity: 1 !important;
}

.theme-dark .markdown-rendered hr {
  background-color: #ffffff !important;
}

.markdown-rendered hr + h1,
.markdown-rendered hr + h2,
.markdown-rendered hr + h3 {
  margin-top: 0.1em !important;
}

	/* Scrolling Memphis Geometric Outer Margin Shapes */

.site-body {
  background-image: 
    /* 1. Top Right Small Red Triangle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 0,100 100,100' fill='%23d92525'/%3E%3C/svg%3E"),
    /* 2. Top Right White Dot Circle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23ffffff'/%3E%3C/svg%3E"),
    /* 3. Upper Right White Semi-Circle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100,0 A50,50 0 0,0 100,100 Z' fill='%23ffffff'/%3E%3C/svg%3E"),
    /* 4. Mid Right Bright Yellow Circle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23ffcc00'/%3E%3C/svg%3E"),
    /* 5. Mid Right White Upward Triangle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 0,100 100,100' fill='%23ffffff'/%3E%3C/svg%3E"),
    /* 6. Mid Right Red Polygon */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='0,0 100,50 0,100' fill='%23d92525'/%3E%3C/svg%3E"),
    /* 7. Lower Right White Square */
    linear-gradient(#ffffff, #ffffff),
    /* 8. Lower Right Cobalt Blue Circle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%230011ff'/%3E%3C/svg%3E"),
    /* 9. Bottom Right Big Red Triangle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='100,0 0,100 100,100' fill='%23d92525'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  
  /* Dimensions for shapes */
  background-size: 
    55px 55px,    /* Top Red Small Triangle */
    28px 28px,    /* White Dot */
    45px 90px,    /* White Semi-Circle */
    36px 36px,    /* Yellow Circle */
    40px 40px,    /* White Upward Triangle */
    45px 45px,    /* Mid Red Triangle */
    32px 32px,    /* White Square */
    30px 30px,    /* Blue Circle */
    140px 140px !important;  /* Bottom Red Big Triangle */

  /* Vertical scroll track positions down the right margin */
  background-position: 
    right 0px top 180px,
    right 3% top 330px,
    right 0px top 460px,
    right 2% top 660px,
    right 4.5% top 830px,
    right 1.5% top 1020px,
    right 3.5% top 1220px,
    right 2% top 1450px,
    right 0px top 1700px !important;

  background-attachment: scroll !important;
}

	/* Brand Yellow Left Sidebar with Memphis Accents */

.site-body-left-column {
  background-color: #FFD400 !important;
  border-right: 3px solid #000000 !important;
  box-sizing: border-box !important;

  background-image: 
    /* 1. Top-Left Red Corner Triangle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='0,0 100,0 0,100' fill='%23d92525'/%3E%3C/svg%3E"),
    /* 2. Blue Accent Bar */
    linear-gradient(#0011ff, #0011ff),
    /* 3. White Left Semi-Circle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0,0 A50,50 0 0,1 0,100 Z' fill='%23ffffff'/%3E%3C/svg%3E"),
    /* 4. Cobalt Blue Circle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%230011ff'/%3E%3C/svg%3E"),
    /* 5. Red Left-Pointing Arrow Triangle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='100,0 0,50 100,100' fill='%23d92525'/%3E%3C/svg%3E"),
    /* 6. White Diamond */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 100,50 50,100 0,50' fill='%23ffffff'/%3E%3C/svg%3E"),
    /* 7. Lower Blue Corner Triangle */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='0,0 100,100 0,100' fill='%230011ff'/%3E%3C/svg%3E"),
    /* 8. Bottom White Right Arch */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100,0 A50,50 0 0,0 100,100 Z' fill='%23ffffff'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;

  /* Increased shape dimensions */
  background-size: 
    85px 85px,   /* Top-Left Red Triangle */
    16px 80px,   /* Blue Bar */
    45px 90px,   /* White Semi-Circle */
    36px 36px,   /* Blue Circle */
    60px 60px,   /* Red Left-Pointing Triangle */
    38px 38px,   /* White Diamond */
    70px 70px,   /* Blue Corner Triangle */
    40px 80px !important;  /* White Right Arch */

  /* Positioning track */
  background-position: 
    left 0px top 0px,            /* Top-Left Red Triangle */
    left 0px top 360px,          /* Blue Bar */
    left 0px top 520px,          /* White Semi-Circle */
    right 15px top 720px,        /* Blue Circle */
    left 10px top 920px,         /* Red Left-Pointing Triangle */
    right 20px top 1150px,       /* White Diamond */
    left 0px top 1400px,         /* Blue Corner Triangle */
    right 0px top 1680px !important; /* White Right Arch */
}

@media screen and (max-width: 1200px) {
  .site-body {
    background-image: none !important;
  }
}






	/* Special Offer Ticket Callout */

.ticket-callout {
  display: flex;
  border: 2px solid #000000;
  box-shadow: 4px 4px 0px #000000;
  border-radius: 4px;
  margin: 1em 0; /* Reduced outer margin to pull it closer to other page elements */
  color: #000000;
  max-width: 100%;
  overflow: hidden;
  align-items: stretch;
}

.ticket-main {
  padding: 8px 14px; /* Severely reduced top/bottom padding */
  flex: 3;
  border-right: 4px dashed #000000; 
  background-color: #ffffff; 
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ticket-title {
  font-size: 1.2em;
  font-weight: 800;
  margin: 0 0 2px 0; /* Just a 2px nudge to separate from body text */
  line-height: 1.1;
}

.ticket-main p {
  margin: 0; 
  font-size: 0.95em; /* Slight reduction */
  line-height: 1.3; /* Tighter line spacing for the paragraph */
}

.ticket-stub {
  padding: 8px 12px; /* Tighter stub padding */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #FFD400; 
  text-align: center;
  min-width: 110px;
}

.ticket-stub-code {
  background-color: #ffffff;
  border: 2px solid #000000;
  padding: 4px 8px; /* Tighter box padding */
  font-weight: 800;
  margin-top: 4px; /* Pulled closer to the label above it */
  font-family: monospace;
  font-size: 1.05em;
}

/* Dark Mode Overrides */
.theme-dark .ticket-callout {
  border: 2px solid #ffffff;
  box-shadow: 4px 4px 0px #ffffff;
}

.theme-dark .ticket-main {
  border-right: 4px dashed #ffffff;
  background-color: #000000; 
  color: #ffffff;
}

.theme-dark .ticket-stub {
background-color: #FFD400 !important; 
  color: #000000 !important;
}

.theme-dark .ticket-stub-code {
  background-color: #000000;
  border: 2px solid #ffffff;
  color: #ffffff;
}