/*
Theme Name: Glassmorphic
Theme URI: https://thehubzone.co.za/
Author: The Hub Zone
Author URI: https://thehubzone.co.za/
Description: A glassmorphic block theme. Frosted panels, squircle corners and a reactive hexagon background that responds to mouse, touch and scroll. Ships with no fixed home page and no branding - just the style, so you build every page yourself in the Site Editor. Full Site Editing enabled.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
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: glassmorphic
Tags: full-site-editing, block-patterns, dark, one-column, two-columns, custom-colors, custom-menu, editor-style, featured-images, wide-blocks, block-styles
*/

/* ═══════════════════════════════════════════════════════════════════
   ★★★  EDIT COLOURS AND SHAPES HERE  ★★★

   Colours, fonts and spacing also live in theme.json, which is what
   feeds the Site Editor's own colour pickers. The variables below
   control the parts theme.json cannot express - the frosted glass
   and the hexagon field.

   Change a value here and it updates everywhere at once.
   ═══════════════════════════════════════════════════════════════════ */
:root{
	/* ---- Glass material ---- */
	--hgx-mat:      rgba(255,255,255,.035);  /* panel fill - raise for more solid cards */
	--hgx-mat-hi:   rgba(255,255,255,.072);  /* fill on hover                          */
	--hgx-brd:      rgba(255,255,255,.11);
	--hgx-brd-hi:   rgba(91,91,255,.42);
	--hgx-blur:     blur(20px) saturate(175%);

	--hgx-shadow:    0 16px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10);
	--hgx-shadow-hi: 0 26px 66px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);

	/* ---- Corners. Three values, used everywhere. ---- */
	--hgx-r-sm: 16px;
	--hgx-r-md: 26px;
	--hgx-r-lg: 38px;

	/* ---- Motion ---- */
	--hgx-ease: cubic-bezier(.32,.72,0,1);
	--hgx-dur:  .44s;

	/* ---- Hexagon background ----
	   Size in px, opacity 0-1. Set --hgx-hex-alpha to 0 to hide the
	   lattice without touching the JavaScript. */
	--hgx-hex-size:  30;
	--hgx-hex-alpha: .16;

	/* ---- Background blooms ---- */
	--hgx-bloom-1: rgba(91,91,255,.24);
	--hgx-bloom-2: rgba(255,51,80,.13);
	--hgx-bloom-3: rgba(37,208,126,.10);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; -webkit-font-smoothing:antialiased; }

/* ═══════════════════════════════════════════════════════════════════
   BACKGROUND LAYERS
   Three fixed layers behind everything: colour blooms, the hexagon
   canvas, then a vignette. The canvas is injected by assets/js/theme.js.
   ═══════════════════════════════════════════════════════════════════ */
body::before{
	content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
	background:
		radial-gradient(820px 620px at 12% 0%,   var(--hgx-bloom-1), transparent 62%),
		radial-gradient(720px 560px at 90% 8%,   var(--hgx-bloom-2), transparent 62%),
		radial-gradient(900px 700px at 50% 100%, var(--hgx-bloom-3), transparent 62%);
}
#hgx-hex{ position:fixed; inset:0; z-index:-2; width:100%; height:100%; display:block; pointer-events:none; }
body::after{
	content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
	background:radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(6,10,22,.72) 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   THE GLASS MATERIAL

   Applied automatically to any block given the "Glass panel" style
   from the block sidebar, and to the utility class .hgx-mat.
   ═══════════════════════════════════════════════════════════════════ */
.hgx-mat,
.is-style-hgx-glass{
	position:relative;
	background:var(--hgx-mat) !important;
	border:1px solid var(--hgx-brd);
	-webkit-backdrop-filter:var(--hgx-blur); backdrop-filter:var(--hgx-blur);
	box-shadow:var(--hgx-shadow);
	border-radius:var(--hgx-r-md);
	overflow:hidden;
	transition:transform var(--hgx-dur) var(--hgx-ease),
	           box-shadow var(--hgx-dur) var(--hgx-ease),
	           border-color var(--hgx-dur) var(--hgx-ease),
	           background-color var(--hgx-dur) var(--hgx-ease);
}
.hgx-mat.r-sm,.is-style-hgx-glass.r-sm{ border-radius:var(--hgx-r-sm); }
.hgx-mat.r-lg,.is-style-hgx-glass.r-lg{ border-radius:var(--hgx-r-lg); }

/* Squircle corners where supported */
@supports (corner-shape: superellipse(4)){
	.hgx-mat, .is-style-hgx-glass{ corner-shape:superellipse(4); }
}

/* Top-edge sheen. This single line is what separates glass from a
   plain grey box - do not delete it. */
.hgx-mat::before,
.is-style-hgx-glass::before{
	content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none; z-index:1;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.34) 22%,rgba(255,255,255,.34) 78%,transparent);
}

/* Specular highlight following pointer or finger */
.hgx-mat::after,
.is-style-hgx-glass::after{
	content:""; position:absolute; inset:0; pointer-events:none; opacity:0; z-index:0;
	transition:opacity var(--hgx-dur) var(--hgx-ease);
	background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.13), transparent 62%);
}
.hgx-mat:hover::after, .hgx-mat.is-press::after,
.is-style-hgx-glass:hover::after, .is-style-hgx-glass.is-press::after{ opacity:1; }

/* Hover gated to real pointers, so phones never inherit a stuck state */
@media (hover:hover) and (pointer:fine){
	.hgx-lift:hover{
		transform:translateY(-6px);
		border-color:var(--hgx-brd-hi);
		box-shadow:var(--hgx-shadow-hi);
		background:var(--hgx-mat-hi) !important;
	}
}
/* ...and every hover gets a touch twin */
.hgx-lift.is-press{
	transform:scale(.975);
	border-color:var(--hgx-brd-hi);
	background:var(--hgx-mat-hi) !important;
	transition-duration:.13s;
}

/* Opt a block out of the glass: add  hgx-plain  in
   Advanced > Additional CSS class(es). */
.hgx-plain{
	background:none !important; border:0 !important; box-shadow:none !important;
	backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.hgx-plain::before,.hgx-plain::after{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════
   CORE BLOCKS
   Everything you build in the Site Editor picks up the look.
   ═══════════════════════════════════════════════════════════════════ */
.wp-block-button__link{
	border-radius:999px; padding:13px 26px; font-weight:700;
	transition:transform .26s var(--hgx-ease), box-shadow .26s var(--hgx-ease), background-color .26s var(--hgx-ease);
	box-shadow:0 8px 24px rgba(91,91,255,.34), inset 0 1px 0 rgba(255,255,255,.34);
}
@media (hover:hover){
	.wp-block-button__link:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(91,91,255,.48), inset 0 1px 0 rgba(255,255,255,.42); }
}
.wp-block-button__link.is-press{ transform:scale(.955); transition-duration:.12s; }

.wp-block-button.is-style-outline .wp-block-button__link{
	background:rgba(255,255,255,.05) !important;
	border:1px solid var(--hgx-brd);
	-webkit-backdrop-filter:var(--hgx-blur); backdrop-filter:var(--hgx-blur);
	box-shadow:none;
}
@media (hover:hover){
	.wp-block-button.is-style-outline .wp-block-button__link:hover{
		background:rgba(255,255,255,.09) !important; border-color:var(--hgx-brd-hi);
	}
}

.wp-block-image img,
.wp-block-cover,
.wp-block-post-featured-image img,
.wp-block-video video,
.wp-block-embed iframe{ border-radius:var(--hgx-r-md); }

.wp-block-separator{ border-color:var(--hgx-brd); opacity:1; }

.wp-block-quote,
.wp-block-pullquote{
	border-left:3px solid var(--wp--preset--color--accent, #5B5BFF);
	padding:18px 26px; background:rgba(255,255,255,.04);
	border-radius:0 var(--hgx-r-sm) var(--hgx-r-sm) 0;
}

.wp-block-table table{ border-collapse:collapse; width:100%; }
.wp-block-table th,.wp-block-table td{
	padding:12px 16px; border-bottom:1px solid var(--hgx-brd); text-align:left;
}

.wp-block-code,.wp-block-preformatted{
	background:rgba(0,0,0,.35); border:1px solid var(--hgx-brd);
	border-radius:var(--hgx-r-sm); padding:18px 20px; overflow:auto;
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */
.wp-block-navigation .wp-block-navigation-item__content{
	padding:9px 15px; border-radius:999px; text-decoration:none;
	transition:color .22s var(--hgx-ease), background-color .22s var(--hgx-ease), transform .22s var(--hgx-ease);
}
@media (hover:hover){
	.wp-block-navigation .wp-block-navigation-item__content:hover{
		background:rgba(91,91,255,.14); color:var(--wp--preset--color--foreground,#EAF0FA);
	}
}
.wp-block-navigation .wp-block-navigation-item__content.is-press{
	background:rgba(91,91,255,.14); transform:scale(.95);
}
.wp-block-navigation .wp-block-navigation__submenu-container{
	background:rgba(10,17,36,.88) !important;
	border:1px solid var(--hgx-brd) !important;
	border-radius:var(--hgx-r-sm);
	-webkit-backdrop-filter:var(--hgx-blur); backdrop-filter:var(--hgx-blur);
	box-shadow:var(--hgx-shadow); padding:8px;
}
.wp-block-navigation__responsive-container.is-menu-open{
	background:rgba(6,10,22,.96) !important;
	-webkit-backdrop-filter:var(--hgx-blur); backdrop-filter:var(--hgx-blur);
}

/* Sticky header bar */
.hgx-bar{
	position:sticky; top:0; z-index:60;
	border-radius:999px;
	background:rgba(255,255,255,.03);
	border:1px solid var(--hgx-brd);
	-webkit-backdrop-filter:var(--hgx-blur); backdrop-filter:var(--hgx-blur);
	transition:background-color .4s var(--hgx-ease), box-shadow .4s var(--hgx-ease);
}
.hgx-bar.is-stuck{ background:rgba(10,17,36,.60); box-shadow:var(--hgx-shadow); }

/* ═══════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════ */
input[type=text],input[type=email],input[type=url],input[type=password],
input[type=search],input[type=tel],input[type=number],textarea,select,
.wp-block-search__input{
	width:100%; padding:13px 16px; border-radius:var(--hgx-r-sm);
	background:rgba(0,0,0,.30); border:1px solid var(--hgx-brd);
	color:var(--wp--preset--color--foreground,#EAF0FA);
	font-family:inherit; font-size:.95rem;
	transition:border-color .3s var(--hgx-ease), box-shadow .3s var(--hgx-ease);
}
input:focus,textarea:focus,select:focus,.wp-block-search__input:focus{
	outline:none; border-color:var(--hgx-brd-hi); box-shadow:0 0 0 4px rgba(91,91,255,.14);
}
.wp-block-search__button{
	border-radius:999px !important; border:0; padding:13px 24px; font-weight:700; cursor:pointer;
	background:var(--wp--preset--color--accent,#5B5BFF); color:#080B1A;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════ */
.skip-link.screen-reader-text{
	border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
	padding:0; position:absolute; width:1px;
}
.skip-link.screen-reader-text:focus{
	clip-path:none; height:auto; width:auto; padding:14px 22px; left:20px; top:20px;
	z-index:200; background:var(--wp--preset--color--accent,#5B5BFF); color:#fff;
	border-radius:var(--hgx-r-sm); font-weight:700; text-decoration:none;
}
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
	outline:2px solid var(--wp--preset--color--accent-light,#9090FF);
	outline-offset:3px; border-radius:12px;
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   Add these in Advanced > Additional CSS class(es) on any block.
   ═══════════════════════════════════════════════════════════════════ */
.hgx-rev{ opacity:0; transform:translateY(20px); }
.hgx-rev.is-in{ opacity:1; transform:none; transition:opacity .7s var(--hgx-ease), transform .7s var(--hgx-ease); }

.hgx-mono{ font-family:var(--wp--preset--font-family--mono, ui-monospace, monospace); font-variant-numeric:tabular-nums; }
.hgx-eyebrow{
	font-family:var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
	color:var(--wp--preset--color--accent-light,#9090FF);
}
.hgx-pill{
	display:inline-flex; align-items:center; gap:9px;
	padding:7px 16px; border-radius:999px;
	background:rgba(255,255,255,.045); border:1px solid var(--hgx-brd);
	-webkit-backdrop-filter:var(--hgx-blur); backdrop-filter:var(--hgx-blur);
	font-size:.82rem;
}
.hgx-ic{
	width:44px; height:44px; border-radius:15px; display:grid; place-items:center;
	background:rgba(91,91,255,.14); border:1px solid rgba(91,91,255,.26);
}
/* Safe-area padding for a bar pinned to the bottom on iPhone */
.hgx-sticky-bottom{
	position:fixed; left:12px; right:12px; z-index:70;
	bottom:calc(12px + env(safe-area-inset-bottom));
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{
		animation-duration:.01ms !important; animation-iteration-count:1 !important;
		transition-duration:.01ms !important; scroll-behavior:auto !important;
	}
	.hgx-rev{ opacity:1; transform:none; }
	.hgx-mat::after,.is-style-hgx-glass::after{ display:none; }
}