/*
 * A.Insiders shared UI polish (loaded on every page after the page's own styles).
 * Goal: consistent navigation, spacing, focus states and tap targets across the
 * homepage and tool pages without changing the dark/blue brand.
 */
:root {
    --ui-nav-h-mobile: 68px;
    --ui-focus: #93c5fd;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 96px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ---------- Navigation (all widths) ---------- */
#navbar {
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
}
#navbar .nav-container { box-sizing: border-box; width: 100%; }
#navbar .logo,
#navbar .brand { white-space: nowrap; }
#navbar .nav-links a,
#navbar .nav-menu a { white-space: nowrap; }

/* ---------- Focus states ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Emoji in gradient headings: show the real emoji instead of a gradient silhouette */
.h1-icon {
    -webkit-text-fill-color: initial;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    display: inline-block;
    margin-right: 0.15em;
}

/* Long e-mail addresses / URLs never push the page sideways */
.contact-link, a[href^="mailto:"] { overflow-wrap: anywhere; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    html { scroll-padding-top: calc(var(--ui-nav-h-mobile) + 16px); }

    #navbar,
    #navbar.scrolled {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    #navbar .nav-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        min-height: 44px;
    }
    #navbar .logo,
    #navbar .brand { font-size: 1.5rem; }
    #navbar .logo img,
    #navbar .brand-logo { height: 36px; }

    /* Hamburger: always visible, 44x44 tap target */
    #navbar .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin: 0 -10px 0 0;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 10px;
        cursor: pointer;
        position: relative;
        z-index: 1002;
        -webkit-tap-highlight-color: transparent;
    }
    #navbar .menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        margin: 0;
        border-radius: 2px;
        background: var(--text-light, #fff);
        transition: transform 0.25s ease, opacity 0.2s ease;
    }
    #navbar .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #navbar .menu-toggle.active span:nth-child(2) { opacity: 0; }
    #navbar .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Slide-in menu panel */
    #navbar .nav-links,
    #navbar .nav-menu {
        position: fixed;
        top: var(--ui-nav-h-mobile);
        left: 0;
        right: 0;
        width: 100%;
        height: calc(100vh - var(--ui-nav-h-mobile));
        height: calc(100dvh - var(--ui-nav-h-mobile));
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        margin: 0;
        padding: 0.75rem 1.25rem 2rem;
        list-style: none;
        background: #03050d;
        border-top: 1px solid var(--border-color, rgba(37, 99, 235, 0.4));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0.3s;
        z-index: 1001;
        box-sizing: border-box;
    }
    #navbar .nav-links.active,
    #navbar .nav-menu.active {
        transform: none;
        visibility: visible;
        left: 0;
    }
    #navbar .nav-links > li,
    #navbar .nav-menu > li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    #navbar .nav-links > li > a,
    #navbar .nav-menu > li > a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 0.75rem 0.25rem;
        font-size: 1.05rem;
        box-sizing: border-box;
    }
    #navbar .nav-links a::after,
    #navbar .nav-menu a::after { display: none; }

    /* Comfortable tap targets for form controls and buttons */
    button,
    select,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }
    footer a { display: inline-block; padding-top: 0.35rem; padding-bottom: 0.35rem; }

    /* Wide tables scroll inside their box instead of widening the page */
    .cookie-table,
    .policy-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Respect reduced-motion preferences */
@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;
    }
}

/* Desktop: the hamburger is never shown, and must not take part in the nav layout */
@media (min-width: 769px) {
    #navbar .menu-toggle { display: none; }
}

/* Skip link: hidden until focused with the keyboard */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 10000;
    padding: 0.75rem 1.1rem;
    border-radius: 10px;
    background: var(--primary, #2563eb);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }
#main-content { scroll-margin-top: 96px; }

/* Footers on every page get readable link colours (some pages had none) */
:where(footer a) { color: var(--primary-light, #60a5fa); }