/*
 Theme Name:   Rio Mastri
 Theme URI:    https://riomastri.com
 Description:  Rio Mastri Theme
 Author:       Rio Mastri
 Author URI:   https://riomastri.com
 Template:     generatepress
 Version:      1.0
*/

@font-face {
	font-family: 'rio-font';
	src: url('/wp-content/uploads/generatepress/fonts/space-grotesk-light/space-grotesk-v22-latin-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'rio-font';
	src: url('/wp-content/uploads/generatepress/fonts/space-grotesk-light/space-grotesk-v22-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'rio-font';
	src: url('/wp-content/uploads/generatepress/fonts/space-grotesk-light/space-grotesk-v22-latin-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'rio-font';
	src: url('/wp-content/uploads/generatepress/fonts/space-grotesk-light/space-grotesk-v22-latin-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'rio-font';
	src: url('/wp-content/uploads/generatepress/fonts/space-grotesk-light/space-grotesk-v22-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


body, html {
	font-size: 62.5%; /* 1rem = 10px */
	box-sizing: border-box;
	font-family: "rio-font", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

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

body {
	font-size: var(--text-m);
	font-weight: 400;
	line-height: var(--lh-body);
	margin: 0;
	padding: 0;
	color: var(--text-body);
	background: var(--white);
}

:root {
  /* Colors (tidak diubah) */
	--primary: hsla(192, 70%, 50%, 1);
	--primary-hover: hsla(192, 70%, 40%, 1);
	--primary-link: hsla(192, 70%, 30%, 1);
	--primary-dark: hsla(192, 70%, 10%, 1);
	--primary-light: hsla(192, 70%, 90%, 1);
	--primary-btn-bg: hsla(192, 70%, 80%, 1);
	--primary-btn-bg-hover: hsla(192, 70%, 70%, 1);
	--accent: hsla(43, 100%, 50%, 1);
	--text-body: hsla(0, 0%, 18%, 1);
	--text-meta: hsla(0, 0%, 33%, 1);
	--border: hsla(0, 0%, 85%, 1);
	--shadow: hsla(0, 0%, 0%, 0.2);
	--white: hsla(0, 0%, 100%, 1);
	--black: hsla(0, 0%, 0%, 1);

  /* Typography, Spacing, Radius—same as before */
	--h1: clamp(3.2rem, 2.5vw + 1.2rem, 6rem);
	--h2: clamp(2.6rem, 1.7vw + 1.2rem, 4.8rem);
	--h3: clamp(2.1rem, 1.2vw + 1.1rem, 3.4rem);
	--h4: clamp(1.7rem, 0.7vw + 1rem, 2.4rem);

	--text-xs: clamp(1rem, 0.1vw + 0.98rem, 1.2rem);
	--text-s: clamp(1.3rem, 0.2vw + 1.1rem, 1.4rem);
	--text-m: clamp(1.6rem, 0.3vw + 1.3rem, 1.8rem);
	--text-l: clamp(2rem, 0.4vw + 1.7rem, 2.4rem);

	--lh-body: 1.6;
  	--lh-meta: 1.4;
	
  	--lh-h1: 1.1;
  	--lh-h2: 1.13;
  	--lh-h3: 1.15;
  	--lh-h4: 1.18;

  	--space-3xs: clamp(0.2rem, 0.5vw, 0.6rem);
  	--space-2xs: clamp(0.4rem, 0.8vw, 1rem);
  	--space-xs: clamp(0.8rem, 1vw, 1.6rem);
  	--space-s: clamp(1.2rem, 1.5vw, 2.4rem);
  	--space-m: clamp(1.6rem, 2vw, 3.2rem);
  	--space-l: clamp(2.4rem, 3vw, 4.8rem);
  	--space-xl: clamp(3.2rem, 5vw, 8rem);
  	--space-2xl: clamp(4rem, 6vw, 10rem);
  	--space-3xl: clamp(4.8rem, 8vw, 12rem);

  	--gap-s: var(--space-s);
  	--gap-m: var(--space-m);
	--gap-l: var(--space-l);

	--radius-xs: clamp(0.2rem, 0.4vw, 0.6rem);
	--radius-s: clamp(0.4rem, 0.5vw, 0.8rem);
	--radius-m: clamp(0.8rem, 0.6vw, 1.2rem);
	--radius-l: clamp(1.2rem, 0.8vw, 2.4rem);
	--radius-xl: clamp(2rem, 1vw, 3.2rem);
	--radius-full: 500rem;
}

/* LINK */
a {
	color: var(--primary-link);
	transition: color 0.25s ease;
}
a:hover {
	color: var(--primary-hover);
}

/* HEADINGS */
h1 { font-size: var(--h1); line-height: var(--lh-h1); margin-block-end: var(--space-m); font-weight: 700; }
h2 { font-size: var(--h2); line-height: var(--lh-h2); margin-block-end: var(--space-s); font-weight: 700; }
h3 { font-size: var(--h3); line-height: var(--lh-h3); margin-block-end: var(--space-xs); font-weight: 700; }
h4 { font-size: var(--h4); line-height: var(--lh-h4); margin-block-end: var(--space-xs); font-weight: 700; }

/* CONTENT */
img { line-height: 0; }

.entry-meta{ 
	font-size: 70%;
	margin-block-start: 0;
}
.entry-content p, .entry-content blockquote { font-size: var(--text-m); margin-block-end: var(--space-m); font-weight: 400; }
.gb-text { margin-block-end: 0; }
/* FIGURE / MEDIA */
figure { margin-block-end: var(--space-xl); }
.wp-block-image img {
	min-width: 100%;
	border-radius: var(--radius-l);
	box-shadow: 0 1px 3px 0 var(--shadow);
}

/* FORM, BUTTON */
textarea, input, select, button {
	font-family: inherit;
	font-size: inherit;
	border-radius: var(--radius-xs);
	border: solid 1px var(--border);
	margin: 0;
}

.button, .wp-block-button__link {
	padding: var(--space-xs) var(--space-m);
	border-radius: var(--radius-s);
	font-size: var(--text-m);
	background: var(--primary);
	color: var(--white);
	border: none;
	transition: color 0.25s ease-in-out, background 0.25s ease-in-out;
}
.button:hover, .wp-block-button__link:hover {
	background: var(--primary-hover);
	color: var(--white);
}

/* UTILITY */
.visually-hidden {
	position: absolute!important;
	width: 1px; height: 1px; padding: 0; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0;
}

/* LIST */
ul li::marker{
	color: var(--accent);
}

details > ul{
	margin-inline-start: var(--space-l);
}

details > p,
details > ul{
	border-inline-end: solid 1px var(--border);
	border-block-end: solid 1px var(--border);
	padding-block: var(--space-xs);
	padding-inline-end: var(--space-s);
	border-bottom-right-radius: var(--radius-l);
	box-shadow: 3px 3px 3px -3px var(--shadow);
}

details > summary > strong{
	font-size: var(--h4);
}

details[open] > summary:first-of-type{
	transition: all .25s ease-in-out;
	margin-block-end: var(--space-xs);
}

/* RESPONSIVE TWEAK */
@media (max-width: 700px) {
	.entry-meta{
		font-size: 70%;
	}
}