/*!
 * default.css
 * Main stylesheet for The Strategist Readers’ Choice survey landing page
 * Author: Operations
 * Version: 1.0.0
 * Created: 2026-06-18
 * Updated:
 * -------------------------------------------------------------
 */

@import url("https://construct.wrightsmedia.com/brands/strategist/css/variables.css");

:root {
  --rca-panel-width: 32.5rem;
  --rca-outer-max: 73.75rem;
  --rca-rule-width: 27.5rem;
  --rca-category-grid-width: 40.438rem;
  --rca-button-width: 40.483rem;
  --rca-card-border: #9a9a9a;
}

/* Base
   ------------------------------------------------------------- */

html,
body {
  min-height: 100%;
  margin: 0;
  background-color: var(--strat-yellow);
}

body {
  color: var(--color-black);
  font-family: var(--font-family-base);
  font-weight: 400;
  background: transparent;
  overflow: unset !important;
}

/* Accessibility
   ------------------------------------------------------------- */

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

/* Background
   ------------------------------------------------------------- */

.rca-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    var(--strat-yellow)
    url("../../images/the-strategist_rcas_yellow-bg.png")
    center bottom / cover no-repeat;
  pointer-events: none;
}

/* Page
   ------------------------------------------------------------- */

.rca-page {
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
}

/* Hero
   ------------------------------------------------------------- */

.rca-hero {
  max-width: var(--rca-outer-max);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.rca-hero__panel {
  position: relative;
  width: min(var(--rca-panel-width), 100%);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 1.875rem 2.125rem 2.75rem;
  background: var(--color-white);
  text-align: center;
}

.rca-hero__masthead {
  display: block;
  margin: 0 auto 0.25rem;
}

.rca-hero__tagline {
  position: relative;
  max-width: 29.688rem;
  margin: 0 auto;
  cursor: pointer;
}

.rca-hero__tagline-image {
  display: block;
  width: 100%;
  height: auto;
}

.rca-hero__intro {
  margin: 0.375rem auto 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  max-width: 29.688rem;
}

.rca-hero__rule {
  width: 100%;
  max-width: var(--rca-rule-width);
  height: 0.125rem;
  margin: 0 auto 1.25rem;
  background: var(--color-black);
}

.rca-hero__categories {
  max-width: var(--rca-category-grid-width);
  margin: 0 auto;
}

/* Category cards
   ------------------------------------------------------------- */

.rca-category {
  display: block;
  margin-bottom: 1.125rem;
  border: 0.0625rem solid var(--rca-card-border);
  background: var(--color-white);
  transition:
    transform 160ms ease,
    filter 160ms ease;
  cursor: pointer;
}

.rca-category:hover,
.rca-category:focus-visible, .rca-hero__tagline-image:hover, .rca-hero__tagline-image:focus-visible {
  transform: translateY(-0.1875rem) rotate(-1deg);
  filter: saturate(1.08) contrast(1.03);
  outline: 0.125rem solid var(--color-black);
  outline-offset: 0.1875rem;
}
.rca-hero__tagline-image:hover, .rca-hero__tagline-image:focus-visible {
  transform: translateY(-0.1875rem) rotate(-1deg);
  filter: saturate(1.08) contrast(1.03);
  outline: 0;
  outline-offset: 0;
}

.rca-category__image {
  display: block;
  width: 100%;
  height: auto;
}

/* CTA
   ------------------------------------------------------------- */

.rca-hero__cta {
  margin: 1.125rem auto 2rem;
}

.rca-hero__button.button {
  width: 100%;
  max-width: var(--rca-button-width);
  box-sizing: border-box;
  margin: 0;
  padding: 0.8125rem 1.5rem;
  border: 0.031rem solid var(--color-black);
  border-radius: 0.75rem;
  background: var(--strat-orange);
  /*box-shadow: 0.188rem 0.25rem 0 0 var(--color-black);*/
  color: var(--color-white);
  font-family: var(--font-pitch);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  transition:
    box-shadow 100ms ease-in-out,
    transform 100ms ease-in-out,
    background-color 100ms ease-in-out;
}

.rca-hero__button.button:hover,
.rca-hero__button.button:focus-visible {
  box-shadow: 0.313rem 0.375rem 0 0 var(--color-black);
  color: var(--color-black);
}

.rca-hero__button.button:active {
  transform: translate(1px, 1px);
  box-shadow: 0.25rem 0.3125rem 0 0 var(--color-black);
  transition-duration: 25ms;
}

/* Motion preferences
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rca-category,
  .rca-hero__button.button {
    transition: none;
    animation: none;
    transform: none;
  }
}

/* Modal
   ------------------------------------------------------------- */
.close-modal {    
  display: flex;
  justify-content: end;
  font-size: 1.25rem;
  color: black;
  font-weight: 700;
  cursor: pointer;
  margin-right: 5px;
  position: relative;
  top: 0;
  right: 0;
}

/* Responsive
   ------------------------------------------------------------- */

@media print, screen and (max-width: 63.99875em) {
  .rca-hero__panel {
    width: min(var(--rca-panel-width), 76vw);
  }
}

@media print, screen and (max-width: 39.99875em) {
  .rca-background {
    background-size: auto 100vh;
  }

  .rca-page {
    padding: 0;
  }

  .rca-hero {
    min-height: 100vh;
    min-height: 100svh;
  }

  .rca-hero__panel {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: 1.5rem 1.125rem 2.25rem;
  }

  .rca-hero__intro {
    max-width: 22rem;
    font-size: 1.1rem;
  }
}