/*
Theme Name: Indyo Folio
Theme URI: https://indianyoga.org/
Author: Adapted from the IJTK "Folio" design system
Description: A clean, scholarly journal theme for the International Journal of Yoga & Allied Sciences. Ports the "Folio" design system (saffron/maroon palette, Fraunces/Spectral/IBM Plex typography, utility bar, tabbed navigation, hero with feature cards and folio-row listings) from the Indian Journal of Traditional Knowledge project to WordPress.
Version: 1.4.0
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: indyo-folio
*/

/* ============================================================
   "Folio" design system — International Journal of Yoga & Allied Sciences
   Ported from the Indian Journal of Traditional Knowledge (Laravel) project.
   ============================================================ */
:root {
    /* Neutrals (fixed design tokens) */
    --ink: #1C1B18;
    --ink-soft: #57534A;
    --ink-faint: #8A857A;
    --paper: #F7F4ED;
    --surface: #FFFFFF;
    --line: #E6E1D5;
    --line-strong: #D6CFBE;

    /* Brand — matched to Indian Journal of Traditional Knowledge (IJTK) */
    --brand: #1a5680;       /* navy — active nav, primary card, links */
    --brand-dark: #13405c;  /* deep navy — utility bar + footer */
    --accent: #059669;      /* emerald green — CTA + rules */
    --slate: #56616B;       /* muted nav text */
    --brand-tint: rgba(26, 86, 128, 0.08);  /* hover wash */

    /* Typefaces */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-serif: "Spectral", Georgia, serif;
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

    --wrap: 1120px;
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
img { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; }
ul { margin: 0; padding: 0; }

.wrap { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; width: 100%; }

/* Typography roles */
.font-display { font-family: var(--font-display); font-optical-sizing: auto; letter-spacing: -0.01em; }
.font-reading { font-family: var(--font-serif); }
.eyebrow {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-faint);
}

/* The marigold rule — the one recurring accent */
.ij-rule { height: 3px; width: 56px; background: var(--accent); border: 0; margin: 1rem 0; }

/* Cards */
.ij-card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }

/* ---- Utility bar ---- */
.utility-bar { background: var(--brand-dark); color: rgba(255,255,255,0.82); font-size: 0.8rem; }
.utility-bar .wrap { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; height: 36px; }
.utility-bar a, .utility-bar button {
    color: rgba(255,255,255,0.82);
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit;
}
.utility-bar a:hover, .utility-bar button:hover { color: #fff; }

/* ---- White header with logo ---- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.site-header .wrap { padding-top: 20px; padding-bottom: 20px; }
.brand-row { display: flex; align-items: center; gap: 20px; }
.brand-row img { height: 64px; width: auto; object-fit: contain; flex-shrink: 0; }
.header-title { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.01em; font-size: 2.05rem; font-weight: 600; line-height: 1.05; }
.header-sub { margin-top: 6px; font-size: 0.78rem; letter-spacing: 0.02em; color: var(--ink-soft); }

/* ---- Tabbed nav ---- */
.navbar {
    background: linear-gradient(180deg, #F6F3EC 0%, #ECE7DC 100%);
    border-top: 1px solid #fff;
    border-bottom: 1px solid var(--line-strong);
}
.navbar .wrap { display: flex; flex-wrap: nowrap; align-items: stretch; padding-left: 8px; padding-right: 8px; }
.navbar ul { list-style: none; display: flex; flex-wrap: nowrap; align-items: stretch; }
.navbar li { position: relative; }
.nav-tab, .navbar a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 13px 11px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--slate);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar a:hover, .nav-tab:hover { color: var(--brand); background: var(--brand-tint); }
.navbar .current-menu-item > a,
.navbar .current_page_item > a,
.navbar .current-menu-ancestor > a,
.nav-tab.is-active { background: var(--brand); color: #fff; }

/* Sub-menus (dropdowns) */
.navbar li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 220px;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
    padding: 4px 0;
}
.navbar li:hover > ul { display: flex; }
.navbar li ul li a {
    padding: 10px 16px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
    background: none;
}
.navbar li ul li a:hover { background: var(--paper); color: var(--brand); }
.nav-search { margin-left: auto; }

/* ---- Hero ---- */
.hero {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    background: linear-gradient(115deg, var(--brand-dark) 0%, var(--brand) 100%);
    background-size: cover;
    background-position: center;
    color: #fff;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20,10,5,0.62) 0%, rgba(20,10,5,0.18) 70%);
}
.hero > * { position: relative; z-index: 1; }
.hero .wrap { padding-top: 64px; padding-bottom: 64px; }
.hero .eyebrow { color: rgba(255,255,255,0.8); }
.hero-title { font-family: var(--font-display); font-weight: 600; line-height: 1.08; font-size: 2.6rem; max-width: 42rem; margin-top: 8px; }
.hero-lead { margin-top: 12px; max-width: 36rem; font-family: var(--font-serif); font-size: 1.05rem; color: rgba(255,255,255,0.9); }

/* ---- Slider (home banner, replaces hero) ---- */
.iy-slider { position: relative; width: 100%; background: var(--brand-dark); }
.iy-slides { position: relative; aspect-ratio: 1600 / 318; overflow: hidden; }
.iy-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.6s ease; }
.iy-slide.is-active { opacity: 1; }
.iy-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Text overlay on the slider (mirrors the IJTK hero) */
.iy-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; pointer-events: none; }
.iy-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 38, 56, 0.88) 0%, rgba(12, 38, 56, 0.55) 42%, rgba(12, 38, 56, 0.12) 72%, rgba(12, 38, 56, 0) 100%);
}
.iy-overlay .wrap { position: relative; z-index: 1; color: #fff; }
.iy-overlay .eyebrow { color: rgba(255, 255, 255, 0.82); }
.iy-overlay .hero-title { font-family: var(--font-display); font-weight: 600; line-height: 1.08; font-size: 2.6rem; max-width: 42rem; margin-top: 8px; color: #fff; }
.iy-overlay .hero-lead { margin-top: 12px; max-width: 34rem; font-family: var(--font-serif); font-size: 1.05rem; color: rgba(255, 255, 255, 0.92); }

@media (max-width: 640px) {
    .iy-slides { aspect-ratio: 16 / 9; }
    .iy-overlay .hero-title { font-size: 1.7rem; }
    .iy-overlay .hero-lead { font-size: 0.95rem; }
    .iy-overlay::before { background: linear-gradient(90deg, rgba(12, 38, 56, 0.9) 0%, rgba(12, 38, 56, 0.6) 100%); }
}

/* ---- Feature cards ---- */
.feature-strip { margin-top: -32px; position: relative; z-index: 10; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 16px 18px;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.feature-card .fc-label { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.feature-card .fc-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--brand); margin-top: 2px; }
.feature-card.is-primary { background: var(--brand); border-color: var(--brand); }
.feature-card.is-primary .fc-label { color: rgba(255,255,255,0.8); }
.feature-card.is-primary .fc-title { color: #fff; }

/* ---- Body layout ---- */
.site-main-wrap { flex: 1; }
.layout-grid { display: grid; grid-template-columns: 1fr 268px; gap: 40px; padding-top: 40px; padding-bottom: 40px; }
.content-col { min-width: 0; }
.sidebar-col { display: flex; flex-direction: column; gap: 36px; }

/* Section heading */
.section-head { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--ink); line-height: 1.15; }

/* Folio article rows */
.folio-card { padding-left: 24px; padding-right: 24px; }
.folio-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: start;
    gap: 1.25rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
    transition: background-color 0.18s ease;
}
.folio-row:last-child { border-bottom: 0; }
.folio-row:hover { background-color: rgba(26, 86, 128, 0.04); }
.folio {
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding-right: 1.25rem;
    border-right: 1px solid var(--line-strong);
    color: var(--ink-soft);
    line-height: 1.2;
}
.folio .pp { display: block; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.folio .pages { font-size: 0.95rem; font-weight: 500; }
.article-title {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    transition: color 0.15s ease;
}
.folio-row:hover .article-title { color: var(--brand); }
.article-meta { margin-top: 6px; font-size: 0.85rem; color: var(--ink-soft); }

/* Long-form reading (post/page content) */
.prose-journal { font-family: var(--font-serif); color: var(--ink); font-size: 1.05rem; }
.prose-journal h1, .prose-journal h2, .prose-journal h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin-top: 1.4em; margin-bottom: .4em; line-height: 1.2; }
.prose-journal h2 { font-size: 1.5rem; }
.prose-journal h3 { font-size: 1.2rem; }
.prose-journal p { margin-bottom: .85em; line-height: 1.75; }
.prose-journal ul { list-style: disc; padding-left: 1.25rem; margin-bottom: .85em; }
.prose-journal ol { list-style: decimal; padding-left: 1.25rem; margin-bottom: .85em; }
.prose-journal li { margin-bottom: .35em; }
.prose-journal a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose-journal img { border-radius: 4px; }
.prose-journal blockquote { border-left: 3px solid var(--accent); margin: 1.2em 0; padding: .2em 0 .2em 1.1em; color: var(--ink-soft); font-style: italic; }

/* Links in body content */
.ij-link { color: var(--brand); text-decoration: none; }
.ij-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.page-title { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--ink); line-height: 1.1; }

/* CTA button */
.cta-button {
    display: block;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    text-align: center;
    padding: 14px 16px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    letter-spacing: 0.02em;
    transition: filter 0.15s ease;
}
.cta-button:hover { filter: brightness(0.95); color: #fff; }

/* Sidebar widgets */
.widget-block .eyebrow { margin-bottom: 10px; display: block; }
.widget-block ul { list-style: none; }
.widget-block li { margin-bottom: 6px; font-size: 0.95rem; }
.widget-block a { color: var(--brand); }
.widget-block a:hover { text-decoration: underline; text-underline-offset: 2px; }
.widget-note { font-family: var(--font-serif); font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }
.rss-pill { font-size: 0.7rem; font-family: ui-monospace, monospace; font-weight: 600; background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 2px; }

/* Search form */
.search-form { display: flex; gap: 8px; }
.search-form input[type="search"], .search-form input[type="text"] {
    flex: 1; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 3px; font: inherit; background: #fff;
}
.search-form button, .search-form input[type="submit"] {
    padding: 10px 16px; border: 0; border-radius: 3px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
}

/* Footer */
.site-footer { background: var(--brand-dark); color: rgba(255,255,255,0.8); font-size: 0.875rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 28px; padding-bottom: 28px; }
.site-footer .ft-title { font-family: var(--font-display); color: #fff; font-size: 1rem; }
.site-footer a { color: rgba(255,255,255,0.8); }
.site-footer a:hover { color: #fff; }

/* Status / pagination */
.status-note { margin-bottom: 28px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 12px 16px; font-size: 0.9rem; color: var(--ink-soft); }
.pagination { margin-top: 32px; display: flex; gap: 8px; flex-wrap: wrap; }
.pagination a, .pagination .current { padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--brand); }
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Responsive */
@media (max-width: 980px) {
    .layout-grid { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .header-title { font-size: 1.6rem; }
    .hero-title { font-size: 2rem; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .navbar .wrap { padding-left: 0; padding-right: 0; overflow-x: auto; }
    .folio-row { grid-template-columns: 1fr; }
    .folio { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .folio-row, .article-title, .feature-card { transition: none; }
}