/*
Theme Name: wp-theme-the-video-star-colorstream
Theme URI: https://github.com/galbc/wp-theme-the-video-star-colorstream
Author: Automattic
Description: Colorstream is a slick and minimalistic theme design crafted especially for WordPress blogs.
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 5.7
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: colorstream
Tags: blog, one-column, right-sidebar, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, flexible-header, full-site-editing, full-width-template, rtl-language-support, template-editing, theme-options, threaded-comments, translation-ready
*/

/* --- Global Styles --- */
body {
    font-size: 16px;
}

/* --- Link Styles --- */
a {
	text-decoration-thickness: 0.0625em !important;
	text-underline-offset: 0.15em;
}

/* --- Hero Section --- */
.hero {
	padding: var(--wp--preset--spacing--40) 0;
	text-align: center;
}
.hero-inner {
	max-width: 90vw;
	margin: 0 auto;
}
.hero-logo {
	width: 85vw;
	max-width: 100%;
	height: auto;
}
.company-tag-line {
	margin-top: 1.5rem;
	font-size: clamp(1.2rem, 2.5vw, 2.2rem);
}

/* --- Post Cards --- */
.post-preview {
	padding: 0.75rem 0.5rem;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.post-header {
	max-width: 90vw;
	margin: 0 auto;
}
.post-category {
	margin: 0 0 0.35rem 0;
	font-weight: 500;
	font-size: 0.8rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

/* --- Title and Date Row --- */
.title-row{
    display:grid;                 /* replaces flex  */
    grid-template-columns: 1fr auto; /* 1 = title   | 2 = date */
    column-gap: 1rem;             /* same gap as before */
    align-items:start;            /* align date with first line of title */
}

.post-title{
    margin:0;                     /* keep your existing props */
}

.post-date{
    white-space:nowrap;           /* never break the date */
    flex-shrink:0;                /* harmless if grid isn’t supported */
}

/* --- Abridged Content --- */
.abridged-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.4s ease;
	max-width: 90vw;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.5;
	padding: 0 0;
}
.post-preview.open .abridged-content {
	max-height: 1000px;
	padding: 1.5rem 0 0;
}

/* Abridged Layout */
.abridged-grid {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.abridged-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.abridged-item {
	flex: 1 1 45%;
	min-width: 0;
}
.abridged-below {
	margin-top: 0.5rem;
	width: 100%;
}

/* --- Text Consistency inside Abridged Content --- */
.abridged-content h1,
.abridged-content h2,
.abridged-content h3,
.abridged-content h4,
.abridged-content h5,
.abridged-content h6 {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0.5rem 0 0.25rem;
	line-height: 1.3;
}
.abridged-content p {
	font-size: 1rem;
	font-weight: 400;
	margin: 0.5rem 0;
	line-height: 1.5;
}

/* --- Tags Row and MORE Button --- */
.tags-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.65rem;
	margin-top: 1.5rem;
}
.tag-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	height: 1.5rem;
	background: #000;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0 0.75rem;
	border-radius: 1rem;
	text-decoration: none;
	transition: background-color 0.3s ease;
}
.tag-pill:hover {
	background-color: rgba(0, 0, 0, 0.7);
}

/* --- Transparent MORE Buttons --- */
.more-btn {
	display: inline-block;
	padding: 0.5rem 1.5rem;
	border: 2px solid #000;
	font-weight: 700;
	text-transform: uppercase;
	background: transparent;
	color: #000;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	z-index: 1;
	text-align: center;
}
.more-btn:hover {
	color: #fff;
}
.more-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0;
	z-index: -1;
	transition: opacity 300ms ease, background-color 300ms ease;
}
.more-btn:hover::before {
	background-color: #000;
	opacity: 0.8;
}

/* --- Load More Centered --- */
#load-more-wrap {
	text-align: center;
	margin: 3rem 0;
}

.abridged-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --- Mobile Styles --- */
@media (max-width: 768px) {
    body {
        font-size: 18px !important;
    }

    .title-row {
        flex-wrap: wrap !important;
    }

    .post-title {
        font-size: 1.4rem !important;
    }

    .post-date {
        font-size: 1rem !important;
    }

    .post-category {
        font-size: 0.9rem !important;
    }

    .abridged-content p,
    .abridged-content li,
    .abridged-content h1,
    .abridged-content h2,
    .abridged-content h3,
    .abridged-content h4,
    .abridged-content h5,
    .abridged-content h6 {
        font-size: 1rem !important;
    }

    .tag-pill {
        font-size: 0.85rem !important;
    }

    .more-btn {
        font-size: 0.9rem !important;
        padding: 0.5rem 1rem !important;
    }

    .abridged-grid {
        flex-direction: column !important;
    }

    .abridged-columns {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .abridged-item,
    .abridged-below {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}