/* Shared palette and interaction rules for all page layouts. */
:root {
    color-scheme: light;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
    --inline-code-bg: #e0e0e0;
    --inline-code-text: #555;
    --primary: #c91927;
    --primary-hover: #a31320;
    --on-primary: #fff;
    --primary-light: rgba(201, 25, 39, 0.1);
    --dark: #1d3557;
    --light: #f8f9fa;
    --grey: #5d6a82;
    --grey-light: #e9ecef;
    --grey-dark: #495057;
    --shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    --transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

[data-theme="dark"] {
    color-scheme: dark;
    --inline-code-bg: #2d2d2d;
    --inline-code-text: #f0f6fc;
    --primary: #ff6b6b;
    --primary-hover: #ff8787;
    --on-primary: #1a1a1a;
    --primary-light: rgba(255, 107, 107, 0.15);
    --dark: #f8f9fa;
    --light: #1a1a1a;
    --grey: #a0a0a0;
    --grey-light: #2d2d2d;
    --grey-dark: #d0d0d0;
    --shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
}

::selection { background: var(--primary); color: var(--on-primary); }
input { caret-color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
main:focus { outline: none; }

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

.skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    transform: translateY(-200%);
    padding: 0.75rem 1rem;
    z-index: 2000;
    background: var(--dark);
    color: var(--light);
    border-radius: 4px;
}
.skip-link:focus { transform: translateY(0); }

h1, h2, h3 { overflow-wrap: anywhere; text-wrap: balance; }
p { text-wrap: pretty; }
.page-title { font-size: 2rem; line-height: 1.2; margin-bottom: 2rem; }
main, .profile-section, .info-right { min-width: 0; }
.social-icons { flex-wrap: wrap; justify-content: center; gap: clamp(0.25rem, 1.5vw, 1rem); max-width: 100%; }
.social-icons > a, .social-icons > button, .social-icons > .dropdown { flex-shrink: 0; }
.social-links { flex-wrap: wrap; }
.tag { display: inline-block; }
.dropdown-menu { max-width: calc(100vw - 2rem); }
a { text-underline-offset: 0.2em; }

@media (max-width: 360px) {
    nav ul { gap: 1rem; flex-wrap: wrap; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    :root { --transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear, opacity 0.1s linear; }
    .social-icons a:hover, .social-icon-button:hover, .value-card:hover,
    .contact-button:hover, .repository-card .repository-cta:hover { transform: none; }
    .dropdown-menu { transform: none; }
}

/* Keep reading and controls usable when the browser's text size is doubled. */
main { overflow-wrap: anywhere; }
main > *, .value-card, .value-header > *, .post-tags, .article-tags { min-width: 0; }
.tag, .tech-tag, .availability-notice, .contact-button { max-width: 100%; overflow-wrap: anywhere; }
.job-duration, .dropdown-menu a { white-space: normal; }
.profile-img, .profile-image { max-width: 100%; }
@media (max-width: 768px) {
    .contact-section { padding-inline: 0; }
    .value-header, .contact-button, .availability-notice { flex-wrap: wrap; }
}