/*
Theme Name: APPX Modern Refined
Theme URI: https://www.appx.com/
Description: A child theme of APPX Modern that changes presentation only.  Type renders the same in Chrome, Edge, Firefox, and Safari.  Support links are grouped by task, with icons.  One list of links replaces the page sidebar.  Arrows show whether a link leaves the site.  The newest update appears at the top of the home page.  The not-found page is an APPX Inquiry screen with similar pages and an option prompt.  The header logo is in the brand colors, APPX Blue and APPX Gray.  Activate APPX Modern to go back; no stored content changes.
Author: APPX Software, Inc.
Template: appx-modern
Version: 1.0.7
Requires at least: 7.1
Requires PHP: 8.5
Text Domain: appx-modern-refined
*/

/* ==========================================================================
   1. Fonts that render the same in every browser

   The parent names "ui-monospace" for its small labels, letter tiles, and
   checksums.  Only Safari knows that name.  Chrome, Edge, and Firefox
   skipped it and drew Times New Roman (where no fallback was listed) or
   Courier (where "monospace" was).  These stacks name real fonts for each
   system: SF Mono or Menlo on Macs, Consolas or Cascadia on Windows,
   Liberation or DejaVu on Linux.

   The text font keeps Avenir Next first, which every Mac and iPhone has,
   and adds Segoe UI Variable for Windows 11 and Roboto for Android.
   ========================================================================== */

:root {
    --font-sans: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Cascadia Mono", "Liberation Mono", "DejaVu Sans Mono", monospace;
    --focus-on-dark: #fbbf24;
    --urgent-line: #ecd5be;
}

body {
    font-family: var(--font-sans);
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* Things that really are code or file data stay in a fixed-width font. */
code,
kbd,
pre,
samp,
.filename,
.file-tag,
.checksum code,
.download-list small,
.resource-symbol {
    font-family: var(--font-mono);
}

.checksum > span {
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ==========================================================================
   2. Section labels

   Every section opened with a small label in spaced-out capitals in a
   typewriter font ("FROM THE TEAM", "THE FOUNDATION").  Repeated on every
   section, that look reads as a template.  The labels keep their words
   and their color, now in the text font and normal case.
   ========================================================================== */

.eyebrow,
.bold-kicker {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.architecture .diagram-title,
.bold-system-label,
.architecture .database-options-label,
.bold-system .bold-db-label {
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}

/* These labels are typed in capitals in the page content, so they are
   lowered here and given a capital first letter. */
.bold-product-index > a > span,
.bold-product-identity > span,
.bold-support-links > a > span {
    display: block;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: lowercase;
}

.bold-product-index > a > span::first-letter,
.bold-product-identity > span::first-letter,
.bold-support-links > a > span::first-letter {
    text-transform: uppercase;
}

/* ==========================================================================
   3. Numbers and markers that implied something untrue

   "01 02 03" on the products and "01 to 04" on the platform features
   suggested steps.  They are not steps.  The "+" before each capability
   looked like a control that expands, and it does not.
   ========================================================================== */

.product-card .product-index {
    display: none;
}

.bold-capabilities > div {
    grid-template-columns: minmax(0, 1fr);
}

.bold-capabilities > div > span {
    display: none;
}

.capability-strip span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--accent2);
    flex-shrink: 0;
}

/* ==========================================================================
   4. Support links, grouped by task (see inc/content-filters.php)

   The emergency registrations come first, in their own panel, because a
   customer whose system is down is the visitor in the biggest hurry.
   ========================================================================== */

.support-groups {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 44px 56px;
}

.support-group {
    min-width: 0;
}

.support-group.is-urgent {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px solid var(--urgent-line);
    border-left: 4px solid var(--warm);
    border-radius: 8px;
    padding: 22px 28px 4px;
}

.support-group-title {
    font-size: 20px;
    letter-spacing: -.02em;
    margin: 0 0 4px;
}

.support-group.is-urgent .support-group-title {
    color: var(--warm);
}

.support-group-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 36px;
}

.support-group.is-urgent .support-group-links,
.support-group.is-help .support-group-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-group .resource-link {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
}

.support-group.is-urgent .resource-link {
    border-bottom: 0;
}

.resource-icon {
    width: 24px;
    height: 24px;
    margin-top: 3px;
    color: var(--accent);
}

.support-group.is-urgent .resource-icon {
    color: var(--warm);
}

.support-group .resource-link h2,
.support-group .resource-link h3,
.support-group .resource-link h4 {
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 0 0 6px;
}

.support-group .resource-link:hover h2,
.support-group .resource-link:hover h3,
.support-group .resource-link:hover h4 {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.support-group .resource-link p {
    font-size: 16px;
    color: var(--muted);
    margin: 0;
}

/* Inside an ordinary page the column is narrower, so the groups stack. */
.page-content .support-groups {
    grid-template-columns: minmax(0, 1fr);
    margin: 10px 0 30px;
}

@media (max-width: 800px) {
    .support-groups {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .support-group.is-urgent .support-group-links,
    .support-group.is-help .support-group-links {
        grid-template-columns: minmax(0, 1fr);
    }

    .support-group.is-urgent {
        padding: 18px 20px 2px;
    }

    .support-group.is-urgent .resource-link + .resource-link {
        border-top: 1px solid var(--urgent-line);
    }
}

/* ==========================================================================
   5. Ordinary pages: one readable column and a help line
   ========================================================================== */

.page-layout.single-column {
    grid-template-columns: minmax(0, 1fr);
}

/* About 80 characters per line at the body size. */
.page-layout.single-column .page-content {
    max-width: 44rem;
}

/* No extra space above whatever opens a page, for example a heading that
   follows a removed repeat of the title. */
.page-content > :first-child {
    margin-top: 0;
}

.page-help {
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid #d2e1e5;
}

.page-help p {
    margin: 0;
    font-size: 16px;
    color: var(--muted);
}

.page-help a {
    white-space: nowrap;
}

.not-found-links {
    margin: 0 0 30px;
}

/* WordPress's search form, given the site's field and button look. */
.search-form {
    display: flex;
    gap: 10px;
    max-width: 32rem;
    margin: 0 0 30px;
}

.search-form label {
    flex: 1;
    min-width: 0;
}

.search-form .search-field {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    font-size: 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
}

/* The parent gives every input in the form "flex: 1", which made the button
   as wide as the field.  The button keeps its own width. */
.search-form .search-submit {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 10px 22px;
    font-size: 16px;
    font-weight: 650;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}

/* ==========================================================================
   6. Latest update line at the top of the home page
   ========================================================================== */

.latest-update {
    background: #fff;
    border-bottom: 1px solid #d2e1e5;
}

.latest-update-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 48px;
    font-size: 15px;
}

.latest-update-label {
    flex-shrink: 0;
    font-weight: 650;
    color: var(--accent);
}

.latest-update-link {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    padding: 10px 0;
    color: var(--ink);
    text-decoration: none;
}

.latest-update-link time {
    white-space: nowrap;
    color: var(--muted);
}

.latest-update-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.latest-update-link:hover .latest-update-title {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Inline (not inline-block) so the no-break space before it holds. */
.latest-update .link-arrow {
    display: inline;
    margin-left: 0;
}

@media (max-width: 600px) {
    .latest-update-inner {
        flex-wrap: wrap;
        gap: 0 12px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .latest-update-link {
        flex-wrap: wrap;
        gap: 2px 10px;
        padding: 4px 0;
    }

    .latest-update-title {
        white-space: normal;
    }
}

/* ==========================================================================
   7. Footer built from the shared link list
   ========================================================================== */

.footer-grid-refined {
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: 40px;
}

/* Column headings are h2 now, so the page outline stays in order. */
.site-footer h2 {
    color: #fff;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 16px;
}

/* Tall enough to tap: these were 19 pixels high, under the 24 pixel
   minimum in WCAG 2.2. */
.footer-contact a {
    display: inline-block;
    padding: 3px 0;
}

@media (max-width: 1050px) {
    .footer-grid-refined {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid-refined .footer-brand {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   8. Accessibility details
   ========================================================================== */

/* The amber focus ring is easy to see on white and hard to see on the dark
   teal bands, so those bands get a lighter amber. */
.site-footer :focus-visible,
.cta-section :focus-visible,
.bold-intro :focus-visible,
.bold-license :focus-visible {
    outline-color: var(--focus-on-dark);
}

/* The Bold headline's smallest size was 56 pixels, too wide for a 320
   pixel screen (and for any screen zoomed to 400 percent). */
@media (max-width: 380px) {
    .bold-intro h1 {
        font-size: 14.5vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   9. Link arrows (see inc/content-filters.php)
   ========================================================================== */

.link-arrow {
    display: inline-block;
    margin-left: .25em;
    text-decoration: none;
}

/* Download rows that open a page show an arrow where files show their type
   box, so a box always means a file and an arrow always means a page. */
.download-row .row-arrow {
    flex-shrink: 0;
    padding: 0 6px;
    font-size: 18px;
    line-height: 1;
    color: var(--accent);
}