/*
Theme Name:        Bloqra
Theme URI:         https://beautifulplugins.com/themes/bloqra/
Description:       Bloqra is a modern, professional WordPress block theme. It ships with a polished, fully designed homepage, blog, about and contact layouts, plus WooCommerce support — all driven by theme.json so it looks great the moment you activate it. Built for the Site Editor (FSE) with a clean, accessible design, a vibrant violet palette and four style variations.
Author:            BeautifulPlugins
Author URI:        https://beautifulplugins.com/
Version:           1.0.2
Requires at least: 6.7
Tested up to:      7.0
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       bloqra
Tags:              blog, e-commerce, portfolio, full-site-editing, block-patterns, block-styles, style-variations, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, wide-blocks, sticky-post, rtl-language-support
*/

/*
 * Most of Bloqra's styling lives in theme.json. The rules below are limited to
 * progressive enhancements that theme.json cannot express (smooth interactions,
 * accessibility refinements and a few layout details). Named block styles are
 * registered in PHP.
 */

:root {
	--bloqra-transition: 0.18s ease;
}

/* Smooth scrolling for in-page links, only when the visitor allows motion. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.1em;
}

/* Smooth, consistent interaction feedback. */
a,
.wp-element-button,
.wp-block-button__link,
.wp-block-navigation-item__content,
.wp-block-social-link {
	transition: color var(--bloqra-transition), background-color var(--bloqra-transition),
		border-color var(--bloqra-transition), box-shadow var(--bloqra-transition),
		transform var(--bloqra-transition);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Outline button variant inherits the primary color from currentColor. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary-600);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-600);
	color: var(--wp--preset--color--white);
}

/* Cards lift slightly on hover for a tactile feel. */
.is-style-card {
	transition: box-shadow var(--bloqra-transition), transform var(--bloqra-transition);
}

.is-style-card:hover {
	transform: translateY(-2px);
}

/* Keep featured images tidy when they sit inside cards. */
.is-style-card .wp-block-post-featured-image img,
.is-style-card img {
	display: block;
}

/*
 * Templates control their own spacing via padding. Remove the root block gap
 * (:root :where(.wp-site-blocks) > *, generated from styles.spacing.blockGap
 * in theme.json) between the header, content and footer template parts, so
 * full-width sections sit flush against the header and footer. The classes are
 * doubled to reach specificity (0,2,0): the core rule is (0,1,0), and the two
 * stylesheets load in a different order on the front end and in the editor,
 * so equal specificity is not enough to win in both.
 */
.site-header.site-header,
.site-content.site-content,
.site-footer.site-footer {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * Sticky header. Filters, backdrop-filters and transforms must never be
 * applied to this element (or any ancestor of the navigation block): they
 * create a CSS containing block, which traps the mobile menu overlay —
 * positioned with `position: fixed` — inside the header bar instead of
 * letting it cover the viewport.
 */
.bloqra-sticky-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 1px 0 var(--wp--preset--color--neutral-200);
}

/* Comfortable tap targets inside the open mobile menu overlay. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Accessible focus outline for keyboard users. */
:where(a, button, input, textarea, select, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-500);
	outline-offset: 2px;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
 */
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/*
 * Back-to-top button. A floating shortcut revealed by JavaScript once the
 * visitor scrolls; without JavaScript it stays hidden.
 */
.bloqra-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background-color: var(--wp--preset--color--primary-500);
	color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--medium);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--bloqra-transition), transform var(--bloqra-transition),
		visibility var(--bloqra-transition), background-color var(--bloqra-transition);
}

.bloqra-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bloqra-back-to-top:hover,
.bloqra-back-to-top:focus-visible {
	background-color: var(--wp--preset--color--primary-600);
}

.bloqra-back-to-top svg {
	fill: currentColor;
}

.rtl .bloqra-back-to-top {
	right: auto;
	left: 24px;
}

@media print {
	.bloqra-back-to-top {
		display: none;
	}
}

/* Respect visitors who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	a,
	.wp-element-button,
	.wp-block-button__link,
	.wp-block-navigation-item__content,
	.wp-block-social-link,
	.is-style-card,
	.bloqra-back-to-top {
		transition: none;
	}

	.wp-block-button__link:hover,
	.is-style-card:hover {
		transform: none;
	}
}