/*
 * --- Global Styles ---
 * These styles apply across the entire website unless overridden by more specific rules.
 */
/* --- Table Alternate Shading --- */
/* Applies a light gray background to odd rows and white to even rows for tables with the 'table-altshade' class. */
.table-altshade tr:nth-child(odd) {
	background-color: #F5F5F5;
}

.table-altshade tr:nth-child(even) {
	background-color: white;
}

/* --- Header Image Positioning Fix --- */
/* Adjusts top padding for site content and body to account for a fixed header height. 
   Using :has(.mi-header) ensures this padding ONLY applies when the header is present. 
   If the header is removed (like on the Friends page), this padding is skipped to prevent white space. */
body:has(.mi-header) {
	padding-top: 75px;
/* Adjusts top padding for the body to move content below the fixed header. */
}

body:has(.mi-header) .site-content {
	padding-top: 80px;
/* Adjusts top padding for the main site content area. */
}

/* --- Featured Image Styling (General) --- */
/* These rules apply to the primary featured image container and the image within it, site-wide.
   Specific page background images and height overrides are handled in the 'Page-Specific Background Images' section below. */
.attachment-post-thumbnail {
	display: flex !important;
/* Uses flexbox for centering content within the container. */
	flex-direction: column !important;
/* Stacks items vertically within the flex container. */
	justify-content: center !important;
/* Centers content horizontally (along the main axis) within the container. */
	align-items: center !important;
/* Centers content vertically (along the cross axis) within the container. */
	overflow: hidden !important;
/* Hides any content (including parts of the image) that overflows the container's boundaries. */
	max-height: 350px !important;
/* Sets the maximum height for the featured image container to 350 pixels. */
/* NOTE: The original comment "Set the maximum height to 300px" appears to be an old note; the actual value is 350px. */
}

.attachment-post-thumbnail img {
	max-width: 100%;
/* Ensures the image does not exceed 100% of its container's width. */
	max-height: 100%;
/* Ensures the image does not exceed 100% of its container's height. */
/* NOTE: The comment "Ensure the image scales within the container" is consistent with this. */
	object-fit: cover;
/* Scales the image to cover the container while maintaining its aspect ratio, potentially cropping parts of the image. */
/* NOTE: The comment "or contain, as you prefer" is consistent with this. */
}

/* --- Table Cell Padding --- */
/* Applies 20 pixels of padding to table cells within tables that have the 'table-pad' class. */
.table-pad table td {
	padding: 20px;
}

/* --- Custom Fixed Header --- */
/* Targets the custom header class 'mi-header' to make it fixed at the top of the viewport. */
.mi-header {
	position: fixed;
/* Positions the header relative to the viewport, keeping it in place when scrolling. */
	top: 0;
/* Aligns the header to the top edge of the viewport. */
	left: 0;
/* Aligns the header to the left edge of the viewport. */
	width: 100%;
/* Makes the header span the full width of the viewport. */
	z-index: 1000;
/* Ensures the header stays above other content on the page. */
/* NOTE: The comment "Ensure it stays above other content" is consistent with this. */
}

/* --- Outlined Column Style --- */
/* Applies a 1px solid border in a specific red color to elements with the 'column-outlined' class. */
.column-outlined {
	border: 1px solid #D73C37;
}

/* --- Custom Button Hover Effect --- */
/* Applies a specific background color and white text color on hover for elements with the 'button-hover' class. */
.button-hover:hover {
	background-color: #D73C37 !important;
/* Changes the background color to coral on hover. */
	color: #ffffff !important;
/* Changes the text color to white on hover. */
/* NOTE: The comment "Use !important to ensure it overrides other background color styles on hover" is consistent with this. */
	transition: background-color .3s ease;
/* Provides a smooth 0.3-second transition for the background color change. */
/* NOTE: The comment "Example smooth transition" is consistent with this. */
}

/* --- Default Button Hover Effect --- */
/* Applies a specific background color and white text color on hover for various default button types site-wide. */
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button .wp-block-button__link:hover {
	background-color: #D73C37 !important;
/* Changes the background color to coral on hover. */
	color: #ffffff !important;
/* Changes the text color to white on hover. */
/*transition: background-color .3s ease;*/
/* (Commented out) Example smooth transition for background color. */
}

/* --- Link Hover Effect (Underline - Excluding Images) --- */
/* Applies an underline on hover for text links, specifically excluding links that contain images. */
a:not(:has(img)):hover {
	text-decoration: underline !important;
/* Adds an underline to the text on hover. */
/* NOTE: The comment "Changed from background/color to underline" is consistent with this. */
	color: inherit !important;
/* Ensures the text color remains the same as its parent element on hover. */
/* NOTE: The comment "Ensure color doesn't change unless specified elsewhere" is consistent with this. */
	background-color: transparent !important;
/* Ensures no background color change on hover. */
/* NOTE: The comment "Ensure no background color" is consistent with this. */
	transition: none !important;
/* Disables any transition effects on hover. */
/* NOTE: The comment "Ensure no transition time" is consistent with this. */
}

/* --- Image Link Hover Effect (Opacity) --- */
/* Reduces the opacity of images when their containing link is hovered over. */
a:has(img):hover img {
	opacity: .8 !important;
/* Makes the image 80% opaque on hover. */
/* NOTE: The comment "Make image 80% opaque on hover" is consistent with this. */
	transition: none !important;
/* Disables any transition effects on hover. */
/* NOTE: The comment "Ensure no transition time" is consistent with this. */
}

/* --- WordPress Block Columns Spacing --- */
/* Adjusts padding, margins, and flex properties for WordPress Block Columns, ensuring consistent spacing and layout. */
.wp-block-columns.is-layout-flex:not(.no-pad-columns) > .wp-block-column:not(.no-pad) {
	padding: 25px;
	margin-left: 0 !important;
	margin-right: 0 !important;
	flex-basis: 0;
	flex-grow: 1;
}

.wp-block-columns.is-layout-flex {
	display: flex;
	gap: 25px;
	margin-left: 0;
	margin-right: 0;
}

/* Maintains a 15px gap for columns that explicitly have the 'no-pad' class. */
.wp-block-columns.is-layout-flex > .wp-block-column.no-pad {
	margin-left: 7.5px !important;
	margin-right: 7.5px !important;
}

/* Adjusts the left margin for the first 'no-pad' column to remove extra spacing. */
.wp-block-columns.is-layout-flex > .wp-block-column:first-child.no-pad {
	margin-left: 0 !important;
}

/* Adjusts the right margin for the last 'no-pad' column to remove extra spacing. */
.wp-block-columns.is-layout-flex > .wp-block-column:last-child.no-pad {
	margin-right: 0 !important;
}

/* --- Admin Bar Hiding --- */
/* Hides the WordPress admin bar on the front-end of the website for all users. */
#actionbar {
	display: none !important;
}

/* --- Light Blue Table Border --- */
/* Applies a light blue border and adjusts table layout for tables with the 'outline-lightblue' class on desktop. */
.wp-block-table.outline-lightblue table {
	border: 3px solid #cde7f7 !important;
/* Sets a 3px solid light blue border for the table. */
/* NOTE: The comment "Adjust thickness as needed for desktop" is consistent with this. */
	border-collapse: separate !important;
/* Ensures that cell borders are rendered separately from table borders. */
/* NOTE: The comment "To see the outer border on desktop" is consistent with this. */
	border-spacing: 0;
/* Removes spacing between table cells. */
/* NOTE: The comment "Remove spacing between cells and outer border on desktop" is consistent with this. */
}

/* Styles individual table cells and headers within tables with 'outline-lightblue' class on desktop. */
.wp-block-table.outline-lightblue th,
.wp-block-table.outline-lightblue td {
	border: 1px solid #cde7f7;
/* Adds a 1px solid light blue border to individual cells. */
/* NOTE: The comment "Optional: Add border to individual cells for desktop" is consistent with this. */
	vertical-align: top;
/* Aligns cell content to the top. */
/* NOTE: The comment "Align text to the top of the cell" is consistent with this. */
}

/* --- Mobile-Specific Table Border Adjustments --- */
/* Adjusts the light blue table border behavior for screens up to 781px wide (mobile). */
@media (max-width: 781px) {
	.wp-block-table.outline-lightblue {
		overflow-x: auto;
	/* Allows horizontal scrolling if table content exceeds screen width. */
	/* NOTE: The comment "In case content is wider than the screen" is consistent with this. */
		background-color: #F5F5F5 !important;
	/* Sets a light gray background for the entire table on mobile. */
	/* NOTE: The comment "Light gray background for the whole table on mobile" is consistent with this. */
		border: 3px solid #F5F5F5 !important;
	/* Sets a 3px solid light gray border for the table on mobile. */
	/* NOTE: The comment "Light gray border for the whole table on mobile" is consistent with this. */
	}
	
	.wp-block-table.outline-lightblue table {
		display: block;
	/* Makes the table behave as a block-level element on mobile. */
	/* NOTE: The comment "Make the table behave like a block" is consistent with this. */
		width: 100%;
	/* Ensures the table takes the full width available on mobile. */
	/* NOTE: The comment "Take full width" is consistent with this. */
		border-collapse: collapse;
	/* Collapses adjacent cell borders into a single border. */
	/* NOTE: The comment "Collapse inner borders on mobile" is consistent with this. */
		border: none !important;
	/* Removes any inner table borders on mobile. */
	/* NOTE: The comment "Ensure no inner table border is visible" is consistent with this. */
	}
	
	.wp-block-table.outline-lightblue thead {
		display: none;
	/* Hides the table header on mobile. */
	/* NOTE: The comment "Hide table header" is consistent with this. */
	}
	
	.wp-block-table.outline-lightblue tbody tr {
		display: block;
	/* Makes each table row a block-level element on mobile. */
	/* NOTE: The comment "Make each row a block" is consistent with this. */
		border-bottom: 1px solid #F5F5F5;
	/* Adds a subtle separator between rows on mobile. */
	/* NOTE: The comment "Optional: Add a subtle separator between rows" is consistent with this. */
	}
	
	.wp-block-table.outline-lightblue tbody tr:last-child {
		border-bottom: none;
	/* Removes the bottom border from the last row to prevent double borders. */
	/* NOTE: The comment "Remove the bottom border from the last row" is consistent with this. */
	}
	
	.wp-block-table.outline-lightblue tbody tr td {
		display: block;
	/* Makes each table cell a block-level element within its row on mobile. */
	/* NOTE: The comment "Make each cell a block within the row" is consistent with this. */
		border: none;
	/* Removes individual cell borders in mobile view. */
	/* NOTE: The comment "Remove individual cell borders in mobile view" is consistent with this. */
		vertical-align: top;
	/* Aligns cell content to the top in mobile view. */
	/* NOTE: The comment "Align text to the top of the cell in mobile view" is consistent with this. */
	}
}

/* --- Comment Section Styling --- */
/* Reduces top and bottom padding for the comment reply/form area. */
#respond {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

/* Reduces top and bottom padding for individual comments in the list. */
.wp-block-comment-template li {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

/* Adjusts the bottom margin for the main "Comments" heading. */
.wp-block-comments > h4.wp-block-heading {
	margin-bottom: 10px;
}

/* Sets the font weight for the comment reply title to normal. */
#reply-title {
	font-weight: normal;
/* 'normal' is typically equivalent to 400. */
/* NOTE: The comment "'normal' is typically equivalent to 400" is consistent with this. */
}

/* --- Admin Bar Styling --- */
/* Makes the admin bar background semi-transparent. */
#wpadminbar {
	background-color: rgba(0, 0, 0, 0.05) !important;
/* Sets a black background with 5% opacity. */
/* NOTE: The comment "Black with 5% opacity" is consistent with this. */
}

/* Changes the text color of various admin bar elements to white. */
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon::before,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-label {
	color: #ffffff !important;
/* Sets the text color to white. */
/* NOTE: The comment "Black text" here seems inconsistent with the color value #ffffff (White). */
}

/* --- Newspack Block Styling --- */
/* Styles the heading for Newspack 'Latest Posts' to appear like an H5. */
.wp-block-newspack-blocks-homepage-articles .article-section-title {
	font-size: 1em !important;
/* Sets the font size to 1em (H5 size). */
/* NOTE: The comment "H5 size" is consistent with this. */
	color: #282e4e !important;
/* Sets the text color to a dark blue/grey. */
/* NOTE: The comment "Dark blue/grey color" is consistent with this. */
}

/* Styles the entry title within Newspack articles to appear like a bold H5 with a coral color. */
.wp-block-newspack-blocks-homepage-articles article .entry-title {
	font-size: 1em !important;
/* Sets the font size to 1em (H5 size). */
/* NOTE: The comment "H5 size" is consistent with this. */
	font-weight: 700 !important;
/* Sets the font weight to bold. */
/* NOTE: The comment "Bold weight" is consistent with this. */
	color: #d73c37 !important;
/* Sets the text color to coral. */
/* NOTE: The comment "Coral color" is consistent with this. */
}

/* Ensures links inside Newspack entry titles inherit font styles from their parent. */
.wp-block-newspack-blocks-homepage-articles article .entry-title a {
	font-size: inherit !important;
/* Inherits font size from parent. */
	font-weight: inherit !important;
/* Inherits font weight from parent. */
	color: inherit !important;
/* Inherits text color from parent. */
/* NOTE: The comment "Inherit the #d73c37 color" is consistent with this. */
/* Removed opacity and transition properties */
/* (Commented out) Indicates removal of these properties. */
}

/* Removed the :hover rule block */
/* (Commented out) Indicates removal of a hover effect block. */
/*
 * --- Featured Image Overrides (Page-Specific Background Images) ---
 * These styles replace the default featured image with a CSS background-image
 * for specific pages, ensuring precise height control.
 */
/* Global Featured Image Container Styling for Desktop/Tablet */
/* This base rule applies fixed height and background properties to the featured image container
   for all pages when viewed on desktop and tablet screens. */
.wp-block-post-featured-image {
	background-size: cover !important;
/* Scales the background image to cover the entire container. */
	background-repeat: no-repeat !important;
/* Prevents the background image from repeating. */
	background-position: center center !important;
/* Centers the background image within the container. */
	height: 350px !important;
/* Sets a fixed height of 350 pixels for the featured image container. */
	overflow: hidden !important;
/* Clips any content (image) that extends beyond the container's boundaries. */
	width: 100%;
/* Ensures the container takes up the full available width. */
}

/* Global Rule to Hide Original Featured Image  Tag */
/* This rule hides the default  tag used for featured images on all pages,
   as the background-image method is used instead. */
.wp-block-post-featured-image img.wp-post-image {
	display: none !important;
/* Hides the original featured image element. */
}

/* --- Page-Specific Background Image URLs --- */
/* Each rule targets a specific page by its unique 'page-id' body class
   and assigns a distinct background image URL to its featured image container. */
/* Homepage: Uses home-2.jpeg */
.home .wp-block-post-featured-image {
	background-image: url('https://matichukinsights.ca/wp-content/uploads/2025/05/home-2.jpeg') !important;
}

/* About Page: Uses about-2.jpeg */
.page-id-239 .wp-block-post-featured-image {
	background-image: url('https://matichukinsights.ca/wp-content/uploads/2025/05/about-2.jpeg') !important;
}

/* Services Page: Uses services-1.jpeg */
.page-id-258 .wp-block-post-featured-image {
	background-image: url('https://matichukinsights.ca/wp-content/uploads/2025/05/services-1.jpeg') !important;
}

/* Engagement & Libraries Page: Uses engagementandlibraries-1.jpeg */
.page-id-272 .wp-block-post-featured-image {
	background-image: url('https://matichukinsights.ca/wp-content/uploads/2025/05/engagementandlibraries-1.jpeg') !important;
}

/* Accessibility Page: Uses accessibility-1.jpeg */
.page-id-343 .wp-block-post-featured-image {
	background-image: url('https://matichukinsights.ca/wp-content/uploads/2025/05/accessibility-1.jpeg') !important;
}

/* Contact Page: Uses contact-1.jpeg */
.page-id-210 .wp-block-post-featured-image {
	background-image: url('https://matichukinsights.ca/wp-content/uploads/2025/05/contact-1.jpeg') !important;
}

/* Friends of the Library Page: Uses friends-4.jpg */
.page-id-958 .wp-block-post-featured-image {
	background-image: url('https://matichukinsights.ca/wp-content/uploads/2025/11/friends-4.jpg') !important;
}

/* Book a Meeting Page: Uses contact-1.jpeg */
.page-id-1024 .wp-block-post-featured-image {
	background-image: url('https://matichukinsights.ca/wp-content/uploads/2025/05/contact-1.jpeg') !important;
}

/* --- Mobile-Specific Height for All Pages --- */
/* This media query applies specific height adjustments to the featured image container
   for all pages when viewed on mobile screens (up to 782 pixels wide). */
@media screen and (max-width: 782px) {
	.wp-block-post-featured-image {
		height: 200px !important;
	/* Sets a fixed height of 200 pixels for mobile. */
		min-height: 200px !important;
	/* Ensures the container is at least 200px tall. */
		max-height: 200px !important;
	/* Ensures the container is at most 200px tall. */
	}
}

/* --- Homepage Specific Styles --- */
/* Hides the page-header-title on the home page. */
.home .page-header-title {
	display: none !important;
}

/* 1.  Target the main element, let its children flow normally */
.page-id-1024 main.wp-block-group.is-layout-flow {
	display: block;
	padding: 0;
	margin: 0;
}

/* 2.  Create a wrapper div around the iframe */
.iframe-wrapper {
	width: 100%;
/* Take up full width */
	text-align: left;
/* Left-align its content */
	padding: 0;
	margin: 0;
}

/* 3. Target the iframe's container (original) - ensure no interference */
.page-id-1024 main > div[style*="iframe"] {
	display: block;
/* Default block behavior */
	width: auto;
/* Let it size to content */
	padding: 0;
	margin: 0;
}

/* 4.  Target the contact form container (no changes needed) */
.page-id-1024 .wp-block-jetpack-contact-form-container {
/* No changes needed here */
}

/* 5.  Target the text paragraph (no changes needed) */
.page-id-1024 main p:first-of-type {
/* No changes needed here */
}

/* 6.  Target the iframe itself (no positioning, just styling) */
.google-calendar-iframe {
	width: 100%;
	height: 800px;
	border: none;
	display: block;
/* Fill its container */
}

/* --- Matichuk Insights Blog Page Header Styles --- */
/* This targets your blog page using its unique Page ID. */
.page-id-1134 .mi-header {
	background-color: #ffffff !important;
/* Set header background to white */
}

/* Change the logo image on the blog page header */
.page-id-1134 .mi-header .custom-logo {
/* This swaps the image with the URL of your new logo */
	content: url('https://matichukinsights.ca/wp-content/uploads/2025/08/stackedlogo-coralblue.png');
	width: 170px;
/* Ensures the new logo keeps the same width */
	height: auto;
/* Maintains the aspect ratio */
}

/* Change the menu text color to black on the blog page header */
.page-id-1134 .mi-header .wp-block-navigation-item a {
	color: #000000 !important;
}

/* Remove top padding from the main site container */
.wp-site-blocks {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Ensure the first block (the image) hits the very top */
.wp-site-blocks > :first-child {
	margin-top: 0 !important;
}

/* Fix Small Text on File Download Block */
.wp-block-file {
	font-size: 1rem !important;
/* Resets size to normal */
}

/* Optional: Make the filename link bold so it stands out more */
.wp-block-file > a:first-of-type {
	font-weight: 700;
	text-decoration: underline;
}

/* Fix narrow padding on all sides of the grey survey box for mobile */
@media screen and (max-width: 600px) {
	.wp-block-group.has-base-2-background-color {
		padding: 25px !important;
	}
}