/* ===============================
   GLOBAL RESET & BASE STYLES
================================= */
/* Montserrat Medium */
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', Helvetica, sans-serif;
}



body {
    font-family: 'Montserrat', Helvetica, sans-serif; /* fallback fonts if Targo fails */
    background-color: #89796A;
    color: rgb(209, 200, 186);
    line-height: 1.5;
    min-height: 100vh;
}

/* ===============================
   LAYOUT CONTAINERS
================================= */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===============================
   HEADER
================================= */
header {
    display: flex;
    justify-content: space-between; /* logo left, right-controls right */
    align-items: center;
    background-color: #67594D;
    padding: 10px 20px;
    position: relative;
}

 /* Logo */
.logo {
    height: 50px;
    width: auto;
}

/* Right side container (Hamburger + Profile) */
.right-controls {
    display: flex;
    align-items: center;
    gap: 15px; /* space between hamburger and profile icon */
}
/* Hamburger icon */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    cursor: pointer;
}



.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background: #2d231c;
    border-radius: 5px;
    transition: 0.3s ease;
}

/* Profile icon */
.profile-link {
    display: inline-block; /* ensure it stays inline next to hamburger */
}

.profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.profile-icon:hover {
    border: 2px solid #4E321C;
}

/* Hide the actual checkbox */
#menu-toggle {
    display: none;
}

/* Hamburger animation for X */
#menu-toggle:checked ~ header .right-controls .hamburger span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
}

#menu-toggle:checked ~ header .right-controls .hamburger span:nth-child(2) {
    opacity: 0;
}

#menu-toggle:checked ~ header .right-controls .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
}
/* Sidebar 
Here you make the design for the sidebar that will show when the menu-toggle is on "Checked", the reason why it doesn't show is because of left: -260,
 basicly makes it out of screen, and when it is checked, the code is changed for left:, it is changed to left:0, which basicly bring it out of screen to 
 actual page*/
.sidebar {
    position: fixed;
    top: 0;
    right: -260px;
    width: 240px;
    height: 100vh;
    background: #181818;
    padding: 60px 25px;
    transition: 0.35s ease;
    z-index: 1000;
}
/*Here what happens is that when the checkbox called menu-toggle, is checked the code for the sidebar gets
modified, the sidebar that was positions negative to the left, so out of screen gets in screen through
making it go left:0, so no negative(it is named like this through Id:, you can see this because # is used, )*/
#menu-toggle:checked ~ .sidebar {
    right: 0;
}
/*the design of the closing button(label)*/
.close-btn {
    position: absolute;
    top: 15px;
    right: 18px;
    font-size: 28px;
    color: #D0C7BA;
    cursor: pointer;
}

.sidebar ul {
    list-style: none;
    margin-top: 40px;
}

.sidebar li {
    margin: 20px 0;
}

.sidebar a {
    text-decoration: none;
    font-size: 16px;
    color: #D0C7BA;
    font-weight: 600;
    transition: 0.2s;
}

.sidebar a:hover {
    color: #4E321C;
}

/* ===============================
   MAIN CONTENT
================================= */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
}

.page-section {
    background-color: #2d231c;
    padding: 15px;
    border-radius: 8px;
    min-height: 100px;
}

/* ===============================
   BUTTONS
================================= 
If you have a button in your page, you simply just copy
<button class="btn"> (whatever it is in the button) </button>
example:         <button class="btn">Second Button button to test the Button</button>


*/
.btn {
    display: inline-block;   /* shrink to fit text */
    padding: 10px 20px;
    background-color: #4E321C;
    color: #D0C7BA;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s;
    width: auto;             /* ensure not 100% */
    text-align: center;
    /* Prevent parent block from stretching it */
    max-width: max-content;  /* ensures it doesn’t stretch wider than text + padding */
}


.btn:hover {
    background-color: #654931;
}


/* ===============================
   INPUTS / FORMS
================================= */
input, select, textarea {
    display: block;           /* ensures width applies */
    width: 350px;             /* fixed width, smaller than parent */
    max-width: 100%;          /* won’t overflow container */
    padding: 8px 10px;
    background-color: #2d231c;
    border: 1px solid #333;
    border-radius: 5px;
    color: #D0C7BA;
    margin-bottom: 15px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px;
}



/* ===============================
   FOOTER
================================= */
footer {
    background: #67594D;
    color: #a4a1a1;
    padding: 20px;
    text-align: center;
}

footer a {
    color: #D0C7BA;
    text-decoration: none;
    margin: 0 5px;
}

footer a:hover {
    text-decoration: underline;
}
a {
    color: #1eb533;
    text-decoration: none;
    transition: 0.2s;
}

a:hover {
    color: #9feb79;
}

.home-button img {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: 0.2s;
}

.home-button img:hover {
    opacity: 0.8; /* subtle hover effect for the icon */
}