/**
 * Base Reset and Typography
 * Normalized foundation styles for consistent cross-browser rendering
 */

/* Import shared hero styles FIRST so browsers load them reliably.
    Note: @import must appear before any non-@import rules to be honored.
    This ensures standard pages (e.g., /developers/) receive the large
    hero typography and overlays that match the reference design. */
@import url("/assets/css/pages/hero-shared.css");

/* Reset and normalize */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base typography */
html {
    font-size: 16px;
    line-height: var(--line-height-normal);
    scroll-behavior: smooth;
}

body {
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--dark-gray);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--qk-accent-blue);
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-xl);
}

h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-lg);
}

h3 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
}

h4 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
}

h5 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
}

h6 {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
}

/* Text elements */
p {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
}

a {
    color: var(--qk-accent-blue);
    text-decoration: none;
    transition: color var(--transition-normal);
}

a:hover {
    color: var(--qk-accent-orange);
}

.qkeydb-wordmark,
.qkey-wordmark,
.querykey-wordmark {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.qkeydb-wordmark__lead,
.qkey-wordmark__lead,
.querykey-wordmark__lead {
    color: var(--qk-accent-orange);
}

.qkeydb-wordmark__rest,
.qkey-wordmark__rest,
.querykey-wordmark__rest {
    color: var(--qk-accent-blue);
}

.qkeydb-wordmark__suffix {
    color: var(--qk-accent-blue);
}

a:focus {
    outline: 2px solid var(--qk-accent-blue);
    outline-offset: 2px;
}

/* Lists */
ul, ol {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-xl);
}

li {
    margin-bottom: var(--spacing-sm);
}

/* Code and preformatted text */
code {
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    font-family: var(--font-family-mono);
    font-size: 0.9em;
    background-color: var(--light-gray);
    padding: 0.125rem 0.25rem;
    border-radius: var(--border-radius-sm);
}

pre {
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    font-family: var(--font-family-mono);
    background-color: var(--light-gray);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    overflow-x: auto;
    margin: var(--spacing-md) 0;
}

pre code {
    background: none;
    padding: 0;
}

/* Images and media */
img {
    max-width: 100%;
    height: auto;
}

/* Form elements */
input,
button,
select,
textarea {
    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
    font-family: inherit;
    font-size: inherit;
}

/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus styles for accessibility */
:focus {
    outline: 2px solid var(--qk-accent-blue);
    outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Smooth scrolling for reduced motion users */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* (moved to the top of file; see note above) */

/* Close icon theming: make all close controls orange for visual consistency */
.qk-chat-close,
button.qk-close,
.suggest-close,
.wpv-close,
.p-case .modal-close {
    color: var(--qk-accent-orange) !important;
}

.qk-chat-close:hover,
.qk-chat-close:focus,
button.qk-close:hover,
button.qk-close:focus,
.suggest-close:hover,
.suggest-close:focus,
.wpv-close:hover,
.wpv-close:focus,
.p-case .modal-close:hover,
.p-case .modal-close:focus {
    color: var(--qk-accent-orange) !important;
}

/* Ensure chat widget panel respects hidden state across all page themes. */
.qk-chat-panel[hidden] {
    display: none !important;
}