/*
Theme Name: AgencyPress
Author: Hiral Solanki
Author URI: https://profiles.wordpress.org/hiral26/
Description: A modern, minimal agency and business block theme with Full Site Editing support. Designed for agencies, studios, and creative businesses, it ships with a dark design, self-hosted Inter and Space Grotesk fonts, and ready-made patterns for hero, services, pricing, FAQ, testimonials, contact, and blog sections.
Version: 1.0.0
Requires at least: 6.8
Tested up to: 7.1
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: agencypress
Tags: full-site-editing, block-patterns, wide-blocks, custom-colors, editor-style, translation-ready, portfolio

AgencyPress WordPress Theme, (C) 2026 Hiral Solanki.
AgencyPress is distributed under the terms of the GNU GPL.
*/

/**
 * Colors, typography and spacing presets live in theme.json. This file
 * only holds styles that theme.json cannot express.
 */

html {
	scroll-behavior: smooth;
	overflow-y: scroll; /* Prevent layout shift. */
}

body {
	background-image:
		linear-gradient(90deg, #4f4f4f2e 1px, transparent 1px),
		linear-gradient(#4f4f4f2e 1px, transparent 1px),
		radial-gradient(circle at 50% 0%, #ffffff0d 0%, transparent 70%);
	background-size: 14px 24px, 14px 24px, 100% 100%;
	background-repeat: repeat, repeat, no-repeat;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/**
 * Focus states for accessibility
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}


a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--primary);
}

:root :where(a:where(:not(.wp-element-button)):hover) {
    color: var(--wp--preset--color--secondary);
}

/**
 * Footer — muted link columns
 */
.site-footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--gray-dark);
}

.site-footer a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--white);
}

/**
 * Responsive section headings — every section title is an h2 with its
 * font-size hardcoded inline per-pattern (3rem, 2.5rem, etc.), and block
 * attributes have no per-device value, so the mobile size is forced here
 * with !important to beat the inline style at this breakpoint.
 */
@media (max-width: 599px) {
	h2.wp-block-heading {
		font-size: 2rem !important;
	}
}

/**
 * Site header — floating rounded pill bar
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header-bar {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/**
 * Keep the logo and CTA at their natural size and never let their text
 * wrap — only the middle nav item is allowed to collapse (into its own
 * hamburger toggle) when the row runs out of room.
 */
.site-header-bar > * {
	flex-shrink: 0;
	min-width: 0;
}

.site-header-bar .wp-block-site-title,
.site-header-bar .wp-block-site-title a,
.wp-block-button.is-style-header-cta .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 599px) {
	.site-header-bar {
		gap: 0.75rem !important;
		padding-left: 1rem !important;
		padding-right: 0.5rem !important;
	}

	.site-header-bar .wp-block-site-title {
		font-size: 1rem !important;
	}

	.site-header-bar .wp-block-button.is-style-header-cta {
		display: none;
	}
}

/**
 * Any Button block placed inside the nav menu only makes sense inside the
 * mobile dropdown — hide it in the desktop horizontal row at all times,
 * then reveal it full-width inside the open mobile dropdown below.
 */
.wp-block-navigation .wp-block-buttons {
	display: none;
}

/**
 * Mobile nav — rounded dropdown card instead of WP's default full-screen overlay
 */
@media (max-width: 599px) {
	/*
	 * The nav's desktop `justifyContent: right` setting (header.html) puts
	 * `items-justified-right` on <nav>, which sets the custom property
	 * --navigation-layout-justification-setting: flex-end. Core's stylesheet
	 * reads that var for align-items on the mobile panel's content wrapper,
	 * list, and items — and because custom properties inherit down the DOM
	 * regardless of position:fixed, the desktop "right" setting leaks into
	 * the mobile dropdown and shoves every nav item into the bottom-right
	 * corner. Overriding the variable itself (rather than fighting each
	 * core selector individually) fixes every consumer of it at once.
	 */
	.wp-block-navigation {
		--navigation-layout-justification-setting: flex-start !important;
		--navigation-layout-justify: flex-start !important;
		--navigation-layout-align: flex-start !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		top: 5.5rem !important;
		left: 1rem !important;
		right: 1rem !important;
		bottom: auto !important;
		inset-inline: 1rem !important;
		width: auto !important;
		height: auto !important;
		max-height: calc(100vh - 7rem) !important;
		overflow-y: auto;
		z-index: 100000;
		background-color: #0a0a0a !important;
		color: #ffffff !important;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 1.5rem;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
		padding: 1.5rem !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 0 !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 1.75rem !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		width: 100% !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		justify-content: flex-start !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 1.05rem;
		font-weight: 600;
		text-align: left;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
		display: flex;
		width: 100%;
		margin-top: 2rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-button {
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link {
		width: 100%;
		justify-content: center;
		border-radius: 9999px;
	}
}

.site-header-bar .wp-block-navigation-item a {
	opacity: 0.6;
}

.site-header-bar .wp-block-navigation-item a:hover {
	opacity: 1;
    text-decoration: underline;
}

.wp-block-button.is-style-header-cta .wp-block-button__link {
	border-radius: 999px;
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	font-weight: 600;
}

.wp-block-button.is-style-header-cta .wp-block-button__link:hover {
	opacity: 0.6;
}

/**
 * Dim all buttons on hover.
 */
.wp-block-button__link:hover {
	opacity: 0.6;
}

.wp-block-navigation .wp-block-page-list, .wp-block-navigation__container, .wp-block-navigation__responsive-close, .wp-block-navigation__responsive-container, .wp-block-navigation__responsive-container-content, .wp-block-navigation__responsive-dialog {
    gap: 20px;
}

/**
 * Services grid — the block editor's "Columns" setting on a grid layout
 * is a single global attribute (no per-device controls), so the column
 * count for tablet/mobile is forced here instead. Desktop keeps whatever
 * columnCount is set on the block in the editor.
 */
@media (max-width: 781px) {
	.services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 599px) {
	.services-grid {
		grid-template-columns: 1fr !important;
	}
}

/**
 * Testimonials grid — same per-device column override as .services-grid.
 */
@media (max-width: 599px) {
	.testimonials-grid {
		grid-template-columns: 1fr !important;
	}
}

/**
 * Blog grid (Query Loop post-template) — same per-device column override.
 */
@media (max-width: 781px) {
	.blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 599px) {
	.blog-grid {
		grid-template-columns: 1fr !important;
	}
}

/**
 * FAQ accordion (core/details block)
 */
.faq-accordion {
	width: 100%;
}

.wp-block-details {
	width: 100%;
	list-style: none;
	background-color: transparent;
}

.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--wp--preset--color--white);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
	transform: rotate(-135deg);
}

/**
 * Print styles
 */
@media print {
	body {
		background: white;
		color: black;
	}

	a,
	a:visited {
		color: black;
		text-decoration: underline;
	}
}