/**
 * Magazine Shortcodes — front-end styles.
 *
 * Previously these lived in inline <style> blocks inside each shortcode, which
 * meant they only printed when a query returned rows — an empty result set
 * rendered completely unstyled. Colours are exposed as custom properties so a
 * child theme can restyle without editing this file.
 */

:root {
    --mag-accent: #0b74ff;
    --mag-accent-contrast: #ffffff;
    --mag-border: #e5e5e5;
    --mag-text: #222222;
    --mag-title: #111111;
    --mag-muted: #666666;
    --mag-surface: #ffffff;
}

/* ---------------------------------------------------------------
 * Filter bar
 * --------------------------------------------------------------- */
.mag-filters {
    margin: 0 0 24px;
    padding: 20px;
    background: var(--mag-surface);
    border: 1px solid var(--mag-border);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.mag-filters-heading {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--mag-title);
}

/* Auto-fit keeps the column count tied to the available width rather than a
   fixed breakpoint, so the bar reflows correctly inside a narrow column too. */
.mag-filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    align-items: end;
}

.mag-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mag-field-search {
    grid-column: 1 / -1;
}

.mag-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--mag-muted);
}

.mag-select,
.mag-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--mag-text);
    background: var(--mag-surface);
    border: 1px solid var(--mag-border);
    border-radius: 4px;
    box-sizing: border-box;
}

.mag-select:focus,
.mag-input:focus {
    outline: 2px solid var(--mag-accent);
    outline-offset: 1px;
    border-color: var(--mag-accent);
}

.mag-submit {
    width: 100%;
    padding: 11px 24px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mag-accent-contrast);
    background: var(--mag-accent);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.mag-submit:hover {
    opacity: 0.9;
}

/* ---------------------------------------------------------------
 * Active filter chips
 * --------------------------------------------------------------- */
.mag-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.mag-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
    text-decoration: none;
    color: var(--mag-text);
    background: #f5f5f5;
    border: 1px solid var(--mag-border);
    border-radius: 30px;
    transition: background 0.2s ease, color 0.2s ease;
}

.mag-chip:hover {
    background: var(--mag-accent);
    color: var(--mag-accent-contrast);
    border-color: transparent;
}

.mag-chip-x {
    font-size: 15px;
    line-height: 1;
}

.mag-chip-clear {
    font-weight: 700;
}

/* ---------------------------------------------------------------
 * Grid and cards
 * --------------------------------------------------------------- */
.magazine-grid-wrap {
    padding: 20px 10px 40px;
}

.magazine-count {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--mag-muted);
}

.magazine-grid {
    display: grid;
    grid-template-columns: repeat(var(--mag-columns, 3), minmax(0, 1fr));
    gap: 30px;
}

@media (max-width: 992px) {
    .magazine-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 576px) {
    .magazine-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .magazine-grid-wrap {
        padding: 16px 0 30px;
    }

    .mag-filters {
        padding: 16px;
    }

    .mag-filters-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* iOS Safari zooms the viewport when a focused control is under 16px and
       never zooms back out. */
    .mag-select,
    .mag-input {
        font-size: 16px;
    }
}

.mag-card {
    background: var(--mag-surface);
    border: 1px solid var(--mag-border);
    height: 100%;
    transition: 0.3s;
}

.mag-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.mag-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}

.mag-content {
    padding: 18px;
}

.mag-content h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 700;
}

.mag-content h3 a {
    text-decoration: none;
    color: var(--mag-title);
}

.mag-content h3 a:hover {
    color: var(--mag-accent);
}

.mag-author {
    margin-top: 10px;
    color: var(--mag-muted);
    font-size: 15px;
}

.mag-download {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    color: var(--mag-accent);
}

.magazine-empty {
    text-align: center;
    padding: 60px 0;
    color: var(--mag-muted);
    font-size: 16px;
}

.magazine-empty p {
    margin: 0 0 16px;
}

/* ---------------------------------------------------------------
 * Pagination
 * --------------------------------------------------------------- */
.magazine-pagination {
    margin-top: 40px;
    text-align: center;
}

.magazine-pagination a,
.magazine-pagination span {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 4px 8px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    text-decoration: none;
    color: var(--mag-text);
}

.magazine-pagination span.current {
    background: var(--mag-accent);
    color: var(--mag-accent-contrast);
    border-color: var(--mag-accent);
}

.magazine-pagination a:hover {
    background: #f2f2f2;
}

/* paginate_links() emits the gap as a plain span; it should not look like a
   clickable page. */
.magazine-pagination .dots {
    border-color: transparent;
}

/* ---------------------------------------------------------------
 * Carousel
 * --------------------------------------------------------------- */
/* Every arrow rule below is scoped to .magazine-carousel on purpose, and must
   stay that way. Swiper's own stylesheet targets .swiper-button-next/prev at the
   same single-class specificity and is enqueued after this file, so an unscoped
   rule here silently LOSES to it — which is how the buttons ended up 27px wide
   and still visible on mobile. The descendant selector outranks it regardless of
   load order.

   The gutters either side are what keep the arrows off the artwork. Swiper
   positions its buttons against the nearest positioned ancestor, which is this
   wrapper now that they sit outside .swiper. The class is doubled to outrank
   theme rules that might otherwise reset the padding. */
.magazine-carousel.magazine-carousel {
    --swiper-navigation-size: 44px;
    --swiper-navigation-sides-offset: 0px;
    position: relative;
    padding: 0 56px;
}

.magazine-swiper {
    /* Vertical only. Side padding here would be inside .swiper, which sizes its
       slides from the container width, so it would skew the slide maths. */
    padding: 10px 0 30px;
}

.magazine-carousel .swiper-button-next,
.magazine-carousel .swiper-button-prev {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    /* Swiper centres its buttons with a negative margin derived from
       --swiper-navigation-size. Overriding margin above cancels that, so the
       centring is redone here. */
    top: 50%;
    transform: translateY(-50%);
    color: var(--mag-text);
    background: var(--mag-surface);
    border: 1px solid var(--mag-border);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease, opacity 0.2s ease;
}

.magazine-carousel .swiper-button-next:hover,
.magazine-carousel .swiper-button-prev:hover {
    background: var(--mag-accent);
    color: var(--mag-accent-contrast);
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(11, 116, 255, 0.35);
}

.magazine-carousel .swiper-button-next:focus-visible,
.magazine-carousel .swiper-button-prev:focus-visible {
    outline: 2px solid var(--mag-accent);
    outline-offset: 2px;
}

/* The chevron. Swiper draws it from its own icon font at
   --swiper-navigation-size, which is far too big once the button is a circle. */
.magazine-carousel .swiper-button-next:after,
.magazine-carousel .swiper-button-prev:after {
    font-size: 15px;
    font-weight: 700;
}

/* At either end of the run. Both arrows stay on screen so the control never
   appears to vanish — the unusable one just reads as inactive. */
.magazine-carousel .swiper-button-next.swiper-button-disabled,
.magazine-carousel .swiper-button-prev.swiper-button-disabled {
    opacity: 1;
    color: #bbbbbb;
    background: var(--mag-surface);
    border-color: var(--mag-border);
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 991px) {
    .magazine-carousel.magazine-carousel {
        padding: 0 48px;
    }
}

/* Below this the gutters cost more than the arrows are worth — the covers are
   swipeable, so the arrows go and the full width goes to the artwork. */
@media (max-width: 575px) {
    .magazine-carousel.magazine-carousel {
        padding: 0;
    }

    .magazine-carousel .swiper-button-next,
    .magazine-carousel .swiper-button-prev {
        display: none;
    }
}