/*
Theme Name: AAMAS Conference
Theme URI: https://ifaamas.org
Template: ifaamas
Author: IFAAMAS
Description: Per-year AAMAS conference site. Inherits the IFAAMAS design system and overrides only what a conference needs: an image hero instead of the foundation's video, an uploaded logo instead of the IFAAMAS mark, and a denser primary menu.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: aamas-conference
*/

/* =========================================
   Conference palette
   =========================================
   One place to rebrand for the next year. The dark blue is the site's ink —
   title band, headings, buttons; the light one is the AAMAS logo's own blue,
   used where the dark needs a lift (button hover). The per-page "Main color"
   field has to be set to the same value to match; that is page data, not CSS. */
:root {
    --conf-blue: #0E3D66;
    --conf-blue-light: #1B6EAD;
}

/* =========================================
   Header
   =========================================
   The parent header is a transparent bar positioned over the hero or the
   coloured title band, with white type. Here it is a solid white bar in normal
   flow instead, so the menu sits on white rather than over the artwork.

   Taking it out of `position: absolute` is what makes that work: a white bar
   still overlaying the hero would read as the photo being clipped. In flow, the
   hero simply starts beneath it — which also means the generous top padding the
   parent uses to clear the absolute header is no longer needed anywhere. */
.site-header {
    position: static;
    background: #fff;
    /* The parent drives menu colour from --menu-fg, which is white for type over
       artwork. On white it has to be the ink colour instead. */
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
}

body.admin-bar .site-header {
    top: auto;
}

/* The parent paints a dark scrim behind the header on the home template so
   white type survives over the video. Nothing to rescue on a white bar. */
.page-template-home .site-header::before,
.home .site-header::before {
    content: none;
}

.site-logo,
.primary-nav a {
    color: var(--color-primary);
}

/* Top padding on both heroes existed only to clear the absolute header. */
.hero--image {
    padding: 3.5rem 0 3rem;
}

.page-hero-solid {
    padding: 5rem 0 3rem;
    /* The parent's 440px floor was sized around 16rem of header-clearing
       padding. Without it the band is mostly empty, so it shrinks to fit. */
    min-height: 0;
}

.page-content {
    padding-top: 3.5rem;
}

/* The parent gives .home-content only 2rem below, which is right on the
   foundation site where three more sections follow it. Here it is the last
   thing before the black footer, so it needs the same room an inner page gets.
   The :has() rule below still wins when the page ends in a band. */
.home-content {
    padding-bottom: 5rem;
}

/* A page ending in a full-width band left a white strip between it and the
   black footer: .page-content's own bottom padding, showing through below the
   band's background. That padding earns its place when the page ends in
   ordinary centred text — it keeps the text off the footer — but a band already
   carries its own internal padding, so here it is just a gap between two
   coloured areas. */
.page-content:has(> .alignfull:last-child),
.home-content:has(> .alignfull:last-child) {
    padding-bottom: 0;
}

/* =========================================
   Footer
   =========================================
   Dark bar, like the parent's, carrying the cooperation logos.

   The logos are the reason this needs care: both ACM marks are dark artwork on
   a transparent ground, so placed straight onto black the In-Cooperation
   wordmark and the SIGAI lettering all but vanish. Recolouring someone else's
   trademark is not an option, so each sits on its own white chip — the usual
   treatment for partner marks on a dark footer, and it keeps both exactly as
   their owners publish them. */
.site-footer {
    background: #000;
    color: #fff;
    padding: 3.5rem 0;
}

.site-footer__title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 2rem;
}

/* One white card holding both marks. The logos are published as dark artwork on
   transparency, so the card is what makes them legible on the black bar — and a
   single card rather than one each keeps them reading as one endorsement.
   inline-flex lets it hug its contents; the parent centres it. */
.site-footer__logos {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    margin: 0;
    padding: 1.25rem 2.25rem;
    list-style: none;
    background: #fff;
    border-radius: 10px;
}

.site-footer__logo a {
    display: grid;
    place-items: center;
    transition: opacity 0.2s;
}

.site-footer__logo a:hover {
    opacity: 0.7;
}

.site-footer__logo img {
    display: block;
    height: 52px;
    width: auto;
}

/* The SIGAI diamond carries far less ink than the In-Cooperation wordmark, so
   at a shared height it reads as the smaller of the two. Sized up to match its
   apparent weight rather than its measured height. */
.site-footer__logo--sigai img {
    height: 73px;
}

@media (max-width: 768px) {
    .site-footer {
        padding: 2.5rem 0;
    }

    .site-footer__logos {
        gap: 1.5rem;
        padding: 1rem 1.25rem;
    }

    .site-footer__logo img {
        height: 42px;
    }

    .site-footer__logo--sigai img {
        height: 59px;
    }
}

/* =========================================
   Buttons
   =========================================
   The parent's call-to-action is the IFAAMAS orange accent. A conference site
   keeps its own blue, so both the PHP pill (.btn--primary, the hero CTA) and
   the Gutenberg variant the converter tags (.btn-primary) are repointed
   together — they share the parent's rule and must not drift apart.

   Hover lifts to the logo blue rather than darkening: --conf-blue is already
   near the bottom of its range, so going darker barely reads. */
.btn--primary,
.wp-block-button.btn-primary > .wp-block-button__link {
    background: var(--conf-blue);
    border-color: var(--conf-blue);
    color: #fff;
}

.btn--primary:hover,
.wp-block-button.btn-primary > .wp-block-button__link:hover {
    background: var(--conf-blue-light);
    border-color: var(--conf-blue-light);
    color: #fff;
}

/* The unfilled variants carry the parent's older #0056B3; bring them along so
   nothing is left on a blue the rest of the site no longer uses.

   :not() is load-bearing, not decoration: the hero CTA is `btn btn--primary`,
   so both rules match it at equal specificity and whichever sits later in this
   file wins. Without the exclusion it painted blue text on the blue fill. */
.btn:not(.btn--primary),
.btn--outline {
    border-color: var(--conf-blue);
    color: var(--conf-blue);
}

.btn--outline:hover {
    background: var(--conf-blue);
    color: #fff;
}

/* =========================================
   Content typography
   ========================================= */
/* Headings sit on the same blue as the title band rather than the foundation's
   lighter #0056B3, which reads washed out at this size. Applied to every level,
   not just h2: section headings are h2 on some of these pages and h3 on others,
   so pinning one level would make the set inconsistent.

   The family is deliberately not set — headings already inherit Nunito from
   body, exactly like the body copy. */
.page-content :is(h1, h2, h3, h4, h5, h6),
.home-content :is(h1, h2, h3, h4, h5, h6) {
    color: var(--conf-blue);
}

/* A full scale, because the parent only ever sizes h2 (2.5rem) and leaves the
   rest on browser defaults. That left a cliff — 40px straight down to h3's
   18.7px — and, once h5 and h6 were sized here, an inversion: h5 at 18px above
   h4's default 16px. Every level is set so the steps stay in order. */
.page-content h2,
.home-content h2 {
    font-size: 2rem;
}

.page-content h3,
.home-content h3 {
    font-size: 1.5rem;
}

.page-content h4,
.home-content h4 {
    font-size: 1.25rem;
}

.page-content h5,
.home-content h5 {
    font-size: 1.125rem;
}

.page-content h6,
.home-content h6 {
    font-size: 1rem;
    line-height: 1.5;
}

/* Lists were flush with the body text: their padding-left is the column gutter
   every block gets, so it bought no indentation at all and the markers hung out
   to the left of the text edge.

   The indent rides on padding, not margin — the centring rules claim
   margin-left/right for `auto`. Which means a list that sits directly in the
   column has to carry the gutter *and* the step, while one nested inside
   another list or a column has no gutter to preserve and takes the step alone.

   Both selectors need two classes to outrank the gutter rule they are
   correcting (`.alignfull > .wp-block-group__inner-container > *`). */
.page-content > :is(ul, ol),
.home-content > :is(ul, ol),
.page-content .wp-block-group__inner-container > :is(ul, ol),
.home-content .wp-block-group__inner-container > :is(ul, ol) {
    padding-left: calc(var(--spacing) + 1.75rem);
}

.page-content :is(ul, ol) :is(ul, ol),
.home-content :is(ul, ol) :is(ul, ol),
.page-content .wp-block-column :is(ul, ol),
.home-content .wp-block-column :is(ul, ol) {
    padding-left: 1.75rem;
}

/* =========================================
   Photo grid (galleries)
   =========================================
   The composition from the foundation site's Previous Editions page: square
   photo cards on a rounded corner, the caption laid over a bottom gradient, and
   a slow zoom on hover.

   Applied to a plain core gallery rather than rebuilt as custom markup, so
   images are still added, reordered and captioned in the block editor the
   normal way — which is what a template cloned each year needs. That also means
   overriding WordPress's own flex layout for the block. */
.photo-grid.wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 2rem auto 0;
}

.photo-grid.wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image) {
    position: relative;
    display: block;
    /* WordPress's flex layout gives each item a percentage basis; in a grid the
       item has to fill its own column instead.

       The :not(#individual-image) on these selectors is not a filter — it is
       specificity. WordPress guards its own gallery widths with that exact
       pseudo-class, which lends them an ID's worth of weight, so no
       class-based selector can override them. Matching the trick is what makes
       these rules apply; without it the cards stayed at their intrinsic
       width. */
    width: 100%;
    flex-basis: auto;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
}

.photo-grid.wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.photo-grid.wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image):hover img {
    transform: scale(1.05);
}

.photo-grid.wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image) figcaption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
    padding: 1rem 1.1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: left;
    /* WordPress ships a translucent caption bar on cropped galleries. */
    text-shadow: none;
}

@media (max-width: 768px) {
    .photo-grid.wp-block-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .photo-grid.wp-block-gallery {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   People grid (committees)
   =========================================
   The same composition as the foundation site's /the-board/: a small circular
   photo beside the name rather than a large portrait above it. That is what
   keeps a 37-person committee list scannable — stacked full-width portraits
   ran to several screens.

   Built from core blocks so it stays editable, rather than the Kadence infobox
   /the-board/ happens to use: that block is a plugin dependency this install
   does not have and does not need. */
/* WordPress wraps a group block's children in .wp-block-group__inner-container,
   so the grid belongs on that wrapper — on the group itself the only child is
   the wrapper, and auto-fit would size it to one column. :has() covers the
   layout types where WordPress emits no wrapper at all. */
.people-grid > .wp-block-group__inner-container,
.people-grid:not(:has(> .wp-block-group__inner-container)) {
    display: grid;
    /* Three across, like /the-board/. auto-fit was tempting but stretches a
       two-person committee across the full measure, which reads as a gap
       rather than a pair. */
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem 2rem;
}

/* The parent gives every Group block 40px of vertical padding. That is what
   gives the full-width bands their breathing room, so it stays — but on a grid
   of cards it was padding both the grid and each card inside it. */
.people-grid,
.person {
    padding-top: 0;
    padding-bottom: 0;
}

.people-grid {
    margin-block: 1.5rem 2.5rem;
}

.person > .wp-block-group__inner-container,
.person:not(:has(> .wp-block-group__inner-container)) {
    display: grid;
    grid-template-columns: 80px 1fr;
    column-gap: 1.25rem;
    align-content: start;
}

/* The photo spans both text rows, so name and affiliation centre against it. */
.person__photo {
    grid-row: span 2;
    margin: 0;
}

.person__photo img {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* Most portraits are already square; cover keeps the handful that are not
       from distorting. */
    object-fit: cover;
    object-position: top center;
}

/* Qualified so it outranks the h4 size in the scale above — these names are
   h4s, but they are card labels rather than section headings. */
.page-content .person__name,
.home-content .person__name {
    grid-column: 2;
    align-self: end;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.person__affiliation {
    grid-column: 2;
    align-self: start;
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text);
}

/* WordPress's flow layout puts vertical margins between block children, which
   would push the grid items off their rows. */
.people-grid .wp-block-group__inner-container > *,
.people-grid > *,
.person > * {
    margin-block-start: 0;
}

@media (max-width: 1024px) {
    .people-grid > .wp-block-group__inner-container,
    .people-grid:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .people-grid > .wp-block-group__inner-container,
    .people-grid:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* =========================================
   Primary nav
   =========================================
   Conference menus carry far longer labels than the foundation site's
   ("Q&A for AAMAS 2027 Submission and Review Process"), and there are more of
   them, so the 20px/3.5rem treatment runs out of room beside the logo. */
.primary-nav > ul {
    gap: 2rem;
}

.primary-nav a {
    font-size: 14px;
}

.primary-nav .sub-menu a {
    font-size: 13px;
}

/* =========================================
   Image hero
   =========================================
   The parent's .hero is a fixed 780px box holding a video. Here the media is a
   still that has already been cropped to the exact framing we want, so the
   section takes the image's own aspect ratio instead — otherwise object-fit
   would re-crop it to fill 780px and the intended framing would only survive at
   one viewport width.

   --hero-ratio is set per page from the image's real dimensions (see
   template-parts/hero.php), so swapping the photo next year needs no CSS. */
.hero--image {
    /* width must be pinned: with only a ratio and a min-height to go on, the
       browser satisfies the ratio by growing the box sideways instead, which
       on a phone pushes the hero to ~1037px and scrolls the whole page. */
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--hero-ratio, 1880 / 834);
    padding: 7rem 0 3rem;
    /* Narrow viewports make the banner too short for the overlay text, so a
       floor takes over and object-fit re-crops from the centre. */
    min-height: 520px;
}

.hero__dates {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 auto 2rem;
    color: #fff;
}

@media (max-width: 768px) {
    .hero--image {
        padding: 3rem 0 2.5rem;
        min-height: 460px;
    }

    .hero__dates {
        font-size: 1.125rem;
    }

    .page-hero-solid {
        padding: 3rem 0 2.5rem;
    }

    /* The full-screen overlay follows the bar: white ground, dark type. The
       parent's version is dark blue with white type, which would leave the
       close button white-on-white against the bar it overlaps. */
    .primary-nav {
        background: #fff;
        /* Keep the parent's 6.5rem top padding: the overlay is fixed to
           inset:0, so it runs underneath the logo and close button, which float
           above it. Anything less and the first menu item lands on the logo. */
    }

    .primary-nav .sub-menu a {
        color: var(--color-muted);
    }

    body.nav-open .site-header {
        color: var(--color-primary);
    }
}