/* ========================================================== */
/* BASIC RESET
/* ========================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {width: 100%;}

a {
  text-decoration: none;
  color: inherit;
}

/* ========================================================== */
/* DESIGN TOKENS
/* ========================================================== */
:root {
    --c-0: #fffdfa;
    --c-1: #fff5e5;
    --c-2: #ffe9c5;
    --c-3: #edc8a1;
    --c-4: #cdad8b;
    --c-5: #a48a73;
    --c-6: #896e57;
    --c-7: #5f4430;
    --c-8: #2b221d;
    --c-9: #1a1512;

    --tc-1: rgba(237,200,161,0.05);
    --tc-2: rgba(237,200,161,0.1);
    --tc-3: rgba(237,200,161,0.2);
    --tc-4: rgba(237,200,161,0.35);

    --w: #ffffff;
    --b: #000000;

    --g-1: #f6f6f6;
    --g-2: #e0e0e0;
    --g-3: #b7b7b7;
    --g-4: #888888;
    --g-5: #424242;
    --g-6: #333333;
    --g-7: #222222;
    --g-8: #1b1b1b;
    --g-9: #151515;

    --tg-0: rgba(0, 0, 0, 0);
    --tg-1: rgba(0, 0, 0, 0.05);
    --tg-2: rgba(0, 0, 0, 0.1);
    --tg-3: rgba(0, 0, 0, 0.2);
    --tg-4: rgba(0, 0, 0, 0.6);
    --tg-5: rgba(255, 255, 255, 0.05);
    --tg-6: rgba(255, 255, 255, 0.12);
    --tg-7: rgba(255, 255, 255, 0.2);
    --tg-8: rgba(255, 255, 255, 0.5);
    --tg-9: rgba(255, 255, 255, 0.9);
}

/* ========================================================== */
/* FONT FACE DEFINITIONS
/* ========================================================== */

/* ----------------------- Feloriya F1 ---------------------- */
@font-face {
	font-family: 'Feloriya-F1';
	src: url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-F1-Regular.woff2') format('woff2'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-F1-Regular.woff') format('woff'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-F1-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	/**
	 * Override font vertical metrics to remove unwanted whitespace above letters
	 * Values adjusted based on specific font's white space issue
	 * 
	 * ascent-override: Controls space above letters (cap height area)
	 * descent-override: Controls space below letters (descenders like g, j, p, q, y)
	 * line-gap-override: Removes extra line spacing included in some fonts
	 * 
	 * Formula: ascent + descent = 100% (leaves no dead space)
	 * Default browser behavior is ~85%/15%, but some fonts need different ratios
	 * 
	 * Tested with: uppercase/lowercase letters, descenders, ascenders, and numbers
	 */
	ascent-override: 75%;    /* Space above letters - reduced to eliminate top whitespace */
	descent-override: 25%;   /* Space below letters - increased to balance with ascent */
	line-gap-override: 0%;   /* Remove any extra line gap that creates unwanted spacing */
}

/* ----------------------- Feloriya N1 ---------------------- */
@font-face {
	font-family: 'Feloriya-N1';
	src: url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-N1-Regular.woff2') format('woff2'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-N1-Regular.woff') format('woff'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-N1-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	ascent-override: 75%;
	descent-override: 25%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Feloriya-N1';
	src: url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-N1-Italic.woff2') format('woff2'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-N1-Italic.woff') format('woff'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-N1-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	ascent-override: 75%;
	descent-override: 25%;
	line-gap-override: 0%;
}

/* ----------------------- Feloriya S1 ---------------------- */
@font-face {
	font-family: 'Feloriya-S1';
	src: url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Light.woff2') format('woff2'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Light.woff') format('woff'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	ascent-override: 75%;
	descent-override: 25%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Feloriya-S1';
	src: url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-LightItalic.woff2') format('woff2'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-LightItalic.woff') format('woff'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
	ascent-override: 75%;
	descent-override: 25%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Feloriya-S1';
	src: url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Regular.woff2') format('woff2'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Regular.woff') format('woff'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	ascent-override: 75%;
	descent-override: 25%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Feloriya-S1';
	src: url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Italic.woff2') format('woff2'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Italic.woff') format('woff'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	ascent-override: 75%;
	descent-override: 25%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Feloriya-S1';
	src: url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Semibold.woff2') format('woff2'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Semibold.woff') format('woff'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	ascent-override: 75%;
	descent-override: 25%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Feloriya-S1';
	src: url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Bold.woff2') format('woff2'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Bold.woff') format('woff'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	ascent-override: 75%;
	descent-override: 25%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Feloriya-S1';
	src: url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Black.woff2') format('woff2'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Black.woff') format('woff'),
	   url('/wp-content/themes/Feloriya/assets/fonts/Feloriya-S1-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	ascent-override: 75%;
	descent-override: 25%;
	line-gap-override: 0%;
}

/* ========================================================== */
/* BASE TYPOGRAPHY
/* ========================================================== */
body {
    font-family: 'Feloriya-S1', sans-serif;
    font-weight: 400;
    line-height: 1.8;
    color: var(--g-3);
    background-color: var(--b);
    overflow-x: hidden;
}

p {font-weight: 400;}

h1, h2 {font-weight: 700;}
h3, h4, h5 {font-weight: 500;}

select, input, button {font-family: 'Feloriya-S1', sans-serif;}

/* ========================================================== */
/* LAYOUT
/* ========================================================== */
#page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#site-content {
  flex: 1;
}
/* ========================================================== */
/* Featured Image
/* ========================================================== */
.featured-image-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 30%; /* 50% = 2:1 */
	overflow: hidden;
	box-shadow: 0 15px 35px var(--tg-4);
	transition: transform 0.3s ease;
	background-color: #2b221d70;
	margin-bottom: -20%;
	z-index: -1;
}
.featured-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;  /* 50% means center, 60% means a little bottom */
	filter: grayscale(50%);
	opacity: 0.4;
}
.featured-image {
	backface-visibility: hidden;
	perspective: 1000px;
}
/* ========================================================== */
/* Breadcrumb
/* ========================================================== */
/* ---------------------------------------------------------- */
.breadcrumb {
	margin-left: auto;
	margin-right: auto;
    font-size: 15px;
    margin-bottom: 15px;
    color: var(--w);
}
.breadcrumb a {
    color: var(--c-3);
    text-decoration: none;
}
.breadcrumb a:hover {
    color: var(--c-2);
}

/* ========================================================== */
/* BUTTONS
/* ========================================================== */
/* ---------------------- BUTTON BASE ----------------------- */
.feloriya-btn {
    display: inline-block;
    width: fit-content;
    font-size: 16px;
	line-height: 1;
    padding: 13px 35px 10px 35px;
    border-radius: 40px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    outline: none;
}
@media (max-width: 1024px) {
    .feloriya-btna {
		font-size: 14px;
		display: block;
        margin-left: auto;
        margin-right: auto;
		align-self: center;
    }
}
/* ---------------------------------------------------------- */
/* ------------------------ BUTTON A ------------------------ */
.feloriya-btna {
    background: linear-gradient(120deg, var(--c-2) 0%, var(--c-4) 50%, var(--c-5) 100%);
    color: var(--b);
    font-weight: 600;
    border: none;
    align-self: flex-start;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.feloriya-btna::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, var(--c-4) 0%, var(--c-2) 80%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.1);
    z-index: -1;
    border-radius: inherit;
}

.feloriya-btna:hover::before {
    transform: scaleX(1);
}
/* ---------------------------------------------------------- */
/* ------------------------ BUTTON B ------------------------ */
.feloriya-btnb {}
/* ---------------------------------------------------------- */
/* ========================================================== */
/* Feloriya Title Style
/* ========================================================== */
.Feloriya-Dark-Title, .Feloriya-Light-Title{
        padding-top:50px;
        margin-bottom:30px;
        font-family:'Feloriya-N1',sans-serif;
        font-style:italic;
        font-weight:400;
        font-size:32px;
        letter-spacing:1px;
		text-align:center;        
}

.Feloriya-Dark-Title{color: var(--w);}
.Feloriya-Light-Title{color: var(--b);}
.Feloriya-Dark-Title p, .Feloriya-Light-Title p{
		font-size: 32px;
        width:fit-content;
        margin:auto;
        padding-bottom:4px;
        background:
            linear-gradient(90deg,transparent,var(--c-3),transparent)
            left bottom / 100% 1px
            no-repeat;
}

/* ========================================================== */
/* BADGE / EYEBROW STYLE (✦ CRAFTED WITH INTENTION ✦)
/* ========================================================== */
.hero-badge {
    font-size: 12px;
    letter-spacing: 6px;
    color: var(--c-4);
    text-transform: uppercase;
    display: inline-block;
    font-weight: 400;
}
/* ========================================================== */
/* UTILITY CLASSES
/* ========================================================== */
.container {
	background: var(--b);
	margin-left: auto;
	margin-right: auto;
}
/*.text-center {text-align: center;} .hidden {display: none;}*/

/* ========================================================== */
/* Respansive
/* ========================================================== */
/* ---------------------------------------------------------- */
/* ----------- Extra small devices (phones) ----------------- */
@media (max-width: 768px) {
	body {font-size: 16px;}
	p {font-size: 14px;}
	.featured-image-wrapper {padding-bottom: 40%; margin-bottom: -15%;}
	.breadcrumb {width: 100%; padding: 0 20px; font-size: 13px;}
	.container {width: 100%; padding: 20px;}
	h1 {font-size: 36px;} h2 {font-size: 22px;} h3 {font-size: 18px; line-height: 24px;} h4 {font-size: 16px; line-height: 18px;} h5 {font-size: 14px;}
}

/* ---------------------------------------------------------- */
/* ----------- Small devices (tablets) ---------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
	body {font-size: 18px;}
	p {font-size: 16px;}
	.featured-image-wrapper {padding-bottom: 40%; margin-bottom: -15%;}
	.breadcrumb {width: 90%;}
	.container {width: 90%; padding: 20px;}
	h1 {font-size: 40px;} h2 {font-size: 26px;} h3 {font-size: 22px; line-height: 24px;} h4 {font-size: 18px; line-height: 20px;} h5 {font-size: 14px;}
}

/* ---------------------------------------------------------- */
/* ----------- Medium devices (laptops) --------------------- */
@media (min-width: 1025px) and (max-width: 1440px) {
	body {font-size: 18px;}
	p {font-size: 16px;}
	hero-badge {font-size: 10px; letter-spacing: 3px;}
	.breadcrumb {width: 90%;} 
	.container {width: 90%; padding: 40px;}
	h1 {font-size: 46px;} h2 {font-size: 28px;} h3 {font-size: 24px; line-height: 26px;} h4 {font-size: 18px; line-height: 20px;} h5 {font-size: 16px;}
}

/* ---------------------------------------------------------- */
/* ----------- Large devices (desktops) --------------------- */
@media (min-width: 1441px) and (max-width: 1600px) {
	body {font-size: 20px;}
	p {font-size: 18px;}
	.breadcrumb {width: 80%;}
	.container {width: 80%; padding: 40px;}
	h1 {font-size: 48px;} h2 {font-size: 32px;} h3 {font-size: 24px; line-height: 26px;} h4 {font-size: 18px; line-height: 20px;} h5 {font-size: 16px;}
}

/* ---------------------------------------------------------- */
/* ----------- Extra large devices (large desktops) --------- */
@media (min-width: 1601px) {
	body {font-size: 20px;}
	p {font-size: 18px;}
	.breadcrumb {width: 80%;}
	.container {width: 80%; padding: 50px;}
	h1 {font-size: 56px;} h2 {font-size: 36px;} h3 {font-size: 26px; line-height: 28px;} h4 {font-size: 20px; line-height: 22px;} h5 {font-size: 16px;}
	.feloriya-btn {font-size: 18px;}
}


/* ---------------------------------------------------------- */
/* ----------- Extra small devices (phones) ----------------- */
/* @media (max-width: 768px) {}
/* ----------- Small devices (tablets) ---------------------- */
/* @media (min-width: 769px) and (max-width: 1024px) {}
/* ----------- Medium devices (laptops) --------------------- */
/* @media (min-width: 1025px) and (max-width: 1440px) {}
/* ----------- Large devices (desktops) --------------------- */
/* @media (min-width: 1441px) and (max-width: 1600px) {}
/* ----------- Extra large devices (large desktops) --------- */
/* @media (min-width: 1601px) {}
/* ---------------------------------------------------------- */