/**
 * Parent Theme Overrides
 *
 * This file contains CSS overrides for the UCLA WordPress parent theme.
 * Parent theme location: ucla-wordpress/
 *
 * PURPOSE:
 * - Fix parent theme issues that cannot be resolved by modifying parent theme files
 * - Override parent theme styles that conflict with CSRC design requirements
 * - Provide workarounds for parent theme constraints
 *
 * NOTE:
 * - Parent theme files cannot be modified (they're in the parent theme directory)
 * - All overrides here are necessary and permanent
 * - Document the source file and reason for each override
 */

/**
 * Figure Line-Height Fix
 * Source: ucla-wordpress/assets/css/global.css - `figure {line-height: 0;}`
 *
 * PROBLEM:
 * Parent theme sets `figure {line-height: 0}` to remove gaps below images.
 * This causes figcaption text to collapse to a single unreadable line because
 * line-height: 0 is inherited.
 *
 * SOLUTION:
 * - Keep figure line-height: 0 for image gap fix (or use display: block on img)
 * - Explicitly set line-height on figcaption and caption elements
 */
figure img {
  display: block;
}

figcaption,
.wp-caption-text,
.wp-element-caption {
  line-height: 1.6;
}

/**
 * UCLA Header School Container - Remove padding
 * Source: ucla-wordpress/assets/css/ucla-lib.min.css
 * Reason: Need edge-to-edge layout for header content
 */
.ucla-header--school .ucla-header__container {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 960px) {
  .ucla-header--school .ucla-header__container {
    padding-left: 0;
    padding-right: 0;
  }
}

/**
 * Mobile Navigation - Full Viewport Width
 * Source: ucla-wordpress/assets/css/header.css
 *
 * PROBLEM:
 * UCLA navigation is constrained by parent container's max-width.
 * Mobile nav needs to span full viewport when sliding in from right.
 *
 * SOLUTION:
 * - Position absolutely relative to viewport
 * - Use left/right values to span full width
 * - Calculate position relative to fixed header using design tokens
 */

/* Only apply to mobile (below desktop breakpoint) */
@media (max-width: 959px) {

  .ucla-main-nav,
  .csrc-main-nav {
    /* Position absolutely relative to viewport */
    position: fixed !important;

    /* Span full viewport width */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;

    /* Position below the header */
    top: var(--header-height-mobile) !important;

    /* Ensure it's above other content but below header */
    z-index: 999 !important;

    /* Full height minus header */
    max-height: calc(100vh - var(--header-height-mobile)) !important;
    overflow-y: auto !important;

    /* Slide in from right */
    transform: translateX(100vw);
    transition: transform 0.3s ease;
  }

  /* When nav is open */
  .is-open .ucla-main-nav,
  .is-open .csrc-main-nav {
    transform: translateX(0) !important;
  }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 959px) {
  .ucla-main-nav,
  .csrc-main-nav {
    top: var(--header-height-tablet) !important;
    max-height: calc(100vh - var(--header-height-tablet)) !important;
  }
}

/**
 * UCLA Plugin Accordion — Reset Block Spacing
 * Source: ucla-wordpress-plugin accordion-item block
 *
 * PROBLEM:
 * WordPress flow layout adds margin-block-start: 1rem to every block child
 * inside .accordion__content, which stacks on top of the content area's own
 * padding (1.125rem 1rem), creating excessive gaps between paragraphs and lists.
 *
 * SOLUTION:
 * Reset block margins inside accordion content so only the container padding
 * provides spacing, then restore normal inter-element gaps.
 */
.accordion-item .accordion__content > :first-child {
  margin-block-start: 0;
}

.accordion-item .accordion__content > :last-child {
  margin-block-end: 0;
}