/* =========================================================================
   Material Symbols Rounded — self-hosted variable font (ligature-based).
   Self-hosted first so icons render immediately without a CDN round-trip.
   The old MaterialIcons-Regular files use the CODEPOINT format and must NOT
   be registered under the "Material Symbols Rounded" family name — doing so
   shadows the variable font and every icon ligature (calendar_month, etc.)
   renders as raw text.
   ========================================================================= */

/* --- Self-hosted variable font (downloaded from Google Fonts CDN) -------- */
@font-face {
    font-family: "Material Symbols Rounded";
    font-style: normal;
    font-weight: 100 700;         /* variable weight axis */
    font-display: swap;           /* show text fallback while loading */
    src: url("./fonts/MaterialSymbols-Rounded.woff2") format("woff2");
    font-named-instance: "Regular";
}

/* Base icon styles — shared by all Material Symbols elements */
.material-symbols-rounded,
.material-symbols-outlined,
.k24-icon.material-symbols-rounded,
i.material-symbols-outlined,
i.material-symbols-rounded {
    font-family: "Material Symbols Rounded", "Material Symbols Outlined", "Material Icons", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    vertical-align: middle;
}

/* -------------------------------------------------------------------------
   Safety-net overrides — loaded AFTER shortcodes.css so same-specificity
   !important rules here win by cascade order.  Higher-specificity selectors
   beat the shortcodes.css ".shortcode-block .shortcode-card-meta span"
   rule (0,2,1) that would otherwise kill ligature rendering.

   Two critical properties MUST NOT be overridden on icon elements:
     font-family  — determines which font renders the ligature glyph
     text-transform — uppercase/capitalize breaks ligature lookup
   ------------------------------------------------------------------------- */
.k24-icon.material-symbols-rounded,
.k24-icon.material-symbols-outlined,
span.material-symbols-rounded,
span.material-symbols-outlined,
.shortcode-card-meta .material-symbols-rounded,
.shortcode-card-meta .material-symbols-outlined,
.shortcode-card-meta .k24-icon.material-symbols-rounded,
.shortcode-card-meta .k24-icon.material-symbols-outlined,
.entry-meta .material-symbols-rounded,
.entry-meta .material-symbols-outlined,
.k24-card__meta .material-symbols-rounded,
.k24-card__meta .material-symbols-outlined,
.post-on .material-symbols-rounded,
.hit-count .material-symbols-rounded,
.time-reading .material-symbols-rounded {
    font-family: "Material Symbols Rounded", "Material Symbols Outlined", "Material Icons", sans-serif !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    -webkit-font-feature-settings: "liga" !important;
    font-feature-settings: "liga" !important;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24 !important;
}

.k24-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
}

.k24-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.k24-brand-icon__image {
    display: block;
    inline-size: 1em;
    block-size: 1em;
    object-fit: contain;
}

.k24-brand-icon__svg {
    display: block;
    inline-size: 1em;
    block-size: 1em;
    color: inherit;
}

.k24-brand-icon__svg path:not([fill]),
.k24-brand-icon__svg circle:not([fill]),
.k24-brand-icon__svg rect:not([fill]),
.k24-brand-icon__svg polygon:not([fill]) {
    fill: currentColor;
}

.k24-brand-icon__svg [fill]:not([fill="none"]) {
    fill: currentColor;
}

.k24-brand-icon__svg [stroke]:not([stroke="none"]) {
    stroke: currentColor;
}

.nav-link-icon .material-symbols-rounded,
.navbar-vertical .material-symbols-rounded,
.dropdown-item .material-symbols-rounded,
.btn .material-symbols-rounded,
.search-button .k24-icon,
.search-form-icon .k24-icon,
.top-right-icon .k24-icon,
.play_btn .k24-icon,
.single-social-share .k24-icon,
.social-icon .k24-icon {
    font-size: 1rem;
}

.post-thumb .social-share .k24-brand-icon__image,
.single-social-share .k24-brand-icon__image,
.widget-about .header-social-network .k24-brand-icon__image,
.follow-us .k24-brand-icon__image {
    filter: brightness(0) invert(1);
}

.top-bar .header-social-network .k24-brand-icon__image,
.sidebar-widget .header-social-network .k24-brand-icon__image {
    filter: none;
}

.icon-select-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-select-option__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}