/* This file overrides themes/hugo-cookbook/static/css/custom.css.
   The rules below the "theme rules" marker are copied from the theme so
   they aren't lost by shadowing it — keep them in sync if the theme changes. */

/* Bulma's .image.is-4by3 pins the <img> to width:100%;height:100% inside a
   fixed-ratio box but sets no object-fit, so photos are distorted to fit.
   Fit the whole photo inside the box instead, and give the leftover space a
   neutral backdrop. Covers the search-results cards, which are rendered by a
   theme partial we don't override. */
.card .image.is-4by3 {
    background-color: #f5f5f5;
}

.card .image.is-4by3 img {
    object-fit: contain;
}

/* Icons inlined by the "icon" shortcode. Sized in em so they track the text
   they sit next to, and nudged down to line up with the lowercase x-height. */
.social-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    margin-right: 0.4em;
}

/* --- theme rules --- */
li {
    padding-bottom: .5em;
    font-size: 20px;
}

/* Bulma stops collapsing the navbar into the burger at 1024px, but the logo,
   the links and the search box together need more room than that. Bulma's
   `flex-shrink: 0` means the row cannot tighten up, so the search box is
   pushed off the right edge. Fix: let the row shrink and have the search
   input give up the space, so every link stays visible and nothing clips.
   Deliberately nothing here resizes the logo — an earlier version shrank it
   below 1300px, which made it visibly change size when crossing that width. */
@media screen and (min-width: 1024px) {
    .navbar-menu {
        flex-shrink: 1;
        min-width: 0;
    }

    /* Flex children default to min-width:auto, which refuses to shrink below
       their content width. Unset it along the chain wrapping the search field
       so the input is what gives up space. Deliberately NOT applied to
       .navbar-start: letting that shrink makes the links clip instead. */
    .navbar-end,
    .navbar-end .navbar-item,
    .navbar-end .field,
    .navbar-end .control {
        min-width: 0;
    }

    /* Bulma also sets flex-shrink:0 on .navbar-item, so the item holding the
       search field kept its full width and spilled left over the links. */
    .navbar-end .navbar-item {
        flex-shrink: 1;
    }

    .navbar-end .control:has(#searchTerm) {
        flex: 1 1 auto;
    }

    #searchTerm {
        width: 100%;
        min-width: 5rem;
    }

    /* Keep links on one line as the row tightens. */
    .navbar-start .navbar-item {
        white-space: nowrap;
    }
}

/* A fediverse handle is one unbreakable token, so on a phone it pushed the
   page wider than the screen and produced a horizontal scrollbar. Let long
   links break instead. Kept as the full handle rather than shortened so it
   can still be copied and pasted into someone's own instance to follow. */
.content a {
    overflow-wrap: anywhere;
}

/* 20px list text is oversized on a phone and makes long lines wrap awkwardly. */
@media screen and (max-width: 480px) {
    li {
        font-size: 17px;
    }
}