/* Theme overrides and WordPress integration fixes */

/* Layout: container + sidebar widths are driven by Customizer CSS variables. */
.container {
    width: var(--apj-container-width, 1224px);
    max-width: 100%;
}

/* Outer page background color (image is rendered via #apj-page-background in PHP). */
html {
    background-color: var(--apj-page-bg, #9c9a96);
    min-height: 100%;
}

#apj-page-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

body.apj-has-page-bg-image #header-wrapper,
body.apj-has-page-bg-image #main-wrapper,
body.apj-has-page-bg-image #footer-wrapper {
    position: relative;
    z-index: 1;
}

body.boxed {
    background: transparent !important;
    min-height: 100vh;
}

body.boxed #header-wrapper,
body.boxed #main-wrapper,
body.boxed #footer-wrapper {
    max-width: var(--apj-container-width, 1224px);
}

#main.container {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

#main.container::after {
    display: none;
}

#main.container .grid {
    float: none;
    box-sizing: border-box;
}

#main.container #content-right-sidebar.grid.three-fourth,
#main.container #content-left-sidebar.grid.three-fourth,
#main.container #content.grid.three-fourth {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    max-width: none !important;
}

#main.container #sidebar.grid.one-fourth {
    flex: 0 0 var(--apj-sidebar-width, 216px) !important;
    width: var(--apj-sidebar-width, 216px) !important;
    max-width: var(--apj-sidebar-width, 216px) !important;
}

@media only screen and (max-width: 767px) {
    #main.container {
        flex-wrap: wrap;
    }

    #main.container #content-right-sidebar.grid.three-fourth,
    #main.container #content-left-sidebar.grid.three-fourth,
    #main.container #content.grid.three-fourth,
    #main.container #sidebar.grid.one-fourth {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Base typography — overridden by Customizer when set. */
body {
    font-size: var(--apj-body-size, 18px);
    line-height: var(--apj-body-line, 26px);
}

#primary-menu > ul > li > a span,
.breadcrumbs,
.widget ul,
.entry .entry-meta {
    font-size: var(--apj-menu-sub-size, 15px);
}

.entry .entry-title {
    font-size: var(--apj-entry-title-size, 22px);
    line-height: 1.3;
}

/* Search widget: keep input and submit button the same height */
.widget .wp-block-search__inside-wrapper,
.widget form.search-form,
.widget .searchform {
    display: flex;
    align-items: stretch;
}

.widget .wp-block-search__input,
.widget form.search-form .search-field,
.widget form.search-form input[type="search"],
.widget .searchform .search_input,
.widget .searchform input[type="text"],
.search_input {
    height: 38px !important;
    min-height: 38px;
    max-height: 38px;
    box-sizing: border-box;
    margin: 0;
    flex: 1 1 auto;
}

.widget .wp-block-search__button,
.widget form.search-form .search-submit,
.widget form.search-form button[type="submit"],
.widget form.search-form input[type="submit"] {
    height: 38px !important;
    min-height: 38px;
    max-height: 38px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.widget .searchform {
    position: relative;
}

.widget .searchform .search_btn,
.search_btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    padding: 0;
    margin: 0;
}

.widget .searchform .search_input,
.widget .searchform input[type="text"] {
    width: 100%;
    padding-right: 44px;
}

/* Archive / list entries with thumbnail on the left */
.entry.entry-list {
    margin: 0 0 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ebebea;
}

.entry.entry-list .entry-thumb {
    float: left;
    width: 140px;
    margin-right: 20px;
}

.entry.entry-list .entry-thumb a {
    display: block;
    overflow: hidden;
    border: 1px solid #ebebea;
    background: #f2f2f2;
}

.entry.entry-list .entry-thumb-image {
    display: block;
    width: 100%;
    height: auto;
}

.entry.entry-list .entry-body {
    overflow: hidden;
}

.entry.entry-list .entry-header {
    margin-bottom: 12px;
}

.entry.entry-list .entry-content {
    margin-bottom: 0;
}

.entry.entry-list .entry-content p:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .entry.entry-list .entry-thumb {
        float: none;
        width: 100%;
        max-width: 220px;
        margin: 0 0 16px;
    }
}

.screen-reader-text {
    border: 0;
    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;
}

#logo #site-title {
    margin: 0;
    line-height: 1;
}

#logo #site-title a,
.custom-logo-link {
    display: inline-block;
}

#logo #site-title a:not(:has(img)) {
    color: #4a4845;
    font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
}

#logo #site-title a:not(:has(img)):hover {
    color: #d70717;
}

#logo #site-title img,
.custom-logo {
    display: block;
    max-width: 100%;
    height: auto;
}

#primary-menu .sf-menu {
    display: block;
}

#primary-menu .sf-menu > li.menu-item-has-children:hover > ul.sub-menu,
#primary-menu .sf-menu > li.sfHover > ul.sub-menu {
    left: auto;
    top: 100%;
    z-index: 1000;
}

#primary-menu ul.sub-menu ul.sub-menu {
    top: 0;
    left: 100%;
}

.callout .right {
    text-align: right;
}

.callout .left {
    width: 70%;
}

.callout .right {
    width: 30%;
}

@media only screen and (max-width: 767px) {
    .callout .left,
    .callout .right {
        width: 100%;
        float: none;
        text-align: left;
    }
}

.pf-content::after,
.entry-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Easy Table "cuscosky" styling (hiragana / lesson tables) */
.pf-content table,
.entry-content table,
.easy-table table,
table.easy-table-cuscosky,
table.kanaroma,
table.examples {
    width: auto;
    max-width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #555;
}

.pf-content table th,
.pf-content table td,
.entry-content table th,
.entry-content table td,
.easy-table table th,
.easy-table table td,
table.easy-table-cuscosky th,
table.easy-table-cuscosky td,
table.kanaroma th,
table.kanaroma td,
table.examples th,
table.examples td {
    border: 1px solid #d4e0ee;
    padding: 4px 8px;
    line-height: inherit;
    text-align: left;
    vertical-align: top;
}

.pf-content table thead th,
.pf-content table tfoot th,
.entry-content table thead th,
.entry-content table tfoot th,
.easy-table table thead th,
.easy-table table tfoot th,
table.easy-table-cuscosky thead th,
table.easy-table-cuscosky tfoot th,
table.kanaroma thead th,
table.kanaroma tr:first-child td,
table.examples thead th,
table.examples tr:first-child td,
.pf-content table:not(:has(thead)) > tbody > tr:first-child > td,
.pf-content table:not(:has(thead)) > tr:first-child > td,
.entry-content table:not(:has(thead)) > tbody > tr:first-child > td,
.entry-content table:not(:has(thead)) > tr:first-child > td {
    text-align: center;
    background: #e6edf5;
    color: #4f76a3;
    font-weight: bold;
    font-size: 100% !important;
}

.pf-content table tbody tr,
.entry-content table tbody tr,
.easy-table table tbody tr,
table.easy-table-cuscosky tbody tr,
table.kanaroma tbody tr,
table.examples tbody tr {
    background: #fcfdfe;
}

.pf-content table tbody tr:nth-child(even) td,
.pf-content table tbody tr:nth-child(even) th,
.entry-content table tbody tr:nth-child(even) td,
.entry-content table tbody tr:nth-child(even) th,
.easy-table table tbody tr:nth-child(even) td,
.easy-table table tbody tr:nth-child(even) th,
table.easy-table-cuscosky tbody tr:nth-child(even) td,
table.easy-table-cuscosky tbody tr:nth-child(even) th,
table.kanaroma tbody tr:nth-child(even) td,
table.examples tbody tr:nth-child(even) td {
    background: #f7f9fc;
}

.pf-content table a,
.entry-content table a,
.easy-table table a,
table.easy-table-cuscosky a,
table.kanaroma a,
table.examples a {
    color: #718abe;
    text-decoration: none;
}

.pf-content table a:hover,
.entry-content table a:hover,
.easy-table table a:hover,
table.easy-table-cuscosky a:hover,
table.kanaroma a:hover,
table.examples a:hover {
    color: #718abe;
    text-decoration: underline;
}

.easy-table caption,
.pf-content table caption,
.entry-content table caption {
    font-size: 100% !important;
    color: #999;
    caption-side: top;
    margin-bottom: 5px;
}

/* Hiragana chart tables (robust-child) */
table.kanaroma td {
    line-height: 12px;
    padding: 3px;
}

table.kanaroma tr:first-child td {
    font-size: x-large;
}

table.examples td {
    line-height: 16px;
    padding: 4px;
}

/* Fallback when gradient.png is unavailable */
.callout,
.content-box,
.tagcloud a,
#respond #submit,
.button,
#post-404 {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
}

.button:hover,
#respond #submit:hover {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.05) 100%);
}