:root{
	--menu-bar-height: 64px;
}
/* GLOBAL */
html, body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
}
body{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	margin:0;

	font-family: 'Inter', sans-serif;
	font-size: 16px; /* Base size for body text */
	line-height: 1.6; /* Comfortable reading flow */
	color: #333; /* Neutral dark gray for better contrast */
	margin: 0;
	padding: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Urbanist', sans-serif;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em; /* Slight tracking (approx 0.5px at larger sizes) */
	margin: 0 0 0.5em 0;
	color: #111;
  }

a{
	color:inherit;
	text-decoration: none;
}
p{
	width: 1024px;
	font-size: 1rem;
	font-family: "Inter", serif;
	margin: 0 0 1em;
	font-weight: 400;
	text-align: justify;
}

/* END OF GLOBAL */

/* LAYOUT */
.wrapper{
	display: flex;
	flex-direction: column;


}
.wrapper.home{
	width: 100%;
	gap: 150px;
	margin-bottom: 64px;
}
.wrapper.article{
	width: 1024px;
	padding: 0 20px;
}

/* END OF LAYOUT */


/* COMPONENT NAV */
header{
	display: flex;
	align-items: center;
	justify-content: space-between;

	position: fixed;
	height: var(--menu-bar-height);
	width: 100%;
	background-color: black;


	color: white;
	font-weight: bold;

	z-index: 10;
}
header > div,
header > nav {
	padding-left: 30px;
	padding-right: 30px;
}
.title{
	font-family: "Urbanist", sans-serif;
	font-weight: bold;
	font-size: 1.5rem;
}

nav{
	display: flex;
	gap: 20px;

	justify-content: center;
	font-family: "Urbanist", sans-serif;
	font-weight: normal;
	font-size: 1rem;
}
nav a {
	align-items: center;
}
a:hover{
	text-decoration: underline;
}
/* END OF COMPONENT NAV */

/* COMPONENT TITLE HOME */
h1.title-home{
	padding-top: calc(var(--menu-bar-height)*1.5);
	font-family: "Urbanist", sans-serif;
	font-weight: bold;
	font-size: 5rem;
	text-align: center;
}
/* END OF COMPONENT TITLE HOME */

/* COMPONENT CARD */
.content-section {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    overflow: hidden; /* Ensure no overflow */
}

.post-text-side {
    width: 50%;
    padding: 10% 2% 10% 10%;

	box-sizing: border-box;
}
.post-text-side > a {
	display: flex;
	flex-direction: column;
}

.post-image-side {
    width: 50%;
    position: relative; /* Needed for proper positioning */
}

.post-image-side.right > img,
.post-image-side.left > img {
    position: relative;
    max-width: none; /* Prevents unwanted shrinking */
    width: calc(100% + 100px); /* Ensure consistent expansion */
}

.post-image-side.right > img {
    left: 150px; /* Adjust for symmetry */
}

.post-image-side.left > img {
    right: 150px; /* Adjust for symmetry */
}
img{
	border-radius: 20px;
}

.left {
    order: 1;
}

.right {
    order: 2;
}
.post-image-side::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0));
    pointer-events: none; /* Ensures the overlay doesn't block interactions */
}

.post-image-side.right::after {
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}
.post-image-side.left::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}
.section-title{
	grid-area: title;

	font-family: "Urbanist", serif;
	font-size: 3rem;
	font-weight: bold;
	align-content: center;
	margin-top: 10px;
	margin-bottom: 40px;
}
.section-description{
	grid-area: description;

	font-size: 1rem;
	font-weight: regular;
	align-content: center;
}

/* END OF COMPONENT CARD */

/* COMPONENT ARTICLE */
.wrapper.article h1,
.wrapper.article h2,
.wrapper.article h3{
	font-family: "Urbanist", sans-serif;
	font-weight: bold;
}
.wrapper.article h1{
	font-size: 3rem;
	padding-top: calc(var(--menu-bar-height) + 20px);
}
.wrapper.article h2{
	padding-top: 2.25rem;
	font-size: 1.5rem;
	padding-top: calc(var(--menu-bar-height) + 20px);
}
.wrapper.article h3{
	padding-top: 1.75rem;
}
ul, ol {
	padding-left: 1.5rem; /* Add space to the left of the list for a cleaner look */
	margin: 0;
	color: #aaa;
	font-family: "Inter", serif;
}
li {
	margin: 0 0 0.5rem 0; /* Space below each list item */
	padding: 0; /* Remove default padding inside li */
	line-height: 1.6; /* Ensures line height matches with text */
	font-size: 1rem;
	padding: .25rem 0;
}

ol li span,
ul li span{
	color:#333;
}

/* END OF COMPONENT ARTICLE */

/* COMPONENT FIGURE */
figure{
	margin: 20px 0;
	padding: 30px;
	width: 1024px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	border-radius: 15px;
	box-sizing: border-box;
	text-align: center;

}
figure > img{
	max-width: 100%;
	border-radius: 0px;
}
figcaption{
	text-align: left;
	padding: 20px 0 0 0;
}

/* END OF COMPONENT FIGURE */



/* COMPONENT TOGGLE BUTTON */
.toggle-btn {
	display: flex;
	align-items: center;
	gap:8px;
	padding: 5px 15px 5px 10px;
	border: 1px solid #ddd;
	background-color: black;
	color: #ddd;
	cursor: pointer;
	border-radius: 30px;
	transition: all 0.2s ease;
}
.toggle-btn.active{
	border: 1px solid white;
	background-color: black;
	color: white;
}
.toggle-btn:hover {
	border: 1px solid white;
	background-color: black;
	color: white;
}

.toggle-btn:hover > .circle {
	background-color: #aaa;
}

.toggle-btn .circle {
	width: 12px;
	height: 12px;
	border: 1px solid white;
	border-radius: 50%;
	display: inline-block;
	transition: background 0.2s;
}
.toggle-btn.active .circle {
	background-color: white;
	border-radius: 50%;
	display: inline-block;
	transition: background 0.2s;
}
/* END OF COMPONENT TOGGLE BUTTON */

/* COMPONENT QUOTE */
.quote{
	font-style: italic;
}
/* END OF COMPONENT QUOTE */

/* COMPONENT FOOTER */
footer{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: left; 
	
	padding: 20px; 
	background-color: black; 
	color: white; 
	width:100%;
}
.title-footer{
	color: white;
}

/* END OF COMPONENT FOOTER */

/* COMPONENT SUMMARY */
.summary{
	display:flex;
	justify-content: space-between;
	border-top: 1px solid black;
	margin-top: 50px;
}

.summary ul{
	color: black;
	width: 100%;
	list-style-type: none;
}
.summary ul li{
	margin: 0;
	padding: 0 0 0 5px;
}

.summary ul li:first-child {
	color:grey;
	padding: 0;
}
/* END OF COMPONENT SUMMARY */


/* COMPONENT PARAGRAPH COLUMNS */
.paragraph-columns{
	display:flex;
	gap: 50px;
}

.paragraph-columns-three > div {
	width:33%;
}

.paragraph-columns-three > div > p{
	width:100%;
}

/* END OF COMPONENT X */

/* COMPONENT X */

/* END OF COMPONENT X */