/*
Theme Name: UCLA WordPress Child for Life Sciences
Theme URI: https://github.com/ucla/design-kit-wp-upstream
Author: UCLA Life Sciences Computing
Author URI: https://admin.lifesci.ucla.edu
Description: Child theme for the UCLA WordPress theme for Life Sciences departments.
Template: ucla-wordpress
Version: 1.0.1
License: Apache License 2.0
License URI: https://www.apache.org/licenses/LICENSE-2.0.txt
Text Domain: ucla-child-ls
*/
h1,h2,h3,h4,h5,h6 { 
letter-spacing: -0.02em;
text-wrap: balance;
}

p { text-wrap: pretty; }

/* Default Template with Banner: breadcrumb/title text color, set per-page via
   the "Banner Background" meta box. !important because the sitewide link
   color otherwise wins over these on the raw wp:html breadcrumb markup. */
.ucla-title-banner__breadcrumb,
.ucla-title-banner__breadcrumb a,
.ucla-title-banner .wp-block-post-title,
.ucla-title-banner .wp-block-post-title a {
  color: var(--ucla-banner-text-color, #fff) !important;
}

.ucla-title-banner--text-black { --ucla-banner-text-color: #000000; }
.ucla-title-banner--text-gray-80 { --ucla-banner-text-color: #333333; }
.ucla-title-banner--text-gray-60 { --ucla-banner-text-color: #666666; }
.ucla-title-banner--text-gray-40 { --ucla-banner-text-color: #999999; }
.ucla-title-banner--text-gray-20 { --ucla-banner-text-color: #CCCCCC; }
.ucla-title-banner--text-gray-15 { --ucla-banner-text-color: #D9D9D9; }
.ucla-title-banner--text-gray-10 { --ucla-banner-text-color: #E5E5E5; }
.ucla-title-banner--text-gray-08 { --ucla-banner-text-color: #EBEBEB; }
.ucla-title-banner--text-gray-05 { --ucla-banner-text-color: #F2F2F2; }
.ucla-title-banner--text-gray-03 { --ucla-banner-text-color: #F7F7F7; }
.ucla-title-banner--text-white { --ucla-banner-text-color: #FFFFFF; }

/* Default Template with Banner, Customizer "Remove dark overlay on image
   background" option: without the overlay, an arbitrary photo's own
   colors can't be predicted, so add a shadow behind the text for
   contrast instead of relying on the dim scrim. */
.ucla-title-banner--no-overlay .ucla-title-banner__breadcrumb,
.ucla-title-banner--no-overlay .ucla-title-banner__breadcrumb a,
.ucla-title-banner--no-overlay .wp-block-post-title {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.6);
}

body.home:not(.page-template-page-left-sidebar, .post-template-single-left-sidebar) > .main.ucla-grid, body.page-template-default:not(.page-template-page-left-sidebar, .post-template-single-left-sidebar) > .main.ucla-grid {
  gap: 1.5rem 0;
}

body.page-template > #main { margin-bottom: 1.5rem;}

.page-template.page-template-page-left-sidebar-banner > .ucla-header {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .page-template.page-template-page-left-sidebar-banner > .ucla-header {
    margin-bottom: 0;
  }
}

.page-template-page-left-sidebar-banner .main {
  grid-template-areas:
    "content"
    "sidebar";
  margin-top: 64px;
  margin-bottom: 64px;
}

@media (min-width: 960px) {
  .page-template-page-left-sidebar-banner .main {
    gap: 1.5rem 8.3333333%;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "sidebar content";
  }
}

.page-template-page-left-sidebar-banner .main:not(:has(.ucla-side-navigation)) {
  grid-template-areas: "content";
}

.page-template-page-left-sidebar-banner .main:not(:has(.ucla-side-navigation)) .ucla-sidebar {
  display: none;
}

@media (min-width: 960px) {
  .page-template-page-left-sidebar-banner .main:not(:has(.ucla-side-navigation)) {
    grid-template-columns: 1fr;
    grid-template-areas: "content";
  }

  .page-template-page-left-sidebar-banner .main:not(:has(.ucla-side-navigation)) .ucla-content {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
  }
}

/* News Archive Template */
.page-template-template-news-archive .ucla-news-archive .ucla-card.ucla-card__story-secondary {
  display: flex;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 1.5rem;
}

.page-template-template-news-archive .ucla-news-archive .ucla-card.ucla-card__story-secondary .story-card-image-link {
  display: block;
  flex: 0 0 297px;
  width: 297px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.page-template-template-news-archive .ucla-news-archive .ucla-card.ucla-card__story-secondary .ucla-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* Only stack on very small screens */
@media (max-width: 520px) {
  .page-template-template-news-archive .ucla-news-archive .ucla-card.ucla-card__story-secondary {
    flex-direction: column !important;
  }

  .page-template-template-news-archive .ucla-news-archive .ucla-card.ucla-card__story-secondary .story-card-image-link {
    width: 100%;
    max-width: 100%;
    flex-basis: auto;
    margin-bottom: 1rem;
  }
}

.page-template-template-news-archive .ucla-news-archive__search {
  margin-bottom: 2rem;
}

.page-template-template-news-archive .ucla-news-archive__search-row {
  display: flex;
  align-items: flex-start;
   gap: 0.5rem;
}

.page-template-template-news-archive .ucla-news-archive__search .ucla-field {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.page-template-template-news-archive .ucla-news-archive__search-actions {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .page-template-template-news-archive .ucla-news-archive__search-row {
    flex-direction: column;
    align-items: stretch;
  }

  .page-template-template-news-archive .ucla-news-archive__search-actions {
    width: 100%;
  }

  .page-template-template-news-archive .ucla-news-archive__search-actions .ucla-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Sidebar Navigation: "Show sidebar navigation as a mobile menu" option */
.ucla-side-navigation-toggle {
  display: none;
}

@media (max-width: 959.98px) {
  .ucla-side-navigation-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #ddd;
    font: inherit;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
  }

  .ucla-side-navigation-toggle::after {
    content: "";
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .ucla-side-navigation-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
  }

  .ucla-side-navigation-panel {
    display: none;
  }

  .ucla-side-navigation-toggle-wrap.is-open .ucla-side-navigation-panel {
    display: block;
    border: 1px solid #ddd;
  }

  /* The UCLA design system's own side navigation CSS hides .ucla-side-navigation
     below its documented 768px breakpoint (it expects mobile nav to live in the
     primary hamburger menu instead). Since this toggle intentionally shows it
     on mobile instead, force it visible when open — !important because we
     don't control the specificity of that outside rule. */
  .ucla-side-navigation-toggle-wrap.is-open .ucla-side-navigation {
    display: block !important;
  }

  /* Move the sidebar (and its toggle) between the page title and the
     content on narrow viewports, instead of the default stacking order
     which places it after the content. Scoped to :has(.ucla-side-navigation-toggle-wrap)
     so it only applies when the mobile toggle option is actually in use. */
  .page-template-page-left-sidebar .main:has(.ucla-side-navigation-toggle-wrap),
  .page-template-page-right-sidebar .main:has(.ucla-side-navigation-toggle-wrap),
  .post-template-single-left-sidebar .main:has(.ucla-side-navigation-toggle-wrap),
  .post-template-single-right-sidebar .main:has(.ucla-side-navigation-toggle-wrap) {
    grid-template-areas:
      "header"
      "sidebar"
      "content"
      "pagination";
  }

  .page-template-page-left-sidebar-banner .main:has(.ucla-side-navigation-toggle-wrap) {
    grid-template-areas:
      "sidebar"
      "content";
  }
}