/* Oh, hello. Welcome to my css page. Yeah, lot's of fun stuff. */
/* Responsive Modular Settings */
/* :root settings for Responsive Modular Scale */
:root {
  /* links (default) */
  --color-a: #004487;
  /* links (default) */
  --color-a-hover: #b54326;
  --color-accent: #c28e38;
  --color-blue01: #0355a7;
  --color-blue02: #2a6f97;
  /* border color */
  --color-border: #aaa;
  /* used for boxes */
  --color-dark: #000;
  /* Errors & text-warnings */
  --color-error: #c31014;
  /* used for input field and hr rule */
  --color-gray: #bbc6cc;
  /* used with button & .btn styling  */
  --color-graylight01: #f3f5f6;
  /* used with button & .btn styling, input fields */
  --color-graylight02: #e1e6e9;
  /* Text green for success */
  --color-green-dark: #009150;
  --color-green-lighter: #05a95f;
  --color-session01: #2a6f97;
  --color-session02: #386641;
  --color-session03: #734164;
  --color-session04: #c28e38;
  --color-yellow01: #eee600;
  --color-yellow02: #ffdf00;
  --color-purple01: #bf00ff;
  --color-purple02: #b20aea;
  /* used with button & .btn styling */
  --color-menubar-items: #576a74;
  /* Text color */
  --color-text: #1a1a1a;
  /* backgrounds, button and .btn styling */
  --color-white: #fafbfc;
  /* font settings */
  --font-mono: Consolas, Menlo, Courier, Courier New, monospace;
  --font-plain: Geneva, "Segoe UI", Arial, system-ui, -apple-system, sans-serif;
  --font-w-heaviest: 700;
  --font-w-heavy: 600;
  --font-w-normal: 400;
  --font-weight-multiplier: 0.85;
  --ratio: 1.25;
  --s-9: calc(var(--s0)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio));
  --s-8: calc(var(--s0)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio));
  --s-7: calc(var(--s0)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio));
  --s-6: calc(var(--s0)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio));
  --s-5: calc(var(--s0)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio));
  --s-4: calc(var(--s0)/var(--ratio)/var(--ratio)/var(--ratio)/var(--ratio));
  --s-3: calc(var(--s0)/var(--ratio)/var(--ratio)/var(--ratio));
  --s-2: calc(var(--s0)/var(--ratio)/var(--ratio));
  --s-1: calc(var(--s0)/var(--ratio));
  --s0: max(1rem, 0.85rem + 0.5vw);
  --s01: calc(var(--s0)*var(--ratio));
  --s02: calc(var(--s0)*var(--ratio)*var(--ratio));
  --s03: calc(var(--s0)*var(--ratio)*var(--ratio)*var(--ratio));
  --s04: calc(var(--s0)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio));
  --s05: calc(var(--s0)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio));
  --s06: calc(var(--s0)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio));
  --s07: calc(var(--s0)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio));
  --s08: calc(var(--s0)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio));
  --s09: calc(var(--s0)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio)*var(--ratio));
  --measure: 69ch;
  --line-height: var(--ratio);
  --line-height-normal: calc(1.12 * var(--ratio));
  --border-thin: var(--s-5);
  line-height: var(--ratio);
  font-size: var(--base-font-size);
  font-family: var(--font-plain);
  color: var(--color-text);
  --print-max-width: 900px;
  /* A standard, readable width for A4/Letter */
  --wider-max-width: 85vw;
  --base-font-size: 1rem;
  /* --camera-color: var(--color-text);*/
}

/* Global */

body {
  background-color: var(--color-graylight02);
}

body,
p,
li {
  font-size: var(--s0);
}

*,
:after,
:before {
  box-sizing: border-box;
  overflow-wrap: break-word;
  padding: 0;
  border: 0 solid;
}

[hidden] {
  display: none;
}

[hidden]+* {
  margin-top: 0 !important;
}

*+* {
  padding: 0;
  line-height: var(--line-height-normal);
}

footer,
header,
main,
nav,
div {
  display: block;
}

a {
  text-decoration: underline;
}

p {
  margin-block-start: 1.25rem;
}

p+p {
  margin-top: var(--s01);
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

[tabindex="-1"]:focus,
shrink-grow:focus {
  outline: none;
}

/* removes text-shadow on the following elements */

h1,
h2,
h3,
h4,
h5,
h6,
.footnote,
pre,
address,
blockquote,
q,
dt,
dl,
figcaption,
label,
p,
small,
span,
ul,
ol {
  text-shadow: none;
}

ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-top: 0rem;
  padding-bottom: 0rem;
  font-size: var(--s0);
  line-height: var(--line-height-normal);
  margin-bottom: 1rem;
  margin-left: 0rem;
  padding-left: 2rem;
}

ol ol {
  padding-left: 2rem;
}

ol li,
ul li {
  padding: 0rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: var(--line-height-normal);
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* ol Adaption - this sets the indentation of ol lists based on the number of items in the list - needed for roman and alpha */

ol li {
  margin-left: 0rem;
}

ol li:first-child:nth-last-child(n + 18),
ol li:first-child:nth-last-child(n + 18)~li {
  margin-left: 0.35rem;
}

ol li:first-child:nth-last-child(n + 28),
ol li:first-child:nth-last-child(n + 28)~li {
  margin-left: 1.4rem;
}

ol li:first-child:nth-last-child(n + 38),
ol li:first-child:nth-last-child(n + 38)~li {
  margin-left: 2.2rem;
}

/* end ol adaption */

li {
  display: list-item;
  text-align: start;
  text-align: -webkit-match-parent;
  text-align: match-parent;
}

/* This controls the basic uls & some ol settings on content */

ul {
  list-style: none;
  padding-left: 0;
  list-style-position: outside;
  padding-top: 0rem;
  padding-bottom: 0rem;
  font-size: var(--s0);
  line-height: var(--line-height-normal);
  margin-bottom: 1rem;
  margin-left: 0rem;
}

ul>li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--s-1);
}

ul>li::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: var(--s03);
  height: var(--s03);
  background-color: var(--color-a);
  /* Default fallback color */
  -webkit-mask: url('/assets/svg/camera.svg') no-repeat center / contain;
  mask: url('/assets/svg/camera.svg') no-repeat center / contain;
}

/* General message styling */
.message {
  color: var(--color-text);
}

/* Specific error state styling */
.message.error {
  color: var(--color-error);
  font-weight: var(--font-w-heaviest);
}

.message.success {
  color: var(--color-green-lighter);
  filter: brightness(1);
  font-weight: var(--font-w-heaviest);
}

.guide-container ul>li {
  position: relative;
  padding-left: 1.5rem;
}

.guide-container ul>li::before {
  content: "";
  position: absolute;
  left: -.75rem;
  top: .83em;
  transform: translateY(-50%);
  width: var(--s03);
  height: var(--s03);
  background-color: var(--color-a);
  /* Default fallback color */
  -webkit-mask: url('/assets/svg/camera.svg') no-repeat center / contain;
  mask: url('/assets/svg/camera.svg') no-repeat center / contain;
}

ul ul {
  list-style-type: none;
  padding-left: revert;
  margin-top: var(--s-1);
  margin-bottom: 0;
}

ul ul>li {
  position: static;
  padding-left: 0;
}

ul ul>li::before {
  content: none;
}

table {
  text-indent: initial;
  box-sizing: border-box;
  border-collapse: collapse;
}

/* This makes images responsive */

img {
  max-width: 100%;
  width: auto;
  height: auto;
  padding: 0px;
  margin: 0;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  border-radius: 0.5rem;
  /* Softens the corners so the shadow looks natural */
}

hr {
  display: block;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 1px;
  color: var(--color-accent);
  background-color: var(--color-accent);
}

/* Screen & Base Style: Merging <hr> properties onto the section container */
.print-block {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-gray);
  padding-bottom: 0.75rem;
  /* Maintains breathing room before the line */
}

/* Removes the trailing line from the very last block of the guide */
.print-block:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

pre {
  outline: var(--border-thin) solid transparent;
  outline-offset: calc(var(--border-thin) * -1);
}

a,
div,
td,
th,
pre {
  font-size: var(--s0);
  line-height: var(--line-height-normal);
  font-family: var(--font-plain);
}

/* h1 h2 h3 h4 h5 h6 settings */
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-hyphens: auto;
  hyphens: auto;
  color: var(--color-text);
  margin-block-start: var(--s0);
  margin-block-end: var(--s-1);
  line-height: var(--line-height-normal);
  font-family: var(--font-plain);
}

/* Updated Hierarchy: H4 = Base Size */
h1 {
  font-size: var(--s03);
  /* 2.44rem - 4rem */
  font-weight: var(--font-w-heaviest);
}

h2 {
  font-size: var(--s02);
  /* 1.95rem - 2.83rem */
  font-weight: var(--font-w-heaviest);
}

h3 {
  font-size: var(--s01);
  /* 1.56rem - 2rem */
  font-weight: var(--font-w-heaviest);
}

h4 {
  font-size: var(--s0);
  /* 1rem (The "Normal" Size) */
  font-weight: var(--font-w-heaviest);
}

h5 {
  font-size: var(--s-1);
  /* 0.8rem - 0.71rem */
  font-weight: var(--font-w-heavy);
}

h6 {
  font-size: var(--s-2);
  /* 0.64rem - 0.5rem */
  font-weight: var(--font-w-heavy);
}

/* ------------------------------ */
/* Link behavior */
/* This sets the link color */
a,
a:visited {
  color: var(--color-a);
}

/* This sets the url link hover color */

a:hover {
  color: var(--color-a-hover);
}

footer.site-footer p {
  font-size: var(--s-2);
  /* Adjust this step variable as needed for global footer */
}

footer.site-footer {
  background-color: var(--color-white);
}

.home-site-footer {
  position: relative;
  z-index: 20;
  background-color: transparent;
  text-align: center;
}

.home-site-footer p {
  font-size: var(--s-1);
  color: var(--color-yellow02);
  margin-block-start: .5rem;
  margin-left: 1em;
  background-color: var(--color-dark);
}

.home-site-footer a {
  color: var(--color-purple02);
}

.home-site-footer a:hover {
  color: var(--color-purple02);
  filter: brightness(5);
}

.home-site-footer.footer-contact a {
  font-size: var(--s0);
  margin-left: 1em;
  background-color: var(--color-dark);
}

/* ------------------------------ */
.stack {
  /* The flex context */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack>* {
  /* Any extant vertical margins are removed */
  margin-block: 0;
}

.stack>*+* {
  /* Top margin is only applied to successive elements */
  margin-block-start: var(--s01, var(--s01));
}

/* .stack h2 {
  padding-top: var(--s02);
} */

.stack h1 {
  margin-top: var(--s01);
}

.box {
  padding: 0;
  border: none;
  color: var(--color-text);
  background-color: var(--color-white);
}

.boxr {
  text-align: right;
}

.boxl {
  text-align: left;
}

.boxs {
  max-width: 16ch;
  text-align: start;
}

.row {
  display: flex;
}

.column01 {
  flex: 50%;
}

/* shadow */

button,
.btn,
.cta-button {
  writing-mode: horizontal-tb !important;
  font-style: normal;
  font-weight: var(--font-w-normal);
  font-size: var(--s01);
  font-family: var(--font-plain);
  text-rendering: auto;
  color: var(--color-menubar-items);
  letter-spacing: normal;
  word-spacing: normal;
  line-height: 1.4;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  background-color: var(--color-graylight01);
  margin: 0;
  padding: 0.75rem 1.25rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-graylight02);
  border-image: initial;
  border-radius: 10px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  width: fit-content;
  min-width: 8rem;
  max-width: 22ch;
}


input,
button,
.cta-button {
  /*  box-shadow: #32325d40 3px 5px 10px -3px, #0000004d 0 5px 16px -18px; */
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"] {
  font-size: var(--s01);
  padding: var(--s-1) var(--s0);
  border: none;
  border-radius: 10px;
  background-color: var(--color-white);
  color: var(--color-text);
  width: 100%;
  box-sizing: border-box;
}

.form-group {
  padding: 0 0 var(--03) 0;
}

.form-group label {
  font-size: var(--s0);
  font-weight: var(--font-w-heavy);
  color: var(--color-text);
}

.form-group input[type="checkbox"] {
  display: inline-block;
  width: auto;
  padding: 0;
  margin-right: 0.5rem;
}

/* Removes the default browser focus ring/border */

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="date"]:focus {
  border-color: var(--color-graylight02);
  /*box-shadow: inset 1px 1px 2px #32325d40, inset -1px -1px 2px #fff;*/
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: inset rgba(14, 30, 37, 0.2) 0px 2px 4px 0px, inset rgba(14, 30, 37, 0.4) 0px 2px 8px 0px;
}


input {
  border: 1px solid var(--color-gray);
  padding: 1rem;
  border-radius: 10px;
  font-size: var(--s01);
  display: block;
}

#input:placeholder-shown {
  text-overflow: ellipsis
}

input:-internal-autofill-selected {
  background-color: var(--color-white) !important;
}

button,
.cta-button {
  color: var(--color-a)
}

button:hover,
.cta-button:hover {
  background-color: var(--color-white);
  color: var(--color-a)
}

button a,
a:visited,
.cta-button a {
  text-decoration: none
}

button:focus,
.cta-button:focus {
  background-color: var(--color-graylight01)
}

.button:hover,
button:hover a,
button:hover a:visited,
.cta-button:hover a,
.cta-button:hover a:visited {
  text-decoration: none
}

button:active,
.cta-button:active {
  transform-origin: 100% 50%;
  transform: scale(.99);
  transition: all .2s;
  box-shadow: inset #32325d40 -3px -5px 10px -3px, inset #0000014d 0 -5px 16px -18px
}

/* Styles the user profile box itself (font size, padding, spacing) */

select {
  font-family: var(--font-plain);
  font-size: var(--s0);
  /* Adjust to preferred size */
  padding: var(--s01), var(--s0);
  /* Adds breathing room inside the box */
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--color-graylight02);
  background-color: var(--color-white);
}

/* user profile menu options text */

select option {
  font-family: var(--font-plain);
  font-size: var(--s0);
  padding: var(--s-2);
}

/* ----- end shadowing ----- */

.guide-container {
  background-color: var(--color-white);
  /* (Handles Mobile, Tablet, and Desktop) */
  max-width: 80%;
  margin: 0 auto;
}

.home-guide-container {
  background-color: transparent;
  /* (Handles Mobile, Tablet, and Desktop) */
  max-width: 100%;
  margin: 0 auto;
}

.wrapper {
  display: block;
  /* Ensures it behaves as a block-level element */
  width: 98%;
  /* Takes up all available space up to the limit */
  max-width: var(--measure);
  margin: 0 auto;
  /* Centers it horizontally */
  padding: var(--s-5);
  background-color: var(--color-white);
}

.home-style {
  background-color: var(--color-dark);
}

.home-style .hero-content ul>li,
.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content p,
.hero-content small {
  /*   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5); */
  /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9),
    0 4px 12px rgba(0, 0, 0, 0.4); */
  /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85); */
  text-shadow:
    1px 1px 1px rgba(0, 0, 0, 0.9),
    1px 2px 3px rgba(0, 0, 0, 0.8);
  /* filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.9)); */
}

.home-nav a {
  font-size: var(--s0);
  text-decoration: none;
  /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.7); */
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9),
    1px 2px 3px rgba(0, 0, 0, 0.8);
}


.home-wrapper {
  display: block;
  /* Ensures it behaves as a block-level element */
  width: 98%;
  /* Takes up all available space up to the limit */
  margin: 0 auto;
  /* Centers it horizontally */
  padding: var(--s-5);
  background-color: transparent;
}

.home-wrapper h1 {
  color: var(--color-yellow02);
}

.home-wrapper h2 {
  color: var(--color-white);
}

.home-wrapper h3 {
  color: var(--color-white);
}

.home-wrapper a {
  color: var(--color-yellow02);
}

.home-wrapper a:hover {
  color: var(--color-a-hover);
  filter: brightness(5);
}

.wrapper.wide-grid {
  max-width: var(--wider-max-width);
}

/* Target any ordered list inside wide wrapper container */
.wrapper.wide-grid ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  /* First value is row gap (between items vertically), second is column gap */
  gap: var(--s04) var(--s02);
  list-style: none;
  /* Removes numbers/bullets for a clean poster grid */
  padding-left: 0;
  /* Removes default browser indentation */
  margin: var(--s02) 0;
}

/* Style the individual items inside that list */
.wrapper.wide-grid ol li {
  margin: 0;
  /* Resets default list margins */
}

.wrapper.wide-grid ol li a {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  font-weight: var(--font-w-heavy);
  gap: var(--s-5);
  text-align: center;
  padding: var(--s-2);
  border-radius: 0.5rem;
  background-color: var(--color-whate);
  z-index: 10;
  /* Lifts the active link above all surrounding grid items and wrapper edges */
  padding-top: var(--s02);
}

.wrapper.wide-grid ol li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--s03);
  height: var(--s03);
  background-color: var(--color-a);
  -webkit-mask: url('/assets/svg/camera.svg') no-repeat center / contain;
  mask: url('/assets/svg/camera.svg') no-repeat center / contain;
}

.wrapper.wide-grid ol li img {
  width: 100%;
  height: auto;
  display: block;
  margin: var(--s-5);
}

/* Note-taking textarea: 4 lines intrinsic height */
/* The Container: Handles spacing, background, and positioning */
.note-input-box {
  display: block;
  margin-top: var(--s0);
  margin-bottom: var(--s02);
  padding: 0px;
  background-color: var(--color-graylight01);
  border: none;
  border-radius: 4px;
}

/* The textarea: Handles the internal input mechanics */
.note-input-box textarea {
  display: block;
  width: 100%;
  padding: var(--s-1);
  /* Reserve space for the focus border using a transparent border */
  /* This ensures the box dimensions are the same before and after the click */
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
  /* Makes the transition smooth */
  background: none;
  font: inherit;
  line-height: 1.4;
  field-sizing: content;
  min-height: calc(4lh + (var(--s-1) * 2));
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}


.note-input-box textarea:focus {
  border-color: var(--color-gray);
  outline: none;
  transform: scale(1.01);
  transform-origin: center center;
  box-shadow: 0 11px 44px -22px #32325d40, 0 5px 14px #32325d40;
}

.note-input-box textarea::placeholder {
  color: var(--color-menubar-items);
  font-style: italic;
}

.instructions-wrapper {
  width: 98%;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--color-error);
}

/* The actual box styles cleanly contained inside */
.instructions {
  box-sizing: border-box;
  font-size: var(--s-1);
  padding: var(--s0);
  background: var(--color-graylight01);
  border-radius: 4px;
  border: 1px solid var(--color-graylight02);
  color: var(--color-error);
}

.instructions summary {
  cursor: pointer;
  font-weight: var(--font-w-heavy);
}

.instructions ol {
  margin: var(--s-1) 0 0 var(--s01);
  padding-left: 0;
}

.instructions li {
  margin-bottom: var(--s-2);
}

@media (max-width: 600px) {
  .instructions {
    float: none;
    width: 100%;
  }
}

.instructions,
.instructions * {
  font-size: var(--s-1) !important;
  line-height: var(--line-height-normal);
}

/* Specifically clean up the list spacing inside the box */
.instructions ol {
  margin-top: var(--s-1);
  margin-bottom: 0;
  padding-left: var(--s01);
  /* Keeps the bullets / numbers from looking cramped */
}

.hero-banner {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /*min-height: 92vh; /* Desktop fallback */
  /*min-height: 92dvh; /* Mobile: adapts cleanly to address bar shifts */
  min-height: clamp(450px, 89dvh, 1200px);
  /* Scales smoothly instead of snapping */
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--color-dark);
}

/* Force video to fill the entire large area */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  max-width: 3840px;
  /* actual width of the video */
}

/* .hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: scale-down;
  z-index: 1;
} */

/* Dark cinematic overlay so text is crystal clear */
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  z-index: 2;
}

/* Content sits on top of video and overlay */
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0 auto;
  padding: var(--s-5);
  text-align: center;
}

@media (max-width: 1377px) {
  .hero-video {
    object-fit: cover;
  }
}

.hero-banner h1 {
  font-size: var(--s03);
  color: var(--color-yellow02);
  padding-top: 2rem;
}

.hero-content main ul {
  display: inline-block;
  text-align: left;
  margin: var(--s-2) auto;
  padding-left: 0;
  list-style-position: inside;
  /* Pulls the bullets inside the text boundary */
}

/* Optional inline button styling for quick links */
.hero-nav {
  display: flex;
  gap: var(--s-1);
  justify-content: center;
  margin-top: var(--s0);
}

.hero-nav a {
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: var(--s-1) var(--s0);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}

p.alerts {
  margin: var(--s-2) var(--s-5);
}

.hero.wrapper {
  background-color: transparent;
  background: transparent;
}

/* Accessibility: Stop video motion if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }

  .hero-banner {
    background-color: var(--color-dark);
    /* Fallback solid color */
  }
}

.user-nav {
  position: absolute;
  top: 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  font-size: var(--s0);
  white-space: nowrap;
  width: max-content;
}

.user-nav a,
.user-nav a {
  color: var(--color-white);
  text-decoration: none;
}

.user-nav a:hover {
  color: var(--color-a-hover);
  filter: brightness(5);
}

/* Centers the user nav - no longer a dropdown */
.user-profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-6);
}

/* truncates long user names and adds an ellipsis */
.user-welcome {
  display: inline-block;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.user-profile summary {
  list-style: none;
  /* Hides default browser disclosure triangle */
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  white-space: nowrap;
}

.user-nav a,
.user-profile summary * {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Dropshadow strictly on the camera icon wrapper element */
span.camera-icon-wrapper {
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.user-profile summary::-webkit-details-marker {
  display: none;
  /* Hides Safari's default triangle */
  margin-right: -0.2rem;
}

.user-profile summary::marker {
  margin-right: -0.2rem;
}

/* Open menu expands horizontally across the top directly below / around the trigger */
.user-profile .profile-menu {
  display: flex;
  flex-direction: row;
  /* Horizontally aligns links */
  gap: var(--s-2);
  /* Spacing between Profile, Password, Logout */
  align-items: center;
  padding: 0 0.25rem;
  background-color: transparent;
  white-space: nowrap;
}

.profile-menu,
.profile-menu * {
  font-size: var(--s0);
}

span.camera-icon-wrapper svg {
  height: var(--s03);
  width: var(--s03);
  margin-right: -0.25rem;
}

.user-profile summary {
  transition: transform 0.15s ease-out;
}

/* @supports (-webkit-touch-callout: none) {
  .user-nav {
    white-space: nowrap;
    width: max-content;
  }
} */

/* 1. Kill the global pseudo-element on the homepage */
.hero-content.home-wrapper ul>li::before {
  content: none !important;
}

/* 2. Clean list resets applied once to the parent UL and its items */
.hero-content.home-wrapper ul {
  list-style-type: none;
  padding-left: 0;
}

.hero-content.home-wrapper ul>li {
  padding-left: 0 !important;
  list-style-type: none !important;
  margin: 0 0 var(--s-1) 0;
}


/* 4. Link typography, sizing, and colors */
.hero-content.home-wrapper ul li a {
  font-size: var(--s01);
  color: var(--color-yellow02);
  text-decoration: none;
}

.hero-content.home-wrapper ul li a:hover {
  color: var(--color-a-hover);
  filter: brightness(5);
}

/* 5. SVG sizing and styling */
.hero-content.home-wrapper ul li svg,
.hero-content.home-wrapper ul li .list-icon {
  width: var(--s03);
  height: var(--s03);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  vertical-align: middle;
  /* margin-right: 0.5rem; */
}

/* Target the path elements directly inside the SVG */
.hero-content.home-wrapper ul li svg .camera-structure {
  stroke: var(--color-white) !important;
  stroke-width: 10px !important;
}

.hero-content.home-wrapper ul li svg .camera-gap {
  stroke: transparent !important;
}

.hero-content.home-wrapper {
  max-width: 85%;
  /* Keeps text from bleeding into the absolute top-right nav */
  padding-top: 2rem;
  /* Gives the user-nav breathing room above it */
}

/* tactile settings */
a,
.tg img,
button,
.cta-button {
  /* This ensures the scaling happens smoothly */
  display: inline-block;
  transition: transform 0.15s ease-out, color 0.15s ease-out;
  transform-origin: center;
}

/* Hover effect */
a:hover,
button:hover,
.user-profile summary:hover,
.cta-button:hover {
  transform: scale(1.08);
}

/* Click effect */
a:active,
button:active,
.user-profile summary:active,
.cta-button:active {
  transform: scale(0.96);
  /* Slight "press-in" feel */
}

/* --- THE FOURTH LEVEL: CINEMA / GIANT SCREEN SCALE --- */
/* Targets ultra-high-resolution displays and large presentation screens (4K, 6K, 8K) */
/* "only screen" explicitly prevents these giant viewports from bleeding into print styles */
@media only screen and (min-width: 2560px) {
  .guide-container {
    max-width: 75vw;
    /* Expands nicely across the vast landscape of an ultra-wide/IMAX viewport */
  }

  :root {
    /* Explicitly re-bind the root font-size to scale dynamically with the screen width */
    font-size: 1.25vw;

    /* Recalculate step variables using purely responsive percentages so the type hierarchy stays proportional */
    --s-1: 0.9vw;
    --s0: 1.25vw;
    --s1: 1.6vw;
    --s2: 2.1vw;
    --s3: 2.8vw;
    --s4: 3.8vw;
    --s5: 5.0vw;
  }

  /* Fix image scaling for ultra-wide screens so they don't look like postage stamps */
  img {
    max-width: 45vw;
  }
}

/* styling for the About and Info me pages */
.personal-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: var(--s-1);
  margin-bottom: var(--s-3);
}

.header-cluster svg {
  width: 1em;
  /* Scales directly with the text size of the header cluster */
  height: auto;
  display: inline-block;
  flex-shrink: 0;
}

.header-cluster ht {
  margin: 0;
}

.bio-text {
  display: flex;
  flex-direction: column;
  gap: var(--s0)
}

.bio-layout {
  margin-top: var(--s-1);
}

/* Mobile default: stack everything nicely */
.bio-image-cluster {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin: var(--s-2) 0;
  width: 100%;
}

/* Forces the image to strictly obey sizing limits */
.bio-image {
  max-width: 150px;
  width: 100%;
}

.bio-image img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-border);
  box-shadow: -4px 4px 0px var(--color-gray);
  margin-top: var(--s-3);
}

svg.starburst-icon {
  width: var(--s05);
  height: var(--s05);
  fill: var(--color-a-hover);
  color: var(--color-a-hover);
}

.bio-text p {
  margin-bottom: var(--s0);
}

/* Desktop screen size: bring back the float for wider displays */
@media (min-width: 768px) {
  .bio-image-cluster {
    float: right;
    width: auto;
    margin-left: var(--s0);
    margin-bottom: var(--s-3);
    margin-top: 0;
  }

  .bio-text p {
    overflow: block;
  }
}

ol li a {
  display: block;
  text-decoration: none;
  color: inherit;
}

ol li img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: var(--s-1);
  /* Spacing between the image and the text title */
}

/* styling for the sessions page */
.wide-grid ol {
  display: grid;
  /* Using 16rem (roughly 250px depending on root settings) instead of hard pixels */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s01);
  list-style: none;
  padding: 0;
  margin: var(--s02) 0;
}

.wide-grid.session01 ol li a {
  color: var(--color-session01);
}

.wide-grid.session02 ol li a {
  color: var(--color-session02);
}

.wide-grid.session03 ol li a {
  color: var(--color-session03);
}

/* Restrict color strictly to headings and icons by session */
h1.session01,
h2.session01,
h3.session01,
h4.session01 {
  color: var(--color-session01);
}

h1.session02,
h2.session02,
h3.session02,
h4.session02 {
  color: var(--color-session02);
}

h1.session03,
h2.session03,
h3.session03,
h4.session03 {
  color: var(--color-session03);
}

/* Session 1 (Blue) */
.wrapper.session01 h1,
.wrapper.session01 h2,
.wrapper.session01 h3,
.wrapper.session01 h4 {
  color: var(--color-session01);
}

.wrapper.session01 .guide-container ul>li::before,
.wrapper.session01 ul>li::before,
.session01.wrapper.wide-grid ol li a::before,
.session01 ul>li::before {
  background-color: var(--color-session01);
}

/* Session 2 (Green) */
.wrapper.session02 h1,
.wrapper.session02 h2,
.wrapper.session02 h3,
.wrapper.session02 h4 {
  color: var(--color-session02);
}

.wrapper.session02 .guide-container ul>li::before,
.wrapper.session02 ul>li::before,
.session02.wrapper.wide-grid ol li a::before,
.session02 ul>li::before {
  background-color: var(--color-session02);
}

/* Session 3 (Purple) */
.wrapper.session03 h1,
.wrapper.session03 h2,
.wrapper.session03 h3,
.wrapper.session03 h4 {
  color: var(--color-session03);
}

.wrapper.session03 .guide-container ul>li::before,
.wrapper.session03 ul>li::before,
.session03.wrapper.wide-grid ol li a::before,
.session03 ul>li::before {
  background-color: var(--color-session03);
}

.session_id {
  font-weight: var(--font-w-heaviest);
}

.countdown-notice {
  color: var(--color-a-hover);
  font-weight: var(--font-w-heavy);
  text-align: center;
}

span.status {
  color: var(--color-a-hover);
}

.status h3 {
  color: var(--color-a-hover);
}



/* --- THE ULTIMATE CONSOLIDATED PRINT OVERRIDE SYSTEM --- */
@media print {
  @page {
    margin: 0.5in;
  }

  /* Hard reset on base sizes for printing */
  :root {
    font-size: 11pt;
    --s-2: 8pt;
    --s-1: 9.5pt;
    --s0: 11pt;
    --s01: 13pt;
    --s02: 15pt;
    --s03: 18pt;
    --s04: 20pt;
    --s05: 22pt;
  }

  /* 1. NUCLEAR RESET: Completely flattens layout contexts so breaks can function */
  html,
  body,
  .guide-container,
  .wrapper,
  .stack {
    display: block !important;
    float: none !important;
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    display: block !important;
    clear: both !important;
    color: #000 !important;
  }

  /* 2. HEADING PROTECTION: Keeps headings absolutely glued to the text below them */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr {
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  /* Ensure stacked headings (like an h4 right after an h3) never split */
  h2+h3,
  h3+h4,
  h4+h5 {
    break-before: avoid !important;
    page-break-before: avoid !important;
  }

  /* Force the element immediately following any heading to stay on the same page */
  h1+*,
  h2+*,
  h3+*,
  h4+*,
  h5+*,
  h6+* {
    break-before: avoid !important;
    page-break-before: avoid !important;
  }

  /* 3. FLUID SPLITS: Allows lists and normal paragraphs to split across page lines naturally */
  ul,
  ol,
  li {
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  /* Paragraphs MUST be allowed to split, otherwise they pull headings down with them */
  p {
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  /* 4. SOLID BLOCKS: Only keep elements that absolutely cannot split intact */
  table,
  img {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  img {
    max-width: 60%;
    height: auto;
    object-fit: scale-down;
  }

  .wrapper {
    width: 100%;
    /* Use the full printable area */
    max-width: none;
    /* Remove the web limit */
    margin: 0;
    padding: 0;
  }

  /* Prevent a page break immediately after an h2 or h3 */
  h2,
  h3,
  h4 {
    break-after: avoid;
  }

  .note-input-box+hr,
  hr+.note-input-box {
    display: none;
  }

  ul:has(.note-input-box)+hr,
  .note-input-box+hr {
    display: none !important;
  }

  .note-input-box {
    margin-bottom: 2rem !important;
    /* This ensures the entire container and its contents stay together */
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  .note-input-box textarea {
    height: auto !important;
    overflow: visible !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: var(--s-1);
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .instructions,
  .breadcrumb,
  .message.error,
  .instructions-wrapper {
    display: none !important;
  }

  /* 5. MANUAL OVERRIDE HELPER: Use class="print-force-drop" to manually force a break */
  .print-force-drop {
    page-break-before: always !important;
    break-before: page !important;
  }
}