/*
 * Translated from styleguide/components/00-base/02-base/_customizations.scss.
 * Reaches outside a single component's root class by design (GDPR banner,
 * FAQ block, SEO page branding are cross-cutting overrides) — this is why
 * it stays theme-global CSS rather than becoming part of an SDC, per the
 * design spec's rule against forcing global styles into an artificial
 * component.
 */

/* GDPR banner customizations */

.eu-cookie-compliance-popup-open #sliding-popup {
  opacity: 0.9;
}

.eu-cookie-compliance-banner button {
  /* important flag preserved verbatim from the Sass source (×2 in this rule). */
  background-color: #ffffff !important;
  background-image: none;
  text-shadow: none;
  border: 1px solid #000000 !important;
  box-shadow: none;
  border-radius: 0px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.eu-cookie-compliance-banner button:hover {
  /* important flag preserved verbatim from the Sass source. */
  background-color: #FBDD40 !important;
  background-image: none;
}

.eu-cookie-compliance-banner .eu-cookie-compliance-message {
  max-width: 80%;
}

.eu-cookie-compliance-banner .eu-cookie-compliance-message a {
  color: #000000;
  font-weight: bold;
  text-decoration: underline;
  border-bottom: 0;
}

.eu-cookie-compliance-banner .eu-cookie-compliance-message h1,
.eu-cookie-compliance-banner .eu-cookie-compliance-message h2,
.eu-cookie-compliance-banner .eu-cookie-compliance-message h3,
.eu-cookie-compliance-banner .eu-cookie-compliance-message p {
  font-weight: normal;
  line-height: 1.6;
}

.eu-cookie-compliance-banner .eu-cookie-compliance-message#popup-text {
  line-height: 1.6;
}

.eu-cookie-compliance-banner .eu-cookie-compliance-message#popup-text p {
  /* important flag preserved verbatim from the Sass source. */
  font-size: 14px !important;
}

.eu-cookie-compliance-banner .eu-cookie-compliance-message#popup-text p a {
  text-decoration: none;
}

.eu-cookie-compliance-banner .eu-cookie-compliance-message#popup-text p a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .eu-cookie-compliance-banner #popup-text {
    line-height: 1.20;
  }
}

/* End GDPR banner customizations */

/* SEO PAGE BRANDING */

#seopage-header {
}

#seopage-header img {
  margin: 30px auto;
}

.faq-block details {
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

/* End SEO PAGE BRANDING */

/* Coordinating rule for a component that reaches outside its own root
   (Phase 5a): leftnav.scss's ".subnav" root class includes a
   "&~ .main-content" sibling-combinator rule that resizes the page's
   main content column whenever a leftnav sidebar precedes it as a
   sibling -- this reaches outside leftnav's own component boundary
   (styling an unrelated ".main-content" element elsewhere in the page),
   so it lives here rather than in the leftnav SDC's own CSS file, per
   the same principle already applied to the GDPR/FAQ/SEO overrides
   above. */
.subnav ~ .main-content {
  width: 100%;
}

@media only screen and (min-width: 769px) {
  .subnav ~ .main-content {
    width: 75%;
  }
}

/* Moved here from content_only.scss (Phase 5b Task 4): this rule reaches
   outside the "content-only" component's own root class via the
   ":not(...)" guard clause -- ".content-only-wrapper" here refers to
   BOTH the "content-only" component (this task) and the
   "employer-search-find-tool" component (Phase 5b Task 5), which also
   renders a ".content-only-wrapper" div but has zero CSS rules of its
   own for it. ".main-content" is the real, external ancestor class set
   only in templates/layout/page.html.twig
   ("<section class="main-content">"). The heading rule below (DRUP-3533
   port, Task 7) targets the ".content-only-heading" class rather than
   "h2", since the heading tag is now nesting-aware (h2 or h3). */
:not(.main-content) > .content-only-wrapper {
  padding: var(--space-double);
  border-bottom: 1px solid var(--color-grey-light);
}

@media only screen and (min-width: 769px) {
  :not(.main-content) > .content-only-wrapper {
    padding: var(--space-quadruple) var(--space-octuple);
    border: 0;
  }
}

@media only screen and (min-width: 500px) {
  :not(.main-content) > .content-only-wrapper .content-only-heading {
    color: var(--color-lehigh-brown);
    font-weight: bold;
  }
}

/* Moved here from media_preview.scss (Phase 6b Task 3): ".media-section"
   is media_section's OWN root class, not media_preview's ("media-blurb")
   -- this declaration was a genuine addition, not a duplicate, since
   media_section.scss already has its own separate ".media-section" rule
   (display/border-bottom, no background-color). Confirmed misplaced by
   reading both .scss files directly. */
.media-section {
  background-color: var(--color-white);
}

/* Moved here from hover_box_section.scss (Phase 6b Task 5): ".spotlight-wrapper"
   has zero connection to any of the 3 hover-box-section root classes
   (".hover-box-wrapper" / ".hover-box-wrapper.centers" /
   ".hover-box-wrapper-zoom"). The real consumer is
   templates/views/views-view-unformatted--spotlight-listing--block.html.twig's
   own "<div class="spotlight-wrapper">", which wraps the already-converted
   (Phase 4) "hover-box-spotlight" SDC (itself CSS-file-less, depending on
   "hover-box"'s own CSS via libraryOverrides). */
.spotlight-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* Moved here from story_slider.scss (found post-Phase-7, via a live Playwright
   comparison against production): these ".slick-*" selectors are bare/unscoped
   -- they are the site's shared default appearance for EVERY slick carousel
   (arrows, dots), not something specific to the story-slider component. They
   happened to live in story_slider.scss only because Fractal's build bundled
   every component's CSS into one global.css unconditionally, so the fact that
   these rules were physically homed in one component's file never mattered at
   runtime. Drupal's SDC library system only attaches a component's own CSS
   when that exact component renders on a page, so once global.css (Phase 7)
   was removed, any page using a DIFFERENT slick-based component (stats-slider,
   media-slider) without a story-slider also present lost these rules entirely
   -- e.g. stats-slider's arrows/dots rendered at the browser's unstyled
   default size instead of the intended 8rem FontAwesome glyphs.

   Moving the bare selectors here verbatim was not sufficient on its own: this
   file (customizations.css, part of the always-loaded base-theming library)
   is aggregated BEFORE /libraries/slick-carousel/slick/slick-theme.css (only
   attached as a dependency of whichever slick-based component appears on a
   given page), so at equal specificity slick-theme.css's own bare
   ".slick-prev:before"/".slick-next:before" (20px, font-family: 'slick') was
   still winning by source order -- the reverse of the problem global.css
   used to have (it loaded LAST, so its identical rule won there instead).
   Every selector below is prefixed with ".slick-slider" to raise specificity
   by one class rather than depend on load order: slick.js always adds the
   "slick-slider" class to the root carousel element BEFORE it builds the
   arrow/dots markup (see buildArrows()/buildDots() in slick.js, both called
   after "_.$slider.addClass('slick-slider')"), so this is a real, always-true
   structural qualifier, not an arbitrary specificity hack -- the same
   approach reset.css's "main[role="main"]" and customizations.css's
   "#name-tag.sticky" used earlier in this migration for the same class of
   load-order race, before Phase 7 removed the need for either of THOSE two.
   story-slider's own CSS keeps only its genuinely-scoped ".story-slide"
   rules; these move here so every slick carousel gets them regardless of
   which component is on the page, matching the always-on behavior
   global.css used to provide. */
.slick-slider .slick-next,
.slick-slider .slick-prev {
  height: inherit;
  width: inherit;
  z-index: 2;
}

@media only screen and (max-width: 769px) {
  .slick-slider .slick-next,
  .slick-slider .slick-prev {
    top: 30%;
  }
}

.slick-slider .slick-next::before,
.slick-slider .slick-prev::before {
  font-family: var(--font-awesome);
  color: var(--color-white);
  font-size: 8rem;
}

.slick-slider .slick-prev {
  left: var(--space);
}

.slick-slider .slick-prev::before {
  content: "\f104";
}

.slick-slider .slick-next {
  right: var(--space);
}

.slick-slider .slick-next::before {
  content: "\f105";
}

.slick-slider .slick-dots {
  bottom: var(--space-triple);
  right: var(--space-quadruple);
  text-align: center;
  width: inherit;
  position: unset;
}

@media only screen and (min-width: 769px) {
  .slick-slider .slick-dots {
    position: absolute;
  }
}

.slick-slider .slick-dots li {
  margin: 0 10px;
}

.slick-slider .slick-dots li button::before {
  font-size: 1.5rem;
  -webkit-text-stroke: 4px var(--color-lehigh-brown);
  opacity: 1;
  color: transparent;
  content: '\2022';
}

@media only screen and (min-width: 769px) {
  .slick-slider .slick-dots li button::before {
    -webkit-text-stroke: 4px var(--color-white);
  }
}

.slick-slider .slick-dots li.slick-active button::before {
  opacity: 1;
  color: var(--color-lehigh-brown);
}

@media only screen and (min-width: 769px) {
  .slick-slider .slick-dots li.slick-active button::before {
    color: var(--color-white);
  }
}

.slick-slider .slick-dots li:last-of-type {
  margin: 0 0 0 10px;
}

.slick-slider.slick-dotted {
  margin: 0;
}

.slick-slider .slick-next:focus::before,
.slick-slider .slick-next:hover::before,
.slick-slider .slick-prev:focus::before,
.slick-slider .slick-prev:hover::before {
  color: var(--color-lehigh-brown);
}

/* Moved here from the "video" SDC's own video.css (found post-Phase-7, same
   live-comparison sweep as the slick rules above): ".video"/".video--full"
   are a shared, reusable "responsive iframe embed" utility class (the classic
   CSS-only responsive-video trick: zero-height container sized by a
   padding-bottom percentage, with the iframe absolutely positioned to fill
   it) -- applied at multiple real call sites (video-box.twig's
   ".video_box-video video", paragraph--sub-media-item-slider.html.twig, AND
   the "video" SDC's own wrapper), not something specific to the "video" SDC
   alone. It only ever lived in that component's file because Fractal's build
   bundled every component into one always-on global.css. Once Phase 7 removed
   global.css, only pages that render the "video" SDC itself kept this rule --
   every other real consumer (e.g. video-box, used by
   templates/paragraph/paragraph--video-listing.html.twig) lost it, so their
   embedded YouTube iframes collapsed to zero height. The "video" SDC's own
   video.css is now empty and has been removed; video-box.css's own
   ".video_box-item .video_box-video.video { padding-top: unset; }" override
   (a genuine component-specific override, left in place) still applies on
   top of this shared base rule. */
.video {
  height: 0;
  overflow: hidden;
  padding-top: 35px;
  padding-bottom: 56.25%; /* 56.25% = 16x9 */
  position: relative;
}

.video--full {
  padding-bottom: 75%; /* 75% = 4x3 */
}

.video iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Moved here from the hover-box component's own hover-box.css (found by
   Phase 7 Task 6's follow-up audit): "body.page-node-type-spotlight main
   picture" is a page-type-level selector with no connection to hover-box's
   own root class -- it targets ANY <picture> in <main> on a spotlight node's
   full page view, regardless of which components that page renders. It only
   ever lived in hover-box.css because Fractal's build bundled every
   component into one always-on global.css. templates/content/node--spotlight--full.html.twig
   is a bare "{% block content %}{{ content }}{% endblock %}" -- it never
   renders the hover-box SDC, so on a real spotlight node's own page (the
   exact context this rule targets), hover-box.css was never attached and
   this float-right treatment for a body image was silently lost once
   Phase 7 removed global.css. */
body.page-node-type-spotlight main picture {
  float: right;
  padding: var(--space) 0 var(--space) var(--space);
}

@media only screen and (max-width: 769px) {
  body.page-node-type-spotlight main picture {
    display: block;
    float: none;
    padding: 0 0 var(--space) 0;
  }
}

/* Moved here from the "button" SDC's own button.css (found by a user
   directly comparing /directory against production: the exposed-filter
   "Apply" submit button was missing its rounded-pill treatment). Real
   call site: Drupal core's Views exposed-filter forms (and core form
   rendering generally) apply a bare ".button" class to their <input
   type="submit"> elements as a standard convention -- confirmed via curl
   against both this site and production, both emit
   `class="button js-form-submit form-submit"` on the exposed filter's
   submit input. This is a genuinely different code path from the "button"
   SDC's own twig (used directly by many templates, e.g. the profile
   page's CV button), which also produces ".button" markup -- so ".button"
   is a shared, sitewide class contract, not something exclusive to the
   SDC. Drupal's SDC library system only attaches button.css when the
   "button" SDC itself renders on a page; a page whose ONLY ".button"
   element is a raw Views exposed-filter submit button (e.g. the
   directory, news listing, and spotlight listing pages, none of which
   also embed the "button" SDC elsewhere) never got this CSS at all once
   Phase 7 removed global.css. The "button" SDC's own button.css is now
   empty and has been removed -- every real consumer (both the SDC's own
   twig and raw Drupal form rendering) gets this from here instead. */
.button {
  font-size: 1rem;
  cursor: pointer;
  line-height: 1.4;
  padding: var(--space-one-half) var(--space);
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: all 0.4s ease;
  border-radius: 50px;
}

.button:hover,
.button:focus {
  text-decoration: none;
  background-color: var(--color-white);
  box-shadow: 5px 5px 10px 0 var(--color-drop-shadow);
}

.button.dark-grey {
  background-color: var(--color-night-sky);
  border: 1px solid var(--color-night-sky);
  color: var(--color-white);
}

.button.dark-grey:hover,
.button.dark-grey:focus {
  color: var(--color-night-sky);
  background-color: var(--color-white);
}

.button.gold {
  background-color: var(--color-golden-hour);
  border: 1px solid var(--color-golden-hour);
  color: var(--color-black);
}

.button.gold:hover,
.button.gold:focus {
  color: var(--color-grey-dark);
  background-color: var(--color-white);
}

.button.grey-light {
  background-color: var(--color-grey-light);
  border: 1px solid var(--color-grey-light);
  color: var(--color-black);
}

.button.grey-light:hover,
.button.grey-light:focus {
  color: var(--color-grey-dark);
  background-color: var(--color-white);
}

.button.white {
  background-color: var(--color-white);
  border: 1px solid var(--color-white);
  color: var(--color-black);
}

.button.white:hover,
.button.white:focus {
  color: var(--color-white);
  background-color: var(--color-night-sky);
}