/*
Theme Name: MkDocs Style
Theme URI: https://example.com/
Author: Bustami Arifin
Author URI: https://example.com/
Description: A minimal, documentation-focused theme inspired by MkDocs Material.
Version: 1.0.1
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mkdocs-style
*/

::selection {
    background: rgba(64, 81, 181, 0.2);
    color: inherit;
}

:root {
    /* Mapped to theme.json presets with fallbacks */
    --primary: var(--wp--preset--color--primary, #4051b5);
    --primary-light: var(--wp--preset--color--primary-light, #757de8);
    --primary-dark: var(--wp--preset--color--primary-dark, #002984);
    --accent: var(--wp--preset--color--accent, #ff4081);

    --text-main: var(--wp--preset--color--text-main, rgba(0, 0, 0, 0.87));
    --text-muted: var(--wp--preset--color--text-muted, rgba(0, 0, 0, 0.54));

    --bg-main: var(--wp--preset--color--bg-main, #ffffff);
    --bg-body: var(--wp--preset--color--bg-body, #fafafa);
    --bg-sidebar: var(--wp--preset--color--bg-sidebar, #f5f5f5);

    --font-family: var(--wp--preset--font-family--base, 'Roboto', 'Noto Color Emoji', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif);
    --font-mono: var(--wp--preset--font-family--monospace, 'Roboto Mono', Consolas, Menlo, monospace);

    --header-height: 48px;
    /* Classic MkDocs Material height */
    --sidebar-width: 240px;

    --shadow-header: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    color: var(--text-main);
    background-color: var(--bg-main);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-light);
}

/* Layout */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header */
.site-header {
    background-color: var(--primary);
    color: #fff;
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-header);
}

.site-header a {
    color: #fff;
}

.site-branding {
    font-size: 1.2rem;
    font-weight: 500;
    margin-right: 2rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.site-branding .custom-logo-link {
    display: flex;
    align-items: center;
}

.site-branding .custom-logo {
    max-height: calc(var(--header-height) - 16px);
    /* Keeps it nicely sized within the header */
    width: auto;
    max-width: 200px;
}

.header-navigation {
    flex: 1;
    display: flex;
    align-items: center;
}

.header-navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    gap: 1.5rem;
}

.header-navigation a {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.8;
}

.header-navigation a:hover,
.header-navigation .current-menu-item>a {
    opacity: 1;
}

/* Mobile Toggle */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.5rem;
    margin-right: -0.5rem;
}

.mobile-menu-toggle svg {
    display: block;
}

.mobile-menu-toggle .icon-close {
    display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .icon-menu {
    display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .icon-close {
    display: block;
}

/* General Search Form (Content Area) */
.search-form {
    margin: 0;
}

.search-form-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.search-icon {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    color: var(--text-muted);
}

.search-field {
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    padding: 0.2rem 0;
    width: 200px;
}

/* Header Specific Search Form */
.site-header .search-form-label {
    background-color: rgba(255, 255, 255, 0.15);
    border: none;
    padding: 0.3rem 0.6rem;
    cursor: text;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.site-header .search-form-label:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.site-header .search-form-label:focus-within {
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.site-header .search-icon {
    color: #fff;
    opacity: 0.9;
    transition: color 0.2s;
}

.site-header .search-form-label:focus-within .search-icon {
    color: var(--text-muted);
}

.site-header .search-field {
    color: #fff;
    font-size: 0.95rem;
    width: 140px;
    /* Initial compact width */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header .search-field::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.site-header .search-form-label:focus-within .search-field {
    color: var(--text-main);
    width: 250px;
    /* Expanded width on focus */
}

/* Hide the default submit button, rely on 'enter' key */
.search-submit {
    display: none;
}

/* Main Content Area */
.site-content-wrapper {
    display: flex;
    flex: 1;
    max-width: 1220px;
    margin: 0 auto;
    width: 100%;
}

body.no-sidebar .site-content-wrapper {
    justify-content: center;
}

/* Left Sidebar (Table of Contents) */
.site-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    padding: 1.5rem 1rem;
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    border-right: 1px solid rgba(0, 0, 0, 0.07);
    background: var(--bg-main);
}

/* Fallback message for sidebar */
.site-sidebar .empty-toc {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

/* TOC generated styles */
.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list ul {
    list-style: none;
    padding-left: 1rem;
    margin: 0;
}

.toc-list li {
    margin: 0.5rem 0;
}

.toc-list a {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.15s;
}

.toc-list a:hover {
    color: var(--primary);
}

.toc-list a.is-active-link {
    color: var(--primary);
    font-weight: 500;
}

/* Primary Content */
.site-main {
    flex: 1;
    padding: 2rem 2rem 4rem;
    min-width: 0;
    /* Prevents flex blowout */
    max-width: 800px;
}

/* Typography in Content */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--text-main);
    font-weight: 300;
    margin-top: 2em;
    margin-bottom: 0.5em;
    scroll-margin-top: calc(var(--header-height) + 1rem);
    /* For anchor links */
}

.entry-content h1 {
    font-size: 2.2rem;
    margin-top: 0;
    font-weight: 400;
}

.entry-content h2 {
    font-size: 1.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 0.3em;
}

.entry-content h3 {
    font-size: 1.4rem;
    font-weight: 400;
}

.entry-content h4 {
    font-size: 1.2rem;
    font-weight: 500;
}

.entry-content p {
    margin-bottom: 1em;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 auto;
}

/* WordPress Alignment Classes for Images and Blocks */
.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}

/* Base image block constraints */
.entry-content .wp-block-image {
    margin-bottom: 1.5em;
}

.entry-content .wp-block-image figcaption {
    color: var(--text-muted);
    font-size: 0.85em;
    margin-top: 0.5em;
    text-align: center;
}

/* Explicit alignment handling for Image Blocks */
.entry-content .wp-block-image.aligncenter,
.entry-content .wp-block-image .aligncenter {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.entry-content .wp-block-image.alignleft,
.entry-content .wp-block-image .alignleft {
    float: left;
    margin-right: 1.5em;
}

.entry-content .wp-block-image.alignleft figcaption,
.entry-content .wp-block-image .alignleft figcaption {
    text-align: left;
}

.entry-content .wp-block-image.alignright,
.entry-content .wp-block-image .alignright {
    float: right;
    margin-left: 1.5em;
}

.entry-content .wp-block-image.alignright figcaption,
.entry-content .wp-block-image .alignright figcaption {
    text-align: right;
}

/* Gutenberg Button Blocks */
.wp-block-button {
    margin-bottom: 1.5em;
}

.wp-block-button__link {
    background-color: var(--primary);
    color: #ffffff;
    border-radius: 4px;
    /* Slightly square like MkDocs Material */
    padding: 0.6rem 1.2rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, box-shadow 0.2s;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
    background-color: var(--primary-light);
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.wp-block-button__link:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(1px);
}

/* Center classic editor image captions */
.entry-content .wp-caption {
    text-align: center;
    margin: 0 auto 1.5em;
    max-width: 100%;
}

.entry-content .wp-caption-text {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85em;
    margin-top: 0.5em;
}

.entry-content pre {
    background-color: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.9em;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    white-space: pre;
    /* Force horizontal scroll for long lines */
    word-wrap: normal;
    /* Prevent breaking lines */
}

.entry-content code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--text-main);
}

.entry-content pre code {
    background-color: transparent;
    padding: 0;
    white-space: inherit;
    word-break: normal;
    overflow-wrap: normal;
}

/* PrismJS Toolbar / Copy Button Styling */
div.code-toolbar>.toolbar {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    right: 0.5em;
    top: 0.5em;
}

div.code-toolbar:hover>.toolbar,
div.code-toolbar:focus-within>.toolbar {
    opacity: 1;
}

div.code-toolbar>.toolbar button {
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: 4px;
    padding: 0.4em 0.6em;
    font-size: 0.8em;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s, color 0.2s;
}

div.code-toolbar>.toolbar button:hover,
div.code-toolbar>.toolbar button:focus {
    color: var(--primary);
    background: rgba(0, 0, 0, 0.05);
}

.entry-content blockquote {
    margin: 1.5em 0;
    padding: 0.5em 1em;
    border-left: 4px solid var(--primary);
    background-color: rgba(64, 81, 181, 0.05);
    color: var(--text-muted);
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
}

.entry-content th,
.entry-content td {
    padding: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-align: left;
}

.entry-content th {
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.02);
}

/* Pagination Navigation */
.mkdocs-pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    gap: 1rem;
}

.mkdocs-pagination-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem;
    border-radius: 4px;
    background-color: transparent;
    transition: background-color 0.2s, transform 0.2s;
    text-decoration: none;
    color: var(--text-main);
    width: 50%;
}

.mkdocs-pagination-link:hover {
    background-color: rgba(64, 81, 181, 0.04);
    color: var(--primary);
}

.mkdocs-pagination-prev {
    align-items: flex-start;
    text-align: left;
}

.mkdocs-pagination-next {
    align-items: flex-end;
    text-align: right;
}

.mkdocs-pagination-direction {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    gap: 0.25rem;
}

.mkdocs-pagination-link:hover .mkdocs-pagination-direction {
    color: var(--primary);
}

.mkdocs-pagination-title {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
}

.mkdocs-pagination-empty {
    flex: 1;
}

/* Widgets */
.widget {
    margin-bottom: 2rem;
}

.widget-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget li {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.widget a {
    color: var(--text-muted);
}

.widget a:hover {
    color: var(--primary);
}

/* Comments */
.comments-area {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.comments-title,
.comment-reply-title {
    font-weight: 400;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment-list .comment {
    margin-bottom: 2rem;
}

.comment-list .children {
    padding-left: 2rem;
    border-left: 2px solid rgba(0, 0, 0, 0.05);
    margin-top: 1rem;
}

.comment-body {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.comment-meta {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.comment-author img {
    border-radius: 50%;
    margin-right: 1rem;
}

.comment-author b {
    color: var(--text-main);
    font-size: 1rem;
    margin-right: 0.5rem;
}

.comment-content p {
    margin-bottom: 0.5rem;
}

.reply {
    margin-top: 1rem;
    font-size: 0.85rem;
}

/* Feature Boxes (MkDocs style) */
.wp-block-group.is-style-mkdocs-feature-box,
.wp-block-column.is-style-mkdocs-feature-box {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 1.5rem;
    background-color: #ffffff;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    height: 100%;
}

.wp-block-group.is-style-mkdocs-feature-box:hover,
.wp-block-column.is-style-mkdocs-feature-box:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}

.wp-block-group.is-style-mkdocs-feature-box h2,
.wp-block-group.is-style-mkdocs-feature-box h3,
.wp-block-column.is-style-mkdocs-feature-box h2,
.wp-block-column.is-style-mkdocs-feature-box h3 {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Custom Separator Block Styles */
hr.wp-block-separator.is-style-mkdocs-dotted {
    border: none;
    border-top: 3px dotted var(--text-muted);
    opacity: 0.5;
    background: transparent;
}

hr.wp-block-separator.is-style-mkdocs-wide-thin-line {
    border: none;
    border-top: 1px solid var(--text-muted);
    opacity: 0.3;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent;
}

hr.wp-block-separator.is-style-mkdocs-left-aligned {
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 30%;
    /* Fallback width */
}

hr.wp-block-separator.is-style-mkdocs-right-aligned {
    margin-left: auto !important;
    margin-right: 0 !important;
    width: 30%;
    /* Fallback width */
}

.comment-respond {
    background: rgba(0, 0, 0, 0.02);
    padding: 2rem;
    border-radius: 4px;
    margin-top: 2rem;
}

.comment-form-comment label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

.comment-form-comment textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-family: inherit;
    margin-bottom: 1rem;
}

.comment-respond input[type="submit"] {
    cursor: pointer;
}

/* Archive & Page Headers */
.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.page-header .page-title {
    margin-top: 0;
    font-size: 2rem;
    font-weight: 400;
}

.archive-description {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.error-404 .page-content {
    text-align: center;
    padding: 3rem 0;
}

.error-404 .search-form {
    display: inline-flex;
    margin-top: 2rem;
}

/* Footer layout */
.site-footer {
    padding: 2rem 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    margin-top: auto;
}

/* Responsive */
@media (max-width: 992px) {
    .site-content-wrapper {
        flex-direction: column;
    }

    .site-sidebar {
        width: 100%;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        padding: 1rem;
    }

    /* Typically MkDocs hides TOC on very small screens or puts it at the top,
       we'll just let it flow naturally or hide it depending on preference.
       Let's keep it flowing at the top for now. */
}

@media (max-width: 768px) {
    .site-main {
        padding: 1rem;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .header-navigation {
        display: block;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--primary);
        z-index: 90;
        padding: 2rem 1rem;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
    }

    .header-navigation.is-active {
        transform: translateX(0);
    }

    .header-navigation ul {
        flex-direction: column;
        gap: 1rem;
    }

    .header-navigation a {
        font-size: 1.1rem;
        display: block;
        padding: 0.5rem 0;
    }

    /* Prevent body scrolling when menu is open */
    body.mobile-menu-open {
        overflow: hidden;
    }
}

/* Breadcrumbs */
.mkdocs-breadcrumbs {
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.mkdocs-breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.mkdocs-breadcrumbs li {
    display: inline-flex;
    align-items: center;
}

.mkdocs-breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
}

.mkdocs-breadcrumbs a:hover {
    color: var(--primary);
}

.mkdocs-breadcrumb-home {
    line-height: 0;
}

.mkdocs-breadcrumb-separator {
    margin: 0 0.5rem;
    opacity: 0.5;
    font-size: 0.8rem;
}

.mkdocs-breadcrumbs li[aria-current="page"] {
    color: var(--text-main);
    font-weight: 500;
}

/* Tags */
.entry-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.mkdocs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mkdocs-tags a {
    display: inline-block;
    background-color: rgba(64, 81, 181, 0.05);
    color: var(--primary);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    border: 1px solid rgba(64, 81, 181, 0.1);
}

.mkdocs-tags a:hover {
    background-color: var(--primary);
    color: #ffffff;
}