/*
Theme Name:        Icosmo
Theme URI:         https://icosmo.de
Author:            Konstantin Jagoulis
Author URI:        https://icosmo.de
Description:       Dark, wide and fully responsive theme for the Icosmo ecosystem. Unified styles for text, buttons, forms, tables and panels, shared by all Icosmo plugins. Greyscale colours, layout widths and the logo are set in the Customizer; the only accent colours are the twelve Icosmo key colours.
Version:           1.0.4
Requires at least: 6.0
Tested up to:      6.8
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       icosmo
Tags:              dark, one-column, wide-blocks, custom-logo, custom-menu, footer-widgets, threaded-comments, translation-ready
*/

/* ==========================================================================
   How this stylesheet works with the Icosmo plugins
   --------------------------------------------------------------------------
   - All plain HTML elements (p, a, input, table …) are styled inside :where(),
     which has zero specificity. Every plugin rule therefore wins automatically,
     and plugins keep their current look until their own CSS is removed.
   - Shared components for plugins use the .ic- prefix (.ic-module, .ic-button,
     .ic-table …). Their sizes follow the Matrix Synth and the Calculator.
   - Colours are CSS variables. The Customizer overrides them on :root.
   ========================================================================== */

/* ---------- 1. Variables ---------- */
:root {
    /* Greyscale (Customizer) */
    --ic-bg: #222222;
    --ic-header-bg: #111111;
    --ic-footer-bg: #111111;
    --ic-surface: #191919;
    --ic-text: #e0e0e0;
    --ic-heading: #f0f0f0;
    --ic-muted: #bdbdbd;
    --ic-border: #4f4f4f;
    --ic-link: #e0e0e0;
    --ic-input-bg: #111111;
    --ic-input-border: #777777;
    --ic-input-text: #cccccc;
    --ic-button-bg: #555555;
    --ic-button-hover: #6c6c6c;
    --ic-button-text: #e0e0e0;
    --ic-table-bg: #191919;
    --ic-table-head: #262626;
    --ic-table-stripe: #1f1f1f;
    --ic-table-hover: #2c2c2c;
    --ic-table-border: #333333;

    /* Layout (Customizer) */
    --ic-max-width: 1680px;
    --ic-text-width: 960px;
    --ic-gutter: clamp(16px, 3vw, 48px);

    /* Fonts */
    --ic-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ic-font-mono: Menlo, Consolas, "Liberation Mono", monospace;

    /* Compact controls, as in the Matrix Synth and the Calculator */
    --ic-control-font: 0.85rem;
    --ic-control-height: calc(var(--ic-control-font) + 12px);
    --ic-label-font: 0.75rem;
    --ic-button-font: 0.8rem;
    --ic-radius: 6px;

    /* The twelve Icosmo key colours in colour order: Red → Red-Violet */
    --ic-c1: #ef3d31;  /* Red */
    --ic-c2: #f3702f;  /* Red-Orange */
    --ic-c3: #f89e2a;  /* Orange */
    --ic-c4: #fed017;  /* Orange-Yellow */
    --ic-c5: #f4ed27;  /* Yellow */
    --ic-c6: #c8e21e;  /* Yellow-Green */
    --ic-c7: #8cc74b;  /* Green */
    --ic-c8: #76cab7;  /* Green-Blue */
    --ic-c9: #4872b7;  /* Blue */
    --ic-c10: #675ca8; /* Blue-Violet */
    --ic-c11: #9e5aa5; /* Violet */
    --ic-c12: #ee2797; /* Red-Violet */
    --ic-spectrum: linear-gradient(90deg, var(--ic-c1), var(--ic-c2), var(--ic-c3), var(--ic-c4), var(--ic-c5), var(--ic-c6),
        var(--ic-c7), var(--ic-c8), var(--ic-c9), var(--ic-c10), var(--ic-c11), var(--ic-c12));
}

/* ---------- 2. Base elements (zero specificity) ---------- */
:where(*, *::before, *::after) { box-sizing: border-box; }

:where(html) { -webkit-text-size-adjust: 100%; }

:where(body) {
    margin: 0;
    background-color: var(--ic-bg);
    color: var(--ic-text);
    font-family: var(--ic-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:where(img, video, iframe, embed, object) { max-width: 100%; }
:where(img, video) { height: auto; }

:where(a) {
    color: var(--ic-link);
    text-decoration: underline;
    text-decoration-color: var(--ic-border);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
}
:where(a:hover, a:focus) { text-decoration-color: currentColor; }

:where(h1, h2, h3, h4, h5, h6) { color: var(--ic-heading); font-weight: 400; line-height: 1.25; margin: 1.6em 0 0.6em; }
:where(h1) { font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 300; }
:where(h2) { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 300; }
:where(h3) { font-size: 1.35rem; }
:where(h4) { font-size: 1.15rem; }
:where(h5) { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
:where(h6) { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ic-muted); }

:where(p, ul, ol, dl, blockquote, pre, figure, table) { margin: 0 0 1.2em; }
:where(ul, ol) { padding-left: 1.4em; }
:where(li) { margin: 0.2em 0; }
:where(blockquote) { padding: 2px 0 2px 18px; border-left: 3px solid var(--ic-border); color: var(--ic-muted); font-style: italic; }
:where(hr) { border: 0; height: 1px; background: var(--ic-border); margin: 2em 0; }
:where(code, kbd, pre, samp) { font-family: var(--ic-font-mono); font-size: 0.88em; }
:where(code, kbd) { background: var(--ic-table-bg); padding: 1px 5px; border-radius: 3px; }
:where(pre) { background: var(--ic-surface); border: 1px solid var(--ic-border); border-radius: var(--ic-radius); padding: 12px 14px; overflow-x: auto; }
:where(figcaption) { font-size: 0.85rem; color: var(--ic-muted); margin-top: 6px; }
:where(strong, b) { font-weight: 600; }
:where(small) { font-size: 0.85em; }
:where(abbr[title]) { text-decoration: underline dotted; }
:where(mark) { background: var(--ic-table-head); color: var(--ic-heading); padding: 0 3px; }

/* ---------- 3. Forms (compact, as in the Synth and Calculator) ---------- */
:where(label) { font-size: var(--ic-label-font); color: var(--ic-muted); }

:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) {
    width: 100%;
    max-width: 100%;
    height: var(--ic-control-height);
    padding: 4px 6px;
    font-family: inherit;
    font-size: var(--ic-control-font);
    line-height: normal;
    color: var(--ic-input-text);
    background-color: var(--ic-input-bg);
    border: 1px solid var(--ic-input-border);
    border-radius: 3px;
    box-sizing: border-box;
}
:where(textarea) { height: auto; min-height: 90px; line-height: 1.4; resize: vertical; }
:where(select[multiple]) { height: auto; }
:where(input:focus, select:focus, textarea:focus) { outline: none; border-color: #aaaaaa; }
:where(input, select, textarea)::placeholder { color: #777777; }
:where(input[type="number"]) { -moz-appearance: textfield; }
:where(input[type="number"])::-webkit-inner-spin-button,
:where(input[type="number"])::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

:where(input[type="checkbox"]) {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0 5px 0 0;
    vertical-align: middle;
    background-color: #5f5f5f;
    border: 1px solid var(--ic-table-head);
    border-radius: 3px;
    cursor: pointer;
}
:where(input[type="checkbox"]:checked) { background-color: #333333; border-color: #222222; }
:where(input[type="checkbox"]:checked)::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--ic-muted);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
:where(input[type="radio"], input[type="range"]) { accent-color: #9e9e9e; vertical-align: middle; }
:where(input[type="range"]) { width: 100%; }
:where(fieldset) { border: 1px solid var(--ic-border); border-radius: var(--ic-radius); padding: 8px 10px; margin: 0 0 1em; }
:where(legend) { font-size: var(--ic-label-font); color: var(--ic-muted); padding: 0 4px; }

/* Buttons */
:where(button, input[type="submit"], input[type="button"], input[type="reset"]),
.ic-button,
.wp-block-button__link,
.wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--ic-control-height);
    padding: 2px 10px;
    font-family: inherit;
    font-size: var(--ic-button-font);
    font-weight: bold;
    line-height: 1.4;
    color: var(--ic-button-text);
    text-decoration: none;
    background-color: var(--ic-button-bg);
    border: 1px solid #111111;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s ease, transform 0.1s ease;
}
:where(button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover),
.ic-button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover { background-color: var(--ic-button-hover); color: var(--ic-button-text); }
:where(button:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active),
.ic-button:active,
.wp-block-button__link:active { background-color: #7d7d7d; transform: translateY(1px); }
:where(button:disabled, input[type="submit"]:disabled, input[type="button"]:disabled, input[type="reset"]:disabled),
.ic-button.is-disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.ic-button.is-primary,
.is-style-fill .wp-block-button__link.has-background { color: #111111; background-color: var(--ic-text); border-color: var(--ic-text); }
.ic-button.is-primary:hover { background-color: #ffffff; color: #111111; }
.ic-button.is-outline,
.is-style-outline .wp-block-button__link { background-color: transparent; border-color: var(--ic-border); color: var(--ic-text); }
.ic-button.is-outline:hover,
.is-style-outline .wp-block-button__link:hover { background-color: var(--ic-surface); }

/* ---------- 4. Tables (as the Icosmo Matrix tables) ---------- */
:where(table) { width: 100%; border-collapse: collapse; background-color: var(--ic-table-bg); font-size: 0.85rem; }
:where(th, td) { padding: 4px 6px; text-align: left; vertical-align: middle; border: 1px solid var(--ic-table-border); }
:where(th) { background-color: var(--ic-table-head); color: var(--ic-heading); font-weight: 600; }
:where(tbody tr:nth-child(even)) { background-color: var(--ic-table-stripe); }
:where(tbody tr:hover) { background-color: var(--ic-table-hover); }
:where(caption) { caption-side: bottom; font-size: 0.85rem; color: var(--ic-muted); padding-top: 6px; }
.ic-table-wrap,
.wp-block-table { overflow-x: auto; }
.wp-block-table table { margin: 0; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--ic-table-bg); }
.wp-block-table figcaption { text-align: left; }

/* ---------- 5. Shared components for plugins ---------- */

/* Panel – as .module in the Calculator and the Synth */
.ic-module {
    background-color: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius);
    padding: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ic-module-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    margin: 0 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--ic-border);
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--ic-heading);
}
.ic-module-heading > :last-child:not(:first-child) { margin-left: auto; }
.ic-module-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: start; }

/* Form layout */
.ic-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ic-label { display: block; font-size: var(--ic-label-font); color: var(--ic-muted); }
.ic-row { display: flex; align-items: flex-end; gap: 8px; }
.ic-row > .ic-grow { flex: 1 1 auto; min-width: 50px; }
.ic-check { display: inline-flex; align-items: center; font-size: var(--ic-control-font); color: var(--ic-text); cursor: pointer; }

/* Notices */
.ic-notice { padding: 8px 12px; border-left: 3px solid var(--ic-muted); border-radius: 3px; background-color: var(--ic-surface); font-size: 0.9rem; }

/* Colour swatch */
.ic-swatch { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: middle; border: 1px solid #777777; border-radius: 2px; }

/* Utility */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.screen-reader-text:focus {
    z-index: 100000;
    top: 6px;
    left: 6px;
    width: auto;
    height: auto;
    padding: 10px 16px;
    clip: auto;
    color: #111111;
    background-color: var(--ic-text);
    border-radius: 3px;
}

/* ---------- 6. Layout ---------- */
.ic-container { width: 100%; max-width: var(--ic-max-width); margin: 0 auto; padding-inline: var(--ic-gutter); }
.ic-colour-bar { height: 4px; background: var(--ic-spectrum); }
.ic-site { display: flex; flex-direction: column; min-height: 100vh; }
.ic-main { flex: 1 0 auto; padding-block: clamp(24px, 3.5vw, 48px) clamp(40px, 5vw, 80px); }

/* ---------- 7. Header ---------- */
.ic-header { position: relative; z-index: 1100; background-color: var(--ic-header-bg); }
.ic-header.is-sticky { position: sticky; top: 0; }
.admin-bar .ic-header.is-sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar .ic-header.is-sticky { top: 0; position: relative; } }

.ic-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 76px; }
.ic-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; justify-self: start; }
.ic-brand .custom-logo-link { display: block; flex-shrink: 0; }
.ic-brand .custom-logo { display: block; width: auto; height: auto; max-height: 52px; }
.ic-brand-text { display: flex; flex-direction: column; min-width: 0; }
.ic-site-title { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.15; }
.ic-site-title a { color: var(--ic-heading); text-decoration: none; }
.ic-site-description { margin: 0; font-size: 0.75rem; color: var(--ic-muted); }

/* ---------- 8. Main menu ---------- */
.ic-nav { justify-self: center; }
.ic-menu, .ic-menu ul { list-style: none; margin: 0; padding: 0; }
.ic-menu li { margin: 0; }
.ic-menu { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; }
.ic-menu > li { position: relative; display: flex; align-items: center; }
.ic-menu a { text-decoration: none; }
.ic-menu > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--ic-radius);
    font-size: 0.95rem;
    color: var(--ic-text);
}
.ic-menu > li > a:hover,
.ic-menu > li:focus-within > a { background-color: #333333; }
.ic-menu > li.current-menu-item > a,
.ic-menu > li.current-menu-ancestor > a,
.ic-menu > li.current-menu-parent > a,
.ic-menu > li.current_page_item > a { box-shadow: inset 0 -2px 0 0 var(--ic-text); border-radius: 0; }
.ic-menu > li.menu-item-has-children > a::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.7;
}

/* Submenu panel: centred below its menu item; --ic-shift (navigation.js) keeps it inside the window */
.ic-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 10;
    min-width: 260px;
    padding: 10px;
    background-color: #1a1a1a;
    border: 1px solid var(--ic-border);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translate(calc(-50% + var(--ic-shift, 0px)), 6px);
    /* Closing: fade out, then hide */
    transition: opacity 0.18s, transform 0.18s, visibility 0s linear 0.18s;
}
/* A closed (or closing) panel never catches the mouse */
.ic-menu > li > .sub-menu { pointer-events: none; }
/* Opening: visible and usable at once, the fade only decorates */
.ic-menu > li:hover > .sub-menu,
.ic-menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(calc(-50% + var(--ic-shift, 0px)), 0);
    transition: opacity 0.18s, transform 0.18s, visibility 0s;
}
/* Invisible bridge between the menu item and its panel, so the mouse never falls into a gap */
.ic-menu > li > .sub-menu::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 14px;
}

/* Long submenus flow into two columns (top to bottom, keeping the colour order) */
.ic-menu .sub-menu.has-columns { column-count: 2; column-gap: 18px; min-width: 540px; }
.ic-menu .sub-menu.has-columns > li { break-inside: avoid; }

/* Category headings: a second-level menu item with the link "#" and its own entries becomes a
   column with a small heading; the colour dots start at Red again in every column */
.ic-menu .sub-menu.has-headings { display: flex; align-items: flex-start; gap: 4px 24px; min-width: 0; }
.ic-menu .sub-menu.has-headings > li { min-width: 190px; max-width: 280px; }
.ic-menu .sub-menu > li.menu-heading > a {
    padding: 6px 10px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ic-muted);
    pointer-events: none;
    cursor: default;
}
.ic-menu .sub-menu > li.menu-heading > a::before { display: none; }
.ic-menu .sub-menu > li.menu-heading > .sub-menu { padding-left: 0; }
.ic-menu .sub-menu > li.menu-heading > .sub-menu a { font-size: 0.92rem; padding-block: 7px; }

/* Third level: indented below its parent. Visibility is inherited, so the entries of a closed
   panel never react to the mouse (they would otherwise open that panel over another one). */
.ic-menu .sub-menu .sub-menu {
    position: static;
    min-width: 0;
    padding: 0 0 4px 18px;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: inherit;
    transform: none;
    transition: none;
}
.ic-menu .sub-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 5px;
    font-size: 0.92rem;
    color: var(--ic-text);
}
.ic-menu .sub-menu .sub-menu a { padding-block: 5px; font-size: 0.86rem; }
.ic-menu .sub-menu a:hover,
.ic-menu .sub-menu .current-menu-item > a { background-color: #333333; }

/* Coloured dots in colour order Red → Red-Violet, repeating every 12 entries */
.ic-menu .sub-menu a::before { content: ''; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background-color: var(--ic-dot); }
.ic-menu .sub-menu > li:nth-child(12n+1) > a { --ic-dot: var(--ic-c1); }
.ic-menu .sub-menu > li:nth-child(12n+2) > a { --ic-dot: var(--ic-c2); }
.ic-menu .sub-menu > li:nth-child(12n+3) > a { --ic-dot: var(--ic-c3); }
.ic-menu .sub-menu > li:nth-child(12n+4) > a { --ic-dot: var(--ic-c4); }
.ic-menu .sub-menu > li:nth-child(12n+5) > a { --ic-dot: var(--ic-c5); }
.ic-menu .sub-menu > li:nth-child(12n+6) > a { --ic-dot: var(--ic-c6); }
.ic-menu .sub-menu > li:nth-child(12n+7) > a { --ic-dot: var(--ic-c7); }
.ic-menu .sub-menu > li:nth-child(12n+8) > a { --ic-dot: var(--ic-c8); }
.ic-menu .sub-menu > li:nth-child(12n+9) > a { --ic-dot: var(--ic-c9); }
.ic-menu .sub-menu > li:nth-child(12n+10) > a { --ic-dot: var(--ic-c10); }
.ic-menu .sub-menu > li:nth-child(12n+11) > a { --ic-dot: var(--ic-c11); }
.ic-menu .sub-menu > li:nth-child(12n+12) > a { --ic-dot: var(--ic-c12); }

/* Submenu toggles and the menu button are only used on small screens */
.ic-submenu-toggle,
.ic-menu-toggle { display: none; }

/* ---------- 9. Content ---------- */
.ic-page-header { margin-bottom: clamp(16px, 2vw, 28px); }
.ic-page-title { margin: 0; }
.ic-page-description { color: var(--ic-muted); margin-top: 8px; max-width: var(--ic-text-width); }
.ic-entry-meta { font-size: 0.85rem; color: var(--ic-muted); margin-top: 6px; }
.ic-entry-meta a { color: var(--ic-muted); }
.ic-featured-image { margin: 0 0 clamp(20px, 2.5vw, 32px); }
.ic-featured-image img { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--ic-radius); }

/* Running text keeps a readable width; plugin output, tables, images and blocks use the full width */
.entry-content::after { content: ''; display: table; clear: both; }
.entry-content > :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6, details, .wp-block-quote, .wp-block-pullquote, .wp-block-details) { max-width: var(--ic-text-width); }
.entry-content > :where(:first-child) { margin-top: 0; }
.entry-content > .alignfull { margin-inline: calc(-1 * var(--ic-gutter)); max-width: none; width: auto; }

/* Block editor alignments and common blocks */
.alignleft { float: left; margin: 0.3em 1.5em 1em 0; }
.alignright { float: right; margin: 0.3em 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; text-align: center; }
.wp-caption, .wp-block-image { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption { font-size: 0.85rem; color: var(--ic-muted); }
.wp-block-image img { border-radius: 3px; }
.wp-block-separator { border: 0; border-top: 1px solid var(--ic-border); opacity: 1; }
.wp-block-quote { border-left: 3px solid var(--ic-border); padding-left: 18px; }
.wp-block-pullquote { border-block: 1px solid var(--ic-border); color: var(--ic-heading); }
.wp-block-columns { gap: clamp(16px, 2vw, 32px); }
.wp-block-group.has-background { padding: clamp(14px, 2vw, 24px); border-radius: var(--ic-radius); }
.wp-block-details { background-color: var(--ic-surface); border: 1px solid var(--ic-border); border-radius: var(--ic-radius); padding: 6px 12px; }
.wp-block-details summary { cursor: pointer; font-weight: 500; }
.wp-block-search__inside-wrapper { gap: 6px; }
.wp-block-search__input { border-radius: 3px; }
.wp-block-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wp-block-embed iframe { max-width: 100%; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.gallery-item { margin: 0; }
.sticky .ic-card { border-color: var(--ic-muted); }
.bypostauthor { display: block; }

/* Password form */
.post-password-form { max-width: 480px; }
.post-password-form p:last-child { display: flex; align-items: flex-end; gap: 8px; }
.post-password-form label { display: flex; flex-direction: column; gap: 4px; flex: 1; }

/* ---------- 10. Post cards (blog, archive, search) ---------- */
.ic-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 22px; }
.ic-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: 8px;
    transition: border-color 0.15s;
}
.ic-card:hover { border-color: #777777; }
.ic-card-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--ic-table-bg); }
.ic-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ic-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 20px; }
.ic-card-date { font-size: 0.8rem; color: var(--ic-muted); }
.ic-card-title { margin: 6px 0 8px; font-size: 1.15rem; font-weight: 500; line-height: 1.3; }
.ic-card-title a { color: var(--ic-heading); text-decoration: none; }
.ic-card-title a:hover { text-decoration: underline; }
.ic-card-excerpt { margin: 0; font-size: 0.92rem; color: var(--ic-muted); }
.ic-card-excerpt p { margin: 0; }

/* Pagination and post navigation */
.pagination, .posts-navigation, .post-navigation { margin-top: clamp(28px, 4vw, 48px); }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.post-navigation .nav-links { justify-content: space-between; gap: 16px; }
.post-navigation .nav-subtitle { display: block; font-size: 0.75rem; color: var(--ic-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.post-navigation a { text-decoration: none; }
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--ic-border);
    border-radius: 5px;
    font-size: 0.9rem;
    text-decoration: none;
}
.page-numbers.current { color: #111111; background-color: var(--ic-text); border-color: var(--ic-text); }
.page-numbers.dots { border-color: transparent; }
.page-links { clear: both; margin: 1.5em 0; }

/* ---------- 11. Comments ---------- */
.comments-area { max-width: var(--ic-text-width); margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--ic-border); }
.comment-list, .comment-list .children { list-style: none; padding: 0; margin: 0; }
.comment-list .children { padding-left: clamp(12px, 3vw, 32px); }
.comment-body { padding: 12px 0; border-bottom: 1px solid #333333; }
.comment-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 0.85rem; color: var(--ic-muted); }
.comment-author img { border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.comment-metadata a, .reply a { color: var(--ic-muted); font-size: 0.85rem; }
.comment-form p { margin-bottom: 10px; }
.comment-form label { display: block; margin-bottom: 4px; }
.comment-form-cookies-consent { display: flex; align-items: center; gap: 4px; }
.comment-form-cookies-consent label { display: inline; margin: 0; }

/* ---------- 12. Search form and widgets ---------- */
.search-form { display: flex; gap: 6px; max-width: 480px; }
.search-form label { flex: 1; }
.widget { margin-bottom: 24px; }
.widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: 0.92rem; }
.widget li { margin: 0; }

/* ---------- 13. Footer ---------- */
.ic-footer { background-color: var(--ic-footer-bg); font-size: 0.92rem; }
.ic-footer-widgets { display: grid; grid-template-columns: repeat(var(--ic-footer-columns, 4), minmax(0, 1fr)); gap: 32px; padding-block: 48px 32px; }
.ic-footer .widget-title,
.ic-footer .wp-block-heading { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ic-muted); margin: 0 0 14px; }
.ic-footer a { color: var(--ic-text); text-decoration: none; }
.ic-footer a:hover { text-decoration: underline; }
.ic-footer p { color: var(--ic-muted); }
.ic-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    padding-block: 16px 22px;
    border-top: 1px solid #2a2a2a;
    font-size: 0.85rem;
    color: var(--ic-muted);
}
.ic-footer-menu { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
.ic-footer-menu li { margin: 0; }
.ic-footer-menu a { color: var(--ic-muted); }

/* ---------- 14. 404 and empty results ---------- */
.ic-not-found { max-width: var(--ic-text-width); }
.ic-not-found .search-form { margin-top: 16px; }

/* ---------- 15. Responsive ---------- */
@media (max-width: 1100px) {
    .ic-header-inner { display: flex; }
    .ic-menu-toggle {
        display: inline-flex;
        margin-left: auto;
        font-size: 0.9rem;
        font-weight: normal;
        padding: 6px 14px;
        background-color: #333333;
        border-color: var(--ic-border);
    }
    .ic-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        padding: 8px var(--ic-gutter) 20px;
        background-color: #161616;
        border-top: 1px solid var(--ic-border);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    }
    .ic-nav.is-open { display: block; }
    .ic-menu { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
    .ic-menu > li { flex-wrap: wrap; border-bottom: 1px solid #2c2c2c; }
    .ic-menu > li > a { flex: 1; padding: 13px 4px; border-radius: 0; }
    .ic-menu > li > a:hover, .ic-menu > li:focus-within > a { background: none; }
    .ic-menu > li.current-menu-item > a,
    .ic-menu > li.current-menu-ancestor > a,
    .ic-menu > li.current-menu-parent > a,
    .ic-menu > li.current_page_item > a { box-shadow: none; font-weight: 600; }
    .ic-menu > li.menu-item-has-children > a::after { display: none; }
    .ic-submenu-toggle {
        display: inline-flex;
        width: 40px;
        min-height: 40px;
        padding: 0;
        background: none;
        border: 0;
        color: var(--ic-text);
    }
    .ic-submenu-toggle::before {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transition: transform 0.15s;
    }
    .ic-submenu-toggle:hover { background: none; }
    .ic-menu > li.is-open > .ic-submenu-toggle::before { transform: rotate(-135deg) translateY(-2px); }
    .ic-menu .sub-menu,
    .ic-menu .sub-menu.has-columns,
    .ic-menu .sub-menu.has-headings {
        position: static;
        display: none;
        flex-basis: 100%;
        min-width: 0;
        column-count: 1;
        padding: 0 0 10px 8px;
        background: none;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .ic-menu > li.is-open > .sub-menu { display: block; }
    .ic-menu > li > .sub-menu { pointer-events: auto; }
    .ic-menu > li > .sub-menu::after { display: none; }
    .ic-menu .sub-menu.has-headings > li { min-width: 0; max-width: none; }
    .ic-menu .sub-menu > li.menu-heading > a { padding-top: 10px; }
    .ic-menu .sub-menu .sub-menu { display: block; }
    .ic-footer-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .ic-header-inner { min-height: 64px; gap: 12px; }
    .ic-brand .custom-logo { max-height: 40px; }
    .ic-site-title { font-size: 1.25rem; }
    .ic-site-description { display: none; }
    .ic-footer-widgets { grid-template-columns: 1fr; }
    .alignleft, .alignright { float: none; margin: 0 0 1em; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}