/**
 * SNAPSMACK - Stylesheet for the true-grit skin
 * Alpha v0.7.5
 *
 * 50 Shades chassis with photographic wall textures, opacity overlay,
 * and archival framing. All class prefixes use tg- namespace.
 */

/* ==========================================================================
   GLOBAL STYLES
   ========================================================================= */

html {
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--wall-bg, var(--bg-primary));
    color: var(--text-primary);
    font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--wall-bg, var(--bg-primary));
    color: var(--text-primary);
    font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
    overflow-y: auto;
    background-position: center center;
}

/* ==========================================================================
   WALL TEXTURE OVERLAY (body::before pseudo-element)
   Semi-transparent colour layer over the photographic background.
   Opacity and colour are controlled via manifest options targeting
   body::before so no extra HTML div is needed across page templates.
   ========================================================================= */

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-color, #1a1a1a);
    opacity: calc(var(--overlay-opacity, 40) / 100);
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   LAYOUT STRUCTURE (SNAPPING ENGINE)
   ========================================================================= */

#page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    position: relative;
    z-index: 1;
}

#scroll-stage {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
    align-items: stretch;
    min-height: 0;
}

/* ==========================================================================
   HEADER (FIXED HEIGHT LOCK)
   ========================================================================= */

#tg-header {
    background-color: transparent;
    height: 80px;
    padding: 0;
    flex-shrink: 0;
    z-index: 20;
    position: relative;
    display: flex;
    align-items: center;
}

#tg-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--header-bg, var(--bg-primary));
    opacity: calc(var(--header-opacity, 100) / 100);
    pointer-events: none;
    z-index: -1;
}

.tg-header-inside {
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

.site-title-text {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
    display: block;
    text-decoration: none;
}

.logo-area a {
    text-decoration: none;
    color: var(--text-primary);
}

.site-logo {
    height: 50px;
    width: auto;
    display: block;
}

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.nav-menu a {
    color: var(--accent);
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.2s ease;
}

.nav-menu a:hover, .nav-menu a.active {
    color: var(--accent-hover);
}

.nav-menu .sep {
    padding: 0 15px;
    color: var(--text-dim);
    font-size: 0.9rem;
    cursor: default;
}

/* ==========================================================================
   PHOTOBOX & IMAGE (OPTICAL LIFT ENGINE)
   ========================================================================= */

#tg-photobox {
    background: transparent;
    width: 100%;
    height: calc(100dvh - 140px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    padding-bottom: 0;
    margin: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    flex-grow: 1;
    flex-shrink: 0 !important;
}

.tg-photo-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
}

.zoomable::after {
    content: none !important;
}

.tg-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    box-sizing: border-box;
    border: none;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.3);
    cursor: zoom-in !important;
    outline: none !important;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.tg-image[style*="opacity: 1"] {
    opacity: 1 !important;
}

/* ==========================================================================
   IMAGE FADE-IN (Prevent layout jumps during image load)
   ========================================================================= */

.post-image,
.pg-post-image,
.inline-asset:not(.snap-inline-frame) {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.post-image[style*="opacity: 1"],
.pg-post-image[style*="opacity: 1"],
.inline-asset[style*="opacity: 1"] {
    opacity: 1 !important;
}

/* ==========================================================================
   INFOBOX (FIXED HEIGHT LOCK)
   ========================================================================= */

#infobox {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 10;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

.nav-links {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    font-family: 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-links .left,
.nav-links .center,
.nav-links .right {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    margin: 0;
}

.nav-links a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 6px 0;
    display: inline-block;
}

.nav-links a:hover {
    color: var(--accent-hover);
}

.nav-links .sep {
    color: var(--text-dim);
    font-size: 0.9rem;
}

.dim {
    color: var(--text-dim);
    font-weight: 600;
    font-size: 0.85rem;
}

/* ==========================================================================
   POST CONTENT DRAWER
   ========================================================================= */

#footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 52px 0 0 0;
    text-align: left;
    display: none;
    width: 100%;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

.photo-title-footer,
.description,
.meta,
.comment-form,
#pane-comments {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.photo-title-footer {
    font-family: 'Raleway', sans-serif;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 2rem;
    margin: 0 auto 40px auto;
    font-weight: 300;
}

.description {
    font-family: 'DM Sans', sans-serif;
    line-height: 1.8;
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.description a,
.static-content a:not(.nav-menu a) {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.description a:hover,
.static-content a:not(.nav-menu a):hover {
    color: var(--accent-hover);
}

.description a:has(img),
.static-content a:has(img) {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* ==========================================================================
   THE SIGNATURE (SYSTEM FOOTER STRIP)
   ========================================================================= */

#system-footer {
    background-color: transparent;
    padding: 32px 0;
    text-align: center !important;
    position: relative;
    width: 100% !important;
    border-top: 1px solid var(--border) !important;
    margin-top: auto;
    display: none;
}

#system-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--footer-bg, var(--bg-chrome));
    opacity: calc(var(--footer-opacity, 100) / 100);
    pointer-events: none;
    z-index: 0;
}

#system-footer .inside,
#system-footer p,
#system-footer .sep,
#sig-text {
    position: relative;
    z-index: 1;
}

#footer[style*="display: block"] ~ #system-footer,
#footer[style*="display:block"] ~ #system-footer {
    display: block !important;
}

#system-footer .inside {
    max-width: 95% !important;
    margin: 0 auto;
}

#system-footer p, #sig-text {
    color: var(--text-secondary) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 0 !important;
}

/* ==========================================================================
   TECHNICAL SPECIFICATIONS
   ========================================================================= */

.meta {
    border-top: 1px solid var(--border);
    padding-top: 40px;
    margin-top: 40px;
    text-align: center;
    padding-bottom: 60px;
}

.meta-header {
    margin-bottom: 25px;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 4px;
    font-size: 1.1rem;
    color: var(--text-dim);
    text-transform: uppercase;
    font-weight: 500;
}

.meta-header.no-signals {
    color: var(--text-primary) !important;
}

.exif-table {
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: left;
    width: auto;
}

.exif-label {
    padding-right: 40px;
    padding-bottom: 12px;
    color: var(--text-dim);
    font-weight: 900;
    text-transform: uppercase;
    font-family: 'DM Sans', sans-serif;
    width: 160px;
    vertical-align: top;
}

.exif-value {
    padding-bottom: 12px;
    color: var(--accent);
    font-family: 'DM Mono', 'Courier New', monospace !important;
    font-size: 1.1em;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   COMMENTS
   ========================================================================= */

.comment-form {
    border-top: 1px solid var(--border);
    padding-top: 40px;
    margin-top: 40px;
    padding-bottom: 80px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.comment-form input,
.comment-form textarea {
    background: var(--input-bg, var(--bg-primary));
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 15px;
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 0.95rem;
    width: 100%;
    box-sizing: border-box;
}

.form-row input {
    flex: 1;
}

.comment-form textarea {
    height: 150px;
    resize: vertical;
}

.comment-form button {
    margin-top: 20px;
    background: var(--bg-chrome);
    color: var(--text-dim);
    border: 1px solid var(--border);
    padding: 12px 30px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    float: right;
}

/* ==========================================================================
   ARCHIVE GRID
   ========================================================================= */

/* --- GRID A: Square & Cropped (CSS Grid layout) --- */
#browse-grid.square-grid,
#browse-grid.cropped-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
    gap: var(--grid-gap, 100px);
    max-width: 95%;
    margin: 80px auto;
    padding: 0 60px;
    flex: 1 0 auto;
}

/* --- GRID B: Justified (Own ID, own rules) --- */
#justified-grid {
    display: block;
    max-width: 95%;
    margin: 40px auto;
    padding: 0;
    box-sizing: border-box;
    flex: 1 0 auto;
}

.square-grid .thumb-container,
.cropped-grid .thumb-container {
    margin: 0 auto;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.square-grid .thumb-link {
    display: block;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.cropped-grid .thumb-link {
    display: block;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    width: 100%;
}

.square-grid .thumb-link img,
.cropped-grid .thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.square-grid .thumb-link img:hover,
.cropped-grid .thumb-link img:hover {
    opacity: 0.7;
}

/* --- Justified item hover --- */
#justified-grid .justified-item img {
    transition: opacity 0.3s ease;
}
#justified-grid .justified-item:hover img {
    opacity: 0.7;
}

/* ==========================================================================
   STATIC PAGE OVERRIDES
   Wall texture is for the photo gallery; static pages use the variant's
   --bg-primary (or admin-overridden --page-bg) for a clean solid background.
   The body::before overlay is kept so the variant colour scheme applies.
   ========================================================================= */

/* body keeps its wall texture on static pages — the texture is visible
   on either side of the centred .static-content box. */

.static-transmission #scroll-stage {
    display: block !important;
    text-align: center !important;
    background: transparent !important;
}

.static-transmission #footer,
.static-transmission #system-footer,
.archive-page #footer,
.archive-page #system-footer {
    display: block !important;
    width: 100% !important;
    visibility: visible !important;
    position: relative;
    z-index: 100;
}

.static-transmission #footer { background: var(--bg-secondary) !important; }
.static-transmission #system-footer { background: transparent !important; border-top: 1px solid var(--border) !important; }

.static-content {
    max-width: var(--static-content-width, 850px) !important;
    margin: 0 auto 0 auto !important;
    padding: 40px 40px 50px 40px !important;
    box-sizing: border-box;
    background: var(--page-bg, var(--bg-primary)) !important;
    text-align: left;
    overflow-x: hidden;
}
.static-content h2,
.static-content h3,
.static-content h4 {
    margin-top: 2em;
    margin-bottom: 0.4em;
}
.static-content .description > :first-child h2,
.static-content .description > :first-child h3,
.static-content .description > h2:first-child,
.static-content .description > h3:first-child {
    margin-top: 0.5em;
}
/* Zero paragraph top margin so heading margin-bottom is the only gap between
   a heading and its following text. Para-to-para spacing is handled by
   the paragraph's own margin-bottom (browser default ~1em). */
.static-content .description p {
    margin-top: 0;
}

/* Lists: consistent with paragraph line-height and spacing */
.static-content .description ul,
.static-content .description ol {
    margin-top: 0;
    margin-bottom: 1.4em;
    padding-left: 1.4em;
}
.static-content .description li {
    line-height: 1.8;
    margin-bottom: 0.3em;
}
.static-content .description li:last-child { margin-bottom: 0; }

.static-content::after {
    content: "";
    display: table;
    clear: both;
}

.static-page-title {
    margin: 0 0 20px 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 2rem;
    font-weight: 300;
}
/* On static pages the title must align with the description text column
   (max-width: 850px, centred). Without this it spans the full padded
   static-content box (970px) while the text sits in a narrower column. */
.static-transmission .static-page-title {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}
/* Landing-only: centre the title on the homepage */
.landing-only .static-page-title {
    text-align: center;
}

.static-transmission .description .align-left {
    float: left !important;
    margin: 17px 50px 25px 10px !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    max-width: 40% !important;
    height: auto !important;
    display: block !important;
}

.static-transmission #photobox.page-hero {
    display: block !important;
    min-height: auto !important;
    padding: 0 !important;
    float: none !important;
    background: transparent !important;
    /* auto left/right so the photobox centres within static-content to
       align with the 850px description column below it. */
    margin: 20px auto 30px auto !important;
    max-width: 850px;
    width: 100% !important;
    box-sizing: border-box;
}

/* Size modifiers */
.static-transmission #photobox.page-hero--full  .main-photo img { max-width: 100%; }
.static-transmission #photobox.page-hero--medium .main-photo img { max-width: 60%; min-width: 200px; }
.static-transmission #photobox.page-hero--small  .main-photo img { max-width: 35%; min-width: 120px; }

/* Alignment modifiers */
.static-transmission #photobox.page-hero--center .main-photo { text-align: center; }
.static-transmission #photobox.page-hero--center .main-photo img { margin: 0 auto; display: block; }
.static-transmission #photobox.page-hero--left .main-photo { text-align: left; }
.static-transmission #photobox.page-hero--left .main-photo img { margin: 0; float: left; }
.static-transmission #photobox.page-hero--right .main-photo { text-align: right; }
.static-transmission #photobox.page-hero--right .main-photo img { margin: 0 0 0 auto; float: right; }

/* Base: explicitly kill any shadow from the compiled CSS blob or other sources */
.static-transmission #photobox.page-hero .main-photo img {
    box-shadow: none !important;
}

/* Shadow modifier — opt in per page. !important needed to win over the none
   rule above when both selectors match (same specificity, this comes later). */
.static-transmission #photobox.page-hero--shadow .main-photo img {
    box-shadow: 0 6px 30px rgba(0,0,0,0.25) !important;
}

.static-transmission #photobox.page-hero .post-image {
    height: auto;
    display: block;
}

.static-transmission .description {
    margin-top: 10px;
    /* .static-content already provides 40px padding on all sides.
       Zero out the general .description side padding so text, title, and
       hero image all align at the same left edge within the container. */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.static-transmission .description img + br {
    display: none !important;
}

/* ==========================================================================
   INLINE ASSETS (PARSED SHORTCODES)
   ========================================================================= */

.inline-asset, .snapsmack-asset, .snap-inline-frame {
    display: block;
    height: auto;
    box-sizing: border-box;
    border: none !important;
    box-shadow: none !important;
    margin-top: 30px;
    margin-bottom: 40px !important;
}

.asset-full   { width: 100% !important; margin-left: auto; margin-right: auto; }
.asset-medium { width: 50%; min-width: 300px; }
.asset-small  { width: 25%; min-width: 150px; }

.align-left {
    float: left !important;
    margin: 17px 50px 25px 10px !important;
}

.align-right {
    float: right !important;
    margin: 5px 10px 25px 50px !important;
}

.align-center {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.description::after { content: ""; display: table; clear: both; }

/* ==========================================================================
   ARCHIVE CONTROLS
   ========================================================================= */

#infobox .center {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

#infobox .filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

#infobox .filter-group form {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

#infobox label.dim {
    margin-right: 8px;
    font-size: 0.7rem;
}

#infobox select {
    background: var(--input-bg, var(--bg-primary));
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 5px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    cursor: pointer;
}

#infobox select:focus {
    outline: none;
    border-color: var(--accent);
}

#infobox a.active {
    color: var(--text-primary);
    font-size: 0.75rem;
}

#infobox a.inactive {
    color: var(--text-dim);
    font-size: 0.75rem;
}

.empty-sector-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 100px;
    color: var(--text-dim);
    font-family: 'DM Mono', monospace;
    letter-spacing: 2px;
}

/* ==========================================================================
   NOTICE & ERROR STATES
   ========================================================================= */

.hud-msg {
    position: fixed;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    color: #39FF14;
    border: 1px solid #39FF14;
    padding: 20px 40px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 10000;
    transition: top 0.6s cubic-bezier(.2,.9,.2,1);
}

.hud-msg.show {
    top: 40px;
}

.sql-error-notice {
    background: #200;
    color: #f99;
    padding: 20px;
    font-family: monospace;
    border: 1px solid red;
}

.empty-gallery-msg, .not-found-msg {
    color: var(--text-primary);
    text-align: center;
    padding: 100px 50px;
}

/* ==========================================================================
   FOOTER SPACING & LINKS
   ========================================================================= */

#system-footer .sep {
    display: inline-block;
    margin: 0 12px;
    color: var(--text-dim);
}

.footer-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--text-primary);
}

.rss-tag {
    font-weight: normal;
    letter-spacing: 1px;
}

.reverse-email {
    unicode-bidi: bidi-override;
    direction: rtl;
}

/* ==========================================================================
   BLOGROLL
   ========================================================================== */

.blogroll-canvas {
    max-width: 900px;
    margin: 40px auto 0 auto;
    padding: 30px 40px 50px 40px;
    box-sizing: border-box;
    text-align: left;
    background: var(--bg-primary);
}

.blogroll-category-block {
    margin-bottom: 60px;
}

.blogroll-category-heading {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.blogroll-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}

.blogroll-peer {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.blogroll-peer:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.blogroll-peer-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

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

.blogroll-peer-name a:hover {
    color: var(--accent-hover);
}

.blogroll-peer-desc {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--text-dim);
    line-height: 1.6;
    margin: 4px 0 8px 0;
    padding: 0;
}

.blogroll-peer-url {
    display: block;
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    color: var(--text-dim);
}

/* ==========================================================================
   INLINE STYLE REMOVALS - CSS CLASSES
   ========================================================================= */

.footer-pane { display: none; }

.signals-header { margin-bottom: 40px; text-align: center; }
.signals-table { width: 100%; margin-bottom: 40px; }
.signal-date { font-size: 0.7rem; color: #444; margin-top: 5px; }
.signals-empty { text-align: center; }

/* ==========================================================================
   HASHTAGS (Single Post View)
   ========================================================================= */

.tg-tags {
    max-width: 850px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tg-tag {
    display: inline-block;
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.tg-tag:hover {
    color: var(--accent-hover);
    border-color: var(--accent);
}

/* ==========================================================================
   SEARCH INPUT (Archive Infobox)
   ========================================================================= */

.archive-search-input {
    background: var(--input-bg, var(--bg-primary));
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 5px 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 160px;
}

.archive-search-input::placeholder {
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.archive-search-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* ==========================================================================
   PAGINATION (Hashtag Archive)
   ========================================================================= */

.tg-pagination {
    text-align: center;
    padding: 40px 0 60px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.tg-pagination a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.tg-pagination a:hover {
    color: var(--accent-hover);
}

.tg-page-info {
    color: var(--text-dim);
}

/* ==========================================================================
   MAILERLITE EMBED OVERRIDES
   Full-width box, inline email+button, site typography.
   ========================================================================= */

/* Kill MailerLite's own centering/width constraints so the box fills the
   text container exactly like the paragraphs above it. */
.ml-embedded,
.ml-form-align-center {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Bordered box — full width, no card chrome.
   Use an explicit mid-grey rather than --border (#333333) which is too
   dark to read as a border on the dark background. */
.ml-form-embedWrapper {
    background: transparent !important;
    border: 1px solid #666666 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 28px 32px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

.ml-form-embedBody {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
}

/* Title — Raleway uppercase weight 300, matches site headings */
.ml-form-embedContent h4,
.ml-form-embedContent h3,
.ml-form-embedContent h2 {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 300 !important;
    font-size: 1rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--text-primary) !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

/* Description — DM Sans, matches page body */
.ml-form-embedContent p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    color: var(--text-secondary) !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

/* The form itself is the flex row — fieldRow (input) + embedSubmit (button)
   are direct siblings inside the form, so flex goes here. */
form.ml-block-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

.ml-form-fieldRow {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

.ml-form-fieldRow .ml-field-group {
    margin: 0 !important;
    padding: 0 !important;
}

/* Extra selector chain beats MailerLite's dynamically-loaded !important rules */
.ml-embedded .ml-form-embedBody .ml-form-fieldRow input[type="email"],
.ml-embedded .ml-form-embedBody .ml-form-fieldRow input[type="text"],
.ml-form-fieldRow input[type="email"],
.ml-form-fieldRow input[type="text"] {
    width: 100% !important;
    height: 46px !important;
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.9rem !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.ml-embedded .ml-form-embedBody .ml-form-fieldRow input::placeholder,
.ml-form-fieldRow input::placeholder {
    color: var(--text-dim) !important;
    opacity: 1 !important;
}

/* Button — flush right, balanced width */
.ml-form-embedSubmit {
    flex: 0 0 180px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ml-form-embedSubmit button,
.ml-form-embedSubmit button.primary {
    width: 100% !important;
    height: 46px !important;
    background: #3a3a3a !important;
    color: #ffffff !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 0 !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 0.72rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
}

.ml-form-embedSubmit button:hover {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

/* Success message */
.ml-form-successBody,
.ml-form-successContent p {
    color: var(--text-primary) !important;
    font-family: 'DM Sans', sans-serif !important;
}