/* Extracted styles from index.html */

/* Page layout */
body {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
}

.font-item {
    border: 1px solid #ddd;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
}

/* Download button */
.download-btn {
    background: #0969da;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 6px;
    display: inline-block;
}

/* Webfont declarations (paths are relative to this CSS file) */
@font-face {
    font-family: 'Idiqlat ExtraLight';
    src: url('../../fonts/Idiqlat-Font/web/Idiqlat-ExtraLight.woff2') format('woff2'),
         url('../../fonts/Idiqlat-Font/web/Idiqlat-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Idiqlat Light';
    src: url('../../fonts/Idiqlat-Font/web/Idiqlat-Light.woff2') format('woff2'),
         url('../../fonts/Idiqlat-Font/web/Idiqlat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Idiqlat Regular';
    src: url('../../fonts/Idiqlat-Font/web/Idiqlat-Regular.woff2') format('woff2'),
         url('../../fonts/Idiqlat-Font/web/Idiqlat-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ramsina Regular';
    src: url('../../fonts/Ramsina-Font/web/Ramsina-Regular.woff2') format('woff2'),
         url('../../fonts/Ramsina-Font/web/Ramsina-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Paragraph defaults in font-item */
.font-item p {
    margin: 0 0 1rem 0;
    /* Syriac is right-to-left; ensure correct direction */
    direction: rtl;
    unicode-bidi: isolate;
    font-size: 1.05rem;
}

/* Per-font paragraph styles */
.idiqlat-extralight p { font-family: 'Idiqlat ExtraLight', system-ui, -apple-system, sans-serif; font-weight: 200; }
.idiqlat-light p      { font-family: 'Idiqlat Light', system-ui, -apple-system, sans-serif; font-weight: 300; }
.idiqlat-regular p    { font-family: 'Idiqlat Regular', system-ui, -apple-system, sans-serif; font-weight: 400; }
/* Increase Ramsina size by 50% to improve visual parity */
.ramsina-regular p    { font-family: 'Ramsina Regular', serif; font-weight: 400; font-size: 1.73rem; line-height: 1.45; }
.ramsina-regular h2   { font-size: 1.77rem; margin-top: 0; margin-bottom: 0.8rem; }

/* Intro styling */
.intro {
    background: #f8fafc; /* very light neutral */
    border: 1px solid #e6eef6;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    line-height: 1.45;
    font-size: 0.98rem;
}
.intro p { margin: 0 0 0.5rem 0; }
.intro p:last-child { margin-bottom: 0; }

/* Important download notice */
.notice {
    background: #fff8e6;            /* pale warm background */
    border-left: 4px solid #d9730d; /* orange accent */
    color: #0f1724;                 /* dark readable text */
    padding: 12px 16px;
    border-radius: 6px;
    margin: 12px 0 20px 0;
    font-size: 0.98rem;
    line-height: 1.3;
}
.notice strong { color: #0f1724; }
.notice a { color: #0969da; text-decoration: underline; }

.file-hint {
    display: block;
    margin-top: 10px;
    color: #6b7280;
    font-size: 0.9rem;
}

.meta {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #6b7280;
}
.meta a { color: #0969da; text-decoration: none; }
.meta a:hover { text-decoration: underline; }

/* Site tagline (under H1) */
.site-tagline {
    text-align: right;
    font-size: 0.9rem;
    color: #6b7280; /* muted text */
}

/* Family-level file block (shared across multiple weights)
   Use this when a set of files applies to more than one font in a family */
.family-meta {
    background: #f8fafc;
    border: 1px solid #e6eef6;
    padding: 12px;
    border-radius: 8px;
    margin: 16px 0;
}
.family-meta h3 { margin: 0 0 6px; font-size: 1.05rem; }
.family-meta .meta { margin: 0; color: #6b7280; }
.site-tagline a { color: #0969da; text-decoration: none; }
.site-tagline a:hover { text-decoration: underline; }

/* Footer styling */
footer.site-footer {
    margin-top: 32px;
    padding: 12px 16px;
    text-align: center;
    color: #6b7280; /* muted text */
    font-size: 0.9rem;
}
footer.site-footer a { color: #0969da; text-decoration: none; }
footer.site-footer a:hover { text-decoration: underline; }