/* =====================================================================================================
 * File: age-restricted.css ("/css/pages/age-restricted.css")
 * Project: CrownPreRoll-Web
 * Purpose: Styles for the age restricted page.
 * Dependencies:
 *    - token.css ("/css/token.css")
 *
 * Key Behaviors:
 *    - Policy Section
 *    - Mobile: Headers and layout altered/shrunk to fit mobile portrait mode.
 *
 * Selector Index:
 *    .age-restricted                       // Section
 *    .age-restricted-inner                 // Section Container
 *    .age-restricted-inner-top             // Top Container
 *    .age-restricted-inner-bottom          // Bottom Container
 *    .age-restricted-inner-bottom-info     // Policy Information  
 *
 * HTML Pseudo-Code:
 *    <div class="age-restricted">
 *      <div class="age-restricted-inner">
 *        <div class="age-restricted-inner-top">
 *          <h1>…</h1>
 *        </div>
 *        <div class="age-restricted-inner-bottom">
 *          <div class="age-restricted-inner-bottom-info">
 *            <h1>…</h1>
 *            <p>…</p>
 *          </div>
 *        </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-restrcited-m: var(--header-h) 0 0 0;
  --age-restricted-pad: 0 3rem;
  --age-restricted-inner-pad: 3rem 0 4rem;
  /* Header */
  --age-restricted-inner-top-pad: 0.5rem 0;
  /* Age-Restricted Information */
  --age-restricted-inner-bottom-info-gap: 1.5rem;
  --age-restricted-inner-bottom-info-pad: 2rem 2.5rem;

  /* ########## Typography ########## */
  /* Header */
  --age-restricted-inner-top-font-color: var(--crown-black);
  --age-restricted-inner-top-font-size: 36px;
  --age-restricted-inner-top-font-wt: 900;
  --age-restricted-inner-top-font-lh: 1.25;
  --age-restricted-inner-top-font-ls: 3px;
  /* Information Header */
  --age-restricted-inner-bottom-info-header-font-color: var(--crown-black);
  --age-restricted-inner-bottom-info-header-font-size: 24px;
  --age-restricted-inner-bottom-info-header-font-wt: 900;
  --age-restricted-inner-bottom-info-header-font-lh: 1.25;
  --age-restricted-inner-bottom-info-header-font-ls: 2px;
  /* Information Text */
  --age-restricted-inner-bottom-info-text-font-color: var(--crown-black);
  --age-restricted-inner-bottom-info-text-font-size: 16px;
  --age-restricted-inner-bottom-info-text-font-wt: 500;
  --age-restricted-inner-bottom-info-text-font-lh: 1.75;
  --age-restricted-inner-bottom-info-text-font-ls: 1px;
  --age-restricted-inner-bottom-info-text-selected-font-color: var(--crown-gold);

  /* ########## Design ########## */
  /* Header */
  --age-restricted-inner-top-border: 5px solid var(--crown-black);
  /* Age-Restricted Information */
  --age-restricted-inner-bottom-border: 5px solid var(--crown-black);
  --age-restricted-inner-bottom-info-border: 1px solid var(--crown-black);
}

/* Containers */
.age-restricted {
  margin: var(--age-restrcited-m);
  padding: var(--age-restricted-pad);
}
.age-restricted-inner {
  display: flex;
  flex-direction: column;
  padding: var(--age-restricted-inner-pad);
}

/* Header */
.age-restricted-inner-top {
  padding: var(--age-restricted-inner-top-pad);
  text-align: center;
  border: var(--age-restricted-inner-top-border);
  border-bottom: none;
}
.age-restricted-inner-top h1 {
  margin: 0;
  color: var(--age-restricted-inner-top-font-color);
  font-size: var(--age-restricted-inner-top-font-size);
  font-weight: var(--age-restricted-inner-top-font-wt);
  line-height: var(--age-restricted-inner-top-font-lh);
  letter-spacing: var(--age-restricted-inner-top-font-ls);
}

/* Age-Restricted Information */
.age-restricted-inner-bottom {
  display: flex;
  flex-direction: column;
  border: var(--age-restricted-inner-bottom-border);
}
.age-restricted-inner-bottom-info {
  display: flex;
  flex-direction: column;
  gap: var(--age-restricted-inner-bottom-info-gap);
  padding: var(--age-restricted-inner-bottom-info-pad);
  border: var(--age-restricted-inner-bottom-info-border);
}
.age-restricted-inner-bottom-info h1 {
  margin: 0;
  color: var(--age-restricted-inner-bottom-info-header-font-color);
  font-size: var(--age-restricted-inner-bottom-info-header-font-size);
  font-weight: var(--age-restricted-inner-bottom-info-header-font-wt);
  line-height: var(--age-restricted-inner-bottom-info-header-font-lh);
  letter-spacing: var(--age-restricted-inner-bottom-info-header-font-ls);
}
.age-restricted-inner-bottom-info p {
  margin: 0;
  color: var(--age-restricted-inner-bottom-info-text-font-color);
  font-size: var(--age-restricted-inner-bottom-info-text-font-size);
  font-weight: var(--age-restricted-inner-bottom-info-text-font-wt);
  line-height: var(--age-restricted-inner-bottom-info-text-font-lh);
  letter-spacing: var(--age-restricted-inner-bottom-info-text-font-ls);
}
.age-restricted-inner-bottom-info a {
  color: var(--age-restricted-inner-bottom-info-text-font-color);
  font-size: var(--age-restricted-inner-bottom-info-text-font-size);
  font-weight: var(--age-restricted-inner-bottom-info-text-font-wt);
  line-height: var(--age-restricted-inner-bottom-info-text-font-lh);
  letter-spacing: var(--age-restricted-inner-bottom-info-text-font-ls);
  transition:
    color var(--t-fast) var(--ease);
}
.age-restricted-inner-bottom-info a:hover, .age-restricted-inner-bottom-info a:focus-visible {
  color: var(--age-restricted-inner-bottom-info-text-selected-font-color);
  outline: none;
}

/* Mobile Compatibility */
@media (max-width: 600px) and (orientation: portrait) and (hover: none) {
  :root {
    /* ########## Spacing ########## */
    /* Containers */
    --age-restricted-pad: 0 2rem;
    --age-restricted-inner-pad: 2rem 0 3rem;
    /* Age-Restricted Information */
    --age-restricted-inner-bottom-info-pad: 2rem 1.5rem;

    /* ########## Typography ########## */
    /* Header */
    --age-restricted-inner-top-font-size: 20px;
    /* Information Header */
    --age-restricted-inner-bottom-info-header-font-size: 16px;
    /* Information Text */
    --age-restricted-inner-bottom-info-text-font-size: 10px;
  }
}