/* ==============================
0. BRAND TOKENS & GLOBAL BASE
============================== */
:root {
--deck-black: #000000;
--deck-white: #ffffff;
--deck-teal: #1fb7b0;      /* teal stripe */
--deck-dark-red: #7b1b24;  /* dark red stripe */
--deck-red: #d62828;       /* red stripe */
--deck-orange: #f77f00;    /* orange stripe */
--deck-yellow: #fcbf49;    /* yellow stripe */
--deck-bg: #0b0b0b;
--deck-surface: #111111;
--deck-surface-soft: #181818;
--deck-border-subtle: #262626;
--deck-text-main: #f5f5f5;
--deck-text-muted: #b3b3b3;
--deck-radius-soft: 10px;
--deck-radius-pill: 999px;
--deck-shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55);
--deck-transition-fast: 0.18s ease-out;
--deck-transition-med: 0.24s ease-out;
}
/* Global body baseline */
body {
background-color: var(--deck-bg) !important;
color: var(--deck-text-main) !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Helvetica Neue", Arial, sans-serif !important;
line-height: 1.6;
}
/* Links */
a {
color: var(--deck-yellow);
text-decoration: none;
transition: color var(--deck-transition-fast), opacity var(--deck-transition-fast);
}
a:hover,
a:focus {
color: var(--deck-orange);
opacity: 0.9;
}
/* Remove stray default borders */
.site-main article,
.entry-header,
.entry-footer {
border: none !important;
}
/* ==============================
1. GLOBAL HEADER & NAV
============================== */
.site-header,
#masthead {
background: linear-gradient(
to right,
var(--deck-black) 0%,
#050505 40%,
#101010 100%
) !important;
border-bottom: 1px solid var(--deck-border-subtle);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
position: sticky;
top: 0;
z-index: 999;
}
/* Brand title (when logo image is hidden) */
.site-title a,
.site-branding .site-title a {
font-family: "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont,
"SF Pro Display", Arial, sans-serif !important;
font-weight: 900 !important;
font-size: 2.6rem !important;
text-transform: uppercase !important;
letter-spacing: -0.08em !important;
color: var(--deck-white) !important;
-webkit-text-fill-color: var(--deck-white) !important;
display: inline-flex;
align-items: center;
}
/* Subtle “since 2026” lockup mimic */
.site-description {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--deck-text-muted);
margin-top: 2px;
}
/* Logo stripe bar under title */
.site-branding::after {
content: "";
display: block;
margin-top: 6px;
width: 140px;
height: 4px;
border-radius: 999px;
background: linear-gradient(
to right,
var(--deck-teal),
var(--deck-dark-red),
var(--deck-red),
var(--deck-orange),
var(--deck-yellow)
);
}
/* Hide actual logo image if theme outputs one */
/* Navigation */
.main-navigation {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 600;
}
.main-navigation a,
.main-navigation li a,
.menu a,
.wp-block-navigation a {
color: var(--deck-text-muted) !important;
-webkit-text-fill-color: var(--deck-text-muted) !important;
padding: 0.9rem 0.9rem;
position: relative;
transition: color var(--deck-transition-fast), opacity var(--deck-transition-fast);
}
/* Active / hover underline using brand stripes */
.main-navigation a::after,
.wp-block-navigation a::after {
content: "";
position: absolute;
left: 14%;
right: 14%;
bottom: 0.35rem;
height: 2px;
border-radius: 999px;
background: linear-gradient(
to right,
var(--deck-teal),
var(--deck-dark-red),
var(--deck-red),
var(--deck-orange),
var(--deck-yellow)
);
opacity: 0;
transform: translateY(4px);
transition: opacity var(--deck-transition-fast), transform var(--deck-transition-fast);
}
.main-navigation a:hover,
.main-navigation a:focus,
.wp-block-navigation a:hover,
.wp-block-navigation a:focus {
color: var(--deck-white) !important;
-webkit-text-fill-color: var(--deck-white) !important;
}
.main-navigation a:hover::after,
.main-navigation a:focus::after,
.wp-block-navigation a:hover::after,
.wp-block-navigation a:focus::after {
opacity: 1;
transform: translateY(0);
}
/* Mobile nav toggle */
.menu-toggle {
color: var(--deck-white) !important;
-webkit-text-fill-color: var(--deck-white) !important;
border-radius: 999px;
border: 1px solid var(--deck-border-subtle);
padding: 0.4rem 0.9rem;
}
/* ==============================
2. SINGLE POST HEADER
============================== */
.single .entry-header,
.page .entry-header {
background: radial-gradient(circle at top left, #1a1a1a 0, #050505 55%, #000 100%) !important;
color: var(--deck-white) !important;
padding-top: 2.8rem;
padding-bottom: 1.8rem;
border-bottom: 1px solid var(--deck-border-subtle);
}
.single .entry-header .entry-title,
.single .entry-header .entry-meta,
.single .entry-header .entry-meta a {
color: var(--deck-white) !important;
-webkit-text-fill-color: var(--deck-white) !important;
}
/* Meta styling */
.entry-meta,
.entry-meta a {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--deck-text-muted) !important;
}
/* ==============================
3. CONTENT AREA & TYPOGRAPHY
============================== */
/* Article surface card */
.single .site-main,
.page .site-main,
.blog .site-main,
.archive .site-main {
background: var(--deck-bg);
}
.single .entry-content,
.page .entry-content,
.blog .entry-content,
.archive .entry-content {
background: var(--deck-surface);
border-radius: 18px;
padding: 2.4rem 2.6rem;
margin-top: -1.4rem;
box-shadow: var(--deck-shadow-soft);
}
/* Article body text */
.entry-content p,
.entry-content li,
.entry-summary p,
.wp-block-post-excerpt__excerpt {
color: var(--deck-text-main) !important;
-webkit-text-fill-color: var(--deck-text-main) !important;
line-height: 1.7;
margin-bottom: 1.4em;
}
/* Headings */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
color: var(--deck-white) !important;
-webkit-text-fill-color: var(--deck-white) !important;
letter-spacing: -0.03em;
}
/* Feature-style subheads */
.entry-content h2 {
margin-top: 2.4em;
margin-bottom: 0.7em;
font-size: 1.5rem;
}
/* ==============================
4. HEADLINES (DISCOVER-FRIENDLY)
============================== */
.entry-title {
font-family: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont,
"Helvetica Neue", Arial, sans-serif;
font-weight: 800;
line-height: 1.12 !important;
letter-spacing: -0.04em;
font-size: clamp(2.2rem, 4.6vw, 3.2rem);
max-width: 16ch;
}
/* Mobile tuning */
@media (max-width: 768px) {
.entry-title {
font-size: clamp(1.9rem, 6vw, 2.4rem);
max-width: 100%;
}
}
/* Mobile truncation for listing pages */
@media (max-width: 500px) {
.home .entry-title,
.archive .entry-title {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* ==============================
5. CARDS & ARCHIVE GRID
============================== */
.blog .hentry,
.archive .hentry,
.home .hentry,
.wp-block-post {
background: var(--deck-surface-soft);
border-radius: 16px;
padding: 1.6rem 1.7rem 1.8rem;
margin-bottom: 1.6rem;
border: 1px solid rgba(255, 255, 255, 0.02);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
transition: transform var(--deck-transition-med), box-shadow var(--deck-transition-med),
border-color var(--deck-transition-med), background var(--deck-transition-med);
}
.blog .hentry:hover,
.archive .hentry:hover,
.home .hentry:hover,
.wp-block-post:hover {
transform: translateY(-4px);
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.7);
border-color: rgba(252, 191, 73, 0.35); /* yellow accent */
background: #1b1b1b;
}
/* Ensure excerpts are readable */
.excerpt,
.post-excerpt,
.entry-summary,
.wp-block-post-excerpt,
.wp-block-post-excerpt__excerpt {
color: var(--deck-text-main) !important;
opacity: 1 !important;
}
/* ==============================
6. CATEGORY PILLS & TAXONOMY
============================== */
.post-categories a,
.cat-links a {
display: inline-flex;
align-items: center;
padding: 6px 13px;
margin-right: 6px;
margin-bottom: 6px;
background: linear-gradient(
135deg,
var(--deck-teal),
var(--deck-dark-red),
var(--deck-red),
var(--deck-orange),
var(--deck-yellow)
);
color: var(--deck-black) !important;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
border-radius: var(--deck-radius-pill);
text-decoration: none !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
position: relative;
overflow: hidden;
}
/* Inner dark overlay for legibility */
.post-categories a::before,
.cat-links a::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.18);
mix-blend-mode: multiply;
}
/* Label sits above overlay */
.post-categories a span,
.cat-links a span,
.post-categories a,
.cat-links a {
position: relative;
z-index: 1;
}
/* Hover (desktop only) */
@media (hover: hover) {
.post-categories a:hover,
.cat-links a:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.7);
}
}
.single .post-categories {
margin-bottom: 10px;
}
/* If you truly want to hide category widgets at bottom */
.footer-categories,
.widget_categories,
.post-categories-footer {
display: none !important;
}
/* ==============================
7. INFINITE SCROLL HANDLE
============================== */
#infinite-handle {
display: block !important;
visibility: visible !important;
text-align: center;
padding: 24px 20px 40px;
background: transparent;
}
#infinite-handle span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 26px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.75rem;
border-radius: var(--deck-radius-pill);
border: 1px solid rgba(252, 191, 73, 0.7);
color: var(--deck-yellow);
background: radial-gradient(circle at top left, #1b1b1b, #050505);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.7);
cursor: pointer;
position: relative;
overflow: hidden;
}
/* Subtle stripe sweep on hover */
#infinite-handle span::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
rgba(31, 183, 176, 0.18),
rgba(214, 40, 40, 0.18),
rgba(247, 127, 0, 0.18),
rgba(252, 191, 73, 0.18)
);
opacity: 0;
transition: opacity var(--deck-transition-med);
}
@media (hover: hover) {
#infinite-handle span:hover::before {
opacity: 1;
}
}
/* ==============================
8. FOOTER — FULL OVERRIDE
============================== */
.site-footer {
background: #050505 !important;
border-top: 1px solid var(--deck-border-subtle);
}
.site-info {
display: block;
text-align: center;
padding: 2.6rem 1.4rem 3rem;
color: var(--deck-text-muted);
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .18em;
}
/* Stripe bar */
.site-info::before {
content: "";
display: block;
width: 160px;
height: 3px;
margin: 0 auto 1.2rem;
border-radius: 999px;
background: linear-gradient(
to right,
var(--deck-teal),
var(--deck-dark-red),
var(--deck-red),
var(--deck-orange),
var(--deck-yellow)
);
}
/* Kill WP credit completely */
.site-info a,
.site-info span,
.site-info .powered-by-wordpress {
display: none !important;
}
/* Your real footer text */
.site-info::after {
content: "© 2026 Decked Out Media. All Rights Reserved.";
display: block;
margin-top: .6rem;
color: var(--deck-text-muted);
font-size: .7rem;
letter-spacing: .18em;
}
/* ==============================
9. ARCHIVE / CATEGORY HEADERS
============================== */
.category header,
.category .page-header,
.category .wp-block-group,
.category .wp-block-query-title,
.category .wp-block-archive-title,
.category .wp-block-term-description,
.category .wp-block-post-title,
.category .wp-block-post-excerpt,
.archive .wp-site-blocks * {
opacity: 1 !important;
color: var(--deck-text-main) !important;
}
/* ==============================
10. MISC CLEANUP
============================== */
.wp-block-post,
.wp-block-post * {
opacity: 1 !important;
}
HEADER 
/* ==============================
HOMEPAGE — PREMIUM CARD GRID
============================== */
/* Main feed container */
.home .site-main {
max-width: 880px;
margin: 0 auto;
padding: 2rem 1.2rem;
}
/* Each post card */
.home .hentry,
.home .wp-block-post {
background: #111111;
border-radius: 18px;
padding: 1.8rem 1.9rem 2.2rem;
margin-bottom: 2.2rem;
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Hover lift */
@media (hover: hover) {
.home .hentry:hover,
.home .wp-block-post:hover {
transform: translateY(-6px);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.75);
border-color: rgba(252, 191, 73, 0.35); /* yellow stripe accent */
}
}
/* Featured media spacing */
.home .hentry .entry-content > *:first-child {
margin-bottom: 1.4rem;
border-radius: 14px;
overflow: hidden;
}
/* Tweet embeds */
.home .twitter-tweet {
margin: 0 auto !important;
border-radius: 14px !important;
overflow: hidden;
background: #000 !important;
padding: 1rem !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Category pill alignment */
.home .post-categories {
margin-bottom: 0.8rem;
}
/* Headline styling */
.home .entry-title {
font-family: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont,
"Helvetica Neue", Arial, sans-serif;
font-weight: 800;
font-size: clamp(1.9rem, 4.2vw, 2.6rem);
line-height: 1.15;
letter-spacing: -0.03em;
color: #ffffff !important;
margin-bottom: 0.6rem;
max-width: 20ch;
}
/* Excerpt */
.home .entry-summary,
.home .wp-block-post-excerpt__excerpt {
color: #d6d6d6 !important;
font-size: 1rem;
line-height: 1.6;
margin-top: 0.6rem;
}
/* Meta */
.home .entry-meta {
margin-top: 1.2rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #888 !important;
}
/* Add subtle divider above meta */
.home .entry-meta::before {
content: "";
display: block;
width: 60px;
height: 2px;
margin-bottom: 0.8rem;
background: linear-gradient(
to right,
#1fb7b0,
#7b1b24,
#d62828,
#f77f00,
#fcbf49
);
border-radius: 999px;
}
/* ==============================
HOMEPAGE — SPACING & FLOW
============================== */
.home .site-main > *:first-child {
margin-top: 1.2rem;
}
.home .site-main > *:last-child {
margin-bottom: 3rem;
}
/* ==============================
HOMEPAGE — MOBILE TUNING
============================== */
@media (max-width: 600px) {
.home .hentry,
.home .wp-block-post {
padding: 1.4rem 1.4rem 1.8rem;
border-radius: 14px;
}
.home .entry-title {
font-size: clamp(1.6rem, 6vw, 2.1rem);
max-width: 100%;
}
}
/* Force logo to display everywhere */
.custom-logo,
.site-branding img {
display: block !important;
width: auto !important;
height: auto !important;
}
/* ==============================
FIX CANARD MOBILE LOGO
============================== */
.mobile-header-logo,
.mobile-header-logo .custom-logo-link,
.mobile-header-logo img,
.custom-logo-link img,
.site-logo img {
display: block !important;
max-height: 46px !important;
width: auto !important;
height: auto !important;
}
@media (max-width: 768px) {
.mobile-header-logo {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 auto !important;
}
}
/* ==============================
FORCE LOGO VISIBILITY — MOBILE
============================== */
@media (max-width: 768px) {
/* Unhide logo everywhere */
.custom-logo,
.custom-logo-link,
.custom-logo-link img,
.site-branding img,
.site-logo img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
max-height: 48px !important;
width: auto !important;
height: auto !important;
}
/* Ensure branding container isn't collapsed */
.site-branding,
.site-logo,
.mobile-header-logo {
display: flex !important;
align-items: center !important;
}
}
/* ==============================
LOGO DISPLAY & BRANDING
============================== */
.site-branding {
display: flex;
align-items: center;
gap: 14px;
padding: 0.6rem 0;
}
.custom-logo,
.site-branding img {
max-height: 58px; /* adjust if needed */
width: auto;
height: auto;
display: block;
border-radius: 6px; /* optional */
}
/* Hide text title when logo is present */
.site-title {
display: none !important;
}
.site-description {
display: none !important;
}
/* ==============================
LOGO — UNIVERSAL (DESKTOP + MOBILE)
============================== */
.site-branding,
.site-header .site-branding,
#masthead .site-branding {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px;
padding: 0.6rem 0;
}
/* Logo image */
.custom-logo,
.site-branding img,
.site-header .custom-logo,
#masthead .custom-logo {
max-height: 58px !important;
width: auto !important;
height: auto !important;
display: block !important;
}
/* Hide text title when logo is present */
.site-title,
.site-title a,
.site-description {
display: none !important;
}
/* ==============================
MOBILE HEADER FIX
============================== */
@media (max-width: 768px) {
/* Ensure mobile header uses same layout */
.site-header,
#masthead {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0.6rem 1rem !important;
}
/* Mobile branding container */
.site-branding,
.site-header .site-branding,
#masthead .site-branding {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
}
/* Logo size for mobile */
.custom-logo,
.site-branding img {
max-height: 46px !important;
}
/* Prevent theme from hiding logo on mobile */
.mobile-logo,
.mobile-header-logo,
.site-header .custom-logo {
display: block !important;
}
}
/* ==============================
DESKTOP — CENTER ARCHIVE THUMBNAILS (CANARD)
============================== */
@media (min-width: 769px) {
/* Center the thumbnail container */
.blog .hentry .entry-thumbnail,
.archive .hentry .entry-thumbnail,
.category .hentry .entry-thumbnail {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Center the image itself */
.blog .hentry .entry-thumbnail img,
.archive .hentry .entry-thumbnail img,
.category .hentry .entry-thumbnail img {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ==============================
HARD CENTER: FEATURED IMAGES
============================== */
/* Center the featured image wrapper */
.blog .post-thumbnail,
.archive .post-thumbnail,
.category .post-thumbnail,
.home .post-thumbnail,
.single .post-thumbnail {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Center the actual image */
.blog .post-thumbnail img,
.archive .post-thumbnail img,
.category .post-thumbnail img,
.home .post-thumbnail img,
.single .post-thumbnail img,
.wp-post-image,
.entry-content .wp-block-image img {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==============================
FIX ARTICLE IMAGE ALIGNMENT
============================== */
/* Reset theme floats & margins */
.entry-content img,
.entry-content figure,
.entry-content .wp-block-image {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Center images properly */
.entry-content img {
display: block !important;
max-width: 100% !important;
height: auto !important;
}
/* Center figure wrappers */
.entry-content figure,
.entry-content .wp-block-image {
display: block !important;
text-align: center !important;
}
/* Fix left-offset caused by padding illusion */
.entry-content .wp-block-image img {
margin-inline: auto !important;
}
/* Optional: soften edges to match card aesthetic */
.entry-content img {
 border-radius: 14px;
}
/* ==============================
HARD FIX — FEATURED / FIRST IMAGE
============================== */
/* Center featured image container */
.single .wp-block-post-featured-image,
.single .post-thumbnail,
.single .entry-header .wp-block-image,
.single .entry-header figure {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
max-width: 100% !important;
}
/* Center the actual image */
.single .wp-block-post-featured-image img,
.single .post-thumbnail img,
.single .entry-header img {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 100% !important;
height: auto !important;
}
/* If theme is using constrained layouts */
.single .wp-site-blocks > .wp-block-post-featured-image,
.single .wp-site-blocks > figure {
max-width: 100% !important;
margin-inline: auto !important;
}
/* ==============================
FIX: HOMEPAGE IMAGE STUCK LEFT
ROOT CAUSE = GRID
============================== */
/* Force single-column layout for cards */
.home .wp-block-post,
.home .hentry {
display: block !important;
}
/* Ensure featured image spans full card width */
.home .wp-block-post-featured-image,
.home .post-thumbnail {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto 1.4rem auto !important;
}
/* Image itself */
.home .wp-block-post-featured-image img,
.home .post-thumbnail img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
 display: block !important;
}
/* ==============================
DESKTOP — FIX SINGLE POST LAYOUT
============================== */
@media (min-width: 769px) {
/* Widen the article body */
.single .site-main,
.page .site-main {
max-width: 980px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
}
/* Remove the card styling ONLY on desktop single posts */
.single .entry-content,
.page .entry-content {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 2rem 0 !important;
margin-top: 1.2rem !important;
}
/* Pull the content closer to the featured image */
.single .entry-header {
margin-bottom: 1.2rem !important;
}
}
/* ==============================
FIX ARTICLE WIDTH ALIGNMENT
============================== */
@media (min-width: 769px) {
/* Reduce padding so text aligns with featured image */
.single .entry-content,
.page .entry-content {
padding-left: 1.2rem !important;
padding-right: 1.2rem !important;
max-width: 880px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Ensure the featured image wrapper matches the same width */
.single .post-thumbnail,
.page .post-thumbnail {
max-width: 880px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ==============================
DESKTOP — MAKE ARTICLE BODY ALIGN WITH IMAGE
============================== */
@media (min-width: 769px) {
/* Let the main content use the full theme width */
.single .site-main,
.page .site-main {
max-width: none !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
}
/* Keep the clean, non-card look but don't inset it too much */
.single .entry-content,
.page .entry-content {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 2rem 2.4rem 3rem 2.4rem !important; /* you can tighten/loosen this */
margin-top: 1.2rem !important;
}
}
/* ==============================
DESKTOP — REPAIR ARTICLE ALIGNMENT
============================== */
@media (min-width: 769px) {
/* 1. Center the main container */
.single .site-main, 
.page .site-main {
max-width: 1000px !important; /* Adjust this to your preferred total width */
margin: 0 auto !important;
float: none !important;
display: block !important;
}
/* 2. Fix the Article Card */
.single .entry-content,
.page .entry-content {
background: var(--deck-surface) !important;
box-shadow: var(--deck-shadow-soft) !important;
border-radius: 18px !important;
padding: 3rem !important; /* Give the text internal breathing room */
margin-top: -2rem !important; /* Overlap the header slightly for style */
margin-left: auto !important;
margin-right: auto !important;
max-width: 900px !important; /* Keeps text at a readable length */
width: 100% !important;
}
/* 3. Ensure Featured Images/Tweets span the width correctly */
.single .post-thumbnail,
.single .entry-content .wp-block-image,
.single .twitter-tweet {
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 4. Kill the Sidebar (if your theme is forcing one) */
#secondary {
display: none !important;
}
#primary {
width: 100% !important;
float: none !important;
}
}
/* ==============================
DESKTOP — EXPAND READING LANE
============================== */
@media (min-width: 1024px) {
/* 1. Make the main container much wider */
.single .site-main, 
.page .site-main {
max-width: 1200px !important; 
padding: 0 40px !important;
}
/* 2. Expand the actual article card */
.single .entry-content,
.page .entry-content {
max-width: 1000px !important; /* This stops the 'squeezed' look */
padding: 4rem 5rem !important; /* More breathing room inside */
margin: -60px auto 0 auto !important; /* Pulls card up over image slightly */
line-height: 1.8; /* Improves long-form readability */
}
/* 3. Fix Header Text Overlap (The 'Week of Reckoning' part) */
.single .entry-header .entry-title {
line-height: 1.3 !important; /* Separates the lines so they don't crash */
max-width: 900px !important; /* Lets the title stretch wider */
padding-bottom: 20px;
}
/* 4. Ensure the Featured Image (Bill Clinton Tweet) scales up */
.single .post-thumbnail img,
.single .featured-media img {
width: 100% !important;
height: auto !important;
max-height: 600px; /* Prevents it from becoming too tall */
object-fit: cover;
}
}
/* ==============================
DESKTOP — FORCE FULL WIDTH (NUCLEAR OPTION)
============================== */
@media (min-width: 1024px) {
/* 1. Force ALL outer wrappers to expand to screen edges */
.single #primary,
.single .site-main,
.single .hentry,
.single article {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
/* Remove the faint border/shadow causing the 'box' look */
box-shadow: none !important;
border: none !important; 
background: transparent !important;
}
/* 2. Force the text content to fill the full width */
.single .entry-content,
.page .entry-content {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
/* Add slight padding so text doesn't touch the literal edge of the screen */
padding-left: 40px !important; 
padding-right: 40px !important;
/* Ensure text is readable */
box-sizing: border-box; 
}
/* 3. Ensure Header Title doesn't overlap (Fixing the glitch in screenshot) */
.single .entry-header .entry-title {
line-height: 1.3 !important;
max-width: 100% !important;
padding-bottom: 20px;
}
}
/* ==============================
DESKTOP ONLY: LIGHT MODE & FULL WIDTH
============================== */
@media (min-width: 769px) {
/* 1. UNSTICK HEADER: Makes menu disappear when scrolling */
.site-header, 
#masthead {
position: relative !important; /* Changes from 'sticky' to 'scroll-away' */
top: auto !important;
background: #ffffff !important;
border-bottom: 1px solid #e5e5e5 !important;
box-shadow: none !important;
}
/* 2. LIGHT MODE: White background, black text */
body, 
.site-main, 
.single article, 
.single .entry-content {
background-color: #ffffff !important;
color: #111111 !important;
}
/* 3. THE "UN-SQUEEZE": Force text to match photo width */
/* This kills the 2-column sidebar layout and forces 100% width */
.single #primary,
.single .site-main,
.single .hentry,
.single article {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important; /* Important for breaking the sidebar layout */
}
/* Force the content container to fill the screen */
.single .entry-content {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 60px 8% !important; /* 8% padding keeps it wide but readable */
box-shadow: none !important;
border-radius: 0 !important;
}
/* 4. TEXT COLORS: Ensure headings and paragraphs are black */
.entry-content p, 
.entry-content li, 
.entry-content h1, 
.entry-content h2, 
.entry-content h3, 
.entry-content h4,
.entry-title {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
line-height: 1.4 !important; /* Fixes title overlap from screenshot */
}
/* 5. NAVIGATION COLORS: Make menu readable on white background */
.main-navigation a, 
.main-navigation li a,
.menu a {
color: #111111 !important;
-webkit-text-fill-color: #111111 !important;
}
/* Ensure the dark menu bar in your screenshot becomes transparent/light */
.main-navigation,
.nav-menu {
background: transparent !important;
}
/* 6. META DATA: Stack author/date info so it doesn't push text to the right */
.single .entry-meta {
float: none !important;
width: 100% !important;
padding-left: 8% !important;
margin-bottom: 20px !important;
text-align: left !important;
}
}
/* ==============================
DESKTOP ONLY: TYPOGRAPHY BOOST
============================== */
@media (min-width: 769px) {
/* 1. Increase Article Body Text Size */
.entry-content p, 
.entry-content li {
font-size: 21px !important; /* Adjust this number to go larger or smaller */
line-height: 1.8 !important; /* Increases space between lines for readability */
letter-spacing: -0.01em !important; /* Keeps the premium 'tight' look at larger sizes */
}
/* 2. Scale up Sub-headings (H2, H3) to match */
.entry-content h2 {
font-size: 32px !important;
margin-top: 40px !important;
margin-bottom: 20px !important;
}
.entry-content h3 {
font-size: 26px !important;
}
/* 3. Adjust the Meta Text (Author/Date) so it's not too small */
.entry-meta, 
.entry-meta a {
font-size: 14px !important;
text-transform: uppercase;
letter-spacing: 0.1em;
}
}
/* ==============================
DESKTOP HOME: LIGHT MODE CARDS
============================== */
@media (min-width: 769px) {
/* 1. Make the card background white */
.home .hentry,
.home .wp-block-post {
background: #ffffff !important;
/* Change the border from faint white to faint gray */
border-color: #e5e5e5 !important;
/* Make the shadow softer for light mode */
box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
}
/* 2. Make the Headline Black */
.home .entry-title {
color: #111111 !important;
-webkit-text-fill-color: #111111 !important;
}
/* 3. Make the Excerpt Text Dark Gray */
.home .entry-summary,
.home .wp-block-post-excerpt__excerpt {
color: #444444 !important;
}
/* 4. Make the Date/Author Meta Medium Gray */
.home .entry-meta {
color: #777777 !important;
}
/* 5. Hover State: Keep a subtle lift but don't turn black */
.home .hentry:hover,
.home .wp-block-post:hover {
background: #ffffff !important;
transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(0,0,0,0.12) !important;
/* Keep your brand's yellow accent border on hover */
border-color: rgba(252, 191, 73, 0.6) !important;
}
}
/* ==============================
CLEAN "SEE MORE" BUTTON REFINEMENT
============================== */
/* 1. Reset the container to remove the "double box" look */
#infinite-handle span, 
.infinite-scroll #infinite-handle span button {
background: #111111 !important; /* Solid matte black */
border: 1px solid #111111 !important;
border-radius: 50px !important; /* Smooth pill shape */
padding: 14px 40px !important;
box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important;
transition: all 0.3s ease !important;
display: inline-block !important;
cursor: pointer;
}
/* 2. Style the new "SEE MORE" text */
#infinite-handle span::before, 
.infinite-scroll #infinite-handle span button::before {
content: "SEE MORE";
color: #ffffff !important; /* White text is much cleaner than red for premium feel */
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 3px !important; /* High-end fashion/news spacing */
text-transform: uppercase;
visibility: visible;
display: block;
}
/* 3. Kill the original theme text and the inner gray box */
#infinite-handle span button {
font-size: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
}
/* 4. Desktop Hover Effect: Subltle lift and glow */
@media (min-width: 769px) {
#infinite-handle span:hover {
background: #000000 !important;
transform: translateY(-3px);
box-shadow: 0 12px 20px rgba(0,0,0,0.15) !important;
}
}
/* ==============================
FIX: INVISIBLE HOMEPAGE EXCERPTS
============================== */
@media (min-width: 769px) {
/* 1. Darken the Excerpt and "Continue Reading" text */
.home .entry-summary,
.home .wp-block-post-excerpt__excerpt,
.home .more-link,
.home .continue-reading,
.home a.wp-block-post-excerpt__more-link {
color: #333333 !important; /*  High-contrast dark grey */
opacity: 1 !important;      /* Removes any transparency */
-webkit-text-fill-color: #333333 !important;
display: block !important;
}
/* 2. Style the "Continue Reading" link specifically */
.home .more-link,
.home a.wp-block-post-excerpt__more-link {
font-weight: 700 !important;
text-transform: uppercase;
font-size: 11px !important;
letter-spacing: 1px;
margin-top: 10px !important;
}
/* 3. Hover effect for the link */
.home .more-link:hover,
.home a.wp-block-post-excerpt__more-link:hover {
color: #000000 !important;
text-decoration: underline !important;
}
}
/* ==============================
FIX: FORCED DARK TEXT FOR HOME EXCERPTS
============================== */
@media (min-width: 769px) {
/* Target the specific excerpt paragraph shown in your highlight */
.home article .entry-summary p,
.home .wp-block-post-excerpt,
.home .wp-block-post-excerpt__excerpt {
color: #222222 !important; /* Near black for maximum readability */
opacity: 1 !important;
-webkit-text-fill-color: #222222 !important;
font-size: 15px !important; /* Slightly larger for better legibility */
line-height: 1.6 !important;
margin-bottom: 15px !important;
display: block !important;
visibility: visible !important;
}
/* Ensure the 'Continue Reading' text is also solid black */
.home .more-link, 
.home .continue-reading {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
font-weight: 800 !important;
opacity: 1 !important;
}
}
/* ==============================
FIX: MENU HOVER VISIBILITY (DESKTOP)
============================== */
@media (min-width: 769px) {
/* 1. Ensure the text stays dark/visible on hover */
.main-navigation a:hover,
.main-navigation li a:hover,
.menu-item a:hover,
.nav-menu li a:hover {
color: #000000 !important; /* Forces text to stay black */
-webkit-text-fill-color: #000000 !important;
text-decoration: underline !important; /* Adds a visual cue */
opacity: 1 !important;
}
/* 2. OPTIONAL: Use your brand accent color for hover instead */
/* If you'd prefer the reddish-orange from your buttons, use this:
.main-navigation a:hover {
color: #e63946 !important; 
-webkit-text-fill-color: #e63946 !important;
} 
*/
/* 3. Fix for the search icon/button if it also disappears */
.search-toggle:hover, 
.search-field:focus {
color: #000000 !important;
}
}
/* ==============================
DESKTOP ONLY: REFINED LOGO SIZE
============================== */
@media (min-width: 769px) {
/* 1. Center the branding and prevent overlap */
.site-branding {
display: block !important;
width: 100% !important;
text-align: center !important;
margin: 0 auto 25px auto !important; /* Bottom margin protects the menu */
clear: both !important; /* Forces menu to sit below the logo */
}
/* 2. Set a prominent but safe size */
.site-logo, 
.custom-logo,
.site-branding img {
max-height: 180px !important; /* Big presence, but won't cover the menu */
width: auto !important;        /* Maintains perfect proportions */
display: inline-block !important;
margin: 0 auto !important;
}
/* 3. Ensure the masthead expands to fit the new height */
#masthead {
height: auto !important;
padding-top: 40px !important;
padding-bottom: 20px !important;
}
}
/* ==============================
MOBILE ONLY: LOGO SIZE BOOST
============================== */
@media (max-width: 768px) {
/* 1. Expand the logo container width */
.site-branding,
.site-logo-link {
max-width: 220px !important; /* Increase this if you want it even wider */
margin-left: auto !important;
margin-right: auto !important;
}
/* 2. Scale the actual logo image */
.site-logo, 
.custom-logo,
.site-branding img {
max-height: 80px !important; /* Standard mobile is usually 40-50px */
width: auto !important;
display: block !important;
margin: 0 auto !important;
}
/* 3. Ensure the mobile header has enough vertical space */
.site-header {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
}
/* =========================================
FIX: FULL IMAGE IN ARTICLE (NOT HOMEPAGE)
========================================= */
@media (min-width: 769px) {
/* Target images ONLY on the single article page */
.single-post .post-thumbnail img,
.single-post .featured-media img,
.single-post .wp-block-post-featured-image img {
max-height: 80vh !important;    /* Keeps it from being taller than the screen */
width: 100% !important;         /* Fits the article width */
height: auto !important;        /* Prevents squishing */
object-fit: contain !important; /* Shows the WHOLE image, no cropping */
display: block !important;
margin: 0 auto 30px auto !important;
}
/* Reset any homepage constraints that might have leaked */
.home .post-thumbnail img,
.home .wp-block-post-featured-image img {
height: 100% !important;
object-fit: cover !important; /* Keeps homepage grid looking uniform */
}
}
/* =========================================
MOBILE: FULL IMAGES (HOME & INTERNAL)
========================================= */
@media (max-width: 768px) {
/* 1. Target both Homepage and Internal article images */
.home .post-thumbnail img,
.home .wp-block-post-featured-image img,
.single-post .post-thumbnail img,
.single-post .wp-block-post-featured-image img,
.featured-media img {
width: 100% !important;         /* Fits the phone width */
height: auto !important;        /* Prevents squishing/stretching */
max-height: none !important;    /* Removes the 'cropping' height limit */
object-fit: contain !important; /* Shows the WHOLE image, no edges cut off */
display: block !important;
}
/* 2. Style the container to prevent awkward gaps */
.post-thumbnail, 
.wp-block-post-featured-image {
background-color: transparent !important;
margin-bottom: 15px !important;
}
/* 3. Ensure the Article Headline doesn't overlap the photo */
.single-post .entry-header {
margin-top: 10px !important;
}
}
/* ==============================
DESKTOP: PAGE CONTENT LIGHT MODE
============================== */
@media (min-width: 769px) {
/* 1. Turn the main page container/card white */
.page .hentry, 
.page .entry-content,
.page .type-page,
.page .wp-block-post-content {
background-color: #ffffff !important;
border-radius: 15px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
padding: 40px !important;
}
/* 2. Force all text elements to Black/Dark Gray */
.page .entry-title,
.page .entry-content p,
.page .entry-content h1,
.page .entry-content h2,
.page .entry-content h3,
.page .entry-content li,
.page .entry-content {
color: #111111 !important;
-webkit-text-fill-color: #111111 !important;
opacity: 1 !important;
}
/* 3. Ensure any specific 'About Us' section headers are visible */
.page .entry-header h1 {
color: #000000 !important;
margin-bottom: 30px !important;
}
}
/* ==============================
DESKTOP: CENTER ARTICLE FOOTER
============================== */
@media (min-width: 769px) {
/* 1. Center the Related Posts section */
#jp-relatedposts, 
.sharedaddy, 
.wpcnt {
max-width: 800px !important; /* Matches your article width */
margin: 40px auto !important;
padding: 0 20px !important;
clear: both !important;
}
/* 2. Fix the alignment of the Related Posts grid */
#jp-relatedposts .jp-relatedposts-items {
display: flex !important;
justify-content: center !important;
gap: 20px !important;
}
/* 3. Center Author/Date and Tags metadata */
.single-post .entry-footer,
.single-post .post-meta,
.single-post .entry-meta {
max-width: 800px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
border-top: 1px solid #eeeeee;
padding-top: 20px !important;
}
/* 4. Center Share and Like buttons */
.sharedaddy .sd-content,
.sharedaddy .sd-title {
text-align: center !important;
margin: 0 auto !important;
display: block !important;
}
.sharedaddy ul {
display: flex !important;
justify-content: center !important;
list-style: none !important;
padding: 0 !important;
}
}
/* ==============================
FIX: ARTICLE SLIDER / CAROUSEL
============================== */
@media (min-width: 769px) {
/* 1. Center the image inside the black slider box */
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image,
.wp-block-gallery .blocks-gallery-item img,
.swiper-slide img {
margin: 0 auto !important;
display: block !important;
object-position: center !important; /* Fixes the 'left-side void' */
}
/* 2. Force the Article Title/Caption to appear */
.wp-block-jetpack-slideshow_caption,
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption,
.swiper-slide .slide-title {
display: block !important;
color: #ffffff !important; /* White text since background is black */
background: rgba(0, 0, 0, 0.7) !important; /* Dark text box for readability */
width: 100% !important;
text-align: center !important;
bottom: 0 !important;
position: absolute !important;
padding: 15px !important;
font-size: 16px !important;
font-weight: bold !important;
z-index: 99 !important; /* Forces it to sit on top of the image */
}
}
/* ==============================
FIX: FOOTER & RELATED POSTS ALIGNMENT
============================== */
@media (min-width: 769px) {
/* 1. Force the main container to stack vertically, not side-by-side */
.entry-footer,
.site-main > article > .entry-footer {
display: flex !important;
flex-direction: column !important; /* Stacks items top-to-bottom */
align-items: center !important;    /* Centers them */
max-width: 800px !important;
margin: 0 auto !important;
float: none !important;
}
/* 2. Pull the 'Related Posts' into the center */
#jp-relatedposts {
display: block !important;
width: 100% !important;
max-width: 800px !important;
margin: 30px auto !important;
padding: 0 !important;
clear: both !important;
}
/* 3. Center the 'Leave a Reply' section */
#comments, 
#respond, 
.comment-respond {
max-width: 800px !important;
margin: 0 auto !important;
display: block !important;
float: none !important;
}
/* 4. Center the Author/Date/Share metadata block */
.entry-meta, 
.share-kinta-below-content,
.sharedaddy {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
justify-content: center !important;
}
}
/* ==============================
FIX: BOTTOM SLIDER LAYOUT & TEXT
============================== */
@media (min-width: 769px) {
/* 1. Force the image to cover the ENTIRE black slide area */
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image,
.jp-relatedposts-i img,
.swiper-slide img {
width: 100% !important;
min-width: 100% !important; /* Forces it to stretch left-to-right */
height: 100% !important;
object-fit: cover !important; /* Eliminates the empty black bars */
object-position: center !important;
opacity: 1 !important;
}
/* 2. Remove the black background color so gaps aren't visible */
.wp-block-jetpack-slideshow,
.wp-block-jetpack-slideshow_slide {
background-color: transparent !important;
}
/* 3. Force the Article Name (Caption) to be visible */
.wp-block-jetpack-slideshow_caption,
.jp-relatedposts-post-title,
.wpcnt {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #ffffff !important;
background: rgba(0, 0, 0, 0.8) !important; /* Strong dark background */
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
padding: 15px !important;
text-align: center !important;
z-index: 9999 !important; /* Forces it on TOP of the image */
}
/* 4. Ensure the text inside the caption is readable */
.wp-block-jetpack-slideshow_caption a,
.jp-relatedposts-post-title a {
color: #ffffff !important;
font-weight: bold !important;
font-size: 16px !important;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
text-decoration: none !important;
}
}
/* ============================================
DESKTOP — FIX SINGLE POST LAYOUT COMPLETELY
============================================ */
@media (min-width: 769px) {
/* Remove the boxed card look on single posts */
.single .entry-content,
.single .entry-header,
.single .site-main {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Restore the natural full-width flow */
.single .entry-content > *,
.single .entry-header > * {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Fix the missing title */
.single .entry-title {
display: block !important;
margin: 1.4rem 0 !important;
padding: 0 1.6rem !important;
}
/* Fix the text alignment so it spans the full width */
.single .entry-content p,
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content ul,
.single .entry-content ol {
padding: 0 1.6rem !important;
}
/* Fix the carousel / slider */
.single .wp-block-group,
.single .wp-block-columns,
.single .wp-block-image {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
}
}
/* ==============================
FIX: ARTICLE CAROUSEL IMAGES (DESKTOP)
============================== */
/* Carousel item container */
@media (min-width: 900px) {
.related-posts-carousel,
.post-carousel,
.wp-block-post-template.is-flex-container {
align-items: stretch;
}
/* Each slide / card */
.related-posts-carousel .post,
.post-carousel .post,
.wp-block-post-template .wp-block-post {
display: flex;
flex-direction: column;
}
/* Image wrapper */
.related-posts-carousel figure,
.post-carousel figure,
.wp-block-post-featured-image {
width: 100%;
height: 220px; /* consistent editorial height */
overflow: hidden;
}
/* Image itself */
.related-posts-carousel img,
.post-carousel img,
.wp-block-post-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
/* =========================================
FIX: DESKTOP ARTICLE CAROUSEL IMAGES
(ISOLATED & BULLETPROOF)
========================================= */
@media (min-width: 769px) {
/* 1. Target ONLY the bottom-of-article carousel */
.single .wp-block-query,
.single .wp-block-post-template {
display: flex !important;
gap: 24px;
}
/* 2. Each carousel card */
.single .wp-block-post-template .wp-block-post {
flex: 0 0 280px; /* controls card width */
display: flex !important;
flex-direction: column !important;
}
/* 3. Image wrapper — THIS WAS MISSING */
.single .wp-block-post-template .wp-block-post-featured-image,
.single .wp-block-post-template figure {
width: 100% !important;
height: 180px !important;
overflow: hidden !important;
margin: 0 0 12px 0 !important;
}
/* 4. Image itself */
.single .wp-block-post-template img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* 5. Prevent article-wide image rules from interfering */
.single .wp-block-post-template img {
max-width: none !important;
}
}
/* =========================================
1. FIXED RELATED CONTENT GRID (3-Across)
========================================= */
@media (min-width: 769px) {
/* Target the specific related post grids only */
.single .site-main .wp-block-post-template, 
.single .site-main .jetpack-related-posts-wrapper {
display: flex !important;
gap: 24px;
align-items: stretch;
}
/* Force ONLY grid thumbnails to 180px height */
.wp-block-post-featured-image, 
.jp-relatedpost-post-tmpl img {
width: 100% !important;
height: 180px !important;
object-fit: cover !important;
border-radius: 14px;
}
}
/* =========================================
2. FIXED SLIDESHOW (The Carousel)
========================================= */
@media (min-width: 769px) {
/* Fix the 'Black Void' on the first slide */
.wp-block-jetpack-slideshow_container,
.wp-block-jetpack-slideshow_slide,
.wp-block-jetpack-slideshow_image {
width: 100% !important;
height: 450px !important; /* Gives the carousel its own taller height */
left: 0 !important;
position: relative !important;
object-fit: cover !important;
display: block !important;
}
/* Force Article Names to appear over the slider */
.wp-block-jetpack-slideshow_caption {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: #ffffff !important;
background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
position: absolute !important;
bottom: 0 !important;
width: 100% !important;
padding: 40px 15px 15px 15px !important;
z-index: 99 !important;
text-align: center !important;
font-weight: bold !important;
}
}
/* ==============================
DESKTOP ONLY — HIDE TOP CAROUSEL (keep Related)
============================== */
@media (min-width: 769px) {
/* Primary candidates for the top carousel/preview above Related */
.single .site-preview,
.single .site-preview-wrapper,
.single .post-preview,
.single .carousel,
.single .slider,
.single .hero-slider,
.single .top-carousel,
.single .site-preview .carousel-wrapper,
.single .wp-block-cover.has-background, /* cover blocks used as hero/preview */
.single .wp-block-gallery.preview,
.single .wp-block-image.preview {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Defensive: collapse any immediate parent gaps left behind */
.single .entry-content > .site-preview,
.single .entry-content > .carousel,
.single .entry-content > .slider,
.single .entry-content > .wp-block-cover {
display: none !important;
}
/* Remove extra bottom spacing so Related sits flush under the article body */
.single .entry-content,
.single .entry-footer,
.single .site-main .related-posts,
.single .site-main .wp-block-query {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* DESKTOP — MAKE "CONTACT US" TITLE GOLD */
@media (min-width: 769px) {
.page .entry-header .entry-title,
.page .entry-title {
color: var(--deck-yellow) !important;
-webkit-text-fill-color: var(--deck-yellow) !important;
}
}
/* ============================== 
2. REMOVE "CATEGORY:" PREFIX
============================== */
/* This hides the "Category:" text label */
.archive-title, 
.page-title {
font-size: 0 !important; 
text-transform: uppercase;
letter-spacing: -0.05em; /* Tighter for a high-end editorial look */
font-weight: 900;
text-align: center;
margin: 30px 0 50px;
line-height: 1;
}
/* This styles the actual name (e.g., HARDWARE, CLOCKING IT) */
.archive-title span, 
.page-title span,
.archive-title .taxonomy-description-title {
font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
display: block;
/* Default for Mobile (Light text on dark bg) */
color: #ffffff !important; 
-webkit-text-fill-color: #ffffff !important;
}
/* DESKTOP VERSION: Make the text darker for the Light Theme */
@media (min-width: 1024px) {
.archive-title span, 
.page-title span,
.archive-title .taxonomy-description-title {
color: #000000 !important; /* Deepest black for premium contrast */
-webkit-text-fill-color: #000000 !important;
letter-spacing: -0.03em;
   }
}
/* ============================================================
FINAL MASTER PATCH: READABILITY, LAYOUT & CATEGORY FIXES
============================================================ */
/* 1. UNIVERSAL DESKTOP READABILITY (THE LIGHT-MODE FIX) */
@media (min-width: 1024px) {
/* Force Desktop Text to be dark and readable on light backgrounds */
body, 
.entry-title, 
.entry-title a,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.archive-title span, .page-title span {
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
}
.entry-content p, 
.entry-summary p, 
.wp-block-post-excerpt__excerpt,
.entry-content li,
.entry-meta {
color: #444444 !important;
-webkit-text-fill-color: #444444 !important;
opacity: 1 !important;
}
/* Ensure card backgrounds stay crisp white on desktop */
.hentry, .wp-block-post, .entry-content {
background: #ffffff !important;
border: 1px solid rgba(0,0,0,0.08) !important;
box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important;
}
}
/* 2. REMOVE "CATEGORY:" PREFIX & FIX TITLE CONTRAST */
.archive-title, .page-title {
font-size: 0 !important; /* Hides "Category:" */
text-align: center;
margin: 40px 0;
font-weight: 900;
}
.archive-title span, .page-title span {
font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
display: block;
text-transform: uppercase;
letter-spacing: -0.04em;
/* Mobile default is white */
color: #ffffff !important; 
}
/* 3. FORCE "CLOCKING IT" TO MATCH "HARDWARE" CARD LAYOUT */
body[class*="category-clocking-it"] .hentry,
body[class*="category-clocking-it"] .wp-block-post {
display: flex !important;
flex-direction: column !important;
padding: 25px !important;
}
body[class*="category-clocking-it"] .post-thumbnail,
body[class*="category-clocking-it"] .wp-block-post-featured-image {
width: calc(100% + 50px) !important; 
margin: -25px -25px 20px -25px !important;
float: none !important;
display: block !important;
}
body[class*="category-clocking-it"] .post-thumbnail img {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
}
/* 4. PREMIUM TYPOGRAPHY & CATEGORY PILLS (MOBILE + DESKTOP) */
.entry-title a, .entry-title {
font-weight: 800 !important;
line-height: 1.1 !important;
text-decoration: none !important;
}
.post-categories a, .cat-links a {
background: linear-gradient(to right, #1fb7b0, #7b1b24, #d62828, #f77f00, #fcbf49) !important;
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
font-size: 0.7rem !important;
font-weight: 900 !important;
padding: 6px 14px !important;
border-radius: 50px !important;
text-transform: uppercase;
display: inline-block;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* 5. FIX DARK CONTENT ON DARK BACKGROUNDS (MOBILE) */
@media (max-width: 1023px) {
body { background-color: #0b0b0b !important; }
.hentry, .wp-block-post { background: #161616 !important; }
.entry-title, .entry-title a { color: #ffffff !important; }
   .entry-content p { color: #d6d6d6 !important; }
}
/* DESKTOP ONLY: unify category archive thumbnails (exclude home + Clocking It) */
@media (min-width: 769px) {
/* Target category/archive pages but exclude home and the Clocking It category */
body.archive:not(.home):not(.category-clocking-it-the-political-rundown),
body.category:not(.home):not(.category-clocking-it-the-political-rundown) {
--card-img-border-radius: 14px;
}
body.archive:not(.home):not(.category-clocking-it-the-political-rundown)
.post-thumbnail,
body.archive:not(.home):not(.category-clocking-it-the-political-rundown)
.post-thumbnail img,
body.archive:not(.home):not(.category-clocking-it-the-political-rundown)
.entry-thumbnail,
body.archive:not(.home):not(.category-clocking-it-the-political-rundown)
.entry-thumbnail img,
body.archive:not(.home):not(.category-clocking-it-the-political-rundown)
.wp-block-post-featured-image,
body.archive:not(.home):not(.category-clocking-it-the-political-rundown)
.wp-block-post-featured-image img,
body.archive:not(.home):not(.category-clocking-it-the-political-rundown)
.wp-block-latest-posts__featured-image,
body.archive:not(.home):not(.category-clocking-it-the-political-rundown)
.wp-block-latest-posts__featured-image img,
body.archive:not(.home):not(.category-clocking-it-the-political-rundown)
.wp-block-image,
body.archive:not(.home):not(.category-clocking-it-the-political-rundown)
.wp-block-image img,
body.category:not(.home):not(.category-clocking-it-the-political-rundown)
.post-thumbnail,
body.category:not(.home):not(.category-clocking-it-the-political-rundown)
.post-thumbnail img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: cover !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
border-radius: var(--card-img-border-radius) !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Neutralize rounded block style that forces small ovals */
body.archive:not(.home):not(.category-clocking-it-the-political-rundown)
.wp-block-image.is-style-rounded img,
body.category:not(.home):not(.category-clocking-it-the-political-rundown)
.wp-block-image.is-style-rounded img {
border-radius: var(--card-img-border-radius) !important;
width: 100% !important;
max-width: 100% !important;
aspect-ratio: auto !important;
}
/* Ensure card wrappers don't clip the image */
body.archive:not(.home):not(.category-clocking-it-the-political-rundown) .hentry,
body.category:not(.home):not(.category-clocking-it-the-political-rundown) .hentry,
body.archive:not(.home):not(.category-clocking-it-the-political-rundown) .wp-block-post,
body.category:not(.home):not(.category-clocking-it-the-political-rundown) .wp-block-post {
overflow: visible !important;
display: block !important;
width: 100% !important;
}
}