/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
	/* Font family */
	--font-family: "Istok Web", PingFang-HK, PingFangHK, "PingFang HK", "PingFang TC", 'Microsoft YaHei', 'Noto Sans HK', -apple-system, "system-ui", 'Segoe UI', roboto, helvetica, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	
	/* Site content */
	--content-width: 1250px; /* site content width */
	--content-gap: var(--space-s);
	--container-gap: var(--space-l);
	
	/* Colors */
	--clr-primary: hsl(341, 81%, 48%);
	--clr-primary-d-1: hsl(344, 71%, 40%);
	--clr-primary-d-2: hsl(346, 63%, 31%);
	--clr-primary-d-3: hsl(349, 54%, 22%);
	--clr-primary-d-4: hsl(352, 42%, 13%);
	--clr-primary-l-1: hsl(349, 78%, 64%);
	--clr-primary-l-2: hsl(353, 84%, 75%);
	--clr-primary-l-3: hsl(355, 92%, 84%);
	--clr-primary-l-4: hsl(356, 100%, 92%);
	
	--clr-header-sticky:  var(--white);  /* Sticky header background color */

	--white: hsl(0, 0%, 100%);
	--white-5: hsla(0, 0%, 100%, 0.05);
	--white-10: hsla(0, 0%, 100%, 0.1);
	--white-20: hsla(0, 0%, 100%, 0.2);
	--white-30: hsla(0, 0%, 100%, 0.3);
	--white-40: hsla(0, 0%, 100%, 0.4);
	--white-50: hsla(0, 0%, 100%, 0.5);
	--white-60: hsla(0, 0%, 100%, 0.6);
	--white-70: hsla(0, 0%, 100%, 0.7);
	--white-80: hsla(0, 0%, 100%, 0.8);
	--white-90: hsla(0, 0%, 100%, 0.9);
	
	--black: black;
	--neutral-light: hsl(210, 38%, 90%);
	--bg-light: hsl(0, 0%, 97%);
	--header-bg: unset;
	
	/* Spacing */
	--space-4xs: clamp(0.49rem, calc(-0.27vw + 0.55rem), 0.33rem);
	--space-3xs: clamp(0.61rem, calc(-0.25vw + 0.66rem), 0.47rem);
	--space-2xs: clamp(0.77rem, calc(-0.18vw + 0.8rem), 0.66rem);
	--space-xs: clamp(0.96rem, calc(-0.04vw + 0.97rem), 0.94rem);
	--space-s: clamp(1.2rem, calc(0.22vw + 1.16rem), 1.33rem);
	--space-m: clamp(1.5rem, calc(0.65vw + 1.37rem), 1.88rem);
	--space-l: clamp(1.88rem, calc(1.34vw + 1.61rem), 2.65rem);
	--space-xl: clamp(2.34rem, calc(2.42vw + 1.86rem), 3.75rem);
	--space-2xl: clamp(2.93rem, calc(4.08vw + 2.11rem), 5.3rem);
	--space-3xl: clamp(3.66rem, calc(6.6vw + 2.34rem), 7.5rem);
	--space-4xl: clamp(4.58rem, calc(10.36vw + 2.51rem), 10.6rem);
	
	--section-padding-x: var(--space-m);
	--section-padding-y: var(--space-3xl);
	--card-padding: var(--space-s);
	--heading-spacing: 1.5em;
	--paragraph-spacing: 1em;
	--header-height: 120px;
	
	--width-xs: calc(var(--content-width) * 0.1);
	--width-s: calc(var(--content-width) * 0.2);
	--width-m: calc(var(--content-width) * 0.4);
	--width-l: calc(var(--content-width) * 0.6);
	--width-xl: calc(var(--content-width) * 0.8);
	--width-xxl: calc(var(--content-width) * 0.9);
	
	/* Text size */		
	--text-xs: clamp(0.79rem, calc(-0.12vw + 0.81rem), 0.72rem);
	--text-s: clamp(0.89rem, calc(0.02vw + 0.89rem), 0.9rem);
	--text-m: clamp(1rem, calc(0.22vw + 0.96rem), 1.13rem);
	--text-l: clamp(1.13rem, calc(0.48vw + 1.03rem), 1.41rem);
	--text-xl: clamp(1.27rem, calc(0.85vw + 1.1rem), 1.76rem);
	--text-2xl: clamp(1.42rem, calc(1.33vw + 1.16rem), 2.2rem);
	--text-3xl: clamp(1.6rem, calc(1.97vw + 1.21rem), 2.75rem);
	--text-4xl: clamp(1.8rem, calc(2.81vw + 1.24rem), 3.43rem);
	
	/* Heading */
	--h1: var(--text-4xl);
	--h2: var(--text-3xl);
	--h3: var(--text-2xl);
	--h4: var(--text-xl);
	--h5: var(--text-l);
	--h6: var(--text-m);
	
	/* Radius */
	--radius-xs: 0.5rem;
	--radius-s: 0.9375rem;
	--radius: 2.25rem;
	--radius-l: 50vw;
	
	/* Grid */
	--grid-1: repeat(1, minmax(0, 1fr));
	--grid-2: repeat(2, minmax(0, 1fr));
	--grid-3: repeat(3, minmax(0, 1fr));
	--grid-4: repeat(4, minmax(0, 1fr));
	--grid-5: repeat(5, minmax(0, 1fr));
	--grid-6: repeat(6, minmax(0, 1fr));
	--grid-7: repeat(7, minmax(0, 1fr));
	--grid-8: repeat(8, minmax(0, 1fr));
	--grid-9: repeat(9, minmax(0, 1fr));
	--grid-10: repeat(10, minmax(0, 1fr));
	--grid-11: repeat(11, minmax(0, 1fr));
	--grid-12: repeat(12, minmax(0, 1fr));
	--grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
	--grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
	--grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
	--grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
	--grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
	--grid-3-2: minmax(0, 3fr) minmax(0, 2fr);

	--grid-gap: var(--content-gap);
	
	--grid-auto-2: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((2 - 1) * var(--grid-gap))) / 2) * 0.7, (100% - (2 - 1) * var(--grid-gap)) / 2)), 1fr));
	--grid-auto-3: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((3 - 1) * var(--grid-gap))) / 3) * 0.7, (100% - (3 - 1) * var(--grid-gap)) / 3)), 1fr));
	--grid-auto-4: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((4 - 1) * var(--grid-gap))) / 4) * 0.7, (100% - (4 - 1) * var(--grid-gap)) / 4)), 1fr));
	--grid-auto-5: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((5 - 1) * var(--grid-gap))) / 5) * 0.7, (100% - (5 - 1) * var(--grid-gap)) / 5)), 1fr));
	--grid-auto-6: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((6 - 1) * var(--grid-gap))) / 6) * 0.7, (100% - (6 - 1) * var(--grid-gap)) / 6)), 1fr));
	--grid-auto-7: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((7 - 1) * var(--grid-gap))) / 7) * 0.7, (100% - (7 - 1) * var(--grid-gap)) / 7)), 1fr));
	--grid-auto-8: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((8 - 1) * var(--grid-gap))) / 8) * 0.7, (100% - (8 - 1) * var(--grid-gap)) / 8)), 1fr));
	--grid-auto-9: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((9 - 1) * var(--grid-gap))) / 9) * 0.7, (100% - (9 - 1) * var(--grid-gap)) / 9)), 1fr));
	--grid-auto-10: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((10 - 1) * var(--grid-gap))) / 10) * 0.7, (100% - (10 - 1) * var(--grid-gap)) / 10)), 1fr));
	--grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.7, (100% - (11 - 1) * var(--grid-gap)) / 11)), 1fr));
	--grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr));
	
	/** Buttons */
	--btn-padding-block: .75em;
	--btn-padding-inline: 1.5em;
	--btn-min-width: 9rem;
	--btn-background: black;
	--btn-backgroud-hover: var(--clr-primary);
	--btn-outline-backgroud-hover: var(--clr-primary);
	--btn--radius: var(--radius-l);
	--btn-text-color: white;
	
	/* Focus */
	--focus-width: .15rem;
	--focus-color: #fd0;
	
	/* miscellaneou */
	--link-underline-offset: .3em;
	--transition: all .2s ease-in-out;
	--btn-transition: all .2s ease-in-out;
	--text-shadow: 1px 1px 1px var(--black);
	--box-shadow: 0px 60px 68px 0px rgba(0,0,0,0.25); /* box shadow */
	--box-shadow-button: 0px 5px 40px 5px rgba(0,0,0,0.2); /* box shadow */
}

/* change scroll offset for sticky header */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 150px;
}
/* adjust scroll offset for mobile header */
@media( max-width: 767px){
    html {
        scroll-padding-top: 80px;
    }  
}

.bricks-is-frontend :where(h1, h2) {
	text-transform: uppercase;
}

/* Link style underline */
:where(a) {
	text-underline-offset: var(--link-underline-offset, 0.35em);
}

body a:not(.brxe-button):hover  {
	text-decoration: underline;
}

body a:not(.brxe-post-sharing a, .footer-social a, .modal-social a)[target="_blank"]::after {
	content: "↗" / "Link to external website";
	font-size: 0.75em;
	vertical-align: text-top;
}

/* Focus style */
body.bricks-is-frontend :focus-visible {
	box-shadow: 0 0 0 var(--focus-width, .1rem) var(--focus-color);
	text-decoration: underline;
	text-underline-offset: var(--link-underline-offset, 0.35em);
}

pre {
	border-radius: var(--radius-s);
	color: var(--primary, initial);
	font-size: inherit;
	font-family: inherit;
	padding: 1em;
}

blockquote {
	font-family: inherit;
	font-size: 1em;
}

/* image set to object fit cover */
img {
  object-fit: var(--object-fit, cover);
  object-position: var(--object-position, 50% 50%);
}

.brxe-text > * + :where(h1, h2, h3, h4, h5, h6), .brxe-post-content:where(:not([data-source="bricks"])) > * + :where(h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--heading-spacing, 1.5em);
}

.brxe-text > * + p, .brxe-post-content:where(:not([data-source="bricks"])) > * + p {
	margin-block-start: var(--paragraph-spacing, 1em);
}

/* Button style */
.bricks-button:not([class*="bricks-background-"]):not([class*="bricks-color-"]) {
	min-inline-size: var(--btn-min-width); /* Min size of buttons */
}

/* Default button color */
:where(.bricks-button) {
	background-color: var(--btn-background)
}

.bricks-button.outline:hover {
	background-color: var(--btn-outline-backgroud-hover);
	border-color: var(--btn-outline-backgroud-hover);
	color: var(--white);
}

:where(.bricks-button:not([class*="bricks-background-"]):not([class*="bricks-color-"])):hover {
	background-color: var(--btn-backgroud-hover, black);
}

.is-layout-flex {
	display: flex;
	flex-wrap: wrap;
}

.hidden-accessible {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}