/* Site-specific overrides applied after the theme stylesheet.
   Loaded unversioned (no .min suffix), so it reaches production as-is. */

/* -------------------------------------------
   1. Banner heights
   The theme sizes the home hero to 100vh and every inner banner to a
   fixed 550px — far too tall for a breadcrumb and a title. Size them
   to their content instead.
------------------------------------------- */
.mil-banner {
    height: auto;
    min-height: clamp(480px, 68vh, 680px);
    display: flex;
    align-items: center;
}

.mil-banner .mil-banner-content {
    width: 100%;
    height: auto;
    padding-top: 120px;
    padding-bottom: 60px;
}

.mil-banner-sm {
    height: auto;
    padding-top: 150px;
    padding-bottom: 56px;
}

@media screen and (max-width: 992px) {
    .mil-banner-sm {
        padding-top: 130px;
        padding-bottom: 48px;
    }
}

/* -------------------------------------------
   2. Typography
   Drop the cursive "Satisfy" script (dated) in favor of an italic of
   the display face, and make headings fluid instead of stepped.
------------------------------------------- */
.mil-font-3 {
    font-family: "Syne", sans-serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.01em;
}

h1, .mil-h1 {
    font-size: clamp(27px, 4.5vw, 54px);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Safety net: decorative absolutely-positioned elements and long
   unbreakable words (e.g. "MILLISECOND") must never cause a
   horizontal scrollbar. */
body {
    overflow-x: clip;
}

h2, .mil-h2 {
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h3.mil-up-font, .mil-h3.mil-up-font {
    font-size: clamp(24px, 2.6vw, 32px);
}

/* Body copy: slightly tighter leading than the theme's 170%. */
body {
    line-height: 1.6;
}

/* -------------------------------------------
   3. Color & contrast (WCAG AA)
   - Theme accent #f57c00 on white is ~2.6:1 — fails even for large
     text. Use a deeper orange on light backgrounds and a brighter one
     on dark backgrounds.
   - "Soft" text at 50% opacity fails contrast on both themes.
------------------------------------------- */
.mil-accent {
    color: #b85700; /* 4.77:1 on white */
}

.mil-dark-bg .mil-accent,
.mil-deep-bg .mil-accent,
.mil-gradient-bg .mil-accent,
.mil-banner .mil-accent,
footer .mil-accent,
.mil-top-panel-transparent .mil-accent {
    color: #ff9838; /* 8.3:1 on #121820 */
}

.mil-light-soft {
    color: rgba(255, 255, 255, 0.75);
}

.mil-dark-soft {
    color: rgba(18, 24, 32, 0.65);
}

/* -------------------------------------------
   4. Focus visibility
   The theme removes focus outlines on all inputs; restore a clear
   focus indicator everywhere, only for keyboard navigation.
------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #b85700 !important;
    outline-offset: 3px;
    border-radius: 2px;
}

.mil-dark-bg :focus-visible,
.mil-deep-bg :focus-visible,
.mil-gradient-bg :focus-visible,
footer :focus-visible,
.mil-banner :focus-visible {
    outline-color: #ff9838 !important;
}

/* -------------------------------------------
   5. Skip link
------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 1000;
    padding: 12px 20px;
    background: #121820;
    color: #fff;
    font-family: "Syne", sans-serif;
    font-weight: 600;
    border-radius: 4px;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 16px;
}

/* -------------------------------------------
   6. Mobile menu toggle is now a real <button>
------------------------------------------- */
button.mil-menu-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* -------------------------------------------
   6b. Keyboard equivalents for hover-only reveals
   Hero probe hotspots reveal their info window on hover only; mirror
   the theme's :hover rules for keyboard focus.
------------------------------------------- */
.mil-illustration-1 .mil-item .mil-plus:focus-within .mil-hover-window {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* The "+ Ping" caption is a control label, not a document section, so it
   is no longer an <h6>. The theme styled it by tag; carry those rules
   over to the class, for hover and keyboard focus alike. */
.mil-illustration-1 .mil-item .mil-plus .mil-item-hover .mil-hotspot-label {
    display: block;
    opacity: 0.8;
    transition: 0.2s cubic-bezier(0, 0, 0.3642, 1);
}

.mil-illustration-1 .mil-item .mil-plus:hover .mil-item-hover .mil-hotspot-label,
.mil-illustration-1 .mil-item .mil-plus:focus-within .mil-item-hover .mil-hotspot-label {
    opacity: 1;
    color: #ff9838;
}

/* -------------------------------------------
   6c. FAQ category tabs
   The theme hides the tab radios with display:none, which removes them
   from keyboard navigation. Visually hide them instead, and give the
   label a focus ring driven by the radio's focus state.
------------------------------------------- */
.mil-tabs input[type=radio] {
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.mil-tabs input[type=radio]:focus-visible + label {
    outline: 2px solid #b85700;
    outline-offset: 3px;
    border-radius: 2px;
}

/* -------------------------------------------
   7. Reduced motion
------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------------------------------
   7b. Error pages
   The big numeral is decoration, not the page's heading — the sentence
   below it is. It is aria-hidden, so it carries no weight for AT.
------------------------------------------- */
.mil-error-code {
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: clamp(72px, 14vw, 150px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: rgba(18, 24, 32, 0.13);
    margin-bottom: 10px;
}

/* -------------------------------------------
   7c. Blog
   The blog templates were written against a different build of this
   theme: .mil-inner-banner, .mil-blog-card*, .mil-scale-img and the
   .mil-animation-* decorations have no rules in style.css, so these
   pages arrived essentially unstyled. The banner now reuses the
   .mil-banner-sm pattern every other subpage uses; the rest is below.
------------------------------------------- */

/* Utilities replacing inline style= in the templates. */
.mil-measure {
    max-width: 640px;
}

.mil-logo-nav {
    width: 180px;
}

.mil-logo-footer {
    width: 140px;
}

.mil-tagline {
    font-style: italic;
    font-size: 14px;
}

/* Decorative ring placements. These were inline style= on every page;
   as classes they keep the markup clean and let the CSP drop
   style-src 'unsafe-inline' once the last <style> block goes too. */
.mil-deco-banner {
    top: 47%;
    right: 10%;
    transform: rotate(90deg);
}

.mil-deco-tr-10 { top: 0; right: 10%; }
.mil-deco-tr-20 { top: 0; right: 20%; }
.mil-deco-tr-25 { top: 0; right: 25%; }
.mil-deco-tl-15 { top: 0; left: 15%; }
.mil-deco-tl-25 { top: 0; left: 25%; }
.mil-deco-tl-30 { top: 0; left: 30%; }

.mil-deco-br-15 { bottom: 0; right: 15%; transform: rotate(180deg); }
.mil-deco-bl-10 { bottom: 0; left: 10%; transform: rotate(180deg); }
.mil-deco-bl-30 { bottom: 0; left: 30%; transform: rotate(180deg); }

/* Bulleted lists in the legal pages; the theme resets list styling. */
.mil-list-disc {
    list-style: disc;
    padding-left: 30px;
}

.mil-list-disc li {
    margin-bottom: 8px;
}

/* Toggled by the contact form's submit handler. */
.mil-hidden {
    display: none;
}

/* Spam honeypot: off-screen for sighted users, aria-hidden for the rest. */
.mil-honeypot {
    position: absolute;
    left: -9999px;
}

/* Flash messages on the auth pages. These were an inline style= built by a
   Jinja conditional, repeated in three templates. */
.mil-flash {
    padding: 14px 18px;
    border-left: 4px solid;
    border-radius: 0 4px 4px 0;
    font-size: 14.5px;
}

.mil-flash-danger {
    background: #fef2f2;
    border-left-color: #b3261e;
    color: #8c1d17;
}

.mil-flash-success {
    background: #f0fdf4;
    border-left-color: #1c7a4a;
    color: #145c37;
}

.mil-flash-warning {
    background: #fffbeb;
    border-left-color: #8a5a00;
    color: #6d4700;
}

.mil-flash-info {
    background: #eff6ff;
    border-left-color: #1d4ed8;
    color: #1e40af;
}

/* "Remember me" row on the login form. */
.mil-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mil-checkbox {
    width: 16px;
    height: 16px;
    flex: none;
}

.mil-checkbox-label {
    margin: 0;
    font-size: 14px;
    color: rgba(18, 24, 32, 0.75);
}

.mil-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Post cards --- */
.mil-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(18, 24, 32, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mil-blog-card:hover,
.mil-blog-card:focus-within {
    border-color: rgba(18, 24, 32, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(18, 24, 32, 0.08);
}

.mil-blog-card-cover {
    display: block;
    aspect-ratio: 16 / 9;
    background: #121820;
    overflow: hidden;
}

.mil-blog-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.mil-blog-card:hover .mil-blog-card-cover img {
    transform: scale(1.04);
}

/* Stand-in cover for a post with no featured image. Deliberately quiet —
   a grid of these should not outweigh the headlines. */
.mil-blog-card-cover:has(.mil-blog-card-placeholder) {
    aspect-ratio: 5 / 1;
    background: linear-gradient(135deg, rgba(184, 87, 0, 0.07), rgba(18, 24, 32, 0.05));
    border-bottom: 1px solid rgba(18, 24, 32, 0.07);
}

.mil-blog-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: "Syne", sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    color: rgba(18, 24, 32, 0.28);
}

.mil-blog-card-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 24px 24px;
}

.mil-blog-card-meta {
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(18, 24, 32, 0.6);
    margin-bottom: 10px;
}

.mil-blog-card-title {
    font-family: "Syne", sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

.mil-blog-card-title a {
    color: rgb(18, 24, 32);
}

.mil-blog-card-title a:hover {
    color: #b85700;
}

/* The whole card is clickable via the title link's stretched hit area,
   but the link text stays the accessible name. */
.mil-blog-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.mil-blog-card {
    position: relative;
}

.mil-blog-card-excerpt {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(18, 24, 32, 0.72);
    margin-bottom: 16px;
}

.mil-blog-card-more {
    margin-top: auto;
    font-family: "Syne", sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: #b85700;
}

.mil-blog-card-more::after {
    content: " →";
}

/* --- Tags --- */
.mil-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.mil-tag-list li {
    margin: 0;
}

.mil-tag-list a {
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 3px 10px;
    border: 1px solid rgba(18, 24, 32, 0.14);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(18, 24, 32, 0.7);
}

.mil-tag-list a:hover {
    border-color: #b85700;
    color: #b85700;
}

/* -------------------------------------------
   Copyable command (licence claim page)
   The command is the whole point of the page, so it gets the ink
   treatment used for code elsewhere, with the copy control attached
   rather than floating beside it.
------------------------------------------- */
.mil-copy-line {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 560px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(18, 24, 32, 0.12);
}

.mil-copy-line pre {
    flex: 1 1 auto;
    margin: 0;
    padding: 14px 18px;
    background: #121820;
    color: #e6e9ec;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: auto;
    /* Focusable so the command can be scrolled/selected by keyboard. */
    tab-size: 4;
}

.mil-copy-line pre code {
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
    background: none;
    padding: 0;
    color: inherit;
}

.mil-copy-btn {
    flex: 0 0 auto;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    background: #1b232e;
    color: #fff;
    font-family: "Syne", sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    padding: 0 20px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.mil-copy-btn:hover {
    background: #b85700;
}

.mil-copy-btn.is-copied {
    background: #1c7a4a;
    color: #fff;
}

.mil-copy-btn:focus-visible {
    outline: 2px solid #ff9838;
    outline-offset: -3px;
}

@media (max-width: 575.98px) {
    .mil-copy-line {
        flex-direction: column;
    }

    .mil-copy-btn {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding: 12px 20px;
    }
}

/* --- Tag filter notice --- */
.mil-tag-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: rgba(18, 24, 32, 0.04);
    border-radius: 8px;
}

.mil-tag-filter-label {
    margin: 0;
    font-size: 14px;
}

/* --- Empty state --- */
.mil-blog-empty {
    text-align: center;
    padding: 60px 20px;
    max-width: 520px;
    margin: 0 auto;
}

/* --- Pagination --- */
.mil-blog-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
}

.mil-blog-pagination a,
.mil-blog-pagination .mil-current {
    display: inline-block;
    min-width: 40px;
    padding: 8px 14px;
    text-align: center;
    border: 1px solid rgba(18, 24, 32, 0.14);
    border-radius: 6px;
    font-size: 14px;
    color: rgb(18, 24, 32);
}

.mil-blog-pagination a:hover {
    border-color: #b85700;
    color: #b85700;
}

.mil-blog-pagination .mil-current {
    background: #b85700;
    border-color: #b85700;
    color: #fff;
    font-weight: 600;
}

/* --- Post header --- */
.mil-post-title {
    font-size: clamp(26px, 3.4vw, 44px);
    line-height: 1.18;
    margin-bottom: 16px;
}

.mil-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13.5px;
    color: rgba(18, 24, 32, 0.66);
    margin-bottom: 16px;
}

/* --- Figures --- */
.mil-post-figure {
    margin: 0;
}

.mil-post-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.mil-post-figure figcaption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(18, 24, 32, 0.6);
    text-align: center;
}

.mil-post-section-title {
    font-size: 22px;
}

/* --- Post footer --- */
.mil-post-footer {
    border-top: 1px solid rgba(18, 24, 32, 0.1);
    padding-top: 30px;
    margin-bottom: 40px;
}

.mil-post-footer-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(18, 24, 32, 0.6);
    margin-bottom: 12px;
}

/* -------------------------------------------
   7d. Post body
   Editor-authored HTML. Same treatment the docs body gets: a readable
   measure, a real type scale, and tables/code that work with a keyboard.
------------------------------------------- */
.blog-content {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(18, 24, 32, 0.86);
}

.blog-content > p,
.blog-content > ul,
.blog-content > ol,
.blog-content > blockquote {
    max-width: 68ch;
}

.blog-content p {
    margin-bottom: 20px;
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
    font-family: "Syne", sans-serif;
    color: rgb(18, 24, 32);
    letter-spacing: -0.01em;
    scroll-margin-top: 100px;
}

.blog-content h2 {
    font-size: 25px;
    line-height: 1.25;
    margin: 42px 0 14px;
}

.blog-content h3 {
    font-size: 19px;
    line-height: 1.3;
    margin: 32px 0 12px;
}

.blog-content h4 {
    font-size: 16.5px;
    margin: 26px 0 10px;
}

.blog-content > :first-child {
    margin-top: 0;
}

.blog-content ul,
.blog-content ol {
    padding-left: 24px;
    margin-bottom: 20px;
}

.blog-content li {
    margin-bottom: 8px;
}

.blog-content a {
    color: #b85700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-content a:hover {
    color: #8f4400;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

.blog-content code {
    background: rgba(18, 24, 32, 0.06);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.88em;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.blog-content pre {
    background: #121820;
    color: #e6e9ec;
    padding: 18px 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 24px 0;
    font-size: 13.5px;
    line-height: 1.6;
}

.blog-content pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

.blog-content blockquote {
    border-left: 3px solid #b85700;
    background: rgba(184, 87, 0, 0.06);
    padding: 16px 22px;
    margin: 24px 0;
    border-radius: 0 8px 8px 0;
}

.blog-content blockquote > :last-child {
    margin-bottom: 0;
}

.blog-content hr {
    border: 0;
    border-top: 1px solid rgba(18, 24, 32, 0.12);
    margin: 36px 0;
}

/* Tables come out of the enrich() pass wrapped in .docs-scroll. */
.blog-content .docs-scroll {
    position: relative;
    overflow-x: auto;
    margin: 24px 0;
    border: 1px solid rgba(18, 24, 32, 0.11);
    border-radius: 8px;
}

.blog-content .docs-scroll:focus-visible,
.blog-content pre:focus-visible {
    outline: 2px solid #b85700;
    outline-offset: 2px;
}

.blog-content .docs-scroll > table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 14px;
}

.blog-content .docs-scroll > table th,
.blog-content .docs-scroll > table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(18, 24, 32, 0.09);
    text-align: left;
    vertical-align: top;
}

.blog-content .docs-scroll > table thead th {
    background: rgba(18, 24, 32, 0.035);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(18, 24, 32, 0.66);
    white-space: nowrap;
}

.blog-content .docs-scroll > table tbody tr:last-child td {
    border-bottom: 0;
}

/* The visually-hidden caption enrich() injects. */
.blog-content caption.trcr-sr-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------
   8. Existing fixes
------------------------------------------- */

/* The theme's heading-utility selector list has a ".mil-h12" typo, so
   .mil-h2/.mil-h3 only receive a font-size. Complete them so non-heading
   elements (e.g. prices) can carry heading styles without heading tags. */
.mil-h2,
.mil-h3 {
    font-family: "Syne", sans-serif;
    color: rgb(18, 24, 32);
    font-weight: 600;
    line-height: 140%;
}

/* Bundle titles ("REACHABILITY", "PERFORMANCE") must fit a 4-up price card;
   the theme's 42px heading gets clipped by .mil-hover-card's overflow:hidden. */
.mil-price-card h2,
.mil-price-card .mil-price-title {
    font-size: clamp(20px, 1.75vw, 30px);
}

/* Prices were demoted from h3 to p; keep the theme's baseline layout. */
.mil-price-card .mil-plan-price .mil-h3 {
    margin: 0 10px 0 0;
}