/* =====================================================================================================
 * File: hero.css ("/css/pages/index/hero.css")
 * Project: CrownPreRoll-Web
 * Purpose: Styles for the landing page hero section.
 * Dependencies:
 *    - token.css ("/css/token.css")
 *
 * Key Behaviors:
 *    - Crown Hero Statement
 *    - Contact Page Button
 *    - Mobile: Spacing and sizing changed.
 *
 * Selector Index:
 *    .hero                   // Section
 *    .hero-inner             // Content Container
 *    .hero-inner-header      // Header Container
 *    .hero-inner-header h1   // Content Heading
 *    .hero-inner-header p    // Content Text
 *    .hero-inner a           // Contact Button
 *
 * HTML Pseudo-Code:
 *    <div class="hero">
 *      <div class="hero-inner">
 *        <div class="hero-inner-header">
 *          <h1>…</h1>
 *            <p>…</p>
 *        </div>
 *        <a href="/Contact">…</a>
 *      </div>
 *    </div>
 *
 * Accessibility Notes:
 *    - Use :focus-visible styles for keyboard users
 *
 * Last Updated: 11/14/2025 - v0.0.3-beta
======================================================================================================== */
:root {
  /* ########## Spacing ########## */
  /* Containers */
  --hero-inner-gap: 4rem;
  --hero-inner-pad: var(--header-h) 3rem 4rem;
  /* Header */
  --hero-inner-header-gap: 1.5rem;
  --hero-inner-header-m: 3rem 0 0;

  /* ########## Typography ########## */
  /* Header */
  --hero-inner-header-font-color: var(--crown-white);
  --hero-inner-header-font-size: 56px;
  --hero-inner-header-font-wt: 900;
  --hero-inner-header-font-lh: 1.25;
  --hero-inner-header-font-ls: 3px;
  /* Text */
  --hero-inner-header-text-font-color: var(--crown-white);
  --hero-inner-header-text-font-size: 28px;
  --hero-inner-header-text-font-wt: 500;
  --hero-inner-header-text-font-lh: 1.5;
  --hero-inner-header-text-font-ls: 2px;
  --hero-inner-header-text-max-w: 58ch;
  /* Button */
  --hero-inner-btn-font-color: var(--crown-black);
  --hero-inner-btn-font-size: 16px;
  --hero-inner-btn-font-wt: 600;
  --hero-inner-btn-font-lh: 1.25;
  --hero-inner-btn-font-ls: 1px;
  --hero-inner-btn-selected-font-color: var(--crown-white);

  /* ########## Design ########## */
  /* Containers */
  --hero-bg-overlay: rgba(0, 0, 0, 0.5);
  /* Button */
  --hero-inner-btn-pad: 0.75rem;
  --hero-inner-btn-w: 10rem;
  --hero-inner-btn-bg-color: var(--crown-white);
  --hero-inner-btn-selected-bg-color: var(--crown-gold);
}

/* Containers */
.hero {
  min-height: 100vh;
  background:
    linear-gradient(var(--hero-bg-overlay), var(--hero-bg-overlay)),
    url("/assets/img/index_hero_bg.jpg") center / cover no-repeat;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--hero-inner-gap);
  padding: var(--hero-inner-pad);
}

/* Header */
.hero-inner-header {
  display: flex;
  flex-direction: column;
  gap: var(--hero-inner-header-gap);
  margin: var(--hero-inner-header-m);
}
.hero-inner-header h1 {
  margin: 0;
  color: var(--hero-inner-header-font-color);
  font-size: var(--hero-inner-header-font-size);
  font-weight: var(--hero-inner-header-font-wt);
  line-height: var(--hero-inner-header-font-lh);
  letter-spacing: var(--hero-inner-header-font-ls);
}
.hero-inner-header p {
  margin: 0;
  color: var(--hero-inner-header-text-font-color);
  font-size: var(--hero-inner-header-text-font-size);
  font-weight: var(--hero-inner-header-text-font-wt);
  line-height: var(--hero-inner-header-text-font-lh);
  letter-spacing: var(--hero-inner-header-text-font-ls);
  max-inline-size: var(--hero-inner-header-text-max-w);
}

/* Button */
.hero-inner a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hero-inner-btn-pad);
  width: var(--hero-inner-btn-w);
  border: none;
  border-radius: 9999px;
  background-color: var(--hero-inner-btn-bg-color);
  text-decoration: none;
  color: var(--hero-inner-btn-font-color);
  font-size: var(--hero-inner-btn-font-size);
  font-weight: var(--hero-inner-btn-font-wt);
  line-height: var(--hero-inner-btn-font-lh);
  letter-spacing: var(--hero-inner-btn-font-ls);
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.hero-inner a:hover, .hero-inner a:focus-visible {
  background-color: var(--hero-inner-btn-selected-bg-color);
  color: var(--hero-inner-btn-selected-font-color);
  outline: none;
}

/* Mobile Compatibility */
@media (max-width: 600px) and (orientation: portrait) and (hover: none) {
  :root {
    /* ########## Spacing ########## */
    /* Containers */
    --hero-inner-gap: 8rem;
    --hero-inner-pad: var(--header-h) 1.5rem 4rem;
    /* Header */
    --hero-inner-header-gap: 2.5rem;
    --hero-inner-header-m: 5rem 0 0;

    /* ########## Typography ########## */
    /* Header */
    --hero-inner-header-font-size: clamp(18px, 6vw, 24px);
    /* Text */
    --hero-inner-header-text-font-size: 16px;
    /* Button */
    --hero-inner-btn-font-size: 14px;

    /* ########## Design ########## */
    /* Button */
    --hero-inner-btn-w: 8rem;
  }
}