/*
Theme Name: Caliber SC Resources
Theme URI: https://caliberfoodservice-resources.com
Author: tuttoFS, LLC
Description: Block theme for the Caliber resource site for Sysco Sales Consultants. Colors, fonts and layouts come from the approved "A" design.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 0.8.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: caliber-sc
*/

/* Small touches theme.json can't express. */

/* Start here tiles: the whole tile is clickable through its heading link. */
.caliber-tile { position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.caliber-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(28, 36, 51, 0.18); }
.caliber-tile a { color: inherit; text-decoration: none; }
.caliber-tile a::after { content: ""; position: absolute; inset: 0; }

/* Photo cards (product categories, videos). */
.caliber-card { overflow: hidden; position: relative; }
.caliber-card .wp-block-image { margin: 0; }
.caliber-card .wp-block-image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.caliber-card a { color: inherit; text-decoration: none; }
.caliber-card a::after { content: ""; position: absolute; inset: 0; }
.caliber-card:hover { box-shadow: 0 8px 20px rgba(28, 36, 51, 0.14); }

/* Welcome banner: the tagline drops below the text on phones. */
.caliber-banner .wp-block-image { margin: 0; }
@media (max-width: 781px) {
	.caliber-banner { flex-direction: column; align-items: flex-start !important; }
}

/* Keyboard focus stays visible everywhere. */
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid #EF3E43; outline-offset: 2px; }

/* Header, banner and footer sit flush against each other. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Colored page headers: just the title, centered. */
.caliber-band-title { position: relative; }
.caliber-band-title .wp-block-post-title,
.caliber-band-title h1 { margin: 0; text-align: center; }
.caliber-band-title--icon .caliber-band-icon { position: absolute; right: max(24px, calc((100% - 1200px) / 2 + 24px)); top: 50%; transform: translateY(-50%); margin: 0; }
@media (max-width: 781px) {
	.caliber-band-title--icon .caliber-band-icon { position: static; transform: none; display: flex; justify-content: center; margin-top: 16px; }
	.caliber-band-title--icon .caliber-band-icon img { height: 80px !important; }
}

/* Welcome banner: on phones the logo box sits under the text, a little smaller. */
@media (max-width: 781px) {
	.caliber-banner { gap: 20px; }
	.caliber-banner-logo img { height: 150px !important; }
	.caliber-wide-br { display: none; }
}

/* What's New article: a white header like the product line pages. */
.caliber-post-hero { align-items: center; }
.caliber-post-hero__text { flex: 1 1 420px; min-width: 0; }
.caliber-post-hero__title { margin: 0; font-weight: 800; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; }
.caliber-post-hero__photo { flex: 0 1 360px; max-width: 100%; }
.caliber-post-hero__photo img { border: 1px solid var(--wp--preset--color--silver-line, #ADB9CA); }
.caliber-post-hero .wp-block-post-terms a { text-decoration: none; }

/* Start here tiles: everything centered, with a badge image on What's New and Success. */
.caliber-tile { justify-content: center !important; align-items: center !important; text-align: center; gap: 12px; }
.caliber-tile h3, .caliber-tile .wp-block-heading { width: 100%; margin: 0; text-align: center; }
.caliber-tile:has(a[href*="whats-new"])::before,
.caliber-tile:has(a[href*="success-from-the-field"])::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	height: 56px;
	border-radius: 12px;
	border: 3px solid rgba(255, 255, 255, .9);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
	background: center / cover no-repeat;
}
.caliber-tile:has(a[href*="whats-new"])::before { aspect-ratio: 526 / 395; height: 62px; border: 0; border-radius: 0; box-shadow: none; background: center / contain no-repeat url("assets/images/tile-whats-new.svg"); }
.caliber-tile:has(a[href*="success-from-the-field"])::before { aspect-ratio: 4 / 3; height: 66px; border: 0; border-radius: 0; box-shadow: none; background: center / contain no-repeat url("assets/images/tile-success-oval.png"); }

/* Caliber Contacts and Catalog: white line icons in the same style as the megaphone. */
.caliber-tile:has(a[href*="/contacts"])::before,
.caliber-tile:has(a[href*="/catalog"])::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	height: 56px;
	aspect-ratio: 64 / 48;
	background: center / contain no-repeat;
}
.caliber-tile:has(a[href*="/contacts"])::before { background-image: url("assets/images/tile-contacts.svg"); }
.caliber-tile:has(a[href*="/catalog"])::before { background-image: url("assets/images/tile-catalog.svg"); }