/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/*
 * Quark 2 is built on Pico, which styles every element carrying
 *  role="button". The slider draws its arrows as a masked ::after
 *  centred by flex, but writes its buttons as <a role="button">, so
 *  Pico's a[role=button] rule outranks the slider's own .slider-nav
 *  on specificity and turns the flex box back into a block. The arrow
 *  then leaves the disc it belongs in and sits at the top of the
 *  track, which reads as an empty white circle. Naming the slider as
 *  well as the button restores the ordering...
 */
.swiffy-slider .slider-nav {
    display: flex;
    align-items: center;
}

/* The position indicators are written the same way, and lose their
 *  own box to the same rule... */
.swiffy-slider .slider-indicators > a {
    display: block;
}

/* The indicators are drawn white, which is meant for sitting over a
 *  photograph. Below the gallery they sit on the page itself, where
 *  white on white leaves the reader no idea how many images there
 *  are - so they take the text colour, and only go back to white
 *  where the page behind them is dark... */
.swiffy-slider .slider-indicators > a {
    background-color: #111111;
    opacity: 0.35;
}

.swiffy-slider .slider-indicators > a.active {
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    .swiffy-slider .slider-indicators > a {
        background-color: #ffffff;
    }
}

:root[data-theme="dark"] .swiffy-slider .slider-indicators > a {
    background-color: #ffffff;
}

:root[data-theme="light"] .swiffy-slider .slider-indicators > a {
    background-color: #111111;
}

/*
 * The quote form's module is the one section the theme does not wrap
 *  in a container, so it runs the full width of the window and drags
 *  every field out to the edges with it. Give it the bounds the rest
 *  of the page already keeps to...
 */
.modular-row.form {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 2rem;
}

/* Within that, a form is not prose: a field wide enough to hold a
 *  whole screen is harder to fill in, not easier, and the eye loses
 *  which label belongs to which box... */
.modular-row.form .form-wrapper {
    max-width: 40rem;
    margin-inline: auto;
}

/* The footer's two lines: the notice, then the links under it... */
#footer .footer-links a + a {
    margin-left: 1.5rem;
}

/* The application icon in the navigation bar. The theme sizes it to
 *  28px, at which the artwork inside collapses and only its dark
 *  rounded outline survives - which is what made it read as a plain
 *  black square. Large enough here to be recognisable as itself... */
.navbar-brand img,
.navbar-brand svg {
    height: 2.5rem;
    width: auto;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/*
 * The typeface Apple sets its own site in is San Francisco, which is
 *  licensed for their platforms rather than for serving to visitors,
 *  so it cannot simply be downloaded here. Asking for it by the names
 *  the operating system answers to gets the real thing on Apple
 *  hardware and the closest local equivalent everywhere else. The
 *  theme listed Inter ahead of that, which had the effect of hiding
 *  San Francisco from the very machines that have it...
 */
body,
button,
input,
select,
textarea {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Sections carried 96px of padding at each end, so nearly two hundred
 *  between one and the next. A third of that still separates them... */
main section.section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Headings on the lander are centred, the opening one included. The
 *  quote form is a modular-row rather than a section, which is why
 *  naming only the sections left its heading behind. Scoped to the
 *  body class the modular page sets, so the ordinary pages keep
 *  their headings where they are... */
body.title-h1h2 main :is(h1, h2, h3) {
    text-align: center;
}

/* The theme rules a short bar above every h2, which between sections
 *  reads as a stray dash rather than as decoration... */
body.title-h1h2 main h2::before {
    display: none;
}

/* The application icon beside the opening heading. The text module
 *  already places a page's first image in a column of its own, so
 *  this only has to size it. The theme rings every image in a border
 *  and a shadow, which frames an icon that already has edges of its
 *  own inside a second square... */
.modular-text .column img {
    max-width: 6rem;
    height: auto;
    margin-inline: auto;
    display: block;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Feature names are set in small caps by the theme, which shouts a
 *  little and makes the longer ones hard to scan... */
.modular-features .feature-icon h6 {
    text-transform: none;
    font-size: 1rem;
}

/* The icons were all the same near-black. Colour distinguishes one
 *  feature from the next at a glance; the cycle repeats down the
 *  list rather than needing a colour named against every entry... */
.modular-features .feature-icon i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.modular-features .column:nth-child(6n + 1) .feature-icon i { color: #2d7ff9; }
.modular-features .column:nth-child(6n + 2) .feature-icon i { color: #e8710a; }
.modular-features .column:nth-child(6n + 3) .feature-icon i { color: #12a150; }
.modular-features .column:nth-child(6n + 4) .feature-icon i { color: #8428df; }
.modular-features .column:nth-child(6n + 5) .feature-icon i { color: #d81b60; }
.modular-features .column:nth-child(6n)     .feature-icon i { color: #0aa2c0; }

/*
 * The download page: one tile per platform, side by side, each a
 *  logo above the name with the size beneath it. It wraps to fewer
 *  columns on a narrow screen rather than scrolling sideways...
 */
.download-row {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
}

/* The theme marks list items with a bullet of its own drawn in a
 *  ::before rather than with a list marker, so clearing the marker
 *  on the list alone left a row of dots between the platforms... */
.download-row li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.download-row li::before,
.download-row li::marker {
    content: none;
    display: none;
}

.download-row a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    min-width: 9rem;
}

.download-row a:hover,
.download-row a:focus-visible {
    background-color: rgba(127, 127, 127, 0.12);
}

/* The logos are supplied at different proportions, so they are held
 *  to a common height rather than a common width and the row sits on
 *  one line. The theme's image border is dropped here too... */
.download-row img {
    height: 4.5rem;
    width: auto;
    max-width: 5.5rem;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0.25rem;
}

.download-row .platform-name {
    font-weight: 600;
}

.download-row .platform-size {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* The call to action between the reasoning and the feature list... */
.try-button {
    text-align: center;
    margin-top: 1rem;
}

/*
 * The two modules below name themselves with a class in their own
 *  front matter, which the text template passes onto the section.
 *  That survives either of them being retitled, where keying off the
 *  generated anchor id would not...
 */

/* The line under the opening heading is its subtitle and belongs
 *  with it rather than ranged left beneath a centred title. The
 *  heading and the line below it sat flush against one another, so
 *  they are parted by exactly one line of the subtitle's own
 *  leading rather than by a round number that happens to look
 *  close... */
.modular-text.intro p {
    text-align: center;
    margin-top: 1.7em;
}

/* Several paragraphs of argument at body size are a wall. A little
 *  larger is easier to stay with... */
.modular-text.why p {
    font-size: 1.15rem;
    line-height: 1.7;
}

/* Twice the size, in both the lettering and the space around it... */
.try-button a {
    font-size: 2rem;
    padding: 1.5rem 2rem;
}

/* The form's buttons sit in a flex row that starts at the left
 *  edge, so centring the text inside the button would not have
 *  moved it... */
.modular-row.form .button-wrapper {
    justify-content: center;
}

/* The confirmation stands where the form was, in a column the form
 *  filled; left ranged it reads as a stray sentence... */
.form-sent {
    text-align: center;
}

/* Testimonials.
 *
 * These belong to templates/modular/testimonials.html.twig and are
 * here rather than in it because a template can only add to the page's
 * assets while it runs, and Grav serves the page from its cache: on a
 * cache hit the template never executes, so styling it had added is
 * missing while the markup it produced is served anyway. The section
 * then looks correct for one request after the cache is cleared and
 * unstyled thereafter... */

/* Narrower than the page, so a quotation is not one long thin line */
.modular-testimonials .testimonial-slider {
    max-width: 54rem;
    margin-inline: auto;
}

/* Each slide is a full-width box; the testimonial is centred in it */
.modular-testimonials .slider-container > li {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The padding keeps the text clear of the arrows at either edge... */
.testimonial {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0 3.5rem;
    text-align: left;
}

/* The basis as well as the width, or a long quotation squeezes the
 *  portrait into an oval. The circle is a mask laid over a square
 *  image Grav has already cut to size... */
.testimonial-portrait {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 0;
    box-shadow: none;
}

/* Pico gives a blockquote a rule down its left side and an indent,
 *  which reads as a pull quote inside what is already a quotation... */
.testimonial-body blockquote {
    margin: 0 0 .85rem;
    padding: 0;
    border: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    font-style: italic;
}

.testimonial-body figcaption {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.testimonial-name {
    font-weight: 600;
}

/* Subordinate to the name it sits under, without being faint... */
.testimonial-title {
    font-size: .9rem;
    opacity: .75;
}

.modular-testimonials .slider-indicators {
    margin-top: 1rem;
}

/* A 120px portrait beside a column of text leaves the text too narrow
 *  to read on a telephone, so the two stack and centre instead... */
@media (max-width: 40rem) {

    .testimonial {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
        padding: 0 2.5rem;
    }

    .testimonial-body figcaption {
        align-items: center;
    }
}

/* The version and date, which sit beneath the three platform tiles as
 *  a caption to them rather than as a heading above. Centred under the
 *  row, which is itself centred; the margin is what separates it from
 *  the tiles, whose own spacing comes from the row above... */
.download-release {
    text-align: center;
    margin-top: 1.5rem;
}