/* 
 * Tweaks to the uw_drupal_theme for the paragraph module
 *
 * >>>>>>> DO NOT EDIT THIS CSS FILE <<<<<<<
 *
 * Your changes may be overwitten by automated process
 * contact danford@uw.edu for questions / details.
 */

/* =========================================
   Block: Hero Image
   ========================================= */
.paragraph--type--p-hero-image {
  position: relative;
  width: 100%;
  height: 300px; /* Adjust as needed */
  overflow: hidden;
}

/* Force hero image to crop from center-center */
.paragraph--type--p-hero-image .field--name-field-media-image img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
  display: block;
}


/* Shared overlay text styles */
.paragraph--type--p-hero-image .field--name-field-title,
.paragraph--type--p-hero-image .field--name-field-subtitle {
  position: absolute;
  left: 1rem;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  z-index: 10;
}

/* Title at bottom-left, raised above subtitle */
.paragraph--type--p-hero-image .field--name-field-title {
  bottom: 3.5rem; /* Raise the title slightly above bottom */
  font-size: 2.5rem;
  font-weight: bold;
}

/* Subtitle below title at bottom-left */
.paragraph--type--p-hero-image .field--name-field-subtitle {
  bottom: 1.5rem;
  font-size: 1.2rem;
  font-weight: normal;
}

/* Subtitle: add a semi-transparent purple chip for legibility */
.paragraph--type--p-hero-image .field--name-field-subtitle {
  background-color: rgba(75, 46, 131, 0.4); /* UW purple @ 40% opacity */
  padding: 0.35rem 0.6rem;                  /* breathing room around text */
  border-radius: 4px;                       /* soft corners */
  color: #fff;                              /* ensure text is white */
  /* existing positioning kept from prior CSS:
     position: absolute; left: 1rem; bottom: 1.5rem; z-index: 10; */
  text-shadow: none;                        /* optional: remove shadow since we have a chip */
  backdrop-filter: blur(2px);               /* soft separation from complex imagery */
}

.paragraph--type--p-hero-image .field--name-field-link {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
}

.paragraph--type--p-hero-image .field--name-field-link a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border: 2px solid #fff;
  background-color: rgba(75, 46, 131, 0.8);
  padding: 0.3rem 0.8rem;
  border-radius: 3px;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.paragraph--type--p-hero-image .field--name-field-link a:hover,
.paragraph--type--p-hero-image .field--name-field-link a:focus {
  background-color: #fff;
  color: #000;
  text-decoration: none;
}

/* =========================================
   Block: Card – Image, Text & Link
   ========================================= */
.paragraph--type--p-card-image-text {
  max-width: 480px; /* match image width or adjust */
  padding: 1rem;
}

/* Make image fill container width */
.paragraph--type--p-card-image-text .field--name-field-media-image img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1rem;
  border-radius: 4px; /* optional: soften corners */
}

/* Title style */
.paragraph--type--p-card-image-text .field--name-field-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Body text style */
.paragraph--type--p-card-image-text .field--name-field-body p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* Link styled (kept simple; can be a button if desired) */
.paragraph--type--p-card-image-text .field--name-field-link a {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

/* Hover/Focus */
.paragraph--type--p-card-image-text .field--name-field-link a:hover,
.paragraph--type--p-card-image-text .field--name-field-link a:focus {
  text-decoration: none;
}

/* =========================================
   Block: Card – Number
   ========================================= */
.paragraph--type--p-card-number {
  max-width: 400px; /* adjust width as needed */
  padding: 1rem;
}

/* Large number style */
.paragraph--type--p-card-number .field--name-field-whole-number {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* Title style - subtle but clear */
.paragraph--type--p-card-number .field--name-field-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Body text style */
.paragraph--type--p-card-number .field--name-field-body p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

/* =========================================
   Block: Headquote
   ========================================= */
.paragraph--type--p-headquote {
  position: relative;
  width: 100%;
  min-height: 340px; /* adjust as needed */
  overflow: hidden;
}

/* Image container covers the block */
.paragraph--type--p-headquote .field--name-field-image {
  position: absolute;
  inset: 0; /* shorthand for top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

/* Make image fill container */
.paragraph--type--p-headquote .field--name-field-media-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop and cover */
  display: block;
}

/* Text box overlays image, aligned left and vertically centered */
.paragraph--type--p-headquote .field--name-field-body {
  position: absolute;
  top: 50%;
  right: 2rem;                 /* matches the original layout */
  transform: translateY(-50%);
  width: 40%;                  /* fixed width for text box */
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  z-index: 2;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Improve paragraph spacing inside the overlay */
.paragraph--type--p-headquote .field--name-field-body p {
  margin: 0 0 1rem 0;
}
.paragraph--type--p-headquote .field--name-field-body p:last-child {
  margin-bottom: 0;
}

/* =========================================
   Block: Card – Text + Button Link (Live)
   Purpose: Equal-height cards with bottom-aligned CTA buttons,
            normal link styles in body/lists, and no list bullets.
   ========================================= */

/* Card layout & spacing */
.paragraph--type--p-card-text-buttonlink {
  /* Layout */
  display: flex;
  flex-direction: column;
  height: 100%;      /* allows equal-height behavior in a grid/flex container */
  gap: 0.75rem;      /* consistent spacing between fields */

  /* Sizing & padding */
  max-width: 600px;  /* limit width for readability */
  padding: 1.5rem;
}

/* Title */
.paragraph--type--p-card-text-buttonlink .field--name-field-title {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

/* Body block spacing */
.paragraph--type--p-card-text-buttonlink .field--name-field-body {
  margin-bottom: 1rem; /* general spacing; gap provides additional rhythm */
}

/* Paragraphs inside body */
.paragraph--type--p-card-text-buttonlink .field--name-field-body p {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 0.75rem; /* tightened to work better with the card gap */
}

/* Lists inside body: remove bullets and normalize spacing */
.paragraph--type--p-card-text-buttonlink .field--name-field-body ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.75rem 0;
}

.paragraph--type--p-card-text-buttonlink .field--name-field-body li {
  margin: 0.25rem 0;
}

/* Links inside body/lists: keep normal link styling */
.paragraph--type--p-card-text-buttonlink .field--name-field-body a {
  font-weight: inherit;
  text-transform: none;
  text-decoration: underline;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.paragraph--type--p-card-text-buttonlink .field--name-field-body a:hover,
.paragraph--type--p-card-text-buttonlink .field--name-field-body a:focus {
  text-decoration: underline;
  outline-offset: 2px;  /* supports visible focus if theme applies outline */
}

/* CTA Button: push to bottom and style */
.paragraph--type--p-card-text-buttonlink .field--name-field-button {
  margin-top: auto; /* pushes the CTA to the bottom of the card */
}

/* Button look */
.paragraph--type--p-card-text-buttonlink .field--name-field-button a {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border: 2px solid #000;
  color: #000;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Button hover/focus */
.paragraph--type--p-card-text-buttonlink .field--name-field-button a:hover,
.paragraph--type--p-card-text-buttonlink .field--name-field-button a:focus {
  background-color: #4b2e83; /* UW purple accent */
  color: #fff;
  outline: none; /* consider keeping focus visible; see note below */
}

/* Cards without a button: ensure comfortable bottom spacing */
.paragraph--type--p-card-text-buttonlink:not(:has(.field--name-field-button)) {
  padding-bottom: 1.75rem; /* extra breathing room when no CTA exists */
}

/* Fallback if :has() is not supported (optional): apply bottom margin to last body child) */
.paragraph--type--p-card-text-buttonlink .field--name-field-body :last-child {
  margin-bottom: 0.5rem;
}

/* =========================================
   Purple Background and white text (TUNE-UP)
   Future-proof: limit to common text elements (no universal or div selectors)
   ========================================= */
.purpleback {
  background-color: #4b2e83; /* UW purple */
  color: white;               /* default text color for the section */
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}

/* Make common text elements white, including headings */
.purpleback p,
.purpleback li,
.purpleback span,
.purpleback h1,
.purpleback h2,
.purpleback h3,
.purpleback h4,
.purpleback h5,
.purpleback h6 {
  color: white;
}

/* Button-style links inside purple section */
.purpleback .field--name-field-button a {
  color: white;
  border-color: white;
  text-decoration: none;
}

/* Button hover effect with lighter background */
.purpleback .field--name-field-button a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border-color: white;
}

/* =========================================
   Block: Card – Hotline (Always white box)
   Placed LAST so it always wins against purpleback color rules
   ========================================= */

/* Card container: white, bordered, rounded, subtle shadow */
.paragraph--type--p-card-hotline {
  background: #fff;
  border: 2px solid #000;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  padding: 1.25rem 1.5rem;
  max-width: 720px;
}

/* Title & body colors: always dark for contrast on white */
.paragraph--type--p-card-hotline .field--name-field-title {
  color: #111827; /* near-black */
  font-weight: 800;
}

.paragraph--type--p-card-hotline .field--name-field-body {
  color: #374151; /* gray-700 */
}

/* Icon: keep it tidy */
.paragraph--type--p-card-hotline .field--name-field-icon img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100px;
  border-radius: 8px; /* optional: soften corners */
}

/* Body links: normal inline link style (not buttons) */
.paragraph--type--p-card-hotline .field--name-field-body a {
  text-decoration: underline;
  color: inherit;
  font-weight: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

/* CTA button: strong contrast and consistent look */
.paragraph--type--p-card-hotline .field--name-field-button a {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border: 2px solid #000;
  color: #000;
  background: transparent;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px; /* slightly more rounded to match the card */
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.paragraph--type--p-card-hotline .field--name-field-button a:hover,
.paragraph--type--p-card-hotline .field--name-field-button a:focus {
  background-color: #4b2e83; /* UW purple */
  color: #fff;
  border-color: #000;        /* keep border black for contrast */
  outline: none;             /* consider focus-visible below */
}

/* Accessibility: visible focus ring for keyboard users */
.paragraph--type--p-card-hotline .field--name-field-button a:focus-visible {
  outline: 2px solid #b7a7d6;
  outline-offset: 2px;
}


/* --- Hotline card text color overrides (win against .purpleback p/li/span) --- */

/* Body container stays readable gray */
.paragraph--type--p-card-hotline .field--name-field-body {
  color: #374151; /* gray-700 */
}

/* Re-color actual text elements inside the body (these were turned white by .purpleback) */
.paragraph--type--p-card-hotline .field--name-field-body p,
.paragraph--type--p-card-hotline .field--name-field-body li,
.paragraph--type--p-card-hotline .field--name-field-body span {
  color: #374151; /* gray-700 */
}

/* Body links: readable, normal link style (not button) */
.paragraph--type--p-card-hotline .field--name-field-body a {
  color: #374151;       /* ensure dark link on white card */
  text-decoration: underline;
  font-weight: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

/* Title/headings inside the card stay near-black for emphasis (in case headings appear) */
.paragraph--type--p-card-hotline .field--name-field-title,
.paragraph--type--p-card-hotline h1,
.paragraph--type--p-card-hotline h2,
.paragraph--type--p-card-hotline h3,
.paragraph--type--p-card-hotline h4,
.paragraph--type--p-card-hotline h5,
.paragraph--type--p-card-hotline h6 {
  color: #111827; /* near-black */
}