/* =========================================================
   dict-style.css (v2.6 - Overlay Fix)
   Theme for dict-style pages (itako-dict, linguistics).
   UPDATED: Scoped widget_nav_menu styles to prevent overlay conflict
   ========================================================= */

/* --- 1. STICKY FOOTER LAYOUT --- */
html,
body {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--felt-bg, linear-gradient(to bottom, #fdfcf9, #f7f5f0));
    color: var(--text-dark);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    font-size: 15px;
}

/* ALPHABET BAR */
.dict-alpha-nav {
    background: #fff;
    border-bottom: 1px solid var(--line-gray);
    padding: .35rem 0;
}

.dict-alpha-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem .4rem;
}

.dict-alpha-nav a {
    display: inline-block;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid rgba(224, 122, 0, .22);
    background: rgba(224, 122, 0, .08);
    color: var(--text-dark);
    text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .12s ease;
}

.dict-alpha-nav a:hover {
    background: var(--wood-orange);
    color: #fff;
    transform: translateY(-1px);
}

/* MAIN LAYOUT — seamless 3 columns */
main.dict-page-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    width: 100%;
    background: #fff;
    border-left: 1px solid var(--line-gray);
    border-right: 1px solid var(--line-gray);
}

.dict-left,
.dict-main,
.dict-right {
    padding: 1.2rem 1.5rem;
    border-right: 1px solid var(--line-gray);
    min-width: 0;
}

.dict-left {
    background: #fbfaf8;
}

.dict-main {
    background: #fff;
}

.dict-right {
    background: #fbfaf8;
    border-right: none;
}

/* HEADINGS & LISTS (scoped to this grid) */
.dict-page-grid h2 {
    margin: .5rem 0 1rem;
    font-size: 1.2rem;
    color: var(--wood-orange);
}

.dict-page-grid h3 {
    font-size: 1rem;
    color: var(--wood-orange);
    border-bottom: 1px solid var(--line-gray);
    padding-bottom: 0.3rem;
    margin-top: 0;
}

.dict-page-grid ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}

.dict-page-grid a {
    color: var(--text-dark);
    text-decoration: none;
}

.dict-page-grid a:hover {
    color: var(--wood-orange);
}

/* SEARCH */
.dict-search {
    text-align: center;
    margin: 1rem 0;
}

.dict-search input {
    width: min(70%, 420px);
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line-gray);
    border-radius: 6px;
}

.dict-search button {
    background: var(--wood-orange);
    color: #fff;
    border: none;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    border-radius: 6px;
    margin-left: .4rem;
}

.dict-search button:hover {
    background: #c76800;
}

/* ENTRY LIST — continuous */
.dict-entry {
    border-bottom: 1px solid var(--line-gray);
    padding: 0.6rem 0;
}

.dict-entry:last-child {
    border-bottom: none;
}

.dict-entry h4 {
    margin: 0;
    color: var(--wood-orange);
    font-family: "Noto Serif JP", serif;
    font-size: 1.05rem;
}

.dict-entry p {
    margin: 0.2rem 0 0;
    color: #333;
}

/* GRIDS (v1.7 pill buttons reused) */
.kana-grid,
.cyrillic-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem .35rem;
    margin: .8rem 0;
}

.kana-grid a,
.cyrillic-nav a {
    display: inline-block;
    padding: .35rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(224, 122, 0, .22);
    background: rgba(224, 122, 0, .08);
    font-weight: 600;
    color: var(--text-dark);
}

.kana-grid a:hover,
.cyrillic-nav a:hover {
    background: var(--wood-orange);
    color: #fff;
    transform: translateY(-1px);
}

/* =========================================================
   RESPONSIVE MOBILE LAYOUT
   ========================================================= */

/* Tablet: Hide right sidebar, show 2 columns */
@media (max-width: 1100px) {
    main.dict-page-grid {
        grid-template-columns: 210px 1fr;
    }

    .dict-right {
        display: none;
    }
}

/* Mobile: Single column, stack everything vertically */
@media (max-width: 780px) {
    main.dict-page-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        border-left: none;
        border-right: none;
    }

    .dict-left,
    .dict-main,
    .dict-right {
        width: 100% !important;
        border-right: none !important;
        padding: 1rem !important;
    }

    /* Main content comes first */
    .dict-main {
        order: 1;
        padding-top: 1.5rem !important;
    }

    /* Left sidebar comes second */
    .dict-left {
        display: block !important;
        order: 2;
        margin-top: 1.5rem;
        padding-top: 1.5rem !important;
        border-top: 2px solid var(--line-gray);
        background: #fff;
    }

    /* Right sidebar comes third (if exists) */
    .dict-right {
        display: block !important;
        order: 3;
        margin-top: 1.5rem;
        padding-top: 1.5rem !important;
        border-top: 2px solid var(--line-gray);
        background: #fff;
    }

    /* Ensure widgets are full width */
    .dict-left .widget,
    .dict-right .widget {
        width: 100%;
        max-width: 100%;
    }

    /* Adjust heading sizes for mobile */
    .dict-page-grid h2 {
        font-size: 1.1rem;
    }

    .dict-page-grid h3 {
        font-size: 0.95rem;
    }

    /* Make alphabet nav more compact on mobile */
    .dict-alpha-nav {
        padding: 0.25rem 0;
    }

    .dict-alpha-nav ul {
        gap: 0.25rem 0.3rem;
    }

    .dict-alpha-nav a {
        padding: 0.3rem 0.5rem;
        font-size: 0.9rem;
    }

    /* Search box full width on mobile */
    .dict-search input {
        width: 100%;
        max-width: 100%;
    }

    .dict-search button {
        margin-top: 0.5rem;
        width: 100%;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    .dict-left,
    .dict-main,
    .dict-right {
        padding: 0.75rem !important;
    }

    .dict-page-grid h2 {
        font-size: 1rem;
    }

    .dict-alpha-nav a {
        padding: 0.25rem 0.4rem;
        font-size: 0.85rem;
    }
}

/* =========================================================
   RECENT POSTS SECTION - 2 COLUMN LIST (v3 - Tighter Gaps)
   (Replaces Claude's card grid)
   ========================================================= */

/* Two-column grid for recent posts */
.recent-entries-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* REDUCED SPACING HERE */
    gap: 0.25rem 0.75rem; /* 0.25rem between rows, 0.75rem between columns */
}

/* Individual post entry */
.post-entry {
    /* This creates the light grey line you wanted */
    border-bottom: 1px solid var(--line-gray);
    padding-bottom: 0.75rem; /* Reduced padding to match */

    /* Remove all of Claude's card styling */
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.5rem;
    background: none;
    transition: none;
}

/* Remove the card hover effect */
.post-entry:hover {
    box-shadow: none;
    transform: none;
    border-color: var(--line-gray);
}

/* Post entry title - BLACK TEXT (Kept from Claude's code) */
.post-entry-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.post-entry-title a {
    color: var(--text-dark) !important;
    text-decoration: none;
}

.post-entry-title a:hover {
    color: var(--wood-orange) !important;
    text-decoration: underline;
}

/* Post body preview - BLACK TEXT (Kept from Claude's code) */
.post-body-recent {
    font-size: 0.9rem;
    color: var(--text-dark) !important;
    line-height: 1.6;
    margin-top: 0.5rem;
}

/* Mobile: Single column (Kept from Claude's code) */
@media (max-width: 768px) {
    .recent-entries-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   FIXES (Moved from functions.php)
   ========================================================= */

/* Fix 1: Breadcrumb symbol garbling */
.breadcrumb-item::after {
    content: '≫' !important;
}

/* Fix 2: Mobile layout vertical text bug */
/* This is now fixed by correctly dequeuing 
   'classic-theme-styles' in functions.php */

/* =========================================================
   Theme-Specific Overrides
   ========================================================= */

/* --- 2. Hierarchical Navigation Menu (for Category List) --- */
/* Targets the 'Navigation Menu' widget (widget_nav_menu) */
/* UPDATED: Scoped to .dict-page-grid to avoid affecting Overlay Nav */

.dict-page-grid .widget_nav_menu .menu {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}

.dict-page-grid .widget_nav_menu .menu-item {
    margin-bottom: 0.4rem;
}

/* Parent category links (top-level menu items) */
.dict-page-grid .widget_nav_menu .menu > .menu-item > a {
    font-size: 1.05rem; /* A bit bigger */
    font-weight: 600;
    color: var(--wood-orange);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.dict-page-grid .widget_nav_menu .menu > .menu-item > a:hover {
    color: var(--accent-novel-deep);
}

/* Child category list (the sub-menu) */
.dict-page-grid .widget_nav_menu .sub-menu {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--line-gray);
    list-style: none; /* Ensure no bullets */
}

/* Child category links (sub-menu items) */
.dict-page-grid .widget_nav_menu .sub-menu .menu-item a {
    font-size: 0.9rem; /* Smaller */
    color: var(--text-dark);
    text-decoration: none;
}

.dict-page-grid .widget_nav_menu .sub-menu .menu-item a:hover {
    text-decoration: underline;
}

/* --- 3. Front Page Category Button Grid (FIXED) --- */
.category-grid {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
    
    /* DEFAULT (Smartphone): 1 column (4 rows) */
    grid-template-columns: 1fr;
}

/* TABLET (Middle): 2 columns (2 rows) */
/* We'll use 500px as the breakpoint from mobile to tablet */
@media (min-width: 500px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* DESKTOP (Wide): 4 columns (1 row) */
/* This kicks in at 781px, just after the 780px breakpoint where the sidebar disappears */
@media (min-width: 781px) {
    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* This is the specific rule for the links inside the grid */
.dict-page-grid .category-grid a {
    display: block;
    padding: 1.25rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--line-gray);
    background: #fdfcf9;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--wood-orange); /* This is the original color, but the next block will override it */
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

/* This is the hover effect */
.dict-page-grid .category-grid a:hover {
    background: var(--wood-orange);
    color: #fff;
    border-color: var(--wood-orange);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* --- 4. Category Grid Color Overrides (v2) --- */

/* Set a new default text color for all grid buttons for better contrast */
.dict-page-grid .category-grid a {
    color: var(--text-dark); /* Change from orange to dark brown */
}

/* 1st button: 一般用語 */
.dict-page-grid .category-grid a:nth-child(1) {
    background-color: #cfdaec; /* UPDATED COLOR */
    border-color: #b9c6d8; /* A slightly darker border */
}

/* 2nd button: 科学・技術 */
.dict-page-grid .category-grid a:nth-child(2) {
    background-color: #9de498;
    border-color: #89cc85; /* A slightly darker border */
}

/* 3rd button: 人文・芸術 */
.dict-page-grid .category-grid a:nth-child(3) {
    background-color: #e6c8b4;
    border-color: #d1b49f; /* A slightly darker border */
}

/* 4th button: 社会・日常 */
.dict-page-grid .category-grid a:nth-child(4) {
    background-color: #a7acb3;
    border-color: #93989f; /* A slightly darker border */
}

/* 5th button (in case you add one) */
.dict-page-grid .category-grid a:nth-child(5) {
    background-color: #ddceac;
    border-color: #c9bb97; /* A slightly darker border */
}

/* NOTE: The existing hover effect (turning orange) 
  from 'dict-style.css' will still work on all buttons.
*/