/*
Theme Name: WPConcierge Redesign
Theme URI: https://wpconcierge.com
Author: WPConcierge
Author URI: https://wpconcierge.com
Description: Block theme implementing the 2026 WPConcierge homepage redesign — white-label WordPress hosting for agencies. Newsreader + Hanken Grotesk, navy/accent-blue on cream.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpconcierge-redesign
Tags: block-theme, full-site-editing, business, one-column, custom-colors, custom-logo
*/

/* ---------------------------------------------------------------------------
   WPConcierge Redesign — supplemental styles
   theme.json owns tokens, palette, typography, buttons.
   This file styles the design details blocks can't express on their own
   (shadows, pills, stat tiles, sticky header, gradients).
   --------------------------------------------------------------------------- */

:root {
	--wpc-shadow-btn: 0 10px 24px rgba(0, 144, 208, .3);
	--wpc-shadow-card: 0 24px 60px rgba(16, 64, 112, .18);
}

/* Centered inner wrapper used inside full-width bands */
.wpc-container { max-width: 1200px; margin-inline: auto; }

/* ---- Announcement bar -------------------------------------------------- */
.wpc-topbar {
	font-size: 13.5px;
	letter-spacing: .02em;
}
.wpc-topbar .wpc-topbar__label { opacity: .75; }

/* ---- Header / nav ------------------------------------------------------ */
.wpc-header { position: sticky; top: 0; z-index: 50; }
.wpc-header .wp-block-navigation {
	font-size: 15px;
	font-weight: 500;
}
.wpc-header .wp-block-navigation .wp-block-navigation-item__content { color: #3c4d5a; }
.wpc-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--navy); }
.wpc-header .wp-block-site-logo img { height: 44px; width: auto; }
.wpc-signin { font-size: 15px; font-weight: 600; color: var(--wp--preset--color--accent); }

/* ---- Buttons ----------------------------------------------------------- */
.wp-block-button__link { box-shadow: var(--wpc-shadow-btn); transition: transform .15s ease, box-shadow .15s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }
/* Compact button variant (nav) */
.wpc-btn-sm .wp-block-button__link {
	font-size: 14.5px;
	padding: 12px 20px;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(0, 144, 208, .28);
}
/* Ghost / text link button */
.is-style-wpc-text .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--navy) !important;
	box-shadow: none;
	padding: 16px 8px;
	border-radius: 0;
	border-bottom: 2px solid #bcd0e4;
}
.is-style-wpc-text .wp-block-button__link:hover { transform: none; border-bottom-color: var(--wp--preset--color--accent); }
/* White button on colored bands */
.is-style-wpc-white .wp-block-button__link {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--navy) !important;
	font-weight: 700;
}

/* ---- Eyebrow pill ------------------------------------------------------ */
.wpc-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--wp--preset--color--pill-bg);
	color: var(--wp--preset--color--accent);
	font-size: 12.5px; font-weight: 600;
	letter-spacing: .09em; text-transform: uppercase;
	padding: 7px 13px; border-radius: 999px; width: fit-content;
}
.wpc-eyebrow.is-on-navy { background: transparent; color: var(--wp--preset--color--light-blue); padding-inline: 0; letter-spacing: .1em; }
.wpc-label {
	font-size: 13px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--wp--preset--color--accent);
}
.wpc-label.is-on-navy { color: var(--wp--preset--color--light-blue); }

/* ---- Hero -------------------------------------------------------------- */
.wpc-hero h1 { line-height: 1.05; letter-spacing: -.015em; }
.wpc-hero-card {
	position: relative;
	background: var(--wp--preset--color--white);
	border-radius: 18px;
	box-shadow: var(--wpc-shadow-card);
	padding: 14px;
}
.wpc-hero-card::before {
	content: ""; position: absolute; inset: -18px -18px auto auto;
	width: 170px; height: 170px; border-radius: 50%; opacity: .8;
	background: radial-gradient(circle at 30% 30%, #bfe0f5, transparent 70%);
	pointer-events: none;
}
.wpc-hero-shot {
	display: block; width: 100%; aspect-ratio: 16 / 10;
	border-radius: 12px;
	background: linear-gradient(135deg, #e8f2fb, #d3e6f5);
	object-fit: cover;
}
.wpc-status {
	font-size: 12px; font-weight: 700; color: var(--wp--preset--color--accent);
	background: #e3f3fb; padding: 5px 10px; border-radius: 999px; width: fit-content;
}
.wpc-finelight { font-size: 14px; color: #7c8a96; }

/* ---- Cards (How it works / Services) ---------------------------------- */
.wpc-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--card-border);
	border-radius: 16px;
	padding: 32px 30px;
	height: 100%;
}
.wpc-card .wpc-num {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 22px; font-weight: 600; color: var(--wp--preset--color--accent);
}

/* ---- White-label band + stat tiles ------------------------------------ */
.wpc-band { color: var(--wp--preset--color--white); }
.wpc-band :where(h1, h2, h3) { color: var(--wp--preset--color--white); }
.wpc-stat {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px; padding: 24px;
}
.wpc-stat .wpc-stat__num {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 30px; color: var(--wp--preset--color--light-blue); line-height: 1.1;
}
.wpc-stat .wpc-stat__label { font-size: 14px; color: #bcd0de; margin-top: 6px; }

/* ---- Gradient promo card (Services page) ------------------------------ */
.wpc-gradient {
	background: var(--wp--preset--gradient--accent-band);
	border-radius: 20px; color: var(--wp--preset--color--white); padding: 48px 52px;
}
.wpc-gradient :where(h1, h2, h3) { color: var(--wp--preset--color--white); }

/* ---- Footer ------------------------------------------------------------ */
.wpc-footer { background: var(--wp--preset--color--footer); color: #9fb6c6; }
.wpc-footer a { color: #9fb6c6; }
.wpc-footer a:hover { color: #fff; }
.wpc-footer .wpc-brandmark {
	width: 32px; height: 32px; border-radius: 8px;
	background: var(--wp--preset--color--accent); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 13px;
}
.wpc-footer .wpc-wordmark {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 18px; color: #fff;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 781px) {
	.wpc-header { position: static; }
	.wpc-hero-card::before { display: none; }
}