/* Usually do not use percentage for heights. One place where
percentage-based heights can be
useful is for absolutely positioned elements, when you want to
size them in relation to their navlinks */


/* Apply border box sizing to all elements and pseudo-elements on the page.
After applying this to the page, height and inline-size will always specify the
actual height and inline-size of an element, including all the 4 elements of the
box model */
*,
::before,
::after {
    box-sizing: border-box;
}

/* Light Theme Variables */
:root {
	font-size: clamp(0.9rem, 0.6rem + 0.5svw, 1.5rem);

	/* Distances */
	--spacing-small: 0.5rem;
	--spacing-medium: 1rem;
	--spacing-large: 3rem;

	/* Color Palette */
	--palette-bg-light: #E7E0D3;
	--palette-text-light: #2e3436ff;
	--palette-bg-dark: var(--palette-text-light);
	--palette-text-dark: var(--palette-bg-light);
	--palette-primary: slategrey;
	--palette-secondary: slateblue;
	--palette-tertiary: rgb(180, 192, 204);
	--palette-accent: indianred;
	--palette-accent-2: #12b08c;
	--palette-bg-transparent-light: rgba(196, 172, 158, 0.42);
	--palette-bg-transparent-dark: rgb(48, 48, 48);
	--palette-code-bg: #0c1921;
	--reply-button-color: steelblue;

	/* Background and Text Colors */
	--background-color: var(--palette-bg-light);
	--text-color: var(--palette-text-light);

	/* Link Colors */
	--link-color: var(--palette-primary);
	--link-hover-color: var(--palette-secondary);
	--theme-button-color: var(--palette-primary);
	--theme-button-hover-color: var(--palette-secondary);

	/* Navbar Colors */
	--navbar-bg-color: var(--palette-bg-light);
	--navbar-link-color: var(--palette-primary);

	/* Badge Colors */
	--badge-bg-color: var(--palette-bg-light);
	--badge-text-color: var(--palette-secondary);

	/* Button Colors */
	--button-bg-color: var(--palette-bg-light);
	--button-text-color: var(--palette-accent);
	--button-hover-bg-color: var(--palette-bg-transparent-light);
	--button-hover-text-color: var(--palette-secondary);

	/* Post String Color */
	--post-string-color: var(--palette-primary);

	/* Card Infos Colors */
	--card-infos-bg-color: var(--palette-bg-transparent-light);
	--card-infos-text-color: var(--palette-secondary);
	--card-li-color: var(--palette-secondary);

	/* Card Header Colors */
	--card-header-bg-color: var(--palette-bg-light);
	--card-header-border-color: var(--palette-accent-2);
	--headers-color : var(--palette-secondary);

	/* Pagination Colors */
	--pagination-color: var(--palette-accent);
	--pagination-hover-color: var(--palette-secondary);

	/* Comments Color */
	--comment-user: var(--palette-primary);

	/* Code Block Styling */
	--code-background-color: var(--palette-code-bg);

	/* Navbar Toggler */
	--navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(46, 52, 54, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-inline-size='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}
 
 
/* Dark Theme Variables ---------------------------------------- */
body.dark-mode {
	/* Background and Text Colors */
	--background-color: var(--palette-bg-dark);
	--text-color: var(--palette-text-dark);

	/* Link Colors */
	--link-color: var(--palette-tertiary);
	--link-hover-color: var(--palette-secondary);
	--theme-button-color: var(--palette-tertiary);
	--theme-button-hover-color: var(--palette-text-dark);

	/* Navbar Colors */
	--navbar-bg-color: var(--palette-bg-dark);
	--navbar-link-color: var(--palette-tertiary);

	/* Badge Colors */
	--badge-bg-color: var(--palette-bg-dark);
	--badge-text-color: var(--palette-secondary);

	/* Button Colors */
	--button-bg-color: var(--palette-bg-dark);
	--button-text-color: var(--palette-accent);
	--button-hover-bg-color: var(--palette-bg-transparent-dark);
	--button-hover-text-color: var(--palette-secondary);

	/* Post String Color */
	--post-string-color: var(--palette-tertiary);

	/* Card Infos Colors */
	--card-infos-bg-color: var(--palette-bg-dark);
	--card-infos-text-color: var(--palette-secondary);
	--card-li-color: var(--palette-accent-2);

	/* Card Header Colors */
	--card-header-bg-color: var(--palette-bg-dark);
	--card-header-border-color: var(--palette-accent-2);
	--headers-color : var(--palette-tertiary);

	/* Pagination Colors */
	--pagination-color: var(--palette-accent);
	--pagination-hover-color: var(--palette-secondary);

	/* Comments Color */
	--comment-user: var(--palette-tertiary);

	/* Navbar Toggler */
	--navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(231, 224, 211, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-inline-size='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
 
/* ===========================
Global Styles
=========================== */

/* Apply CSS Variables */
body {
	font-family: 'Source Code Pro', monospace;
	font-size: 18px;
	background-color: var(--background-color);
	color: var(--text-color);
	text-align: left;
}

/* The `* + *` selector applies the "adjacent sibling combinator (+)" to each
element of the page! It targets any element that immediately follows any
other element. That is, it selects all the elements that are not the first
child of their parent. The child combinator (>) limits the style to only
direct descendants of the stack. Then you can add the stack class to any
containers where you want to space out child elements. */ 
.stack > * + * {
    margin-block-start: var(--spacing-small);
}

p.card-text.publish-date {
	margin-block-end: var(--spacing-small);
	margin-block-start: 0;
}

.card-header {
	margin-block-end: var(--spacing-small);
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

/* Remove link decorations globally */
a {
	text-decoration: none;
	color: var(--link-color);
	transition: color 0.3s ease;
}

a:hover {
	color: var(--link-hover-color);
}

/* ===========================
Navbar Styles
=========================== */

.navbar-nav {
    display: flex;
	align-items: center;
    list-style: none;
}

.navbar-toggler {
    display: none; /* Hidden by default on larger screens */
    background: none;
    border: none;
    cursor: pointer;
}

.navbar-toggler-icon {
    display: inline-block;
    inline-size: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-image: var(--navbar-toggler-icon-bg);
}

/* Navbar brand styling (logo and title) */
.navbar-brand {
	display: flex;
	align-items: center;
	height: auto;
}

.logo {
	inline-size: 15vw; /* Adjust logo size relative to viewport inline-size */
	height: auto;
}

span#titolo-1 {
	font-family: 'Poiret One', cursive;
	font-size: 55px;
	margin-inline-start: var(--spacing-medium);
}

span#titolo-2 {
	font-family: 'Poiret One', cursive;
	color: var(--palette-primary);
	font-size: 55px;
}

/* Reduce logo size on smaller screens */
@media (max-inline-size: 576px) {
	.navbar-toggler {
        display: block; /* Show toggler on small screens */
    }

    .navbar-links {
        display: none; /* Hide menu by default */
        inline-size: 100%;
        flex-direction: column;
    }

    .navbar-links.show {
        display: flex; /* Show menu when toggled */
    }

    .navbar-nav {
        flex-direction: column;
        inline-size: 100%;
    }

    .navbar-item {
        text-align: center;
        border-top: 1px solid var(--palette-primary);
    }
}

/* Navbar background color */
.navbar {
	background-color: var(--navbar-bg-color) !important;
	margin-block-end: var(--spacing-large);
}

.navbar-item {
	margin-inline: var(--spacing-small);
}

/* Navbar links */
a.nav-link:hover {
	color: var(--link-hover-color);
	background-color: transparent;
}

.theme-toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    height: 40px;
    background: transparent;
    cursor: pointer;
    box-shadow: none !important;

    /* recommended to avoid default button styles affecting layout */
    border: 0;
    padding: 0;
}

#theme-icon {
    /* make the icon box center its ::before content */
    display: inline-flex;
    align-items: center;
    inline-size: 1.5rem;
    height: 1.5rem;
	justify-content: center;
    font-size: 1.5rem;
    line-height: 1; /* important for text glyphs */
    color: var(--theme-button-color);
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Optional: ensure consistent baseline across fonts */
#theme-icon::before {
    display: block;
    line-height: 1;
}

/* simple unicode icons */
#theme-icon.theme-icon-sun::before { content: "☀"; }
#theme-icon.theme-icon-moon::before { content: "☽"; }

/* Change icon color on hover */
.theme-toggle-button:hover #theme-icon {
color: var(--theme-button-hover-color);
}

/* Adjust theme toggle button inside navbar */
.navbar-nav .navbar-item .theme-toggle-button:hover {
	background-color: transparent;
}

/* ===========================
Container and Text Styles
=========================== */
.main-content-container {
	display: flex;
}

.posts {
	display: flex;
	flex-wrap: wrap;
}

/* Container text styles */
.main-content h1 {
	color: var(--palette-primary);
	font-family: 'Poiret One', cursive;
	font-weight: bold;
	font-size: 40px;
	text-align: center;
}

/* ===========================
Sidebar Styles
=========================== */
.sidebar {
	display: flex;
	flex-direction: column;
	margin-inline-start: var(--spacing-medium);
	gap: var(--spacing-small);
}

/* ===========================
Card Styles
=========================== */

h1, h2, h3, h4, h5, h6 {
	color: var(--headers-color);
	font-family: 'Poiret One', cursive;
	font-weight: bold;
	letter-spacing: 1px;
}

div.main-content {
	color: var(--text-color);
}

/* Image Container */
.post-image-container {
	float: left;
	max-inline-size: 450px; /* Limits image inline-size */
	inline-size: 100%;
}

/* Post detail image Styles */
img.post-image-fluid {
	max-inline-size: 100%;
  }

.card-img {
	inline-size: 100%;
	border-radius: 0;
}

.card-img, img.post-image-fluid {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	height: auto;
}

/* Image Caption */
figcaption#image_name {
	color: var(--comment-user);
	text-align: center;
}

/* Buttons */
div.card button, .comment-form-button {
	font-family: 'Poiret One', cursive;
	font-weight: bold;
	color: var(--button-text-color);
	border: 1.5px solid var(--palette-primary);
	inline-size: auto;
	background-color: var(--button-bg-color);
}

/* Buttons hover*/
div.card .btn-outline:hover,
div.card .btn-outline:focus, #comment-form button:hover {
	color: var(--button-hover-text-color);
	background-color: var(--button-hover-bg-color);
}

/* ===========================
Badge Styles
=========================== */

/* Tags */
span.tag {
	background-color: var(--badge-bg-color);
	color: var(--badge-text-color);
}

p {
	color: var(--text-color);
}

p.user-messages-home {
	color: var(--palette-primary);
}

/* ===========================
Post String Styles
=========================== */

/* Post string */
#post-string {
	color: var(--post-string-color);
	font-family: 'Poiret One', cursive;
	font-weight: bold;
	inline-size: fit-content;
	letter-spacing: 15px;
}

/* ===========================
Card Infos Styles
=========================== */

/* Card infos */
.card-infos {
	color: var(--card-infos-text-color);
	display: flex;
	flex-direction: column;
}

.card-body {
	border-block-start: 1.5px solid var(--card-header-border-color);
}

.card-infos .card-body {
	padding-inline: var(--spacing-small);
}

.card-infos .card-header {
	margin: 0;
	margin-inline: var(--spacing-small);
}

/* ===========================
Pagination Styles
=========================== */

/* Pagination */
a.page-link {
	font-weight: bold;
	color: var(--pagination-color);
	border-radius: 3px;
	background-color: var(--background-color);
	border: 1px solid transparent;
	outline: 1px solid var(--palette-primary);
	outline-offset: 2px;
}

/* Code Block Styling */
pre {
	border-radius: 12px;
	overflow-x: auto; /* Horizontal scrolling for long lines */
}

.post-date {
	color: var(--palette-primary);
}

p.card-text.publish-date {
	color: var(--palette-primary);
}

/* ===========================
Comments Section Styles
=========================== */

.comments-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px; /* Adjust the gap as needed */
}

#comments {
	flex: 1;
	min-inline-size: 300px;
}

.comment-block {
	border-top: solid 1.5px var(--headers-color);
	border-left: solid 1.5px var(--headers-color);
	border-right: solid 1.5px var(--headers-color);
	border-bottom: 0px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	padding: var(--spacing-small);
}

p.comment {
	display: flex;
	justify-content: space-between;
}

span.comment-date {
	color: var(--link-hover-color);
}

.comment-user {
	color: var(--comment-user);
}

/* reply buttons */
button.reply-button {
	color: var(--reply-button-color);
	background-color: transparent;
	border: none;
}

#comment-form {
	display: none; /* Hidden by default */
}

#comment-form .comment-form-actions {
    display: flex;
    gap: var(--spacing-medium);
    align-items: center;
    flex-wrap: wrap; /* optional: allows wrapping on narrow screens */
}

#comment-form.is-open {
	flex: 1; /* Allow flexible inline-size */
	display: flex;
	flex-wrap: wrap;
	background-color: var(--background-color);
	color: var(--text-color);
}

#comment-form textarea, #comment-form input {
	background-color: var(--background-color);
	border: solid 1.5px var(--headers-color);
	color: var(--text-color);
	inline-size: 100%; /* Full inline-size inside the form */
}
 
/* ===========================
Policy Container
=========================== */
.footer-container {
	margin-block-start: 6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-top: 1.5px solid var(--card-header-border-color);
}

.footer-container a {
	display: block;
}

#mail-link {
	display: inline;
}

/* code block overwriting prism.js */
.hljs {
	background: var(--code-background-color);
}

.card-body a {
	color: var(--palette-primary);
}

.card-body a:hover {
	color: var(--reply-button-color);
}