/* =====================================================================================================
 * File: age-gate.css ("/css/layout/age-gate.css")
 * Project: CrownPreRoll-Web
 * Purpose: Styles for the global site age-gate.
 * Dependencies:
 *    - token.css ("/css/token.css")
 *
 * Key Behaviors:
 *    - Freeze overlay so that it must be answered before going into website.
 *    - Logo Banner
 *    - Age Gate Header
 *    - Age-Restricted Text
 *    - Yes -> Enter Site / No -> Age-Restricted Page
 *    - Remember users choice through browser
 *    - Mobile: Spacing and sizing changed.
 *
 * Selector Index:
 *    .hidden                           // Hidden Section
 *    .age-gate                         // Section
 *    .age-gate-inner                   // Content Container
 *    .age-gate-inner-banner-svg        // Banner SVG Container
 *    .age-gate-inner-banner-svg use    // Banner SVG Content
 *    .age-gate-inner-top               // Top Container
 *    .age-gate-inner-top h1            // Content Header
 *    .age-gate-inner-top p             // Content Text
 *    .age-gate-inner-bottom            // Bottom Container
 *    .age-gate-btn                     // Content Button
 *    .age-gate-btn-yes                 // Yes Button
 *    .age-gate-btn-no                  // No Button
 *
 * HTML Pseudo-Code:
 *    <div class="age-gate hidden">
 *      <div class="age-gate-inner">
 *        <svg class="age-gate-inner-banner-svg">
 *          <use>…</use>  
 *        </svg>
 *        <div class="age-gate-inner-top">
 *          <h1>…</h1>
 *          <p>…</p>
 *        </div>
 *        <div class="age-gate-inner-bottom">
 *          <button class="age-gate-btn age-gate-btn-yes">…</button>
 *          <button class="age-gate-btn age-gate-btn-no">…</button>
 *        </div>
 *      </div>
 *    </div>
 *
 * Accessibility Notes:
 *    - Use :focus-visible styles for keyboard users
 *
 * Last Updated: 11/22/2025 - v0.0.3-beta
======================================================================================================== */
:root {
  /* ########## Spacing ########## */
  /* Containers */
  --age-gate-inner-gap: 2rem;
  --age-gate-inner-m: 1rem;
  --age-gate-inner-pad: 2rem 2.5rem 2rem;
  --age-gate-inner-top-gap: 0.25rem;
  --age-gate-inner-bottom-gap: 3rem;

  /* ########## Typography ########## */
  /* Header */
  --age-gate-inner-header-font-color: var(--crown-white);
  --age-gate-inner-header-font-size: 24px;
  --age-gate-inner-header-font-wt: 900;
  --age-gate-inner-header-font-lh: 1.25;
  --age-gate-inner-header-font-ls: 2px;
  /* Text */
  --age-gate-inner-text-font-color: var(--crown-white);
  --age-gate-inner-text-font-size: 12px;
  --age-gate-inner-text-font-wt: 500;
  --age-gate-inner-text-font-lh: 1.5;
  --age-gate-inner-text-font-ls: 1px;
  --age-gate-inner-text-font-max-w: 60ch;
  /* Button */
  --age-gate-btn-font-size: 16px;
  --age-gate-btn-font-wt: 600;
  --age-gate-btn-font-lh: 1.25;
  --age-gate-btn-font-ls: 1px;
  --age-gate-btn-yes-font-color: var(--crown-black);
  --age-gate-btn-no-font-color: var(--crown-white);
  --age-gate-btn-selected-font-color: var(--crown-gold);

  /* ########## Design ########## */
  /* Containers */
  --age-gate-blur-color: rgba(0, 0, 0, 0.75);
  --age-gate-blur: blur(2px);
  --age-gate-inner-border: 1px solid var(--crown-light-gray);
  --age-gate-inner-bg-color: var(--crown-dark-gray);
  /* Banner */
  --age-gate-inner-banner-h: 72px;
  --age-gate-inner-banner-fill-color: var(--crown-white);
  /* Button */
  --age-gate-btn-pad: 0.75rem 4rem;
  --age-gate-btn-bg-color: var(--crown-white);
  --age-gate-btn-no-border: 2px solid var(--crown-white);
}

/* Hidden */
.hidden {
  display: none !important;
}

/* Containers */
.age-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--age-gate-blur-color);
  backdrop-filter: var(--age-gate-blur);
}
.age-gate-inner {
  display: flex;
  flex-direction: column;
  gap: var(--age-gate-inner-gap);
  align-items: center;
  justify-content: center;
  margin: var(--age-gate-inner-m);
  padding: var(--age-gate-inner-pad);
  border: var(--age-gate-inner-border);
  border-radius: var(--border-radius-large);
  background: var(--age-gate-inner-bg-color);
}
.age-gate-inner-top {
  display: flex;
  flex-direction: column;
  gap: var(--age-gate-inner-top-gap);
}
.age-gate-inner-bottom {
  display: flex;
  gap: var(--age-gate-inner-bottom-gap);
}

/* Banner */
.age-gate-inner-banner-svg {
  height: var(--age-gate-inner-banner-h);
}
.age-gate-inner-banner-svg use {
  fill: var(--age-gate-inner-banner-fill-color);
}

/* Header */
.age-gate-inner-top h1 {
  margin: 0;
  text-align: center;
  text-decoration: underline;
  color: var(--age-gate-inner-header-font-color);
  font-size: var(--age-gate-inner-header-font-size);
  font-weight: var(--age-gate-inner-header-font-wt);
  line-height: var(--age-gate-inner-header-font-lh);
  letter-spacing: var(--age-gate-inner-header-font-ls);
}
.age-gate-inner-top p {
  margin: 0;
  text-align: center;
  color: var(--age-gate-inner-text-font-color);
  font-size: var(--age-gate-inner-text-font-size);
  font-weight: var(--age-gate-inner-text-font-wt);
  line-height: var(--age-gate-inner-text-font-lh);
  letter-spacing: var(--age-gate-inner-text-font-ls);
  max-inline-size: var(--age-gate-inner-text-font-max-w);
}

/* Button */
.age-gate-btn {
  padding: var(--age-gate-btn-pad);
  cursor: pointer;
  border: none;
  border-radius: 9999px;
  font-size: var(--age-gate-btn-font-size);
  font-weight: var(--age-gate-btn-font-wt);
  line-height: var(--age-gate-btn-font-lh);
  letter-spacing: var(--age-gate-btn-font-ls);
  transition:
    border var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
    
}
.age-gate-btn-yes {
  background-color: var(--age-gate-btn-bg-color);
  color: var(--age-gate-btn-yes-font-color);
}
.age-gate-btn-yes:hover, .age-gate-btn-yes:focus-visible {
  outline: none;
  background-color: var(--age-gate-btn-selected-font-color);
}
.age-gate-btn-no  {
  border: var(--age-gate-btn-no-border);
  background-color: transparent;
  color: var(--age-gate-btn-no-font-color);
}
.age-gate-btn-no:hover, .age-gate-btn-no:focus-visible {
  outline: none;
  border-color: var(--age-gate-btn-selected-font-color);
  color: var(--age-gate-btn-selected-font-color);
}

/* Mobile Compatibility */
@media (max-width: 600px) and (orientation: portrait) and (hover: none) {
  :root {
    /* ########## Spacing ########## */
    /* Containers */
    --age-gate-inner-pad: 1rem 0.5rem 2rem;
    --age-gate-inner-top-gap: 0.5rem;
    --age-gate-inner-bottom-gap: 1.5rem;

    /* ########## Typography ########## */
    /* Header */
    --age-gate-inner-header-font-size: 18px;
    /* Text */
    --age-gate-inner-text-font-size: 10px;
    --age-gate-inner-text-font-max-w: 42ch;
    /* Button */
    --age-gate-btn-font-size: 14px;

    /* ########## Design ########## */
    /* Button */
    --age-gate-btn-pad: 0.5rem 2.5rem;
  }

  /* Banner */
  .age-gate-inner-banner-svg {
    transform: translateY(15%) scale(0.8);
  }
}