/* Base resets and typography */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: var(--font-body);
    color: var(--color-black);
    background-color: var(--color-bg);
    line-height: var(--leading-loose);
    font-size: var(--text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.lang-ta {
    --font-heading: var(--font-tamil);
    --font-body: var(--font-tamil);
}

/* Force Mukta Malar to always use font weight 300 */
body.lang-ta,
body.lang-ta h1,
body.lang-ta h2,
body.lang-ta h3,
body.lang-ta h4,
body.lang-ta h5,
body.lang-ta h6,
body.lang-ta p,
body.lang-ta a,
body.lang-ta li,
body.lang-ta span,
body.lang-ta button,
body.lang-ta input,
body.lang-ta textarea,
body.lang-ta label,
body.lang-ta strong,
body.lang-ta small,
body.lang-ta select,
body.lang-ta option,
.lang-ta .lang-selector__btn,
.lang-ta .lang-dropdown__link {
    font-weight: 300 !important;
}

[style*="font-family: var(--font-tamil)"],
[style*="font-family:var(--font-tamil)"] {
    font-weight: 300 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-dark);
    line-height: var(--leading-tight);
    font-weight: 400;
    /* Marcellus is best at 400 */
}

h1 {
    font-size: var(--text-5xl);
    letter-spacing: var(--tracking-tight);
}

h2 {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-tight);
}

h3 {
    font-size: var(--text-3xl);
    font-weight: 400;
    line-height: var(--leading-snug);
}

h4 {
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: var(--leading-snug);
}

/* Generic page content typography adjustments */
.entry-content h2 {
    font-size: clamp(1.5rem, 3vw, 1.75rem);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
}

.entry-content h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}

.entry-content h4 {
    font-size: clamp(1.1rem, 1.5vw, 1.25rem);
    margin-top: var(--space-6);
    margin-bottom: var(--space-4);
}

.entry-content ul,
.entry-content ol {
    margin-bottom: var(--space-6);
    padding-left: var(--space-6);
}

.entry-content li {
    margin-bottom: var(--space-2);
}

p {
    margin-bottom: var(--space-4);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary-dark);
}

img,
picture,
svg {
    max-width: 100%;
    display: block;
}

/* Accessibility Focus */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-150%);
    background: var(--color-primary);
    color: var(--color-white);
    padding: 8px;
    z-index: 1000;
    transition: transform 0.2s;
}

.skip-link:hover {
    color: var(--color-white);
}

.skip-link:focus {
    transform: translateY(0);
}