/*
Theme Name: Oakley Packaging
Author: PRDev
Description: A tailored block theme for the Oakley Packaging website.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oakley-packaging
*/

:root {
	--oakley-radius-sm: var(--wp--custom--radius--sm);
	--oakley-radius-md: var(--wp--custom--radius--md);
	--oakley-radius-lg: var(--wp--custom--radius--lg);
	--oakley-radius-xl: var(--wp--custom--radius--xl);
	--oakley-radius-feature: var(--wp--custom--radius--feature);
	--oakley-shadow-card: var(--wp--preset--shadow--card);
	--oakley-shadow-feature: var(--wp--preset--shadow--feature);
	--oakley-section-space: var(--wp--custom--section-space);
	--oakley-content-gutter: var(--wp--custom--content-gutter);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
}

img,
svg,
video {
	display: block;
	height: auto;
	max-width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 0.1875rem solid var(--wp--preset--color--blue-600);
	outline-offset: 0.1875rem;
}

::selection {
	background: var(--wp--preset--color--blue-100);
	color: var(--wp--preset--color--ink);
}

.wp-site-blocks {
	min-height: 100vh;
}

.wp-site-blocks > footer {
	margin-block-start: 0;
}

:where(.wp-site-blocks) > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

.hero {
    min-height: 760px;
    display: flex;
    align-items: center;
    
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 78% 18%, rgba(60, 133, 178, .48), transparent 33%), linear-gradient(125deg, #071722 0%, #0B2F4B 52%, #123E5B 100%);
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 75%, transparent);
}

.hero:after {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    right: -120px;
    top: 175px;
    box-shadow: 0 0 0 85px rgba(255, 255, 255, .025), 0 0 0 170px rgba(255, 255, 255, .018);
}