/*
Theme Name: Contrafonts
*/

:root {
    --bg-color: #1a1a1a;
    --text-color: #f7f7f7;
    --accent-color: #ff9a1b;
    --hero-font-family: 'Cronica', monospace;
    --hero-font-weight: 400;
    --hero-font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    list-style: none;
}



@font-face {
    font-family: 'Cronica';
    src: url('fonts/CFCronica-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Cronica';
    src: url('fonts/CFCronica-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Cronica';
    src: url('fonts/CFCronica-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Arche';
    src: url('fonts/CFArcheGrotesk-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Arche';
    src: url('fonts/CFArcheGrotesk-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Arche';
    src: url('fonts/CFArcheGrotesk-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Arche';
    src: url('fonts/CFArcheGrotesk-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}


@font-face {
    font-family: 'Victoria';
    src: url('fonts/CFVictoriaAlpha-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Phoenix';
    src: url('fonts/CFPhoenixBeta-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

body {
    font-family: 'Cronica', Courier, monospace;
    padding: 20px 20px 0 20px;
    /* This is fine for inner pages */
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.5s ease, color 0.5s ease;
    text-wrap: pretty;
    scrollbar-width: none;

}

::-webkit-scrollbar {
    display: none;
}


.nombresitio {
    font-weight: 700;
    font-size: 28px;
    grid-column: 1;
    text-decoration: none;
    font-family: 'Arche', sans-serif;
    font-weight: 700;
    color: var(--text-color);
    padding: 10px 0 10px 20px;

}

#menu {
    justify-self: end;
    padding: 18px 0 15px 0;
}


.site-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    color: var(--text-color);
    border-top: 1px solid var(--text-color);
    border-bottom: 1px solid var(--text-color);
    border-left: 10px solid var(--text-color);
    position: relative;
    z-index: 1000;
    overflow: visible;
}

.menu-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    margin-right: 12px;
}

.main-navigation ul li {
    border-top: 1px solid var(--text-color);
}

.main-navigation ul li a {
    display: block;
    padding: 12px;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.2s;
    font-size: 20px;

}

.main-navigation a:hover {
    color: var(--bg-color);
    background-color: var(--text-color);
}

.main-navigation .current-menu-item>a {
    color: var(--accent-color);
    font-weight: bold;
}

.menu-toggle .arrow-down,
.arrow-down {
    text-align: right;
    padding-right: 20px;
    transition: transform 0.3s ease-in-out;
    margin-top: -10px;
}

.arrow-down {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.menu-toggle:hover .arrow-down {
    opacity: 1;
}

.site-header.is-open .main-navigation {
    max-height: 500px;
    visibility: visible;
    opacity: 1;
}

.main-navigation {
    position: absolute;
    top: 100%;
    right: 0;
    width: 180px;
    z-index: -1;
    text-align: right;
    padding-left: 20px;
    max-height: 0;
    visibility: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, visibility 0.4s;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
}



body.home,
body.front-page {
    height: 100svh;
    overflow: hidden;
    padding: 20px 20px 0 20px;
}


.hero-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.hero-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 120px;
    padding-bottom: 50px;
}

.hero-text {
    flex-shrink: 1;
    display: inline-block;
    max-width: 100%;
    font-family: var(--hero-font-family);
    font-weight: var(--hero-font-weight);
    font-style: var(--hero-font-style);
    line-height: 1.1;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
    white-space: inherit;
}

.hero-text.is-resizing {
    visibility: hidden;
    opacity: 0;
    transition: none;
}

.hero-text.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 800ms;
}

.hero-text span {
    display: block;
    line-height: 1.1;
}

#controls-1 {
    display: flex;
    justify-content: start;
    gap: 24px;
}

.hero-controls {
    display: flex;
    gap: 24px;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 1rem 20px;
    z-index: 20;
    flex-shrink: 0;
}

.hero-controls::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background-color: var(--text-color);
}

.hero-button-group {
    display: inline-flex;
    border: 1px solid var(--text-color);
    overflow: hidden;
}

.hero-control-item {
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid var(--text-color);
    background-color: transparent;
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    margin-left: auto;
    align-self: flex-end;
    width:auto;
}


.hero-button {
    background-color: transparent;
    color: var(--text-color);
    border: none;
    padding: 10px 20px;
    margin: 0;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}


.hero-button+.hero-button,
.hero-button-container+.hero-button {
    border-left: 1px solid var(--text-color);
}

.hero-button:hover {
    background-color: var(--text-color);
    color: var(--bg-color);
}

.hero-button-container {
    position: relative;
}

.hero-button-container .hero-button {
    border-left: 1px solid var(--text-color);
}

.hero-control-item:hover {
    background-color: var(--text-color);
    color: var(--bg-color);
}

.hero-content {
    cursor: pointer;
}

.hero-chooser-list {
    position: absolute;
    bottom: calc(100% + 1rem + 1ex);
    left: 0px;
    width: auto;
    background-color: transparent;
    z-index: 100;
    max-height: 40vh;
    overflow-y: auto;
    font-size: clamp(0.8em, 1em, 20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}


#current-font-style-display,
#current-font-family-display {
	font-size: clamp(14px, 1em, 20px);
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid var(--text-color);
    padding: 8px 8px;
    background-color: var(--text-color);
    color: var(--bg-color);
    transition: background-color 0.3s, color 0.3s;
    min-width: 0;
    max-width: clamp(60px, 16vw, 200px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#current-font-style-display:hover,
#current-font-family-display:hover {
    color: var(--text-color);
    background-color: transparent;
}

#hero-font-info-link {
    font-family: 'Cronica', monospace;
    font-size: clamp(14px, 1em, 20px);
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid var(--text-color);
    padding: 8px 8px 8px 8px;
    background-color: transparent;
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    position: relative;
    min-width: 0;
    max-width: clamp(60px, 16vw, 200px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a#hero-font-info-link {
    text-decoration: none;
}

#hero-font-info-link:hover {
    color: var(--bg-color);
    background-color: var(--text-color);
}



.hero-menu-container {
    position: relative;
}

.hero-menu-container.is-open .hero-chooser-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.hero-button-container.is-open .font-chooser-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


#font-menu-container {
    position: relative;
}


.font-style-option {
    padding: 10px 20px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--text-color);
}

.font-style-option:hover {
    background-color: var(--text-color);
    color: var(--bg-color);
}

.font-style-option:last-child {
    border-bottom: none;
}

#toggle-color-btn {
    border: none;
    border-bottom: 1px solid var(--text-color);
    padding-bottom: 4px;
}


h1.post-title-cfonts {
    top: 0;
    padding: 5% 0 10px 30px;
    font-size: clamp(2.5em, 5vw, 3.5em);
    border-bottom: 1px solid #000000;
    color: #000000;
    background-color: var(--text-color);
    font-family: 'Phoenix', serif;
    display: block;
    position: sticky;
    z-index: 6;
}

.single-font_info h1.post-title-cfonts {
    background-color: transparent;
    border-bottom: none;

}


.post-info {
    font-size: 16px;
    color: var(--bg-color);
    text-transform: uppercase;
}

#post-meta {
    display: flex;
    justify-content: flex-start;
    padding: 10px 0 0 30px;
}


.single-post .site-header {
    background-color: var(--text-color);
    color: #000000;
    border-color: #000000;
}

.single-post .main-navigation ul {
    background-color: var(--text-color);
}

.single-post .site-header a,
.single-post .site-header .menu-toggle {
    color: #000000;
}

.single-post .main-navigation ul li {
    border-color: #000000;
}

.single-post .main-navigation ul li a {
    color: #000000;
}

.single-post .main-navigation ul li a:hover {
    background-color: var(--accent-color);
}

.single-post .main-navigation .current-menu-item>a {
    color: #e74c3c;
}

.single-post {
    background-color: var(--text-color);
}

.single-post .nombresitio {
    color: #000000;
}


.about-page .entry-content p {
    color: var(--text-color);
    font-family: 'Arche', sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    text-wrap: pretty;
    margin-bottom: 1.5rem;
}

.entry-content p {
    color: #000000;
    font-family: 'Arche', sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    text-wrap: pretty;
    margin-bottom: 1.5rem;
}

.entry-content a {
    color: #e74c3c;
}

.entry-content figure img {
    width: 100%;
    height: auto;
    display: block;
}

.entry-content figure,
.entry-content .wp-block-image,
.entry-content .wp-block-gallery {
    margin-bottom: 2.5rem;
    width: 100%;
}

.entry-content figure figcaption,
.wp-caption-text,
.wp-element-caption {
    font-size: 0.9rem;
    color: var(--bg-color);
    /* Ensure visibility on dark bg */
    text-align: left;
    margin-top: 10px;
    font-family: 'Cronica', Courier, monospace;
    display: block;
    width: 100%;
    padding: 10px;
    border-top: 1px solid var(--bg-color);
    border-bottom: 1px solid var(--bg-color);
}

/* Style for native WordPress galleries */
.entry-content .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

/* --- 9. Single Post Split Layout (Desktop) --- */

/* Override default single column layout when split is active */
.entry-content.layout-split {
    max-width: 95vw;
    /* Use full width minus margins */
    width: 100%;
    display: block;
    /* Reset flex */
    padding: 0 30px;
}

.single-post-layout-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

.single-post-text-col {
    width: 45%;
    margin-top: 2rem;
    padding-right: 40px;
    padding-bottom: 20vh;
    /* Extra space to scroll last item */
}



/* Transitions for Media Items - Reset */


/* Specifics for WP figures and images */
.split-media-item img {
    width: 100%;
    height: auto;
}

/* Custom Gallery Internal Visibility */
.custom-gallery-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Ensure current image is visible */


/* Active State */
.split-media-item.is-active {
    opacity: 1;
    z-index: 5;
}

/* Ensure Text Column is readable */
.single-post-text-col p {
    font-size: 1.25rem;
    max-width: 65ch;
    /* Optimal reading line length */
}

@media (max-width: 1000px) {

    h1.post-title-cfonts,
    #post-meta {
        padding: 5% 0 10px 0px;
    }

    .entry-content {
        margin: 3rem auto auto 0px;
    }
}

/* --- 10. Custom Gallery & Refinements --- */

/* Fix logic for media item flex direction (image + caption stack) */
.split-media-item {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* or flex-start if preferred */
}

/* Ensure captions align nicely */
.split-media-item figcaption {
    width: 100%;
    margin-top: 10px;
    text-align: left;
    /* Matched to theme style */
    display: block;
    padding: 10px;
    border-top: 1px solid var(--bg-color);
    border-bottom: 1px solid var(--bg-color);
}

/* Custom Gallery Styles */
.custom-gallery-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align left */
}

.custom-gallery-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

/* Custom Gallery Image Area */
.custom-gallery-image-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Remove fixed height to prevent overlap/hidden items, let image define it, or use min-height */
    width: 100%;
}

.custom-gallery-current-img {
    display: block;
    max-width: 100%;
    max-height: 420px;
    /* Enforce 420px max height for all images */
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 0.15s ease-in-out;
    contain-intrinsic-size: none;
    /* Fix layout shift issues from inspector */
}



/* Navigation Buttons */
.gallery-nav {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 10px;
    /* Reduced vertical padding */
    color: var(--bg-color);
    /* User requested color */
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s ease, color 0.2s;
    outline: none;
    z-index: 10;
    height: 100%;
    width: 100%;
}

.gallery-nav svg {
    width: 20px;
    height: 15px;
    /* Fit within 25px */
    stroke-width: 3;
    /* thinner lines */
    stroke: var(--text-color);
}

.gallery-nav:hover {
    transform: scale(1.05);
    /* accent color */
}


.gallery-nav svg polyline {
    transform-origin: center;
    transform: scaleX(0.7);
}

/* Dynamic Caption */
.custom-gallery-caption {
    font-size: 0.9rem;
    color: var(--bg-color);
    /* Was #555, invisible on dark bg */
    text-align: left;
    font-family: 'Cronica', monospace;
    min-height: 1.2em;
    width: 100%;
    padding: 10px;
    border-top: 1px solid var(--bg-color);
    border-bottom: 1px solid var(--bg-color);
}

/* New Nav Box Styling */
/* New Nav Box Styling */
.custom-gallery-nav-box {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 0;
    padding: 0;
    border: 1px solid var(--bg-color);
    height: 25px;
    z-index: 10;
    align-self: center;
    align-items: center;
    width: 100%;
    background-color: var(--bg-color);
}

/* Update Nav Buttons to be simpler since they are in a box */
.gallery-nav {
    padding: 2px 10px;
}

.wp-element-caption {
    padding: 10px;
    border-top: 1px solid var(--bg-color);
    border-bottom: 1px solid var(--bg-color);
}

/* --- 12. New Simple Split Layout (Independent Scrolls) --- */

/* Reset media col to be a simple scrollable container */
.single-post-media-col {
    width: 50%;
    /* Sticky position so it stays in view while text scrolls */
    position: sticky;
    position: -webkit-sticky;
    margin-top: 2rem;
    top: 15vh;
    /* adjust based on header */
    height: 85vh;
    /* Fill rest of screen */
    overflow-y: auto;
    /* Internal scroll */

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 50px;
    gap: 40px;
    /* Space between stacked images */

    /* Hide scrollbar for cleaner look? Optional */
    scrollbar-width: none;

}

/* Ensure items are always visible */
.media-stack-item,
.split-media-item {
    display: block !important;
    opacity: 1 !important;
    position: static !important;
    /* Reset any absolute positioning */
    width: 100%;
    margin: 0 !important;
    /* Gap handled by parent gap */
}

/* Active/Inactive states are no longer relevant, ensure cleanliness */
.split-media-item.is-active,
.split-media-item.is-inactive {
    display: block !important;
    opacity: 1 !important;
}

/* Ensure images fit nicely in the rail */
.single-post-media-col img {
    max-height: none;
    /* Let them flow natural height? Or constrain? */
    /* Often better to just let width define height */
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Adjust Text Column to flow naturally */
.single-post-text-col {
    min-height: 100vh;
    /* The media col is sticky relative to the wrapper, so wrapper must be tall */
}

.next {
    display: flex;
    justify-content: end;
}

#site-footer {
    display: block;
    margin-top: 2rem;
    margin-bottom: 20px;
    border-top: 1px solid var(--text-color);
    border-bottom: 1px solid var(--text-color);
    border-right: 10px solid var(--text-color);
    width: 100%;
    height: auto;
}

.single-post #site-footer,
.single-font_info #site-footer {
    display: block;
    margin-top: 2rem;
    margin-bottom: 20px;
    border-top: 1px solid var(--bg-color);
    border-bottom: 1px solid var(--bg-color);
    border-right: 10px solid var(--bg-color);
    width: 100%;
    height: auto;
}

/* --- Font info single (same header/title style as single post, [info]/[specimen] selectors) --- */
.single-font-info .site-header,
.single-font-info .site-header a,
.single-font-info .main-navigation ul li a,
.single-font-info .nombresitio {
    color: #000000;
}

.single-font-info .main-navigation ul li {
    border-top: 1px solid var(--bg-color);
}


.single-font-info .site-header { background-color: var(--text-color); border-color: #000000; }
.single-font-info .main-navigation ul { background-color: var(--text-color); }
.single-font-info { background-color: var(--text-color); }

.font-info-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 5% 0 10px 30px;
    border-bottom: 1px solid #000000;
}
.font-info-title-meta { flex: 1 1 auto; }
.font-info-selectors {
    display: flex;
    gap: 1rem;
    font-family: 'Cronica', Courier, monospace;
    flex-shrink: 0;
}
.font-info-selector {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: var(--bg-color);
    opacity: 0.6;
    transition: opacity 0.25s ease;
}
.font-info-selector:hover { opacity: 1; }
.font-info-selector.is-active { opacity: 1; font-weight: bold; }

.font-info-panels { 
    max-width: 95vw;
    width: 100%;
    display: block;
    padding: 0 30px;
}
.font-info-panel {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.font-info-panel.is-active {
    opacity: 1;
    visibility: visible;
}

.font-info-two-col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    margin-top: 2rem;
    padding-bottom: 20vh;
}
.font-info-text-col { width: 45%; }
.font-info-text-col .entry-content p { color: #000000; font-family: 'Arche', sans-serif; font-size: 1.125rem; line-height: 1.7; }
.font-info-media-col { width: 45%; }
.font-info-featured-image { width: 100%; }
.font-info-featured-image img { width: 100%; height: auto; display: block; }

.font-info-specimen-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    padding-bottom: 20vh;
}
.font-info-specimen-item { width: 100%; max-width: 900px; }
.font-info-specimen-item img { width: 100%; height: auto; display: block; }

@media (max-width: 1000px) {
    .font-info-header-row { flex-direction: column; padding: 5% 0 10px 0; }
    .font-info-two-col { flex-direction: column; }
    .font-info-text-col,
    .font-info-media-col { width: 100%; }
}

#site-footer .nombresitio {
    display: block;
    padding-left: 0;
}

.post-footer {
    margin-top: 2rem;
    border-top: 1px solid var(--bg-color);
    padding: 2rem 0;
    font-family: 'Arche', sans-serif;
    color: var(--bg-color);
}

.post-footer a {
    text-decoration: none;
    color: var(--bg-color);
    position: relative;
    display: inline-block;
}

.post-footer a::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: var(--bg-color);
    transition: width 0.3s ease;
}

.post-footer a:hover::after {
    width: 100%;
}

.tags-label {
    font-weight: bold;
    font-size: 20px;
    font-family: 'Arche', sans-serif;
}

/* --- 13. Workshop / Articles Archive --- */

/* --- Tag Filters Layout --- */

.filters-container {
    margin: 20px 0;
    font-family: 'Cronica', monospace;
    font-size: 1.2rem;
}

.filters-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-left: 30px;
}

.workshop-filters {
    margin: 0;
    /* Reset previous margin */
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;

}

.workshop-filters a {
    /* Existing basic styles should apply, just resetting layout context if needed */
    text-decoration: none;
    color: var(--text-color);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.workshop-filters a:hover,
.workshop-filters a.is-active {
    opacity: 1;
}

/* Tag Dropdown */
.tag-filter-wrapper {
    position: relative;
    margin-right: 12px;
    /* This ensures dropdown is positioned relative to this button area */
}

.tag-filter-trigger {
    background: none;
    border: none;
    color: var(--text-color);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s;
    padding: 0;
}

.tag-filter-trigger:hover {
    opacity: 1;
}

.tag-filter-list {
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--bg-color);
    border: 1px solid var(--text-color);
    padding: 10px 0;
    list-style: none;
    z-index: 100;

    display: none;
    /* Hidden by default */
}

.tag-filter-list.is-open {
    display: block;
    transform: translate(12px, 20px);
}

.tag-filter-list li a {
    display: block;
    padding: 5px 20px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.2s;
}

.tag-filter-list li a:hover {
    background-color: var(--text-color);
    color: var(--bg-color);
}

/* Active Tag Row */
.active-tags-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dotted var(--text-color);
    /* Optional separation */
}

.active-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* border: 1px solid var(--text-color);
    border-radius: 99px; */
    /* Pill shape */
    padding: 12px;
    font-size: 1rem;
}

.remove-tag-icon {
    text-decoration: none;
    color: var(--text-color);
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

@media (max-width: 768px) {
    .filters-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .tag-filter-wrapper {
        width: 100%;
    }

    .tag-filter-list {
        right: auto;
        left: 0;
        width: 100%;
    }
}

.filtering {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: grayscale(1);
}


.workshop-filters a:hover {
    opacity: 1;
}

.workshop-filters a.is-active {
    opacity: 1;
    font-weight: bold;
    text-decoration: underline;
}

/* Articles Banner List Layout */
.articles-list {
    display: flex;
    flex-direction: column;
    padding: 0 0px;
    border-bottom: 1px solid var(--text-color);

    /* Full width often implies edge to edge, but standard padding might be maintained */
}

/* Banner Item */
.article-banner {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    transition: transform 0.3s ease;
    border-top: 1px solid var(--text-color);
    /* Background color is set inline by PHP */
}

/* Link covering the whole banner */
.article-main-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Content container - flex layout */
.article-banner-content {
    position: relative;
    /* Important: z-index auto (default) to allow blend mode to work with parent bg */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: none;
    /* Let clicks pass through to main link */
}

/* Image Wrapper */
.article-image-wrapper {
    width: 20%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.article-banner-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    mix-blend-mode: multiply;
    display: block;
    transition: mix-blend-mode 0.3s ease;
}

/* Text Content Wrapper */
.article-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 40px;
    flex-grow: 1;
    /* Take up remaining space */
}

/* Title Styling */
.article-banner-title {
    color: #000000;
    font-family: 'Phoenix', serif;
    font-size: 3rem;
    text-align: left;
    margin: 0;
    background-color: transparent;
    line-height: 1.1;
}

/* Category Link */
.article-banner-category {
    font-family: 'Cronica', monospace;
    font-size: 1rem;
    color: #000000;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    pointer-events: auto;
    /* Enable clicking */
    z-index: 2;
    /* Ensure it's above the main link */
    position: relative;
    transition: opacity 0.3s;
}

.article-banner-category:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* Hover Arrow */
.article-hover-arrow {
    font-family: 'Cronica', monospace;
    font-size: 2rem;
    color: #000000;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.3s ease;
    margin-left: auto;
    margin-bottom: 20px;
    align-self: flex-end;
    /* Push to the right */
}

/* Trigger Hover Effects */
.article-banner:hover {
    .article-hover-arrow {
        opacity: 1;
        transform: translateX(-20px);
    }

    .article-banner-image {
        mix-blend-mode: normal;
    }
}

.titulo-tf {
    display: flex;
    top:0;
    position: sticky;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: baseline;
    background-color: var(--text-color);
    border-bottom: solid 1px var(--bg-color);
}



/* Responsive */
@media (max-width: 768px) {
    .article-banner {
        height: auto;
        min-height: 250px;
    }

    .font-info-panels {
        padding: 0;
    }

    .article-banner-content {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .article-image-wrapper {
        width: 100%;
        margin-bottom: 20px;
    }

    .article-text-content {
        padding-left: 0;
    }

    .article-banner-title {
        font-size: 2rem;
    }

    .article-hover-arrow {
        display: none;
        /* Hide on mobile? OR position differently */
    }
    .titulo-tf {
    flex-flow: column wrap;
    justify-content: space-around;
}
    .single-font_info h1.post-title-cfonts {
    width: 100%;
    border-bottom: solid 1px var(--bg-color)
}

    .font-info-selectors {
    padding: 15px 0;
}

}

@media (max-width: 1024px) {
    .article-banner-title {
        font-size: 2rem;
    }

    .article-banner {
        height: 250px;
    }
}


/* Responsive */
@media (max-width: 768px) {
    .article-image-wrapper {
        height: 0;
        visibility: hidden;
    }

}
.about-content-title {
	    top: 0;
    padding: 5% 0 10px 30px;
    font-size: clamp(2.5em, 5vw, 3.5em);
    border-bottom: 1px solid var(--text-color);
    background-color: var(--bg-color);
    font-family: 'Phoenix', serif;
    display: block;
    position: sticky;
    z-index: 6;
}

.about-page .entry-content h1 {
	font-size: clamp(1.5em, 3vw, 3.2em);
	padding-bottom: 1ex;
	font-family:'Arche';
	font-weight: 600;
}
#controls-1 {
	width: 100vw;
	align-items: baseline;
}

#toggle-color-btn {
	padding:8px;
}
 
.hero-chooser-list {
	max-height: 80svh;
	bottom: calc(100% + 1rem + 10px);
}

.font-style-option {
	transform: translateX(-10px);
}