/* =========================================
   Slick Overrides – OSU Press (Optimized)
   ========================================= */

/* ---------- GLOBAL CLEANUP + SPACING ---------- */

/* Prevent unwanted borders or outlines */
#flexslider-2 .slick-slide,
#flexslider-2 .item {
  box-sizing: border-box;
  border: 0;
  outline: 0;
}

/* Spacing between slides */
#flexslider-2 .slick-slide {
  padding: 0 10px;
}

/* Consistent image behavior */
#flexslider-2 .item img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* Remove any unwanted link styling */
#flexslider-2 .item a {
  box-shadow: none;
  background: transparent;
  border: 0;
}

/* Normalize item container spacing */
#flexslider-2 .item {
  padding: 0;
  margin: 0;
}



/* ---------- ACCESSIBLE FOCUS STYLES ---------- */

#flexslider-2 .slick-prev:focus,
#flexslider-2 .slick-next:focus,
#flexslider-2 .slick-dots button:focus,
#flexslider-2 .slick-prev:focus-visible,
#flexslider-2 .slick-next:focus-visible,
#flexslider-2 .slick-dots button:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 3px;
}



/* ---------- LAYOUT STABILIZATION (NO OVERLAP) ---------- */

/* Use flexbox for clean slide alignment */
#flexslider-2 .slick-track {
  display: flex !important;
  align-items: stretch;
}

/* Each slide becomes a flex item */
#flexslider-2 .slick-slide {
  height: auto !important;
  float: none !important;
  display: flex !important;
}

/* Slick’s internal wrapper must stretch fully */
#flexslider-2 .slick-slide > div {
  display: flex !important;
  height: 100%;
  width: 100%;
}

/* Make each item stack vertically (cover → title → author) */
#flexslider-2 .item {
  display: flex;
  flex-direction: column;
  width: 100%;
}


/* =========================================
   FLEXSLIDER-3 (Latest News): restore spacing + consistent sizing
   ========================================= */

/* 1) Add consistent gutter between the two visible slides */
#flexslider-3 .slick-slide {
  padding: 0 12px;              /* tweak: 8–16px */
  box-sizing: border-box;
}

/* 2) Stabilize layout like flexslider-2: make the track a flex row */
#flexslider-3 .slick-track {
  display: flex !important;
  align-items: stretch;
}

/* 3) Make each slide stretch evenly */
#flexslider-3 .slick-slide {
  float: none !important;
  height: auto !important;
  display: flex !important;
}

/* 4) Make Slick’s inner wrapper fill the slide */
#flexslider-3 .slick-slide > div {
  display: flex !important;
  width: 100%;
  height: 100%;
}

/* 5) Stack each .item vertically and keep consistent spacing */
#flexslider-3 .item {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 6) Make images consistent when present */
#flexslider-3 .item img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 260px;             /* prevents giant news images */
  margin: 0 auto 12px;          /* centers + spacing below */
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,0,0,0.18);
  background: #fff;
}

/* 7) Prevent text from causing wild height differences */
#flexslider-3 .item p {
  margin: 0 0 10px;
}

/* 8) Optional: clamp long text so two columns feel balanced */
#flexslider-3 .item p {
  display: -webkit-box;
  -webkit-line-clamp: 6;        /* adjust: 4–8 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}



/* ---------- IMAGE STYLING (ROUNDED CORNERS + SHADOW + BORDER) ---------- */

/* Apply base image behavior across all sliders */
#flexslider-1 .item img,
#flexslider-2 .item img,
#flexslider-3 .item img,
#flexslider-4 .item img {
  display: block;
  width: 100%;
  height: auto;
}

/* High-specificity styling for book covers */
#flexslider-2 .slick-slide div div.item img {
  border: 1px solid #d4d4d4 !important;
  border-radius: 2px !important;
  margin-bottom: 1em !important;
  padding-bottom: 0 !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

/* Reduce arrow icon size to prevent clipping */
.slick-prev .slick-prev-icon,
.slick-next .slick-next-icon,
.slick-prev .slick-next-icon,
.slick-next .slick-prev-icon {
  font-size: 20px !important;
}

/* =========================================
   Flexslider-1: White navigation icons
   ========================================= */

/* Arrow icons (Accessible Slick icon spans) */
#flexslider-1 .slick-prev .slick-prev-icon,
#flexslider-1 .slick-next .slick-next-icon,
#flexslider-1 .slick-prev .slick-next-icon,
#flexslider-1 .slick-next .slick-prev-icon {
  color: #fff !important;
  opacity: 1 !important;  /* optional: avoids faint gray look */
}

/* =========================================
   Flexslider-1: Make autoplay (play/pause) control white
   ========================================= */

/* The button itself */
#flexslider-1 button,
#flexslider-1 .slick-autoplay-toggle-button,
#flexslider-1 .slick-pause,
#flexslider-1 .slick-play {
  color: #fff !important;
}

/* If the icon is rendered as a pseudo-element */
#flexslider-1 .slick-autoplay-toggle-button::before,
#flexslider-1 .slick-pause::before,
#flexslider-1 .slick-play::before {
  color: #fff !important;
  opacity: 1 !important;
}

/* If the icon is a child element/span */
#flexslider-1 .slick-autoplay-toggle-button .slick-pause-icon,
#flexslider-1 .slick-autoplay-toggle-button .slick-play-icon,
#flexslider-1 .slick-pause .slick-pause-icon,
#flexslider-1 .slick-play .slick-play-icon {
  color: #fff !important;
  opacity: 1 !important;
  fill: #fff !important;   /* covers SVG icons */
}

/* If Accessible Slick uses the same icon span pattern as arrows */
#flexslider-1 .slick-pause-icon,
#flexslider-1 .slick-play-icon {
  color: #fff !important;
  opacity: 1 !important;
}



/* Header row layout: title on left, arrows on right */
.slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Keep the heading from wrapping under the buttons */
.slider-header h2 {
  margin: 0;
}

/* Put the two arrows next to each other */
.slider-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Optional: normalize arrow button size so they look like a pair */
.slider-controls .slick-prev,
.slider-controls .slick-next {
  position: static !important; /* IMPORTANT: cancel absolute positioning */
  margin: 0 !important;
}
@media (prefers-reduced-motion: reduce) {  *, *::before, *::after {    animation: none !important;    transition: none !important;    scroll-behavior: auto !important;  }  .slick-slider,  .slick-track,  .slick-slide,  .slick-list {    transition: none !important;  }  .slick-track { transform: none !important; }}



#flexslider-4 img {
  max-width: 140px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}