/*
 Theme Name:   College Kitchen
 Description:  A custom child theme for the Go theme.
 Author:       Sisu Systems
 Template:     go
 Version:      1.0.0
*/

/**
 * College Kitchen Child Theme Stylesheet
 *
 * @version 1.0.0
 */

/*--------------------------------------------------------------
# Global & Utility Styles
--------------------------------------------------------------*/
/* Sets the maximum width for the main content area. */
:root {
	--go--max-width: 60rem !important;

	/* Force all theme typography to Google Sans */
	--go--font-family: var(--wp--preset--font-family--google-sans, "Google Sans", sans-serif) !important;
	--go-heading--font-family: var(--wp--preset--font-family--google-sans, "Google Sans", sans-serif) !important;
}

/* Utility class to force alignment. */
.text-align-left {
	text-align: left !important;
}

.text-align-right {
	text-align: right !important;
}

.float-left {
	float: left !important;
}

.float-right {
	float: right !important;
}

/* General styling for headings. */
.wp-block-heading {
	margin-top: 3rem;
}

/*--------------------------------------------------------------
# Post Grid & Card Layout
--------------------------------------------------------------*/
/* Establishes a responsive 2-column grid for post archives. */
.posts-grid-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

/* Ensures cards within the grid behave as flex containers and fill the height. */
.posts-grid-container > article.card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Allows the main content area of a card to expand and fill available vertical space. */
.posts-grid-container > article.card .content-area__wrapper {
	flex-grow: 1;
}

/* Pushes the post terms (tags/categories) to the bottom of the card. */
.posts-grid-container > article.card .post-terms {
	margin-top: auto;
	padding-top: 1rem;
}

/*--------------------------------------------------------------
# Post Content & Meta
--------------------------------------------------------------*/
/* Styles the post author name in post meta sections. */
.post-author {
	text-transform: uppercase;
}

/* Single-article header: centered editorial treatment (scoped to .single so archive cards/pages stay left). */
.single .entry-header {
	text-align: center !important; /* out-specifies .text-align-left's !important */
}

/* Tightened, slightly larger title (centers via the header's text-align). */
.single .post__title {
	font-size: clamp(2.25rem, 3.5vw + 1rem, 3rem);
	line-height: 1.15;
}

/* Header separator: mirrors the CoBlocks is-style-line rule recipes use (short, centered, primary color). */
.single .entry-meta {
	margin-bottom: 2rem;
}

.single .entry-meta::after {
	content: "";
	display: block;
	width: 15vw;
	max-width: 120px;
	height: 1px;
	margin: 2rem auto 0;
	background: var(--wp--preset--color--primary, var(--go--color--primary));
}

/* Centers text within the recipe meta block (e.g., prep time, cook time). */
.rmb-recipe__meta-item {
	text-align: center;
}

/* Styles the post thumbnail container to be a fixed height, preventing layout shifts. */
.post__thumbnail {
	position: relative;
	height: 200px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 1rem;
}

/* Like count overlaid as a dark badge in the thumbnail's lower-right corner. */
.post__thumbnail .post-likes {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	z-index: 2;
	pointer-events: none;
}

/* Ensures the thumbnail image covers the container without distortion. */
.post__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.wp-block-post-featured-image {
    position: relative;
    width: 100%;
    padding-top: 40%;
    /* 16:9 Aspect Ratio */
	/* padding-top: 56.25%; */
    overflow: hidden;
}

.wp-block-post-featured-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/*--------------------------------------------------------------
# Post Terms (Categories & Tags)
--------------------------------------------------------------*/
/* General container for all terms (categories, tags, ingredients). */
.post-terms {
	margin-top: 20px;
	line-height: 1.9;
	text-transform: uppercase;
	color: #333;
	font-size: 0.9em;
	letter-spacing: 1.5px;
	font-weight: 600;
}

/* Adds vertical space between the category line and the tag line. */
.post-terms .post-categories {
	margin-bottom: 15px;
}

/* Removes the default underline from term links. */
.post-terms a {
	text-decoration: none;
	color: inherit; /* Ensures links match the surrounding text color. */
}

/* Adds an underline on hover for better user feedback. */
.post-terms a:hover {
	text-decoration: underline;
}

/* Legacy styles for a top border separator, can be used if needed. */
.post-tags {
	margin-top: 25px;
	padding-top: 25px;
	border-top: 1px solid #eeeeee;
}

/*--------------------------------------------------------------
# Interactive Element Overrides
--------------------------------------------------------------*/
/* Ensures button text is readable on hover. */
.wp-block-button__link:hover {
	color: white;
}

.is-style-outline {
	display: flex;
	flex-wrap: wrap;
}

/* button style */
.is-style-outline .tag-cloud-link {
	margin: 0.25rem;
	padding: 0.5rem 1rem;
    font-size: 16px !important;
    border: 1px solid var(--go--color--primary);
    text-decoration: none;
    color: var(--go--color--primary);
    white-space: nowrap;
}

/* tag style
.is-style-outline .tag-cloud-link {
	margin: 0.25rem;
	padding: 0.5rem 1rem;
	line-height: 1.9;
    color: #333;
    font-size: 0.9em !important;
    letter-spacing: 1.5px;
    font-weight: 600;
	text-decoration: none;
    white-space: nowrap;
} */

/* Custom hover state for the tag cloud links. */
.is-style-outline .tag-cloud-link:hover {
	border-color: var(--go-button-interactive--color--background, var(--go--color--secondary));
	background-color: var(--go-button-interactive--color--background, var(--go--color--secondary));
	color: white;
}

/*--------------------------------------------------------------
# Pagination Style Overrides
--------------------------------------------------------------*/
/* Hides all individual page numbers (e.g., 1, 2, 3) from the pagination. */
.pagination-wrapper .page-numbers {
	display: none;
}

/* Explicitly shows the "previous" and "next" links. */
.pagination-wrapper .prev.page-numbers,
.pagination-wrapper .next.page-numbers {
	display: inline-block;
}

/* Ensures the main pagination container spans the full width. */
.pagination-wrapper .navigation.pagination {
	width: 100%;
}

/* Makes the inner link container a block element with full width. */
.pagination-wrapper .nav-links {
	display: block;
	width: 100%;
}

/* Floats the "next" button to the far right. */
.pagination-wrapper .next {
	float: right;
	margin-right: 0px;
}

/*--------------------------------------------------------------
# Mobile Layout
--------------------------------------------------------------*/

@media (max-width: 768px) {
	.wp-block-coblocks-hero .wp-block-button {
		width: 100%;
	}
	.entry-header {
		margin-bottom: 1rem !important;
	}
	.posts-grid-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 1.5rem;
	}
	.pagination-wrapper {
		margin: 1rem auto;
	}
	.nav-links {
		flex-wrap: nowrap !important;
		flex-direction: column-reverse;
	}
	.nav-links .page-numbers {
		max-height: 75px;
		margin: 1rem auto !important;
		width: 100%;
	}
	:root :where(.wp-block-tag-cloud.is-style-outline) {
        flex-direction: row;
        justify-content: space-between;
    }
	.tag-cloud-link {
		width: 47%;
	}
	.wp-block-group  {
		flex-wrap: wrap-reverse !important;
	}
	.wp-block-buttons {
		min-width:100% !important;
		flex-wrap: wrap !important;
	}
	.wp-block-group .wp-block-button {
		min-width: 100%;
		margin-top: 0.5rem;
	}
	.wp-block-outermost-social-sharing {
		min-width: 100%;
	}
	.wp-block-outermost-social-sharing li:first-child {
		margin-left: 0px;
	}
	#searchform {
		flex-direction: column !important;
		gap: 1rem;
	}
}

/*--------------------------------------------------------------
# Print Layout
--------------------------------------------------------------*/

@media print {
    /*
     * Ensures any element with this class is visible in print.
     */
    .coblocks-animate {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
    /*
     * Hides the website header and footer from the printed page.
     */
	#site-header,
    .site-footer {
        display: none;
    }
}