/* === fonts.css === */
/* FONTS */

/* Google Fonts (Manrope) loaded via <link> in header.php for better performance */

@font-face {
  font-family: "Berlin Sans";
  src: url("../assets/fonts/brlns/brlns-rg.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
}


/* === modern-normalize.css === */
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
	box-sizing: border-box;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/

html {
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji'; /* 1 */
	line-height: 1.15; /* 2 */
	-webkit-text-size-adjust: 100%; /* 3 */
	tab-size: 4; /* 4 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
	margin: 0;
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}


/* === variables.css === */
/* ==================================== */
/* VARIABLES */
/* ==================================== */

:root {
  /* SITE - Light mode defaults */
  --background: hsl(0, 0%, 98%);
  --foreground: hsl(0, 0%, 12%);

  /* COLORS - Static (no theme change) */
  --muted: hsl(0, 0%, 96%);
  --muted-foreground: hsl(0, 0%, 45%);
  --color-cream: hsl(42, 100%, 96%);
  --color-red-50: hsl(0, 71%, 50%);
  --color-red-65: hsl(0, 100%, 64%);
  --color-green: hsl(139.7, 62.7%, 40%);
  --color-gold-40: hsl(49, 100%, 40%);
  --color-gold-60: hsl(49, 100%, 60%);
  --card-brown-10: hsl(32, 100%, 10%);
  --color-brown-30: hsl(32, 100%, 30%);
  --color-brown-60: hsl(32, 90%, 60%);

  /* NAVIGATION - Light mode defaults */
  --link: var(--color-red-50);
  --link-hover: var(--foreground);
  --menu-item: var(--color-red-50);
  --menu-item-shadow: var(--color-background);
  --menu-item-shadow-glow: hsla(0, 71%, 40%, 20%);
  --game-title: var(--color-brown-30);
  --game-title-hover: var(--foreground);
  --game-title-shadow: var(--color-gold-60);
  --game-title-shadow-glow: hsla(0, 71%, 40%, 20%);

  /* TYPE */
  --font-base-custom: "Manrope", var(--font-base);
  --font-brand: "Berlin Sans", var(--font-base);
  --font-base:
    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-base-size: 1.1rem;
  --font-base-line-height: 1.55;

  /* COMPONENTS - Light mode defaults */
  --element-background: var(--color-cream);

  /* STORY */
  --story-choice-size: 2.2rem;
  --story-fade-in-ms: 600;
}

/* ==================================== */
/* DARK MODE OVERRIDES */
/* ==================================== */

:root.dark {
  /* SITE */
  --background: hsl(0, 0%, 12%);
  --foreground: hsl(0, 0%, 98%);

  /* COLORS */
  --muted: hsl(0, 0%, 25%);
  --muted-foreground: hsl(0, 0%, 65%);

  /* NAVIGATION */
  --link: var(--color-red-65);
  --link-hover: var(--foreground);
  --menu-item: var(--color-red-65);
  --menu-item-shadow: hsla(42, 100%, 15%, 1);
  --menu-item-shadow-glow: hsla(0, 71%, 60%, 40%);
  --game-title: var(--color-brown-60);
  --game-title-shadow: hsla(42, 100%, 15%, 1);
  --game-title-shadow-glow: hsla(0, 71%, 60%, 40%);

  /* COMPONENTS */
  --element-background: var(--card-brown-10);
}


/* === containers.css === */
/* ==================================== */
/* CONTAINERS */
/* ==================================== */
html {
  overscroll-behavior: none;
  overflow-y: scroll; /* prevent layout shifts when pages toggle vertical scrolling */
}

body {
  background-color: var(--background);
  font-family: var(--font-base-custom, var(--font-base));
  font-size: var(--font-base-size);
  line-height: var(--font-base-line-height);
  color: var(--foreground);
}

.site {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  padding-top: 12px;

  @media screen and (min-width: 768px) {
    padding-top: 24px;
    font-size: 1.2rem;
  }
  @media screen and (min-width: 1024px) {
    font-size: 1.3rem;
  }
  @media screen and (min-width: 1280px) {
    font-size: 1.1rem;
  }
  @media screen and (min-width: 1440px) {
    font-size: 1.2rem;
  }
  @media screen and (min-width: 1920px) {
    padding-top: 32px;
    font-size: 1.25rem;
  }
  @media screen and (min-width: 2500px) {
    padding-top: 60px;
    font-size: 1.3rem;
  }
}

/* BODY MAIN CONTENT */
body main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 clamp(1rem, 2vw, 2rem); /* breathing room on small screens */
  padding-top: 1.5rem;

  @media screen and (min-width: 768px) {
    padding-top: 2rem;
    padding-left: 0;
    padding-right: 0;
  }
  @media screen and (min-width: 1024px) {
    padding-top: 2.4rem;
  }
  @media screen and (min-width: 1920px) {
    padding-top: 2.6rem;
  }
  @media screen and (min-width: 2500px) {
    padding-top: 2.8rem;
  }
}

/* HOME, ARCHIVE, AND SEARCH PAGES */
body.home .theme-bar,
body.home main,
body.archive .theme-bar,
body.archive main,
body.search .theme-bar,
body.search main {
  max-width: 1300px;
  @media screen and (min-width: 1920px) {
    max-width: 1600px;
  }
}

/* REGULAR PAGE AND SINGLE GAME PAGES */
body.page .theme-bar,
body.page main,
body.error404 .theme-bar,
body.error404 main,
body.single .theme-bar,
body.single main {
  width: 100%;
  align-items: flex-start;
  @media screen and (min-width: 768px) {
    max-width: 600px;
  }
  @media screen and (min-width: 1024px) {
    max-width: 740px;
  }
  @media screen and (min-width: 1280px) {
    max-width: 660px;
  }
  @media screen and (min-width: 1440px) {
    max-width: 700px;
  }
  @media screen and (min-width: 1920px) {
    max-width: 780px;
  }
}


/* === base.css === */
/* ==================================== */
/* BASIC ELEMENTS */
/* ==================================== */

a {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;

  &:hover {
    color: var(--link-hover);
    transition: color 0.1s;
    text-decoration: underline;
  }
}

/* ==================================== */
/* FOCUS VISIBLE STATES */
/* ==================================== */

/* Base focus style for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}


/* === utilities.css === */
/* STORY */
.end {
  text-align: center;
  font-weight: bold;
}

/* LAYOUT */
.block {
  display: block;
}

/* TYPOGRAPHY */
.strike {
  text-decoration: line-through;
}

/* SIZING */
.w-full {
  width: 100%;
}

/* Screen reader only - visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* CUSTOM SHORTCODE */
/* GAME ENDING NAVIGATION */
.ending-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem;
}

/* AddToAny social icons - override inline fill colors */
.a2a_s_twitter svg path {
  fill: #1da1f2 !important;
}


/* === components.css === */
/* ==================================== */
/* COMPONENT STYLES */
/* ==================================== */
header {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;

  @media screen and (min-width: 768px) {
    gap: 14px;
  }

  .banner {
    display: block;
    line-height: 0;

    picture {
      height: 0;
    }

    img {
      width: 100%;
    }
  }

  #menu-site {
    margin: 0;
    padding-left: 5px;
    display: flex;
    flex-direction: row;
    list-style-type: none;
    gap: 1rem;
    justify-content: center;

    @media screen and (min-width: 390px) {
      gap: 1.4rem;
      transform: translateX(-8px);
    }
    @media screen and (min-width: 600px) {
      gap: 2.5rem;
    }
    @media screen and (min-width: 768px) {
      gap: 3rem;
    }
    @media screen and (min-width: 1024px) {
      gap: 4rem;
      transform: translateX(-10px);
    }
    @media screen and (min-width: 1280px) {
      transform: translateX(-3px);
    }
    @media screen and (min-width: 1920px) {
      gap: 5rem;
    }
    @media screen and (min-width: 2500px) {
      gap: 6rem;
    }

    .menu-item a {
      display: inline-block;
      font-size: 1.3rem;
      letter-spacing: 0.01rem;
      font-family: var(--font-brand);
      font-weight: 400;
      line-height: normal;
      text-shadow:
        1px 1px 0 var(--menu-item-shadow),
        1px 1px 20px var(--menu-item-shadow-glow);
      color: var(--menu-item);

      &:hover {
        color: var(--foreground);
      }

      @media screen and (min-width: 480px) {
        font-size: 1.45rem;
      }
      @media screen and (min-width: 600px) {
        font-size: 1.56rem;
      }
      @media screen and (min-width: 768px) {
        font-size: 1.7rem;
      }
      @media screen and (min-width: 1024px) and (orientation: portrait) {
        font-size: 1.9rem;
      }
      @media screen and (min-width: 1280px) {
        font-size: 1.6rem;
      }
      @media screen and (min-width: 1920px) {
        font-size: 1.8rem;
      }
      @media screen and (min-width: 2500px) {
        font-size: 2rem;
      }
    }

    .current-menu-item a {
      position: relative;
      color: var(--foreground);

      &:hover {
        text-decoration: none;
      }

      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        background: var(--foreground);

        @media screen and (min-width: 768px) {
          bottom: -3px;
          height: 3px;
        }
        @media screen and (min-width: 1024px) {
          bottom: -4px;
          height: 4px;
        }
      }
    }
  }
}

/* CUSTOM CURRENT MENU ITEM  */
/* biome-ignore lint: ~ */
body.home .current-menu-item a,
/* biome-ignore lint: ~ */
body.archive .current-menu-item a {
  transform: translateY(-2px) scale(110%);
  letter-spacing: normal;

  @media screen and (min-width: 768px) {
    transform: translateY(-2px) scale(115%);
  }
  @media screen and (min-width: 1440px) {
    transform: translateY(-2px) scale(120%);
  }
}

/* HIDE HOME AND ARCHIVE PAGE TITLES */
body.home main h1,
body.archive main h1 {
  position: absolute;
  left: -9999px;
}

/* SINGLE GAME, SEARCH, AND REGULAR PAGE TITLES */
.game-page,
.search,
.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  h1 {
    margin: 0;
    font-size: 2rem;
    font-family: var(--font-brand);
    font-weight: 400;
    padding-top: 1.2rem;
    padding-bottom: 0;
    line-height: 1.1;
    color: var(--game-title);
    align-self: flex-start;

    @media screen and (min-width: 640px) {
      font-size: 2.4rem;
      padding-top: 2.2rem;
    }
    @media screen and (min-width: 2500px) {
      font-size: 2.6rem;
      padding-top: 2.8rem;
    }
  }
  .game-content {
    /* width: 100%; */
    align-self: flex-start;
  }
  .game-content p:first-child {
    margin-top: 0.5rem;

    @media screen and (min-width: 640px) {
      margin-top: revert;
    }
  }
}

/* ORIGINAL GAME TITLE ON GAME BRANCH PAGES */
.game-page h1.game-ref {
  margin-top: -1.6rem;
  padding-bottom: 1rem;
  font-size: var(--font-base-size);
  line-height: 1;
  opacity: 0.5;

  @media screen and (min-width: 768px) {
    margin-top: -1rem;
  }

  .game-link {
    color: var(--foreground);
    display: block;
  }
}

/* GAME CHOICE LISTS - Extra spacing for clickable choice lists */
.game-page .game-content .wp-block-list {
  li {
    margin-bottom: 0.5rem;

    &:last-child {
      margin-bottom: 0;
    }

    a {
      display: inline-block;
      padding: 0.25rem 0;
    }
  }
}

/* SEARCH PAGE */
.search {
  h1 {
    padding-top: 4rem;
  }
  h1.search-games {
    width: 100%;
    text-align: center;
    padding-bottom: 1rem;

    @media screen and (min-width: 768px) {
      padding-bottom: 1.7rem;
    }
  }
  h1.search-games + .search-form {
    margin-bottom: 4rem;
  }
  h1.no-results ~ .search-form {
    margin-bottom: 4rem;
  }
  h1.search-results {
    padding-top: 2rem;
    padding-bottom: 1rem;

    @media screen and (min-width: 768px) {
      padding-bottom: 1.7rem;
    }
    @media screen and (min-width: 1920px) {
      padding-bottom: 2.5rem;
    }
  }
  h1.no-results {
    padding-bottom: 0rem;
  }
  h1.no-results + p {
    margin: 0;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
  }
  .search-form:has(+ h1.search-results) {
    margin-top: 1rem;
  }
}

/* HOME AND ARCHIVE PAGES: GAME LIST GRID */
.card-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;

  @media screen and (min-width: 768px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem;
  }
  @media screen and (min-width: 1024px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
  @media screen and (min-width: 1280px) {
    gap: 2.1rem;
  }
  @media screen and (min-width: 1920px) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
  }

  /* HOME AND ARCHIVE PAGES: GAME LIST CARD */
  .card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--color-gold-40);
    /* background-color: var(--element-background); */
    box-shadow:
      0 10px 25px -10px rgb(0 0 0 / 0.25),
      0 20px 40px -10px rgb(0 0 0 / 0.2);
    transition:
      box-shadow 0.3s ease,
      background-color 0.3s ease,
      transform 0.3s ease;

    > * {
      position: relative;
      z-index: 1;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0px;
      border-radius: 12px;
      border: 5px solid var(--color-gold-60);
      pointer-events: none;
      z-index: 1;
    }

    /* Only enable hover effects on devices with hover capability (not touch) */
    /* biome-ignore lint: - */
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        transform: scale(1.01);
        box-shadow:
          0 10px 15px -3px rgb(0 0 0 / 0.1),
          0 4px 6px -4px rgb(0 0 0 / 0.1);
      }
    }

    /* Game Thumbnail */
    .card-image {
      display: block;
      background-color: white;
    }

    .card-image img {
      display: block;
      padding: 0.3rem;
      width: 100%;
      height: auto;
      object-fit: cover;
      border-radius: 0.25rem;
    }

    .card-info {
      border-top: 2px solid;
      border-color: var(--color-gold-60);
      background-color: var(--element-background);
      padding: 1rem 1.5rem 1.7rem;
      display: flex;
      height: 100%;
      flex-direction: column;
      gap: 0.3rem;

      /* biome-ignore lint: separate DOM context from .menu-item a */
      a {
        color: var(--game-title);

        /* biome-ignore lint: - */
        &:hover {
          color: var(--game-title-hover);
        }

        h2 {
          margin: 0;
          line-height: 1.1;
          font-size: 1.8rem;
          font-family: var(--font-brand);
          font-weight: 400;
          letter-spacing: 0.01rem;
          text-shadow:
            0.4px 0 0 currentColor,
            1px 1px 0 var(--background),
            1px 1px 20px var(--game-title-shadow-glow);

          @media screen and (min-width: 768px) {
            font-size: 1.7rem;
          }

          @media screen and (min-width: 1280px) {
            text-shadow:
              1px 1px 0 var(--background),
              1px 1px 20px var(--game-title-shadow-glow);
          }
        }
      }

      p {
        margin: 0;
        font-size: inherit;

        @media screen and (min-width: 768px) {
          font-size: 1.05rem;
        }
      }
    }
  }
}

/* GAME PAGE AND REGULAR PAGE: IMAGE AND CONTENT */
.page,
.game-page {
  .page-image {
    /* display: block; */
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
    transform: scale(105%);
    align-self: center;

    @media screen and (min-width: 1280px) {
      width: 560px;
    }
    @media screen and (min-width: 1440px) {
      width: 640px;
    }
    @media screen and (min-width: 1920px) {
      width: 800px;
    }
    @media screen and (min-width: 2500px) {
      width: 900px;
    }

    img {
      display: block;
      width: 100%;
      height: auto;

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        box-shadow: inset 0 0 5px 0px var(--background);
        pointer-events: none;
        border-radius: 8px;
      }
    }
  }

  .page-content {
    width: 100%;
  }
}

/* SEARCH FORM */
.search-form {
  display: flex;
  flex-direction: row;
  border: 2px solid var(--color-gold-40);
  border-radius: 0.375rem;
  width: 100%;
  max-width: 350px;

  @media screen and (min-width: 768px) {
    max-width: 400px;
  }
  @media screen and (min-width: 192px) {
    max-width: 450px;
  }
  @media screen and (min-width: 2500px) {
    max-width: 500px;
  }

  label {
    display: flex;
    gap: 0.5rem;
    width: 100%;

    .search-field {
      flex: 1;
      padding: 0.5rem 0rem 0.5rem 1rem;
      border: 1px solid var(--muted);
      border-radius: 0.375rem;
      background-color: var(--background);
      color: var(--foreground);
      font-size: 1.1rem;

      @media screen and (min-width: 768px) {
        font-size: 1.3rem;
      }
      @media screen and (min-width: 1280px) {
        font-size: 1.2rem;
      }
      @media screen and (min-width: 1920px) {
        font-size: 1.3rem;
      }
      @media screen and (min-width: 2500px) {
        font-size: 1.4rem;
      }
    }
  }

  .search-submit {
    padding: 0.5rem 1rem;
    background-color: var(--element-background);
    color: var(--foreground);
    border: none;
    border-left: 2px solid var(--color-gold-40);
    border-radius: 0 0.375rem 0.375rem 0;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;

    &:hover {
      opacity: 0.9;
    }
  }
}

/* PAGINATION */
.pagination {
  padding-top: 2rem;

  @media screen and (min-width: 600px) {
    padding-top: 2.5rem;
  }
  @media screen and (min-width: 1024px) {
    padding-top: 3rem;
  }

  .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
  }

  /* Pagination buttons */
  .page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: 2.5px solid var(--color-gold-40);
    border-radius: 0.5rem;
    background-color: var(--element-background);
    color: var(--foreground);
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      transform 0.2s ease;

    @media screen and (min-width: 600px) {
      padding: 0.75rem 1.5rem;
      font-size: 1.1rem;
      border-width: 3px;
    }

    &:hover {
      border-color: var(--color-gold-60);
      transform: scale(1.05);
    }

    &.current {
      background-color: var(--color-brown-30);
      color: hsl(0, 0%, 98%);
      border-color: var(--color-gold-60);
    }
  }
}

/* FOOTER */
footer {
  text-align: center;
  padding-top: 1.25rem;
  padding-bottom: 1rem;
  font-size: 1rem;
  opacity: 0.8;

  @media screen and (min-width: 640px) {
    font-size: 1rem;
  }
  @media screen and (min-width: 768px) {
    font-size: 1.1rem;
  }
  @media screen and (min-width: 1024px) {
    padding-top: 1.25rem;
    font-size: 1.2rem;
  }
  @media screen and (min-width: 1920px) {
    padding-top: 2.75rem;
  }
  @media screen and (min-width: 2500px) {
    padding-top: 3.4rem;
  }
}


/* === animation.css === */
/* ==================================== */
/* PRIMARY COMPONENTS */
/* ==================================== */

/* Header animation removed to prevent FOUT */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes zoom-in {
  0% {
    transform: scale(0.2);
  }
  100% {
    transform: scale(1);
  }
}


/* === theme.css === */
/* ==================================== */
/* THEME - Transitions & Toggle Button */
/* ==================================== */

/* Smooth transitions only during theme switch */
:root.theme-transition,
:root.theme-transition *,
:root.theme-transition *::before,
:root.theme-transition *::after {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root.theme-transition,
  :root.theme-transition *,
  :root.theme-transition *::before,
  :root.theme-transition *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Exclude theme toggle from all transitions - instant icon swap */
:root.theme-transition #theme-toggle,
:root.theme-transition #theme-toggle *,
:root.theme-transition #theme-toggle *::before,
:root.theme-transition #theme-toggle *::after {
  transition: none !important;
}

.theme-bar {
  width: 100%;
  height: 0;
  display: flex;
  justify-content: right;
  position: absolute;
  right: 12px;
  z-index: 1000;
  transform: translateY(-7px);

  @media screen and (min-width: 768px) {
    position: static;
    transform: translate(10px, 0);
  }
  @media screen and (min-width: 1440px) {
    transform: translate(15px, 0);
  }
  @media screen and (min-width: 2500px) {
    transform: translate(70px, 0);
  }
}

/* ==================================== */
/* THEME TOGGLE BUTTON */
/* ==================================== */

#theme-toggle {
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  color: var(--foreground);

  @media screen and (min-width: 768px) {
    width: 48px;
    height: 48px;
  }
  @media screen and (min-width: 1280px) {
    width: 44px;
    height: 44px;
  }
  @media screen and (min-width: 1440px) {
    width: 48px;
    height: 48px;
  }
  @media screen and (min-width: 1920px) {
    width: 52px;
    height: 52px;
  }
}

@media (hover: hover) {
  #theme-toggle:hover {
    background-color: var(--muted);
  }
}

#theme-toggle {
  position: relative;
}

#theme-toggle svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Icons: always rendered, controlled by opacity */
.theme-icon {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Dark theme: show moon icon */
:root.dark .theme-icon[data-theme="dark"] {
  opacity: 1;
}

/* Light theme: show sun icon (default when no .dark class) */
:root:not(.dark) .theme-icon[data-theme="light"] {
  opacity: 1;
}

/* Hover effects only on devices that support hover (not touch) */
@media (hover: hover) {
  :root.dark #theme-toggle:hover .theme-icon[data-theme="dark"] {
    opacity: 0;
  }

  :root.dark #theme-toggle:hover .theme-icon[data-theme="light"] {
    opacity: 1;
  }

  :root:not(.dark) #theme-toggle:hover .theme-icon[data-theme="light"] {
    opacity: 0;
  }

  :root:not(.dark) #theme-toggle:hover .theme-icon[data-theme="dark"] {
    opacity: 1;
  }
}


/* === error-page.css === */
/* ==================================== */
/* PAGE-SPECIFIC STYLES */
/* ==================================== */

/* 404 Error Page */
.error-page {
  /* extra padding from footer */
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  .page-image {
    @media screen and (min-width: 1280px) {
      max-width: 425px;
    }
    @media screen and (min-width: 1440px) {
      max-width: 525px;
    }
    @media screen and (min-width: 1920px) {
      max-width: 700px;
    }
    @media screen and (min-width: 2500px) {
      max-width: 1000px;
    }
  }

  h1 {
    font-size: 2.2rem;
    margin: 0;
    padding: 1rem 0 0.5rem;
    color: var(--foreground);
    text-align: center;

    @media screen and (min-width: 768px) {
      font-size: 3rem;
      padding-top: 2rem;
    }
    @media screen and (min-width: 1280px) {
      font-size: 2.2rem;
      padding-top: 1rem;
    }
    @media screen and (min-width: 1440px) {
      font-size: 2.8rem;
      padding-top: 1rem;
    }
    @media screen and (min-width: 2500px) {
      padding-top: 2rem;
      font-size: 3.5rem;
      /* max-width: 1000px; */
    }
  }

  .error-content {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;

    @media screen and (min-width: 1280px) {
      /* max-width: 540px;
    margin: 0 auto; */
      gap: 1rem;
      padding-top: 0;
    }
    @media screen and (min-width: 1440px) {
      /* max-width: 640px; */
    }
    @media screen and (min-width: 1920px) {
      /* max-width: 800px; */
      gap: 1.5rem;
    }
    @media screen and (min-width: 2500px) {
      gap: 2rem;
    }

    .error-subheading {
      font-size: 1.5rem;
      line-height: 1;
      margin: 0;
      color: var(--muted-foreground);
      font-weight: 500;

      @media screen and (min-width: 1280px) {
        /* max-width: 540px;
    margin: 0 auto; */
        /* gap: 1rem; */
        /* padding-top: 0; */
        font-size: 1.3rem;
      }
    }

    .error-actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;

      .button {
        display: inline-block;
        padding: 0.5rem 1rem;
        color: var(--foreground);
        background-color: var(--element-background);
        text-decoration: none;
        border: 2px solid var(--color-gold-40);
        border-radius: 0.375rem;
        font-weight: 500;
        transition: opacity 0.2s;

        &:hover {
          opacity: 0.9;
          transform: scale(110%);
          transition: transform 0.2s;
        }
      }
    }
  }
}


/* === error-modal.css === */
/**
 * Error Overlay Styles
 * Admin-only error notifications displayed on frontend
 */

.adventuresnack-error-overlay {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #dc3232;
    color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.adventuresnack-error-overlay__title {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: bold;
}

.adventuresnack-error-overlay__item {
    margin-bottom: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 13px;
}

.adventuresnack-error-overlay__message {
    font-weight: bold;
}

.adventuresnack-error-overlay__file-list {
    margin: 5px 0 0 0;
    padding-left: 20px;
    font-size: 12px;
}

.adventuresnack-error-overlay__footer {
    margin: 10px 0 0 0;
    font-size: 11px;
    opacity: 0.85;
}


/* === bugs.css === */
/* ==================================== */
/* BUG FIXES */
/* ==================================== */

/* IOS SAFARI DARK MODE TRANSITION FIX */
/* HOME AND ARCHIVE PAGES: GAME LIST CARD */
.card .card-info p {
  color: var(--foreground);
}
/* REGULAR PAGES AND SINGLE GAMES */
.error-page .error-content,
.game-page .game-content,
.page .page-content {
  color: var(--foreground);

  p {
    color: var(--foreground);
  }
}