/* =============================================================
   TIM HORTONS BOLD — design tokens
   Exact palette requested: Red / Cream / White / Roast
   All custom properties are prefixed --thb- so they can never
   collide with the Tim Hortons Menu plugin's own :root variables
   (--red, --cream, --white, --black, etc. in th-menu.css).
   ============================================================= */

:root {
	--thb-red:        #C8102E;
	--thb-red-dark:   #9E0C24;  /* derived shade, for hover states */
	--thb-cream:      #FFF7EC;
	--thb-white:      #FFFFFF;
	--thb-roast:      #241511;
	--thb-roast-soft: #3A2620;  /* derived shade, footer sub-panels */
	--thb-muted:      #6b5d54;  /* derived, for secondary text only in THEME content, never plugin */

	--thb-font-display: 'Archivo Black', Impact, 'Arial Black', sans-serif;
	--thb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--thb-font-serif:   'Lora', Georgia, serif; /* blog post body copy */

	--thb-radius: 16px;
	--thb-shadow: 0 10px 28px rgba(36, 21, 17, 0.14);
	--thb-shadow-hover: 0 16px 38px rgba(36, 21, 17, 0.22);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* =============================================================
   BASE — everything scoped under body.thb-theme so this theme
   never leans on bare element selectors that could bleed into
   the plugin's .thm-wrapper markup.
   ============================================================= */

body.thb-theme {
	background: var(--thb-cream);
	color: var(--thb-roast);
	font-family: var(--thb-font-body);
}

body.thb-theme h1,
body.thb-theme h2,
body.thb-theme h3,
body.thb-theme .site-title {
	font-family: var(--thb-font-display);
	line-height: 1.15;
	color: var(--thb-roast);
}

body.thb-theme a {
	color: var(--thb-red);
	text-decoration-color: rgba(200, 16, 46, 0.35);
}

body.thb-theme a:hover {
	color: var(--thb-red-dark);
}

body.thb-theme :focus-visible {
	outline: 3px solid var(--thb-red-dark);
	outline-offset: 2px;
}

/* =============================================================
   ANNOUNCEMENT BAR
   ============================================================= */

.thb-announcement-bar {
	background: var(--thb-roast);
	color: var(--thb-cream);
	text-align: center;
	font-size: 13px;
	font-weight: 600;
}
.thb-announcement-bar p { margin: 0; padding: 8px 16px; }

/* =============================================================
   HEADER
   ============================================================= */

body.thb-theme .main-header-bar-wrap { position: sticky; top: 0; z-index: 999; }

body.thb-theme .main-header-bar {
	background: var(--thb-white);
	border-bottom: 5px solid var(--thb-red);
	box-shadow: 0 2px 14px rgba(36, 21, 17, 0.08);
}

body.thb-theme .site-title,
body.thb-theme .site-title a { color: var(--thb-red) !important; font-size: 26px; }

body.thb-theme .main-navigation ul li > a,
body.thb-theme .main-header-bar .menu-item > a {
	font-family: var(--thb-font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--thb-roast);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

body.thb-theme .main-navigation ul li > a:hover,
body.thb-theme .main-header-bar .current-menu-item > a { color: var(--thb-red); }

/* =============================================================
   BUTTONS
   ============================================================= */

body.thb-theme .ast-button,
body.thb-theme .button,
body.thb-theme input[type="submit"],
body.thb-theme #submit,
body.thb-theme .comment-form input[type="submit"],
body.thb-theme .wp-block-button__link,
body.thb-theme .wp-element-button,
body.thb-theme .thb-btn {
	font-family: var(--thb-font-body);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 14px;
	border-radius: 999px;
	padding: 14px 30px;
	border: none;
	background: var(--thb-red) !important;
	color: var(--thb-white) !important;
	box-shadow: 0 8px 20px rgba(200, 16, 46, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}

body.thb-theme .ast-button:hover,
body.thb-theme .button:hover,
body.thb-theme input[type="submit"]:hover,
body.thb-theme #submit:hover,
body.thb-theme .wp-block-button__link:hover,
body.thb-theme .thb-btn:hover {
	background: var(--thb-red-dark) !important;
	transform: translateY(-2px);
	color: var(--thb-white) !important;
}

/* =============================================================
   HOMEPAGE HERO (rendered from functions.php + Customizer values)
   ============================================================= */

.thb-hero {
	background: linear-gradient(135deg, var(--thb-red) 0%, var(--thb-red-dark) 100%);
	padding: 72px 24px 84px;
}

.thb-hero__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 40px;
	align-items: center;
}

.thb-eyebrow {
	display: inline-block;
	background: var(--thb-white);
	color: var(--thb-red);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 18px;
}

.thb-hero__title {
	font-family: var(--thb-font-display);
	color: var(--thb-white) !important;
	font-size: clamp(32px, 5vw, 54px);
	line-height: 1.05;
	margin: 0 0 16px;
}

.thb-hero__subtitle {
	color: rgba(255, 255, 255, 0.92);
	font-size: 18px;
	max-width: 46ch;
	margin: 0 0 28px;
}

.thb-hero__image img {
	width: 100%;
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.thb-hero .thb-btn { background: var(--thb-white); color: var(--thb-red) !important; }
.thb-hero .thb-btn:hover { background: var(--thb-cream); }

@media (max-width: 780px) {
	.thb-hero__inner { grid-template-columns: 1fr; }
}

/* Homepage featured-category wrapper - purely a layout frame; all visual
   styling of the cards inside stays the plugin's own .thm-* CSS untouched. */
.thb-homepage-featured {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 24px 24px;
}

/* =============================================================
   FOOTER
   ============================================================= */

body.thb-theme .site-above-footer-wrap,
body.thb-theme .site-primary-footer-wrap,
body.thb-theme .site-below-footer-wrap {
	background: var(--thb-white) !important;
}

body.thb-theme .site-footer {
	border-top: 5px solid var(--thb-red);
}

body.thb-theme .site-below-footer-wrap {
	border-top: 1px solid #F0E6D8;
}

/* Comfortable padding + typography for whatever's dropped into a footer
   widget (text widget, disclaimer, menu, etc.) instead of text sitting
   flush against the edges. */
body.thb-theme .footer-widget-area {
	padding: 44px clamp(20px, 5vw, 56px) !important;
}

body.thb-theme .footer-widget-area,
body.thb-theme .footer-widget-area p,
body.thb-theme .footer-widget-area li,
body.thb-theme .footer-widget-area .textwidget {
	color: var(--thb-roast) !important;
	font-size: 14.5px;
	line-height: 1.7;
}

body.thb-theme .footer-widget-area .widget-title,
body.thb-theme .footer-widget-area h1,
body.thb-theme .footer-widget-area h2,
body.thb-theme .footer-widget-area h3,
body.thb-theme .footer-widget-area h4 {
	color: var(--thb-roast) !important;
	font-family: var(--thb-font-display);
	font-size: 17px;
	letter-spacing: 0.3px;
	margin: 0 0 14px;
}

body.thb-theme .footer-widget-area a { color: var(--thb-red) !important; }
body.thb-theme .footer-widget-area a:hover { color: var(--thb-red-dark) !important; }

body.thb-theme .ast-small-footer,
body.thb-theme .ast-small-footer p,
body.thb-theme .ast-small-footer a {
	color: var(--thb-muted) !important;
	padding-top: 6px;
	padding-bottom: 6px;
}
body.thb-theme .ast-small-footer a:hover { color: var(--thb-red) !important; }

/* =============================================================
   IMAGES — rounded corners only (no shadow/tilt), applied sitewide
   to featured images and any image uploaded into post/page content.
   Explicitly excludes anything with a "thm-" class so the Tim Hortons
   Menu plugin's own product photos are never touched.
   ============================================================= */

img.wp-post-image,
body.thb-theme .post-thumb-img-content img,
body.thb-theme .entry-content img:not([class*="thm-"]),
body.thb-theme .wp-block-image img:not([class*="thm-"]),
body.thb-theme .page-content img:not([class*="thm-"]) {
	border-radius: var(--thb-radius) !important;
}

/* Belt-and-suspenders: clip via the wrapper too, in case Astra's own
   featured-image container CSS ever reintroduces square corners. */
body.thb-theme .post-thumb-img-content,
body.thb-theme .post-thumb {
	border-radius: var(--thb-radius);
	overflow: hidden;
}

/* =============================================================
   BLOG — single post redesign (via Astra hooks, no template override)
   ============================================================= */

/* Center the post column and strip Astra's own "boxed/separate container"
   shadow so we get ONE clean card instead of nested boxes. */
body.thb-theme.single-post #primary {
	float: none;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

body.thb-theme.single-post.ast-separate-container .ast-article-single,
body.thb-theme.single-post.ast-separate-container #comments {
	box-shadow: none;
	background: transparent;
	padding: 0;
}

/* Our own single card wraps title + meta + content + author box as one unit. */
body.thb-theme.single-post .ast-article-single {
	background: var(--thb-white);
	border-radius: var(--thb-radius);
	box-shadow: var(--thb-shadow);
	padding: 40px clamp(20px, 5vw, 56px) 44px;
	margin: 40px auto 24px;
}

body.thb-theme.single-post .entry-title {
	font-size: clamp(28px, 4vw, 44px);
	margin-bottom: 14px;
}

/* Fix default WP/Astra link-blue on post meta - ties it back to the palette. */
body.thb-theme .entry-meta,
body.thb-theme .entry-meta *:not(.thb-reading-time) {
	color: var(--thb-muted) !important;
	font-size: 14px;
	text-decoration: none;
}
body.thb-theme .entry-meta a:not(.thb-reading-time):hover {
	color: var(--thb-red) !important;
}

body.thb-theme.single-post .entry-content {
	font-family: var(--thb-font-serif);
	font-size: 18px;
	line-height: 1.75;
	color: var(--thb-roast);
	max-width: 100%;
	margin-top: 20px;
}

body.thb-theme.single-post .entry-content a { color: var(--thb-red); }
body.thb-theme.single-post .entry-content p { margin-bottom: 1.4em; }

body.thb-theme.single-post .entry-content h2,
body.thb-theme.single-post .entry-content h3 {
	font-family: var(--thb-font-display);
	margin-top: 1.6em;
}

body.thb-theme.single-post .entry-content blockquote {
	border-left: 5px solid var(--thb-red);
	background: var(--thb-cream);
	margin: 2em 0;
	padding: 18px 24px;
	font-style: italic;
	border-radius: 0 12px 12px 0;
}

.thb-reading-time {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 10px;
	background: rgba(200, 16, 46, 0.12);
	border: 1px solid rgba(200, 16, 46, 0.25);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: var(--thb-red);
	white-space: nowrap;
}

/* Author box now blends into the same card - a top divider, not a second box. */
.thb-author-box {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	border-top: 2px solid var(--thb-cream);
	padding-top: 28px;
	margin-top: 40px;
}

.thb-author-box__avatar img { border-radius: 50%; display: block; }
.thb-author-box__label {
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: var(--thb-muted);
}
.thb-author-box__name { margin: 2px 0 8px; font-size: 20px; }
.thb-author-box__bio { margin: 0; font-size: 14.5px; color: var(--thb-muted); line-height: 1.6; }

/* Comments get the same card treatment so it reads as one continuous page,
   not a second floating box. */
body.thb-theme.single-post #comments {
	background: var(--thb-white);
	border-radius: var(--thb-radius);
	box-shadow: var(--thb-shadow);
	padding: 32px clamp(20px, 5vw, 56px) 40px;
	max-width: 800px;
	margin: 0 auto 64px !important;
}

body.thb-theme.single-post .comments-title,
body.thb-theme.single-post .comment-reply-title {
	font-family: var(--thb-font-display);
	font-size: 22px;
}

body.thb-theme.single-post .comment-list a,
body.thb-theme.single-post #comments a { color: var(--thb-red); }

.thb-related-posts { background: var(--thb-white); padding: 56px 24px; margin-top: 8px; }
.thb-related-posts__inner { max-width: 1000px; margin: 0 auto; }
.thb-related-posts__title {
	text-align: center;
	margin-bottom: 32px;
	font-size: 26px;
}
.thb-related-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.thb-related-card {
	display: block;
	text-decoration: none;
	color: var(--thb-roast);
	border-radius: var(--thb-radius);
	overflow: hidden;
	background: var(--thb-cream);
	box-shadow: var(--thb-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.thb-related-card:hover { transform: translateY(-4px); box-shadow: var(--thb-shadow-hover); }
.thb-related-card__image img { width: 100%; height: 160px; object-fit: cover; display: block; }
.thb-related-card__title { font-size: 16px; margin: 14px 16px 18px; font-family: var(--thb-font-body); font-weight: 700; }

@media (max-width: 780px) {
	.thb-related-posts__grid { grid-template-columns: 1fr; }
	.thb-author-box { flex-direction: column; }
}

/* =============================================================
   ARCHIVE / CATEGORY PAGES
   ============================================================= */

body.thb-theme.archive #primary,
body.thb-theme.category #primary,
body.thb-theme.tag #primary,
body.thb-theme.blog #primary,
body.thb-theme.home #primary {
	float: none;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

/* The plain flat "Uncategorized" title bar becomes a proper card, matching
   the rest of the design instead of a stark unstyled rectangle. */
body.thb-theme .ast-archive-entry-banner {
	background: var(--thb-white);
	border-radius: var(--thb-radius);
	box-shadow: var(--thb-shadow);
	padding: 32px clamp(20px, 5vw, 44px);
	margin: 40px auto 32px;
}

body.thb-theme .ast-archive-entry-banner .ast-archive-title,
body.thb-theme .ast-archive-entry-banner .page-title {
	margin: 0;
	font-size: clamp(24px, 3vw, 32px);
}

/* Archive/blog listing cards (Astra's own boxed article style) get the same
   shadow/radius language as everything else, and full available width. */
body.thb-theme.archive .ast-article-post,
body.thb-theme.category .ast-article-post,
body.thb-theme.tag .ast-article-post,
body.thb-theme.blog .ast-article-post,
body.thb-theme.home .ast-article-post {
	border-radius: var(--thb-radius);
	box-shadow: var(--thb-shadow);
	margin-bottom: 28px;
	width: 100%;
}