/*
   msuchp-slideout-card.css
   - Animated "slide out" survey card for the Career Horizons site.
   - Slide/collapse mechanics modeled on the "Learn. Make. Achieve." pop-out card
     at https://www.caad.msstate.edu/
   - Bootstrap 4.6 + jQuery 3.7 (no Tailwind). All selectors are namespaced with
     "chp-slideout" so nothing collides with style.css, dark.css or responsive.css.

   Behavior JS: /js/_horizons/msuchp-slideout-card.js
*/

/* ---------------------------------------------------------------------------
   Theme tokens
   - Override these in one place to re-brand or resize the card.
--------------------------------------------------------------------------- */
:root {
   /* Card is deliberately narrow - the title wraps and the card grows taller
      rather than wider. Width and font size are independent now. */
   --chp-slideout-width-sm: 320px;   /* < 576px - also capped to the viewport */
   --chp-slideout-width: 380px;      /* >= 576px */
   --chp-slideout-offset: 2rem;      /* gap from the right edge when open */
   --chp-slideout-peek: 40px;        /* card edge left on screen when closed */

   /* Clears #gotoTop, which style.css fixes at right:30px / bottom:30px at 40x40. */
   --chp-slideout-bottom: 6rem;

   /* Title + icon sizing. Safe to push these up - the title wraps, so bigger
      type makes the card taller, never wider. */
   --chp-slideout-title-size-sm: 1.5rem;   /* < 576px  */
   --chp-slideout-title-size: 1.75rem;     /* >= 576px */
   --chp-slideout-icon-size-sm: 2.5rem;    /* < 576px  */
   --chp-slideout-icon-size: 3rem;         /* >= 576px */

   /* Icon spacing. The nudge cancels FontAwesome's internal side bearing so the
      glyph lines up with the text below it; the gap is the space to the title. */
   --chp-slideout-icon-nudge: -0.11em;
   --chp-slideout-icon-gap: 0.75rem;

   --chp-slideout-accent-height: 12px;  /* maroon rail across the card foot */
   --chp-slideout-maroon: #5D1725;   /* MSU maroon, matches #footer.maroon */
   --chp-slideout-ink: #40484F;      /* body copy */
}

/* ---------------------------------------------------------------------------
   Container
   - Sits above the sticky #header (z-index 199 in style.css) but below modals.
--------------------------------------------------------------------------- */
.chp-slideout-container {
   position: relative;
   z-index: 300;
}

/* ---------------------------------------------------------------------------
   Card shell
--------------------------------------------------------------------------- */
.chp-slideout {
   position: fixed;
   z-index: 300;
   top: auto;
   bottom: var(--chp-slideout-bottom);
   left: auto;
   width: 100%;
   max-width: var(--chp-slideout-width-sm);
   overflow: visible;
   border: 0;
   border-radius: 0;
   background: transparent;
   transition: right 0.5s cubic-bezier(0.5, 0.15, 0.25, 1.5);
}

@media (min-width: 576px) {
   .chp-slideout {
      max-width: var(--chp-slideout-width);
   }
}

/* Narrow phones: never let the card run past the left edge of the viewport. */
@media (max-width: 575.98px) {
   .chp-slideout {
      max-width: min(var(--chp-slideout-width-sm), calc(100vw - 2.5rem));
   }

   .chp-slideout.is-open {
      right: 0.75rem;
   }
}

/* Open / closed rail positions. Closed leaves --chp-slideout-peek of the card
   edge on screen so it reads as a tab you can pull out, rather than a lone
   floating button. */
.chp-slideout.is-open {
   right: var(--chp-slideout-offset);
}

.chp-slideout.is-closed {
   right: calc((var(--chp-slideout-width-sm) - var(--chp-slideout-peek)) * -1);
}

@media (min-width: 576px) {
   .chp-slideout.is-closed {
      right: calc((var(--chp-slideout-width) - var(--chp-slideout-peek)) * -1);
   }
}

/* ---------------------------------------------------------------------------
   Card body
--------------------------------------------------------------------------- */
.chp-slideout .card-body {
   position: relative;
   z-index: 10;
   background-color: #fff;
}

/* Horizontal padding is left at the markup's p-4 (24px) so the icon, blurb and
   button all share one left margin. An earlier revision trimmed this to buy the
   title width back when the title was nowrap - no longer needed. */

/* Border + shadow live here, not on .card-body, so they wrap the accent rail
   too and the whole card reads as one floating panel.
   Free to grow tall, but never taller than the viewport. */
.chp-slideout-content {
   position: relative;
   z-index: 10;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.15);
   box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.3);
   max-height: calc(100vh - var(--chp-slideout-bottom) - 3rem);
   overflow-y: auto;
}

/* Title + icon pair. The title sizes to its own content rather than stretching,
   so the icon sits directly alongside the text instead of being flung out to
   the far edge - the two read as one lockup. */
.chp-slideout-head {
   justify-content: flex-start;
}

/* Sits to the left of the title. flex-shrink:0 keeps the glyph from being
   squeezed when the title runs long.

   The two margins are doing different jobs:
   - margin-left cancels the empty side bearing FontAwesome carries inside the
     glyph box, so the icon optically lines up with the blurb and button below
     rather than looking indented. Retune if the icon is ever swapped - glyphs
     differ in width (fa-clipboard-list is 0.75em in a 1em box).
   - margin-right is the actual gap to the title. */
.chp-slideout-icon {
   flex: 0 0 auto;
   margin-left: var(--chp-slideout-icon-nudge);
   margin-right: var(--chp-slideout-icon-gap);
   font-size: var(--chp-slideout-icon-size-sm);
   line-height: 1;
   color: var(--chp-slideout-maroon);
}

@media (min-width: 576px) {
   .chp-slideout-icon {
      font-size: var(--chp-slideout-icon-size);
   }
}

/* Stacked title - one line per <span>, left aligned.
   Lato 900 is loaded explicitly in the .head; without it this would render as
   700 or a synthesized fake-bold. */
.chp-slideout-title {
   flex: 0 1 auto;   /* size to the text, so the icon stays beside it */
   min-width: 0;
   color: var(--chp-slideout-ink);
   font-family: 'Lato', sans-serif;
   font-size: var(--chp-slideout-title-size-sm);
   font-weight: 900;
   line-height: 1.05;
   letter-spacing: -0.02em;
   text-align: left;
}

@media (min-width: 576px) {
   .chp-slideout-title {
      font-size: var(--chp-slideout-title-size);
   }
}

/* One block per authored line. Each block still starts on its own line, but is
   free to wrap internally - so big type in a narrow card grows the card DOWN
   instead of forcing it wider. Do not add white-space: nowrap here. */
.chp-slideout-title span {
   display: block;
}

.chp-slideout-text {
   color: var(--chp-slideout-ink);
   font-size: 0.875rem;
   line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   Survey call to action
--------------------------------------------------------------------------- */
.chp-slideout-cta {
   display: block;
   width: 100%;
   padding: 0.75rem 1rem;
   border: 1px solid var(--chp-slideout-maroon);
   border-radius: 0.2rem;
   background-color: #fff;
   color: var(--chp-slideout-maroon);
   font-size: 0.875rem;
   font-weight: 700;
   letter-spacing: 0.03em;
   text-transform: uppercase;
   text-decoration: none;
   white-space: normal;
   cursor: pointer;
   transition: color 0.2s ease, background-color 0.2s ease;
}

.chp-slideout-cta:hover,
.chp-slideout-cta:focus {
   background-color: var(--chp-slideout-maroon);
   color: #fff;
   text-decoration: none;
}

.chp-slideout-cta:focus-visible {
   outline: 3px solid var(--chp-slideout-maroon);
   outline-offset: 2px;
}

/* External-link glyph on the survey button. */
.chp-slideout-cta .chp-slideout-ext {
   font-size: 0.8em;
   margin-left: 0.35rem;
}

/* Brand accent rail across the foot of the card. */
.chp-slideout-accent {
   height: var(--chp-slideout-accent-height);
   background-color: var(--chp-slideout-maroon);
}

/* ---------------------------------------------------------------------------
   Open / close handles
   - Only one is visible at a time; the hidden one is also removed from the tab
     order by the JS so keyboard users never land on a dead control.
--------------------------------------------------------------------------- */
.chp-slideout-toggle {
   position: absolute;
   top: 40%;
   z-index: 11;
   left: auto;
   right: auto;
   opacity: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 2.75rem;
   height: 2.75rem;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background-color: #fff;
   color: var(--chp-slideout-maroon);
   font-size: 1rem;
   line-height: 1;
   cursor: pointer;
   box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
   transition: opacity 0.3s ease-in, right 0.3s ease-in, left 0.3s ease-in;
}

.chp-slideout-toggle:hover,
.chp-slideout-toggle:focus {
   background-color: var(--chp-slideout-maroon);
   color: #fff;
}

.chp-slideout-toggle:focus-visible {
   outline: 3px solid var(--chp-slideout-maroon);
   outline-offset: 3px;
}

.chp-slideout-toggle.chp-toggle-close { right: 0; }
.chp-slideout-toggle.chp-toggle-open  { left: 0; }

.chp-slideout.is-open .chp-toggle-close {
   opacity: 1;
   left: auto;
   right: -1.375rem;
   transition-delay: 0.5s;
}

.chp-slideout.is-closed .chp-toggle-open {
   opacity: 1;
   left: -1.375rem;
   right: auto;
   transition-delay: 0.5s;
}

/* Keep the hidden handle un-clickable so it can't swallow pointer events. */
.chp-slideout.is-open .chp-toggle-open,
.chp-slideout.is-closed .chp-toggle-close {
   pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Print
--------------------------------------------------------------------------- */
@media print {
   .chp-slideout-container {
      display: none !important;
   }
}

/* ---------------------------------------------------------------------------
   Reduced motion
   - The card still opens and closes, it just snaps instead of sliding.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
   .chp-slideout,
   .chp-slideout-toggle,
   .chp-slideout-cta {
      transition: none !important;
   }

   .chp-slideout.is-open .chp-toggle-close,
   .chp-slideout.is-closed .chp-toggle-open {
      transition-delay: 0s !important;
   }
}