/**
 * AgriLife Footer Enhancements
 * Progressive, non-destructive CSS-only improvements
 *
 * CONSTRAINTS:
 * - Does NOT alter HTML/DOM structure
 * - Does NOT inject blocks or template parts
 * - Does NOT use JavaScript for layout
 * - Scoped with .agl-footer-enhance namespace
 * - Targets existing WordPress block classes
 * - Respects theme structure completely
 *
 * GOALS:
 * - Fix collision issues on mobile/tablet
 * - Maintain consistent spacing scale
 * - Tighten TAMU logo bounding box
 * - Preserve accessibility
 * - Zero CLS (Cumulative Layout Shift)
 *
 * MODERN CSS FEATURES:
 * - Fluid typography and spacing using clamp()
 * - Container queries for modular responsive layout
 * - CSS custom properties for design tokens
 * - Progressive enhancement with @supports fallbacks
 *
 * @version 2.0.0
 * @package AgriLife_Branding
 */

/* ========================================
   DESIGN TOKENS (Modern Fluid Spacing Scale)
   ======================================== */

:root {
    /* Fluid spacing scale using clamp() - responsive between mobile and desktop */
    --agl-space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);      /* 8px → 10px */
    --agl-space-sm: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);          /* 12px → 16px */
    --agl-space-md: clamp(1rem, 0.85rem + 0.75vw, 1.25rem);         /* 16px → 20px */
    --agl-space-lg: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);         /* 20px → 28px */
    --agl-space-xl: clamp(1.5rem, 1.15rem + 1.75vw, 2.25rem);       /* 24px → 36px */
    --agl-space-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);             /* 32px → 48px */
    --agl-space-3xl: clamp(3rem, 2rem + 5vw, 4.5rem);               /* 48px → 72px */

    /* Fluid typography scale */
    --agl-text-xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.688rem);    /* 10px → 11px */
    --agl-text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);      /* 12px → 14px */
    --agl-text-base: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);      /* 14px → 16px */
    --agl-text-md: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);          /* 16px → 18px */
    --agl-text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);       /* 18px → 20px */
    --agl-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);        /* 20px → 24px */

    /* Fluid component sizing */
    --agl-logo-max-height: clamp(60px, 55px + 2.5vw, 80px);
    --agl-tamu-box-size: clamp(120px, 100px + 10vw, 160px);
    --agl-column-min-width: clamp(150px, 140px + 5vw, 200px);
    --agl-social-icon-size: 44px; /* Fixed for WCAG compliance */
}

/* ========================================
   SCOPED NAMESPACE
   Apply to footer container
   ======================================== */

/**
 * Theme applies this class to footer
 * Plugin adds enhancements within this scope
 */
.global-footer.agl-footer-enhance,
.site-footer.agl-footer-enhance {
    /* Ensure proper box-sizing inheritance */
    box-sizing: border-box;
    /* Ultra minimal padding to shrink footer container */
    padding-top: var(--agl-space-xs) !important;
    padding-bottom: var(--agl-space-xs) !important;
    margin-top: 0 !important;

    /* Enable container queries for responsive components */
    container-type: inline-size;
    container-name: footer;
}

/* Required links area - reduce vertical spacing */
.global-footer.agl-footer-enhance .inline-pipe,
.site-footer.agl-footer-enhance .inline-pipe {
    margin-top: var(--agl-space-xs) !important; /* 8px - reduced from 20px */
    margin-bottom: var(--agl-space-xs) !important; /* 8px - reduced from 20px */
    line-height: 1.3; /* Tighter line height */
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.global-footer.agl-footer-enhance .inline-pipe li,
.site-footer.agl-footer-enhance .inline-pipe li {
    margin-bottom: 0; /* No bottom margin on list items */
    padding-top: 2px; /* Minimal vertical padding */
    padding-bottom: 2px;
    padding-left: 0.375rem; /* 6px */
    padding-right: 0.375rem; /* 6px */
    white-space: nowrap; /* Prevent text wrapping within items */
}

/* Copyright text - reduce spacing */
.global-footer.agl-footer-enhance > .alignwide > p:last-child,
.site-footer.agl-footer-enhance > .alignwide > p:last-child,
.global-footer.agl-footer-enhance > p:last-child,
.site-footer.agl-footer-enhance > p:last-child {
    margin-top: var(--agl-space-xs) !important; /* 8px */
    margin-bottom: 0 !important;
    width: 100%;
    text-align: center !important;
}

/* HR separator before required links - add MAXIMUM spacing to prevent collision */
.global-footer.agl-footer-enhance hr,
.site-footer.agl-footer-enhance hr {
    margin-top: var(--agl-space-3xl) !important; /* 48px - MAXIMUM space above separator */
    margin-bottom: var(--agl-space-xl) !important; /* 24px - space below separator */
    clear: both; /* Ensure separator clears any floated content */
}

/* Brand logo (large logo above columns) - keep in normal flow */
.global-footer.agl-footer-enhance > .alignwide > figure.wp-block-image:first-child,
.site-footer.agl-footer-enhance > .alignwide > figure.wp-block-image:first-child,
/* Also match the JS-processed footer, which drops the .alignwide wrapper */
.global-footer.agl-footer-enhance > figure.wp-block-image:first-child,
.site-footer.agl-footer-enhance > figure.wp-block-image:first-child {
    margin-top: 0;
    margin-bottom: var(--agl-space-lg); /* Balanced 20–28px before contact columns */
}

/* Columns spacing - override inline margin-top */
.global-footer.agl-footer-enhance .wp-block-columns,
.site-footer.agl-footer-enhance .wp-block-columns {
    margin-top: 0 !important; /* Logo figure owns the complete inter-section gap */
    margin-bottom: var(--agl-space-3xl) !important; /* 48px - MORE space below columns before separator */
    padding-top: 0 !important;
    padding-bottom: var(--agl-space-xl) !important; /* 24px - additional padding at bottom */
}

/* Member bar spacing - TIGHT spacing to eliminate weird gap */
.agrilife-bar {
    margin-bottom: 0 !important; /* NO bottom margin - eliminate gap */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Override inline padding on member bar wrapper */
.wp-block-group.agrilife-bar {
    padding-top: var(--agl-space-sm) !important; /* 12px top padding */
    padding-bottom: var(--agl-space-xs) !important; /* 8px bottom padding - reduced */
}

/* Ensure member bar nav doesn't overflow at narrow widths */
.agrilife-bar .agrilife-bar-nav {
    overflow-wrap: break-word;
}

.agrilife-bar .agrilife-bar-nav li {
    flex-shrink: 1;
    min-width: 0;
}

/* Tight spacing: NO gap between member bar and footer */
.global-footer,
.site-footer {
    margin-top: 0 !important; /* NO top margin - connect to member bar */
    margin-bottom: 0 !important; /* Footer color must reach the viewport bottom */
}

/* If footer immediately follows member bar, ensure tight connection */
.agrilife-bar + .global-footer,
.agrilife-bar + .site-footer {
    margin-top: 0 !important;
    padding-top: calc(2 * var(--agl-space-lg)) !important; /* Deliberate double top space */
}

.global-footer.agl-footer-enhance *,
.global-footer.agl-footer-enhance *::before,
.global-footer.agl-footer-enhance *::after,
.site-footer.agl-footer-enhance *,
.site-footer.agl-footer-enhance *::before,
.site-footer.agl-footer-enhance *::after {
    box-sizing: inherit;
}

/* Texas A&M University-San Antonio footer migrated from the Hassan Lab site.
   Brand colors and typography continue to come from the existing TAMUSA runtime
   configuration; these rules only own layout, spacing, and link affordances. */
.agrilife-tamusa-footer {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-block: clamp(2rem, 4vw, 3rem);
    color: #fff;
    background: var(--agrilife-primary-color, #000);
}

.agrilife-tamusa-footer__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.agrilife-tamusa-footer__columns {
    gap: clamp(2rem, 5vw, 5rem);
    align-items: flex-start;
}

.agrilife-tamusa-footer h3 {
    margin-block: 0 0.5rem;
    color: #fff;
}

.agrilife-tamusa-footer p,
.agrilife-tamusa-footer ul {
    margin-block: 0.4rem;
}

.agrilife-tamusa-footer a {
    color: #fff;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

.agrilife-tamusa-footer a:hover {
    text-decoration-thickness: 0.12em;
}

.agrilife-tamusa-footer a:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 3px;
}

.agrilife-tamusa-footer__system-logo img {
    width: auto;
    max-width: 9rem;
    max-height: 7rem;
}

.agrilife-tamusa-footer .wp-block-separator {
    margin-block: 2rem !important;
    opacity: 0.35;
}

.agrilife-tamusa-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0;
    padding: 0;
    list-style: none;
}

.agrilife-tamusa-footer__legal li {
    margin-right: 0.75rem;
    padding-right: 0.75rem;
    border-right: 1px solid rgb(255 255 255 / 55%);
}

.agrilife-tamusa-footer__legal li:last-child {
    border-right: 0;
}

.agrilife-tamusa-footer__copyright {
    margin-top: 1.5rem !important;
}

@media (min-width: 961px) {
    .agrilife-tamusa-footer__columns > .wp-block-column:first-child h3 {
        white-space: nowrap;
    }
}

@media (max-width: 960px) {
    .agrilife-tamusa-footer__columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
}

/* ========================================
   COLLISION FIXES: Mobile/Tablet
   ======================================== */

/**
 * Fix: Columns wrapping/colliding at tablet breakpoint
 * Solution: Enforce safe flex-basis and gap values
 */
.agl-footer-enhance .wp-block-columns {
    /* Gap between columns (base / small screens) */
    gap: var(--agl-space-lg) !important; /* ~20-28px */
    /* Zero margin to eliminate vertical space */
    margin-top: 0;
    margin-bottom: 0;
    /* Align all columns to top */
    align-items: flex-start;
    /* Ensure flexbox layout */
    display: flex;
    flex-wrap: wrap;
}

.agl-footer-enhance .wp-block-column {
    /* Allow shrinking, prevent overflow */
    min-width: 0;
    flex-shrink: 1;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    /* Ensure content doesn't visually overflow */
    overflow: hidden;
}

/* Exception for columns with images/logos - allow visible overflow for logos */
.agl-footer-enhance .wp-block-column:has(figure),
.agl-footer-enhance .wp-block-column:has(img) {
    overflow: visible;
}

/* But social media columns should still contain */
.agl-footer-enhance .wp-block-column:has(.wp-block-social-links) {
    overflow: hidden;
}

/* ========================================
   CONTAINER QUERIES (Modern Responsive)
   ======================================== */

/**
 * Container-based responsive layout
 * More modular than viewport-based media queries
 */

/* Mobile: Single column stack (container < 600px) */
@container footer (max-width: 599px) {
    .agl-footer-enhance .wp-block-columns {
        flex-direction: column;
        gap: var(--agl-space-2xl) !important;
    }

    .agl-footer-enhance .wp-block-column {
        flex-basis: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* Tablet: 2x2 grid (container 600px - 1023px) */
@container footer (min-width: 600px) and (max-width: 1023px) {
    .agl-footer-enhance .wp-block-columns {
        gap: var(--agl-space-lg) !important;
        flex-wrap: wrap;
    }

    .agl-footer-enhance .wp-block-column {
        flex: 0 0 calc(50% - (var(--agl-space-lg) / 2));
        max-width: calc(50% - (var(--agl-space-lg) / 2));
        min-width: 0;
    }

    .agl-footer-enhance .wp-block-column:nth-child(3),
    .agl-footer-enhance .wp-block-column:nth-child(4) {
        margin-top: var(--agl-space-xl);
    }
}

/* Desktop: 4-column layout (container >= 1024px) */
@container footer (min-width: 1024px) {
    .agl-footer-enhance .wp-block-columns {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: var(--agl-space-2xl) !important; /* ~48px - matches production footer gap-x-12 */
    }

    .agl-footer-enhance .wp-block-column {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    .agl-footer-enhance .wp-block-column:first-child {
        flex: 1.3 1 0;
    }

    .agl-footer-enhance .wp-block-column:last-child {
        flex: 0 0 160px;
        max-width: 180px;
        min-width: 140px;
    }
}

/* TXMN adds a fifth, semantically distinct content column. Keep its headings on
   one line and use a two-row grid at compact desktop widths so labels never get
   squeezed into awkward stacks. */
.agl-footer-enhance[data-agrilife-processed="txmn"] .wp-block-column h2,
.agl-footer-enhance[data-agrilife-processed="txmn"] .wp-block-column h3,
.agl-footer-enhance[data-agrilife-processed="txmn"] .wp-block-column h4 {
    white-space: nowrap;
}

@container footer (min-width: 600px) and (max-width: 767px) {
    .agl-footer-enhance[data-agrilife-processed="txmn"] .wp-block-columns {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--agl-space-lg) !important;
    }

    .agl-footer-enhance[data-agrilife-processed="txmn"] .wp-block-column {
        width: auto;
        max-width: none;
        min-width: 0;
        margin-top: 0 !important;
    }
}

@container footer (min-width: 768px) and (max-width: 1149px) {
    .agl-footer-enhance[data-agrilife-processed="txmn"] .wp-block-columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--agl-space-lg) !important;
    }

    .agl-footer-enhance[data-agrilife-processed="txmn"] .wp-block-column {
        width: auto;
        max-width: none;
        min-width: 0;
        margin-top: 0 !important;
    }
}

@container footer (min-width: 1150px) {
    .agl-footer-enhance[data-agrilife-processed="txmn"] .wp-block-columns {
        display: grid !important;
        grid-template-columns: minmax(250px, 1.3fr) minmax(235px, 1fr) minmax(175px, 0.9fr) minmax(150px, 0.75fr) 160px;
        gap: var(--agl-space-lg) !important;
    }

    .agl-footer-enhance[data-agrilife-processed="txmn"] .wp-block-column {
        width: auto;
        max-width: none;
        min-width: 0;
        margin-top: 0 !important;
    }
}

/* Wide desktop: More generous spacing (container >= 1280px) */
@container footer (min-width: 1280px) {
    .agl-footer-enhance .wp-block-columns {
        gap: var(--agl-space-2xl) !important;
    }

    .agl-footer-enhance .wp-block-column:last-child {
        flex: 0 0 180px;
        max-width: 200px;
    }
}

/* ========================================
   FALLBACK: Media Queries for Older Browsers
   ======================================== */

/**
 * Browsers without container query support fall back to viewport queries
 * Progressive enhancement: modern browsers use containers, legacy uses viewport
 */

@supports not (container-type: inline-size) {
    /* Desktop: 4-column layout matching theme structure */
    @media (min-width: 1024px) {
        .agl-footer-enhance .wp-block-columns {
            justify-content: flex-start;
            flex-wrap: nowrap;
            gap: var(--agl-space-xl) !important;
        }

        .agl-footer-enhance .wp-block-column {
            flex: 1 1 0;
            min-width: 0;
            max-width: none;
        }

        .agl-footer-enhance .wp-block-column:first-child {
            flex: 1.3 1 0;
        }

        .agl-footer-enhance .wp-block-column:last-child {
            flex: 0 0 160px;
            max-width: 180px;
            min-width: 140px;
        }
    }

    /* Wide desktop: More generous spacing */
    @media (min-width: 1280px) {
        .agl-footer-enhance .wp-block-columns {
            gap: var(--agl-space-2xl) !important;
        }

        .agl-footer-enhance .wp-block-column:last-child {
            flex: 0 0 180px;
            max-width: 200px;
        }
    }

    /* Tablet: 2x2 grid to prevent collision */
    @media (min-width: 600px) and (max-width: 1023px) {
        .agl-footer-enhance .wp-block-columns {
            gap: var(--agl-space-lg) !important;
            flex-wrap: wrap;
        }

        .agl-footer-enhance .wp-block-column {
            flex: 0 0 calc(50% - (var(--agl-space-lg) / 2));
            max-width: calc(50% - (var(--agl-space-lg) / 2));
            min-width: 0;
        }

        .agl-footer-enhance .wp-block-column:nth-child(3),
        .agl-footer-enhance .wp-block-column:nth-child(4) {
            margin-top: var(--agl-space-xl);
        }
    }

    /* Mobile: Single column stack */
    @media (max-width: 599px) {
        .agl-footer-enhance .wp-block-columns {
            flex-direction: column;
            gap: var(--agl-space-2xl) !important;
        }

        .agl-footer-enhance .wp-block-column {
            flex-basis: 100%;
            max-width: 100%;
            min-width: 0;
        }
    }
}

/* ========================================
   CONSISTENT SPACING: Visual Rhythm
   ======================================== */

/**
 * Fix: Inconsistent spacing between elements
 * Solution: Enforce 8px baseline grid
 */

/* Headings - minimal spacing for compact footer */
.agl-footer-enhance h2,
.agl-footer-enhance h3,
.agl-footer-enhance h4 {
    margin-top: 0;
    margin-bottom: var(--agl-space-xs); /* Fluid spacing */
    font-size: var(--agl-text-lg); /* Fluid typography: 18px → 20px */
    line-height: 1.2; /* Tighter line height */
    font-weight: 700;
}

/* Align all column headings to same baseline */
.agl-footer-enhance .wp-block-column h2,
.agl-footer-enhance .wp-block-column h3,
.agl-footer-enhance .wp-block-column h4 {
    margin-top: 0;
    padding-top: 0;
    /* Ensure consistent vertical alignment across all columns */
    align-self: flex-start;
}

/* First column heading - remove any top offset from logo */
.agl-footer-enhance .wp-block-column:first-child h2,
.agl-footer-enhance .wp-block-column:first-child h3,
.agl-footer-enhance .wp-block-column:first-child h4 {
    /* Reset margin to align with other columns */
    margin-top: 0 !important;
}

.agl-footer-enhance h2 {
    font-size: var(--agl-text-xl); /* Fluid: 20px → 24px */
}

.agl-footer-enhance h4 {
    font-size: var(--agl-text-md); /* Fluid: 16px → 18px */
}

/* Paragraphs - ultra compact spacing */
.agl-footer-enhance p {
    margin-top: 0;
    margin-bottom: var(--agl-space-xs); /* Fluid spacing */
    font-size: var(--agl-text-base); /* Fluid: 14px → 16px */
    line-height: 1.4; /* Tighter line height */
}

.agl-footer-enhance p:last-child {
    margin-bottom: 0;
}

/* Lists - ultra compact spacing */
.agl-footer-enhance ul,
.agl-footer-enhance ol {
    margin-top: 0;
    margin-bottom: var(--agl-space-xs); /* Fluid spacing */
    padding-left: 0;
    list-style: none;
}

.agl-footer-enhance ul:last-child,
.agl-footer-enhance ol:last-child {
    margin-bottom: 0;
}

.agl-footer-enhance li {
    margin-bottom: var(--agl-space-xs); /* Fluid spacing */
    font-size: var(--agl-text-base); /* Fluid: 14px → 16px */
    line-height: 1.4; /* Tighter line height */
}

.agl-footer-enhance li:last-child {
    margin-bottom: 0;
}

/* Links in lists - ensure normal font size */
.agl-footer-enhance li a {
    font-size: inherit; /* Inherit from li, not from heading parents */
    line-height: inherit;
    text-decoration: none;
}

.agl-footer-enhance li a:hover {
    text-decoration: underline;
}

/* Figures/Images - minimal spacing */
.agl-footer-enhance figure,
.agl-footer-enhance .wp-block-image {
    margin-top: 0;
    margin-bottom: 0; /* No bottom margin */
}

/* ========================================
   ALIGNMENT: Logo + Text
   ======================================== */

/**
 * Fix: Logo and text misalignment
 * Solution: Flexbox vertical centering
 */

/* First column - logo and content in normal flow */
.agl-footer-enhance .wp-block-column:first-child {
    position: relative;
    padding-top: 0;
}

/* Logo in first column - normal flow, with spacing below */
.agl-footer-enhance .wp-block-column:first-child figure {
    position: relative;
    margin: 0 0 var(--agl-space-sm) 0; /* 12px spacing below logo */
    max-width: 100%;
}

.agl-footer-enhance .wp-block-column:first-child img,
.agl-footer-enhance .wp-block-column:first-child svg {
    /* Logo sizing - increased for prominence, WCAG compliant */
    max-height: 55px; /* Increased from 45px */
    width: auto;
    height: auto;
    display: block;
}

/* Remove padding-top alignment - use flexbox instead */
.agl-footer-enhance .wp-block-column:not(:first-child) {
    position: relative;
    /* Let flexbox handle alignment naturally */
    padding-top: 0;
}

/* All columns need relative positioning for accessible focus */
.agl-footer-enhance .wp-block-column {
    position: relative;
}

/* All column headers align at same vertical position */
.agl-footer-enhance .wp-block-column h2,
.agl-footer-enhance .wp-block-column h3,
.agl-footer-enhance .wp-block-column h4 {
    margin-top: 0;
    padding-top: 0;
}

/* Ensure headings have proper focus indicators for WCAG 2.1 AA */
.agl-footer-enhance .wp-block-column h2:focus,
.agl-footer-enhance .wp-block-column h3:focus,
.agl-footer-enhance .wp-block-column h4:focus {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* ========================================
   TAMU LOGO: Tighter Bounding Box
   ======================================== */

/**
 * Fix: TAMU logo oversized, distorted
 * Solution: Constrain dimensions, maintain aspect ratio
 *
 * Target: agrilife-single-2024 theme
 * Classes: .tamu-system-branding or figure with TAMU logo
 */

/* TAMU System Branding Container */
.agl-footer-enhance .tamu-system-branding,
.agl-footer-enhance figure:has(img[alt*="Texas A&M"]):last-child {
    /* Allow natural sizing to fit content */
    width: auto;
    min-width: var(--agl-tamu-box-size);
    max-width: 200px;

    /* Prevent overflow */
    overflow: visible;

    /* Center content */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;

    /* Minimal padding */
    padding: 0;

    /* Remove border */
    border: none;
}

/* TAMU logo link wrapper (the square box) */
.agl-footer-enhance .tamu-system-branding > a.tamu-logo-link {
    /* Fixed width for logo and tagline */
    width: var(--agl-tamu-box-size);
    min-width: var(--agl-tamu-box-size);
    max-width: var(--agl-tamu-box-size);

    /* Allow height to grow for tagline - NO aspect-ratio constraint */
    min-height: auto; /* Let content determine height */
    height: auto;

    /* Center content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--agl-space-xs);

    /* Padding inside box */
    padding: var(--agl-space-md);

    /* Border */
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.2);

    /* Allow slight overflow for text */
    overflow: visible;
}

/* REMOVED: "About Texas A&M University" and "tamu.edu" links
 * These links are no longer rendered in the JavaScript
 * TAMU logo box now contains ONLY: logo image + tagline text
 */

/* TAMU Logo Image - ACCESSIBLE SIZE */
.agl-footer-enhance .tamu-system-branding a img,
.agl-footer-enhance .tamu-system-branding img,
.agl-footer-enhance figure:has(img[alt*="Texas A&M"]) img {
    /* Accessible size - much larger for readability */
    max-height: 70px;
    max-width: 90px;
    width: auto;
    height: auto;

    /* Crisp rendering for hi-DPI */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;

    /* Prevent distortion */
    object-fit: contain;

    /* Ensure proper display */
    display: block;
    margin: 0 auto;
}

/* TAMU Tagline - "Together We Stand as A Force for Good" INSIDE square box */
.agl-footer-enhance .tamu-system-tagline {
    /* Tighter spacing to fit in box */
    line-height: 1.1;
    margin: 0.5rem 0 0 !important; /* Reduced margin-top */
    text-align: center;

    /* Prevent overflow but allow visibility */
    max-width: 100%;
    overflow: visible;

    /* Ensure visibility */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.agl-footer-enhance .tamu-system-tagline .small {
    font-size: var(--agl-text-xs) !important; /* Fluid: 10px → 11px */
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    display: block !important;
    margin-bottom: 0.1rem !important; /* REDUCED gap between lines */
    text-transform: none !important;
    color: white !important;
    line-height: 1.1 !important;
}

.agl-footer-enhance .tamu-system-tagline .large {
    font-size: var(--agl-text-sm) !important; /* Fluid: 12px → 14px */
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    display: block !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    color: white !important;
    margin-top: 0 !important; /* NO gap before this line */
}

/* Mobile: Larger TAMU box for accessibility */
@media (max-width: 599px) {
    .agl-footer-enhance .tamu-system-branding {
        max-width: 180px;
        margin: 0 auto;
    }

    .agl-footer-enhance .tamu-system-branding > a.tamu-logo-link {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
    }

    .agl-footer-enhance .tamu-system-branding a img,
    .agl-footer-enhance .tamu-system-branding img {
        max-height: 80px;
        max-width: 100px;
    }

    /* Tagline inside square box - larger on mobile */
    .agl-footer-enhance .tamu-system-tagline {
        margin-top: 0.5rem !important;
    }

    .agl-footer-enhance .tamu-system-tagline .small {
        font-size: 0.688rem !important; /* 11px - slightly larger for mobile */
        color: white !important;
    }

    .agl-footer-enhance .tamu-system-tagline .large {
        font-size: 0.813rem !important; /* 13px - slightly larger for mobile */
        color: white !important;
    }

    /* REMOVED: Mobile styles for tamu-about-link and tamu-url-link (links deleted) */
}

/* ========================================
   MEMBER LOGO: Prevent Clipping & Collision
   ======================================== */

/**
 * Fix: Member logo clipped on right edge and colliding with required links
 * Solution: Ensure adequate space, visible overflow, and proper sizing
 */

.agl-footer-enhance .agrilife-member-logo,
.agl-footer-enhance figure:has(svg[class*="member"]) {
    /* Ensure visible */
    overflow: visible;

    /* The SVG itself owns the shared responsive logo height below. */
    max-height: none;
    width: auto;

    /* Add bottom margin for breathing room */
    margin-bottom: var(--agl-space-lg) !important;
}

/* Member logo SVG: use the same rendered-height standard as every unit logo. */
.agl-footer-enhance .agrilife-member-logo svg,
.agl-footer-enhance figure:has(svg[class*="member"]) svg {
    height: var(--agrilife-footer-logo-height, clamp(88px, 72px + 4vw, 120px)) !important;
    max-height: 120px;
    width: auto;
    display: block;
}

.agl-footer-enhance .wp-block-column:has(.agrilife-member-logo),
.agl-footer-enhance .wp-block-column:has(figure:has(svg[class*="member"])) {
    /* Prevent column from clipping */
    overflow: visible;
    min-width: 200px;

    /* Add extra bottom padding to this column */
    padding-bottom: var(--agl-space-xl) !important;
}

/* ========================================
   SOCIAL ICONS: Touch Targets
   ======================================== */

/**
 * Fix: Social icons too small, inconsistent spacing
 * Solution: WCAG-compliant 44x44px targets, even gaps
 */

.agl-footer-enhance .wp-block-social-links {
    gap: 6px; /* Ultra tight gap */
    margin: 4px 0; /* Ultra tight margin */
    /* Prevent horizontal expansion */
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.agl-footer-enhance .wp-block-social-link {
    /* Prevent individual links from expanding */
    flex-shrink: 0;
}

.agl-footer-enhance .wp-block-social-link a {
    /* WCAG 2.5.5: 44x44px minimum */
    min-width: var(--agl-social-icon-size);
    min-height: var(--agl-social-icon-size);
    width: var(--agl-social-icon-size);
    height: var(--agl-social-icon-size);

    /* Center icon */
    display: flex;
    align-items: center;
    justify-content: center;
}

.agl-footer-enhance .txmn-social-links svg {
    width: 24px;
    height: 24px;
    color: currentColor;
    display: block;
}

/* Social media column - prevent expansion */
.agl-footer-enhance .wp-block-column:has(.wp-block-social-links) {
    flex-shrink: 1;
    min-width: 0;
}

/* ========================================
   ACCESSIBILITY: Focus States
   ======================================== */

/**
 * Ensure visible focus indicators
 * Meet WCAG 2.1 AA requirements
 */

.agl-footer-enhance a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
    opacity: 1;
}

.agl-footer-enhance button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* ========================================
   PERFORMANCE: Zero CLS
   ======================================== */

/**
 * Prevent layout shifts
 * Reserve space for dynamic content
 */

/* Figures always reserve space */
.agl-footer-enhance figure {
    /* Prevent CLS from image load */
    min-height: 60px;
}

.agl-footer-enhance img,
.agl-footer-enhance svg {
    /* Prevent jumps during load */
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .agl-footer-enhance {
        /* Simplify for print */
        padding: 1rem;
    }

    .agl-footer-enhance .wp-block-columns {
        /* Stack on print */
        flex-direction: column;
    }

    .agl-footer-enhance .wp-block-social-links {
        /* Hide social on print */
        display: none;
    }
}

/* ========================================
   MOTION PREFERENCES
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .agl-footer-enhance * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}