/* 
 * ============================================================================
 * CUSTOM CSS - BLOG.MIJN.HOST THEME
 * ============================================================================
 * 
 * INDEX:
 * 1. GLOBAL SETTINGS
 *    - Smooth scrolling
 *    - Reduced motion preferences
 * 
 * 2. LAYOUT & STRUCTURE
 *    - Fixed header
 *    - Block spacing
 *    - Post content headings
 * 
 * 3. IMAGES & MEDIA
 *    - Post content images
 *    - Front page blog images
 *    - Image shadows and hover effects
 *    - Videos
 * 
 * 4. FORMS & INTERACTIVE ELEMENTS
 *    - Comment forms
 *    - Required fields
 *    - Form styling
 *    - Verified comment author badge
 * 
 * 5. CONTENT & TYPOGRAPHY
 *    - Tags
 *    - Colors
 *    - Links
 *    - Tables
 * 
 * 6. PLUGINS & THIRD-PARTY
 *    - SimpleTOC plugin
 *    - DataTables
 * 
 * ============================================================================
 */

/* 
 * 1. GLOBAL SETTINGS
 * ============================================================================
 */

/* Smooth scrolling for anchor links */
html { 
    scroll-behavior: smooth; 
}

/* Disable smooth scrolling for users who prefer reduced motion */
@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* 
 * 2. LAYOUT & STRUCTURE
 * ============================================================================
 */

/* Fixed header positioning */
.wp-site-blocks > header.wp-block-template-part {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
}

/*
 * Match main site: nav is half-gutter (15px) wider on each side than content.
 * Main site uses `.container.px-0` for the navbar vs `--bs-gutter-x: 30px` on content.
 * Widen only the header's alignwide row and keep core's margin:auto so it stays centered.
 */
.wp-site-blocks > header.wp-block-template-part > .wp-block-group.is-layout-constrained > .wp-block-group.alignwide {
    max-width: calc(var(--wp--style--global--wide-size, 1140px) + 30px);
}

/* Site logo height matches the main mijn.host / my.host navbar. */
.wp-site-blocks > header.wp-block-template-part .wp-block-group.alignwide > .wp-block-image img {
    height: 43px;
    width: auto;
}

/*
 * Keep the ".host" wordmark aligned when switching NL ↔ EN logos.
 * EN SVG is narrower on the left ("my" vs "mijn"); same offset as the main site
 * `html[lang="en"] .navbar-brand { padding-left: 8.6px; }`.
 * Polylang sets lang to en-US / nl-NL, so match with |= .
 */
html[lang|="en"] .wp-site-blocks > header.wp-block-template-part .wp-block-group.alignwide > .wp-block-image,
html[lang|="en"] .wp-site-blocks > header.wp-block-template-part .mijnhost-site-logo {
    padding-left: 8.6px;
}

/* Adjust header position when admin bar is present */
@media (min-width: 601px) {
    body.admin-bar .wp-site-blocks > header.wp-block-template-part {
        margin-top: var(--wp-admin--admin-bar--height);
    }
}

/* Remove default margins from block groups */
.wp-site-blocks .wp-block-group {
    margin-top: 0;
}

/* Post content heading spacing */
#post-content .wp-block-post-content h2.wp-block-heading, 
#post-content .wp-block-post-content h3.wp-block-heading, 
#post-content .wp-block-post-content h4.wp-block-heading, 
#post-content .wp-block-post-content h5.wp-block-heading, 
#post-content .wp-block-post-content h6.wp-block-heading {
    padding-top: 1.5em;
    padding-bottom: 0;
}

/* 
 * 3. IMAGES & MEDIA
 * ============================================================================
 */

/* Post content images with rounded corners */
#post-content figure.wp-block-image > img {
    border-radius: 8px;
}

/* Front page blog images styling */
.new-blogs figure.wp-block-post-featured-image,
.new-blogs figure.wp-block-post-featured-image img.attachment-post-thumbnail,
.query-loop-block-blogs figure.wp-block-post-featured-image,
.query-loop-block-blogs figure.wp-block-post-featured-image img.attachment-post-thumbnail {
    background-color: #ffffff;
    max-height: 175px;
    border-radius: 8px;
}

/* Ensure proper link height for featured images */
.new-blogs figure.wp-block-post-featured-image a,
.query-loop-block-blogs figure.wp-block-post-featured-image a {
    height: 100% !important;
}

/* Image shadows and hover effects */
#post-content div.wp-block-cover > img.wp-block-cover__image-background,
#post-content figure.wp-block-image > img,
.home .other-blogs-queryloop ul.wp-block-post-template li.wp-block-post figure.wp-block-post-featured-image,
.home .new-blogs-queryloop ul.wp-block-post-template li.wp-block-post figure.wp-block-post-featured-image {
    box-shadow: 0 0 30px -10px rgba(0, 0, 0, .4);
    transition: box-shadow .3s ease-in-out;
}

/* Remove shadows for specific elements */
#post-content div.wp-block-cover.no-shadow > img.wp-block-cover__image-background,
#post-content figure.wp-block-image.no-shadow > img {
    box-shadow: none;
}

/* Enhanced shadow on hover for blog images */
.home .other-blogs-queryloop ul.wp-block-post-template li.wp-block-post figure.wp-block-post-featured-image:hover,
.home .new-blogs-queryloop ul.wp-block-post-template li.wp-block-post figure.wp-block-post-featured-image:hover {
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .2);
}

/* Videos with rounded corners */
#post-content video {
    border-radius: 8px;
}

/* Image spacing in post content */
#post-content figure.wp-block-image {
    margin-block-end: 1rem;
}

/* 
 * 4. FORMS & INTERACTIVE ELEMENTS
 * ============================================================================
 */

/* Comment form field styling */
.wp-block-post-comments-form p.comment-form-author input,
.wp-block-post-comments-form p.comment-form-email input,
.wp-block-post-comments-form p.comment-form-url input,
.wp-block-post-comments-form p.comment-form-comment textarea {
    border-color: var(--wp--preset--color--primary-2);
}

/* Comment form spacing and typography */
.wp-block-post-comments-form p.comment-form-author,
.wp-block-post-comments-form p.comment-form-email,
.wp-block-post-comments-form p.comment-form-url,
.wp-block-post-comments-form p.comment-form-comment,
.wp-block-post-comments-form p.comment-form-cookies-consent,
.wp-block-post-comments-form p.form-submit {
    margin-top: 1em;
    font-weight: bold;
}

/* Normal font weight for specific form elements */
.wp-block-post-comments-form p.comment-form-cookies-consent,
.wp-block-post-comments-form p.form-submit {
    font-weight: normal;
}

/* Full-width comment textarea */
.wp-block-post-comments-form textarea#comment {
    max-width: 100%;
    min-width: 100%;
}

/* Required field styling */
span.required {
    color: var(--wp--preset--color--primary);
}

/* Logged-in user comment form */
.wp-block-post-comments-form .logged-in-as .required-field-message {
    display: block;
}

/* Verified mijn.host badge for admin/editor comment authors */
.wp-block-comment-author-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45em;
}

.mijnhost-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.55em 0.2em 0.35em;
    border-radius: 4px;
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--base);
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    vertical-align: middle;
}

.mijnhost-verified-badge__icon {
    flex-shrink: 0;
    color: var(--wp--preset--color--base);
    font-size: 1.05em;
    line-height: 1;
}

.mijnhost-verified-badge__label {
    color: var(--wp--preset--color--base);
}

.mijnhost-verified-badge__dot {
    color: var(--wp--preset--color--vivid-red);
}

/* Links inside comment content */
.wp-block-comment-content a {
    color: var(--wp--preset--color--link);
}

/* 
 * 5. CONTENT & TYPOGRAPHY
 * ============================================================================
 */

.home a:where(:not(.wp-element-button)) {
    color: #587a8b;
}

:root .home :where(.wp-block-post-title a:where(:not(.wp-element-button))) {
    color: var(--wp--preset--color--secondary);
}
:root .home :where(.wp-block-post-title a:where(:not(.wp-element-button)):hover) {
    color: var(--wp--preset--color--secondary-hover);
}

/* Tags container styling */
.tags-container > p {
    word-break: normal;
    align-self: flex-start;
}

/* List item spacing */
li {
    padding-bottom: 10px;
}

/* Category separator color */
.taxonomy-category.has-link-color.has-base-color .wp-block-post-terms__separator {
    color: var(--wp--preset--color--base) !important;
}

/* Tables */
figure.wp-block-table table {
    border-collapse: separate;
    border-spacing: 0;
}
figure.wp-block-table table thead {
    background-color: var(--wp--preset--color--secondary);
    border: 1px solid var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--base);
}

figure.wp-block-table table thead th {
    border: 1px solid var(--wp--preset--color--secondary)
}

figure.wp-block-table table thead th:first-child {
    border-top-left-radius: 5px;
}
figure.wp-block-table table thead th:last-child {
    border-top-right-radius: 5px;
}

figure.wp-block-table table tbody tr:nth-child(even) {
    background-color: var(--wp--preset--color--base);
}
figure.wp-block-table table tbody tr:nth-child(odd) {
    background-color: var(--wp--preset--color--base-2);
}

figure.wp-block-table table tbody tr td {
    border: 0;
    border-bottom: 1px solid var(--wp--preset--color--secondary) !important;
}
figure.wp-block-table table tbody tr td:first-child {
    border-left: 1px solid var(--wp--preset--color--secondary) !important;
}
figure.wp-block-table table tbody tr td:last-child {
    border-right: 1px solid var(--wp--preset--color--secondary) !important;
}


/* 
 * 6. PLUGINS & THIRD-PARTY
 * ============================================================================
 */

/* SimpleTOC plugin styling */
#post-content .wp-block-heading {
    /* Header offset for anchor links */
    padding-top: 95px !important;
    margin-top: -95px !important;
}

#post-content #content-column :not(#toc-block-mobile) .wp-block-heading {
    /* Header offset for anchor links */
    margin-top: -85px !important;
}

#post-content .entry-content *:not(.wp-block-heading, .wp-block-group) {
    /* Ensure buttons/links are on top of header offsets */
    z-index: 1;
    position: relative;
}

#post-content ul.simpletoc-list {
    padding-left: 1.3rem !important;
    margin: 0;
    list-style: decimal;
}

#post-content ul.simpletoc-list li a { 
    display: block;
    color: var(--wp--preset--color--secondary) !important;
}

#post-content ul.simpletoc-list li:last-child {
    padding-bottom: 0;
}

#post-content ul.simpletoc-list li > ul li {
    padding-bottom: 5px;
}

/* DataTables */
.datatable-wrap { 
    overflow-x: auto; 
}
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before, 
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after, 
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before, 
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    color: var(--wp--preset--color--primary) !important;
    opacity: 1 !important;
}
.datatable div.dt-container select.dt-input,
.datatable div.dt-container .dt-search input {
    background-color: #ffffff !important;
    border-width: 0 !important;
    border: 1px solid #ced4da;
    box-shadow: 0 1px 1px 0 #e8e8e8, inset 0 0 0 1px #ced4da;
    border-radius: 20px;
    padding: .375rem .75rem;
    height: calc(1.5em + .75rem + 2px);
    line-height: 1.5;
}
.datatable div.dt-container select.dt-input:focus-visible,
.datatable div.dt-container .dt-search input:focus-visible,
.datatable div.dt-container select.dt-input:focus,
.datatable div.dt-container .dt-search input:focus {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1), 0 2px 6px 0 rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05), inset 0 0 0 2px #ffac24 !important;
    outline: none;
}
.datatable div.dt-container .dt-search input {
    margin-left: 10px;
    margin-right: 1px;
}
div.dt-container .dt-length,
div.dt-container .dt-search,
div.dt-container .dt-info,
div.dt-container .dt-processing,
div.dt-container .dt-paging {
    color: var(--wp--preset--color--base-3) !important;
}
.datatable .dt-paging-button {
    font-family: var(--wp--preset--font-family--lato) !important;
    border: none !important;
    color: var(--wp--preset--color--contrast) !important;
    border-radius: 10px !important;
}
.datatable .dt-paging-button.current,
.datatable div.dt-container .dt-paging .dt-paging-button:not(.disabled):hover {
    color: var(--wp--preset--color--base) !important;
    background: var(--wp--preset--color--primary-2) !important;
    border: none !important;
}