/* ==========================================================================
   AIny Theme — Base: Reset, Design Tokens, Typography
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
    /* === COLORS === */
    --c-primary:        #294D8C;
    --c-primary-light:  #3A62A8;
    --c-primary-dark:   #1D3570;
    --c-primary-xl:     #EEF2FA;
    --c-primary-ll:     #D6E4FF;

    --c-accent:         #FF1100;
    --c-accent-light:   #FF3C2E;
    --c-accent-xl:      #FFF0EF;

    --c-success:        #1A7A4A;
    --c-success-bg:     #E8F5EE;
    --c-warning:        #D97706;
    --c-warning-bg:     #FEF3E2;
    --c-error:          #DC2626;
    --c-error-bg:       #FEE2E2;
    --c-info:           #2563EB;
    --c-info-bg:        #EFF6FF;

    --c-text:           #1A2530;
    --c-text-muted:     #5A6A7A;
    --c-text-subtle:    #8A98A8;
    --c-text-inverse:   #FFFFFF;
    --c-bg:             #FDF6EC;
    --c-bg-alt:         #FFFFFF;
    --c-bg-subtle:      #F7F3EA;
    --c-border:         #E8EFF8;
    --c-border-strong:  #C9D6E8;
    --c-overlay:        rgba(26, 37, 48, 0.5);

    /* === TYPOGRAPHY === */
    --font-display: 'Syne', Georgia, serif;
    --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', Consolas, monospace;

    --fs-xs:    0.75rem;
    --fs-sm:    0.875rem;
    --fs-base:  1rem;
    --fs-lg:    1.125rem;
    --fs-xl:    1.25rem;
    --fs-2xl:   1.5rem;
    --fs-3xl:   2rem;
    --fs-4xl:   2.5rem;
    --fs-5xl:   3rem;
    --fs-6xl:   4rem;

    --lh-tight:   1.1;
    --lh-snug:    1.3;
    --lh-normal:  1.5;
    --lh-relaxed: 1.7;
    --lh-loose:   1.9;

    --fw-normal:    400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    /* Per-heading colors — set by Customizer, empty = fall back to --c-text */
    --c-h1: ;
    --c-h2: ;
    --c-h3: ;
    --c-h4: ;
    --c-h5: ;
    --c-h6: ;

    /* === SPACING === */
    --s-1:  0.25rem;
    --s-2:  0.5rem;
    --s-3:  0.75rem;
    --s-4:  1rem;
    --s-5:  1.5rem;
    --s-6:  2rem;
    --s-7:  2.5rem;
    --s-8:  3rem;
    --s-9:  4rem;
    --s-10: 5rem;
    --s-11: 6rem;
    --s-12: 8rem;

    /* === LAYOUT === */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1200px;
    --container-2xl: 1440px;
    --container-pad: 1rem;

    /* === RADIUS === */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-xl:   24px;
    --radius-pill: 9999px;

    /* === SHADOWS === */
    --shadow-xs: 0 1px 2px rgba(41, 77, 140, 0.05);
    --shadow-sm: 0 1px 4px rgba(41, 77, 140, 0.08);
    --shadow-md: 0 4px 12px rgba(41, 77, 140, 0.10);
    --shadow-lg: 0 10px 32px rgba(41, 77, 140, 0.12);
    --shadow-xl: 0 20px 60px rgba(41, 77, 140, 0.15);
    --shadow-glow: 0 0 0 4px rgba(41, 77, 140, 0.15);

    /* === TRANSITIONS === */
    --t-fast:   150ms ease;
    --t-base:   250ms ease;
    --t-slow:   400ms ease;
    --t-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === LAYOUT DIMENSIONS === */
    --header-height: 64px;

    /* === Z-INDEX === */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-whatsapp: 350;
    --z-modal:    400;
    --z-toast:    500;
    --z-tooltip:  600;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body, var(--lh-relaxed));
    letter-spacing: var(--ls-body, 0);
    color: var(--c-text);
    background-color: var(--c-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

ul, ol {
    list-style: none;
}

a {
    color: var(--c-link, var(--c-primary));
    text-decoration: none;
}

a:hover {
    color: var(--c-link-hover, var(--c-primary-dark));
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Typography Scale
   -------------------------------------------------------------------------- */
h1, .h1 {
    font-family: var(--ff-h1, var(--font-display));
    font-size: var(--fs-h1, clamp(2.25rem, 1.82rem + 1.85vw, 3rem));
    font-weight: var(--fw-h1, var(--fw-extrabold));
    line-height: var(--lh-h1, 1.2);
    letter-spacing: var(--ls-h1, -0.02em);
    color: var(--c-h1, var(--c-text));
    padding-bottom: 0.05em;
}

h2, .h2 {
    font-family: var(--ff-h2, var(--font-display));
    font-size: var(--fs-h2, clamp(2rem, 1.71rem + 1.23vw, 2.5rem));
    font-weight: var(--fw-h2, var(--fw-bold));
    line-height: var(--lh-h2, 1.2);
    letter-spacing: var(--ls-h2, -0.01em);
    color: var(--c-h2, var(--c-text));
    padding-bottom: 0.05em;
}

h3, .h3 {
    font-family: var(--ff-h3, var(--font-display));
    font-size: var(--fs-h3, clamp(1.7rem, 1.51rem + 0.77vw, 2rem));
    font-weight: var(--fw-h3, var(--fw-bold));
    line-height: var(--lh-h3, 1.3);
    letter-spacing: var(--ls-h3, 0);
    color: var(--c-h3, var(--c-text));
    padding-bottom: 0.05em;
}

h4, .h4 {
    font-family: var(--ff-h4, var(--font-body));
    font-size: var(--fs-h4, clamp(1.32rem, 1.20rem + 0.46vw, 1.5rem));
    font-weight: var(--fw-h4, var(--fw-bold));
    line-height: var(--lh-h4, 1.3);
    letter-spacing: var(--ls-h4, 0);
    color: var(--c-h4, var(--c-text));
}

h5, .h5 {
    font-family: var(--ff-h5, var(--font-body));
    font-size: var(--fs-h5, var(--fs-xl));
    font-weight: var(--fw-h5, var(--fw-semibold));
    line-height: var(--lh-h5, 1.4);
    letter-spacing: var(--ls-h5, 0);
    color: var(--c-h5, var(--c-text));
}

h6, .h6 {
    font-family: var(--ff-h6, var(--font-body));
    font-size: var(--fs-h6, var(--fs-lg));
    font-weight: var(--fw-h6, var(--fw-semibold));
    line-height: var(--lh-h6, 1.5);
    letter-spacing: var(--ls-h6, 0);
    color: var(--c-h6, var(--c-text));
}

p {
    line-height: var(--lh-relaxed);
    color: var(--c-text);
}

li {
    line-height: var(--lh-relaxed);
}

small, .text-sm {
    font-size: var(--fs-sm);
}

strong, b {
    font-weight: var(--fw-bold);
}

em, i {
    font-style: italic;
}

code, pre, kbd {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

pre {
    overflow-x: auto;
    padding: var(--s-4);
    background: var(--c-bg-subtle);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    line-height: var(--lh-relaxed);
}

code {
    background: var(--c-bg-subtle);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-xs);
    border: 1px solid var(--c-border);
}

pre code {
    background: none;
    padding: 0;
    border: none;
    border-radius: 0;
}

blockquote {
    border-left: 4px solid var(--c-primary);
    padding: var(--s-4) var(--s-5);
    background: var(--c-primary-xl);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    color: var(--c-text-muted);
}

blockquote p {
    color: inherit;
}

hr {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: var(--s-6) 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    border-bottom: 1px solid var(--c-border);
}

th {
    font-weight: var(--fw-semibold);
    background: var(--c-bg-subtle);
}

/* --------------------------------------------------------------------------
   Content Typography (for post/page content areas)
   -------------------------------------------------------------------------- */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-top: var(--s-7);
    margin-bottom: var(--s-4);
}

.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child {
    margin-top: 0;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote,
.entry-content pre,
.entry-content table {
    margin-bottom: var(--s-5);
}

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

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content ul li,
.entry-content ol li {
    margin-bottom: var(--s-2);
}

.entry-content img {
    border-radius: var(--radius-md);
    margin: var(--s-5) 0;
}

.entry-content a {
    color: var(--c-link, var(--c-primary));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.entry-content a:hover {
    color: var(--c-link-hover, var(--c-primary-dark));
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--c-bg-alt);
    border-radius: var(--radius-sm);
    clip: auto !important;
    clip-path: none;
    color: var(--c-text);
    display: block;
    font-weight: var(--fw-bold);
    height: auto;
    left: var(--s-4);
    padding: var(--s-3) var(--s-5);
    top: var(--s-4);
    width: auto;
    z-index: var(--z-tooltip);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   WordPress Core Classes
   -------------------------------------------------------------------------- */
.alignleft  { float: left; margin-right: var(--s-5); margin-bottom: var(--s-4); }
.alignright { float: right; margin-left: var(--s-5); margin-bottom: var(--s-4); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: var(--s-4); }
.alignwide  { max-width: var(--container-2xl); margin-left: auto; margin-right: auto; }
.alignfull  { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--s-2); text-align: center; }

/* Gallery */
.gallery { display: grid; gap: var(--s-3); }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }

/* --------------------------------------------------------------------------
   Mobile Fixes
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Table responsive scroll */
    .entry-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Gallery: reduce to max 2 columns and smaller gap on mobile */
    .gallery-columns-3,
    .gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
    .gallery { gap: var(--s-2); }
}