/*
Theme Name: Scott Morreau Blog
Theme URI: https://blog.scottsellsfl.com
Author: Scott Morreau
Author URI: https://scottsellsfl.com
Description: A bold, magazine-style WordPress block theme for Scott Morreau's Broward County real estate blog. Image-overlay story cards, a flash-posts ticker, and a featured hero grid. Branded in deep navy (#050E3D) with a light-blue (#00BFFF) accent, set in Montserrat.
Version: 1.2.1
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scott-morreau-blog
*/

/* -------------------------------------------------------------
   Supplemental styles. Core design tokens live in theme.json.
---------------------------------------------------------------- */

:root {
	--smb-navy: #050E3D;
	--smb-sky: #00BFFF;
	--smb-cyan: #00FBF0;
	--smb-ink: #141c33;
	--smb-muted: #5b6478;
	--smb-hairline: #e4e7ef;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	color: var(--smb-ink);
}

/* ---------- Top utility bar ---------- */
.smb-topbar {
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}
.smb-topbar a { color: #fff; text-decoration: none; }
.smb-topbar a:hover { color: var(--smb-sky); }

/* ---------- Site header ---------- */
.smb-site-title a { text-decoration: none; letter-spacing: -0.02em; }
.smb-site-header .wp-block-navigation-item__content { font-weight: 700; }
.smb-site-header .wp-block-navigation-item__content:hover { color: var(--smb-sky); }
.smb-site-header .current-menu-item .wp-block-navigation-item__content { color: var(--smb-sky); }

/* ---------- Category badge (light-blue pill, navy text) ---------- */
.smb-badge {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.smb-badge a,
.smb-badge .wp-block-post-terms__separator { text-decoration: none; }
.smb-badge a {
	display: inline-block;
	background: var(--smb-sky);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 0.3em 0.72em;
	border-radius: 4px;
	line-height: 1;
}
.smb-badge a:hover { background: var(--smb-navy); color: #fff; }
.smb-badge .wp-block-post-terms__separator { display: none; }

/* ---------- Overlay story cards (Cover + featured image) ---------- */
.smb-card.wp-block-cover {
	border-radius: 10px;
	overflow: hidden;
	justify-content: flex-end;
}
/* Ensure the featured-image background is clipped to the rounded corners */
.smb-card .wp-block-cover__image-background,
.smb-card .wp-block-cover__background,
.smb-card img {
	border-radius: 10px;
}
.smb-card .wp-block-cover__inner-container { width: 100%; }
.smb-card .wp-block-post-title { margin: 0.5rem 0 0.6rem; line-height: 1.18; }
.smb-card .wp-block-post-title a { color: #fff; text-decoration: none; }
.smb-card .wp-block-post-title a:hover { color: var(--smb-sky); }
.smb-card .smb-byline,
.smb-card .wp-block-post-date {
	color: rgba(255,255,255,0.85);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.02em;
}
.smb-card .smb-byline { text-transform: none; }

/* Card sizing for the hero + grid */
.smb-hero-lead.wp-block-cover { min-height: 460px; }
.smb-hero-side.wp-block-cover { min-height: 218px; }
.smb-grid-card.wp-block-cover { min-height: 300px; }

/* Grid gap for the story grid */
.smb-story-grid .wp-block-post-template.is-layout-grid { gap: 1.5rem; }

/* ---------- Flash-posts ticker ---------- */
.smb-flash {
	background: var(--smb-mist, #f5f7fb);
	border: 1px solid var(--smb-hairline);
	border-radius: 8px;
}
.smb-flash-label {
	background: var(--smb-sky);
	color: #fff;
	font-weight: 800;
	letter-spacing: 0.01em;
	font-size: 1rem;
	padding: 0.85rem 2rem 0.85rem 1.15rem;
	border-radius: 0;
	white-space: nowrap;
	align-self: stretch;
	display: flex;
	align-items: center;
	/* solid banner with an angled right edge */
	clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
.smb-flash .wp-block-post-template {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	margin: 0;
}
.smb-flash .wp-block-post-template li { max-width: 280px; }
.smb-flash .wp-block-post-title { font-size: 0.9rem; line-height: 1.3; margin: 0; }
.smb-flash .wp-block-post-title a { color: var(--smb-navy); text-decoration: none; }
.smb-flash .wp-block-post-title a:hover { color: var(--smb-sky); }

/* ---------- Section headings ---------- */
.smb-section-title {
	position: relative;
	padding-bottom: 0.6rem;
	margin-bottom: 1.75rem;
	border-bottom: 2px solid var(--smb-hairline);
}
.smb-section-title::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 64px; height: 2px;
	background: var(--smb-sky);
}

/* ---------- Single/page meta line ---------- */
.smb-meta,
.smb-meta .wp-block-post-date,
.smb-meta .wp-block-post-author-name {
	color: var(--smb-muted);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
}

/* ---------- Body reading (single/page) ---------- */
.wp-block-post-content { font-size: 1.16rem; line-height: 1.75; }
.wp-block-post-content p { margin-block: 1.4em; }
.wp-block-post-content a {
	color: var(--smb-navy);
	text-decoration: underline;
	text-decoration-color: var(--smb-sky);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}
.wp-block-post-content a:hover { text-decoration-color: var(--smb-navy); }
.wp-block-post-featured-image img { border-radius: 10px; }
.smb-hero-image { max-width: 720px; margin-left: auto; margin-right: auto; }
.smb-hero-image img { border-radius: 12px; width: 100%; max-height: 460px; object-fit: cover; }

/* ---------- Callout / key-takeaways box (blue accent) ---------- */
.wp-block-post-content blockquote,
.wp-block-post-content .wp-block-quote,
.entry-content blockquote {
	background: #f2f8fd;
	border: 1px solid var(--smb-hairline);
	border-left: 5px solid var(--smb-sky);
	border-radius: 8px;
	padding: 1.35rem 1.6rem;
	margin: 2rem 0;
	font-style: normal;
	font-size: 1.08rem;
}
.wp-block-post-content blockquote p:first-child { margin-top: 0; }
.wp-block-post-content blockquote p:last-child { margin-bottom: 0; }
.wp-block-post-content blockquote cite { color: var(--smb-muted); }

/* ---------- Tables (brand-styled) ---------- */
.wp-block-post-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.98rem;
	line-height: 1.45;
	margin: 2rem 0;
}
.wp-block-post-content thead th,
.wp-block-table thead th {
	background: var(--smb-navy);
	color: #fff;
	text-align: left;
	font-weight: 700;
	padding: 0.85rem 1rem;
	border-bottom: 3px solid var(--smb-sky);
	vertical-align: top;
}
.wp-block-post-content td,
.wp-block-post-content th,
.wp-block-table td,
.wp-block-table th {
	padding: 0.8rem 1rem;
	border-bottom: 1px solid var(--smb-hairline);
	vertical-align: top;
}
.wp-block-post-content tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even) {
	background: #f5f7fb;
}

/* ---------- Coral-slot CTA, recolored to navy + sky ---------- */
.smb-cta {
	background: var(--smb-navy);
	color: #fff;
	border-radius: 10px;
	padding: 2.5rem 2rem;
}
.smb-cta .wp-block-button__link { background: var(--smb-sky); color: #fff; font-weight: 800; }
.smb-cta .wp-block-button__link:hover { background: #fff; color: var(--smb-navy); }

/* ---------- Footer ---------- */
.smb-site-footer { background: var(--smb-navy); color: #c3cce0; }
.smb-site-footer a { color: #fff; text-decoration: none; }
.smb-site-footer a:hover { color: var(--smb-sky); }

/* ---------- Focus states ---------- */
a:focus-visible, .wp-block-button__link:focus-visible {
	outline: 3px solid var(--smb-sky);
	outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.smb-hero-lead.wp-block-cover { min-height: 340px; }
	.smb-flash .wp-block-post-template li { max-width: 100%; }

	/* Story grid collapses to a single column on phones */
	.smb-story-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
	.smb-grid-card.wp-block-cover { min-height: 260px; }

	/* Wide tables scroll sideways instead of getting crushed */
	.wp-block-post-content table,
	.wp-block-table,
	.wp-block-table table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.wp-block-post-content thead th { white-space: nowrap; }
}