/*
Theme Name: Daisy Homecare
Theme URI: https://daisycare.co.uk
Author: Daisy Homecare
Author URI: https://daisycare.co.uk
Description: Custom Gutenberg / Full Site Editing block theme for Daisy Homecare — live-in and domiciliary care services in Portsmouth.
Version: 0.5.0
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: daisy-homecare
*/

/* Self-hosted brand fonts (Raleway + Poppins).
   Replaces the Google Fonts CDN — better performance, and avoids sending
   visitor IPs to Google on a trust-sensitive site that already handles
   consent carefully via Cookiebot. */
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/raleway-600.ttf') format('truetype');
}
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/raleway-700.ttf') format('truetype');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/poppins-400.ttf') format('truetype');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/poppins-500.ttf') format('truetype');
}

/* Navigation hover state — accent colour on hover, since block-level hover
   colour isn't exposed as a theme.json/inserter setting for this block. */
.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent) !important;
}

/* Service card styling — used on "Browse Care by Need" grids so the cards
   read as distinct, clickable tiles rather than flat text blocks. */
.service-card {
	border-top: 4px solid var(--wp--preset--color--accent);
	box-shadow: 0 2px 10px rgba(0, 40, 80, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 40, 80, 0.14);
}
.service-card a {
	font-weight: 600;
}

/* Every section wraps its content in an alignwide group with no side
   padding of its own — fine on large screens where the 1140px width cap
   keeps it away from the edge, but on any narrower screen (tablet and
   below) alignwide fills 100% width and text runs edge-to-edge. This
   gives every section a consistent gutter below that breakpoint. */
.wp-block-group.alignwide {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	box-sizing: border-box;
}

/* Homepage hero illustration — original SVG artwork (hills, sun, scattered
   daisies) sitting behind the hero text, replacing the plain flat navy
   background. Hidden below tablet width so it never competes with or
   crowds the heading/buttons on small screens. */
.hero-section {
	position: relative;
	overflow: hidden;
}
.hero-illustration {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(42%, 560px);
	pointer-events: none;
	z-index: 0;
}
.hero-illustration img {
	display: block;
	width: 100%;
	height: auto;
}
.hero-section > .wp-block-group.alignwide {
	position: relative;
	z-index: 1;
}
@media (max-width: 820px) {
	.hero-illustration {
		display: none;
	}
}

/* Small daisy mark used as a decorative accent above section headings and
   in the service page eyebrow — same illustration family as the hero. */
.daisy-mark {
	display: block;
	width: 34px;
	height: 34px;
	margin-bottom: 0.5rem;
}
.daisy-mark--center {
	margin-left: auto;
	margin-right: auto;
}

/* FAQ accordions — core Details block, styled to read as an intentional
   toggle list rather than default browser <details> markup: brand-coloured
   marker, generous click target, divider between items, hover feedback. */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--soft-grey);
	padding: 1rem 0;
}
.wp-block-details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--soft-grey);
}
.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--wp--preset--color--navy);
	padding: 0.25rem 2rem 0.25rem 1.75rem;
	position: relative;
	transition: color 0.15s ease;
}
.wp-block-details summary::-webkit-details-marker {
	display: none;
}
.wp-block-details summary::before {
	content: "+";
	position: absolute;
	left: 0;
	top: 0.25rem;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	transition: transform 0.15s ease;
}
.wp-block-details[open] summary::before {
	content: "+";
	transform: rotate(45deg);
}
.wp-block-details summary:hover {
	color: var(--wp--preset--color--primary);
}
.wp-block-details p {
	margin: 0.75rem 0 0.25rem 1.75rem;
	color: var(--wp--preset--color--contrast);
}

/* Companionship photo cover — a fixed min-height on a full-bleed (100vw)
   cover means the box gets proportionally WIDER relative to its height as
   the viewport widens, forcing object-fit:cover to zoom in further and
   further to fill it. On a large monitor that crops away the top half of
   the photo entirely. Stepping the height up at wider breakpoints keeps
   the crop close to the photo's native ~3:2 ratio at every size. Mobile is
   left as-is (440px) since that framing already reads fine — the photo is
   only ever cropped at the sides there, not through people's heads. */
.companionship-cover {
	min-height: 440px;
}
@media (min-width: 700px) {
	.companionship-cover {
		min-height: 520px;
	}
}
@media (min-width: 1000px) {
	.companionship-cover {
		min-height: 620px;
	}
}
@media (min-width: 1400px) {
	.companionship-cover {
		min-height: 720px;
	}
}