/*
Theme Name: Flat Roofing Solutions
Theme URI: https://www.flatroofingsolutions.co.uk/
Author: Flat Roofing Solutions
Description: A wide, editorial block theme for domestic and commercial flat roofing contractors. Full-bleed hero, hi-vis accents, a 9-post journal grid on the home page and a full library of reusable patterns. Fully editable in Appearance > Editor (Edit Site).
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.7
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: frs
Tags: business, blog, block-patterns, full-site-editing, wide-blocks, custom-logo, custom-menu, featured-images, one-column
*/

/* Most colour, spacing and typography lives in theme.json so it is editable
   in the Site Editor. This file only carries structural details blocks cannot
   express on their own. */

:root {
	--frs-ink: #10151b;
	--frs-steel: #47586a;
	--frs-line: #d8dee4;
	--frs-hivis: #ff8a00;
	--frs-hivis-deep: #d96f00;
}

img { max-width: 100%; height: auto; }

.frs-eyebrow { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.frs-eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--frs-hivis); flex: none; }

/* Header */
.frs-site-header { position: sticky; top: 0; z-index: 40; }
.frs-topbar a { color: var(--frs-hivis); text-decoration: none; }
.frs-brand__tag { line-height: 1.2; }
.frs-site-header .wp-block-navigation a:where(:not(.wp-element-button)) {
	text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.frs-site-header .wp-block-navigation a:where(:not(.wp-element-button)):hover,
.frs-site-header .wp-block-navigation .current-menu-item > a { border-bottom-color: var(--frs-hivis); }
.frs-site-header .wp-block-site-title a { text-decoration: none; }

/* Hero + stats band */
.frs-hero h1 { text-wrap: balance; max-width: 20ch; }
.frs-hero .frs-lede { max-width: 56ch; }
.frs-stats .wp-block-columns { border-top: 1px solid rgba(255, 255, 255, .14); flex-wrap: wrap !important; }
.frs-stats .frs-stat { padding: 1.6rem clamp(1rem, 2vw, 2rem); border-right: 1px solid rgba(255, 255, 255, .14); }
.frs-stats .frs-stat:last-child { border-right: 0; }
.frs-stat__n { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.1; color: var(--frs-hivis); }
.frs-stat__l { margin: .2rem 0 0; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: #9fadb9; }

/* Service panels */
.frs-panel h3 { text-wrap: balance; }
.frs-panel .wp-block-cover__image-background { transition: transform .8s ease; }
.frs-panel:hover .wp-block-cover__image-background { transform: scale(1.05); }

/* Post cards */
.frs-card { overflow: hidden; border-radius: 2px; transition: border-color .2s ease, transform .2s ease; height: 100%; }
.frs-card:hover { border-color: var(--frs-ink) !important; transform: translateY(-3px); }
.frs-card .wp-block-post-featured-image { margin: 0; }
.frs-card .wp-block-post-featured-image img { width: 100%; object-fit: cover; }
.frs-card .wp-block-post-title { letter-spacing: -.02em; }
.frs-card .wp-block-post-title a { text-decoration: none; }
.frs-card .wp-block-post-excerpt__more-link { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--frs-hivis-deep); }

/* Content area typography */
.frs-content-area .wp-block-post-content > * + * { margin-top: 1.35em; }
.frs-content-area blockquote { padding-left: 1.6rem; border-left: 4px solid var(--frs-hivis); font-size: 1.2rem; font-weight: 600; }

/* Forms + pagination */
input[type=text], input[type=email], input[type=url], input[type=search], textarea {
	padding: .85rem 1rem; border: 1px solid var(--frs-line); font: inherit; border-radius: 2px; background: #fff;
}
.wp-block-query-pagination .page-numbers, .wp-block-query-pagination a { padding: .6rem 1rem; border: 1px solid var(--frs-line); text-decoration: none; font-weight: 700; }
.wp-block-query-pagination .current { background: var(--frs-ink); color: #fff; border-color: var(--frs-ink); }

/* Footer */
.frs-site-footer a { text-decoration: none; }
.frs-site-footer a:hover { color: var(--frs-hivis); }
.frs-site-footer ul { list-style: none; padding-left: 0; }
.frs-site-footer li { margin-bottom: .5rem; }
.frs-cta-band h2 { text-wrap: balance; }

@media (max-width: 860px) {
	.frs-site-header { position: static; }
	.frs-stats .frs-stat { border-right: 0; }
}