/* ============================================
   MAINPAGE.HTML STYLES
   Stylesheet for IIS Benedetto Castelli
   Homepage presentation page
   ============================================ */

/* ====================
   DESIGN TOKENS & VARIABLES
   ==================== */
:root {
	--castelli-primary: #4378c4;
	--castelli-dark: #354e71;
	--castelli-accent: #fd6600;
	--castelli-light: #f7f7f9;
	--castelli-border: #e9ecef;
}

/* ====================
   GLOBAL STYLES
   ==================== */

/* Body and general typography */
* {
	font-family: 'Raleway', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
}

body {
	font-size: 16px;
	line-height: 1.6;
	color: #333;
	background-color: #f9fafa;
}

/* ====================
   HEADER & NAVIGATION
   ==================== */

/* Header wrapper with blue gradient background */
.header-wrapper {
	background: linear-gradient(135deg, var(--castelli-primary) 0%, var(--castelli-dark) 100%);
	padding: 2rem 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Logo container - flexbox layout for logo, title, and stemma */
.logo-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5.5rem;
	flex-wrap: wrap;
}

.logo-container img {
	height: 70px;
	width: auto;
	background-color: rgba(235, 239, 243, 0.8);
	border-radius: 50%;
	padding: 2px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.logo-container h1 {
	color: white;
	margin: 0;
	font-size: 2.3rem;
	text-align: center;
	font-weight: 700;
}

.logo-container a {
	color: white;
	text-decoration: none;
	transition: opacity 0.3s;
}

.logo-container a:hover {
	opacity: 0.8;
}

/* Breadcrumb/Hero section with parallax image background */
.breadcrumb-section {
	background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../images/slider/slide40_bg.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	padding: 4rem 0;
	color: var(--castelli-light);
	margin-bottom: 3rem;
}

.breadcrumb-content h2 {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: 1rem;
	text-shadow: -1px -1px 0 #333, 1px -1px 0 #222, -1px 1px 0 #222, 1px 1px 0 #333, 0px 0px 2px rgba(0,0,0,0.9)
}

/* Breadcrumb navigation - contact link */
.breadcrumb-nav {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.breadcrumb-nav a {
	color: var(--castelli-light);
	text-decoration: none;
	transition: opacity 0.3s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.breadcrumb-nav a:hover {
	opacity: 0.8;
	text-decoration: underline;
}

/* Custom navbar with Castelli colors */
.navbar-custom {
	background: linear-gradient(90deg, var(--castelli-primary) 0%, rgba(67, 120, 196, 0.95) 100%);
	padding: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.navbar-custom .navbar-brand {
	font-weight: 700;
	color: white !important;
	font-size: 1.25rem;
}

.navbar-custom .nav-link {
	color: rgba(255, 255, 255, 0.85) !important;
	font-weight: 500;
	transition: color 0.3s, background-color 0.3s;
	position: relative;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
	color: white !important;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 0.375rem;
}

.navbar-custom .dropdown-menu {
	background: rgba(245, 247, 251, 0.98);
	border: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border-radius: 0.5rem;
}

.navbar-custom .dropdown-menu .dropdown-item {
	color: var(--castelli-dark);
	font-weight: 500;
	transition: background-color 0.3s;
}

.navbar-custom .dropdown-menu .dropdown-item:hover {
	background-color: var(--castelli-light);
	color: var(--castelli-accent);
}

.navbar-toggler {
	border: none;
	color: white;
}

/* ====================
   MAIN CONTENT
   ==================== */

/* Content section padding */
.content-section {
	padding: 2rem 0;
}

/* ====================
   BANNER SECTION
   ==================== */

/* Banner section with horizontal padding */
.banner-section {
	padding: 0 3rem;
	margin: 2rem 0;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Banner separators */
.banner-separator {
	margin: 1rem 0;
	border-bottom: 1px solid #e0e0e0;
	padding-top: 5px;
	padding-bottom: 5px;
}

.banner-separator-double {
	border-top: 3px double #ccc;
	border-bottom: none;
}

.banner-separator-solid {
	border-top: 1px solid #ccc;
	border-bottom: none;
}

/* Banner images with scale on hover effect */
.img-banner {
	width: 95%;
	height: 100px;
	object-fit: contain;
	display: block;
	transition: transform 0.3s ease;
}

.img-banner:hover {
	transform: scale(1.05);
}

/* Banner column padding and flexbox layout */
.padbot10 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 2px;
}

.padbot10 a {
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ====================
   SERVICES SECTION
   ==================== */

/* Service item card with hover animation */
.service_item {
	overflow: hidden;
	position: relative;
	display: block;
	padding: 13px 25px 32px;
	border: 1px solid #EED4B6;
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	transition: all 0.3s ease-in-out;
}

/* Green background slide-up effect on hover */
.service_item:before {
	content: '';
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 137px;
	bottom: 0;
	border-top: 1px solid #ededed;
	background-color: #B3D4C0;
	border-radius: 6px;
	transition: all 0.3s ease-in-out;
}

.service_item:hover:before {
	top: 0;
}

/* Circular icon block with background images */
.service_item .icon_block {
	position: relative;
	z-index: 2;
	display: block;
	width: 113px;
	height: 113px;
	margin: 0 auto 47px;
	border: 1px solid #505050;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% auto;
	transition: border 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.service_item .icon_block.icon1 {
	background-image: url("../images/icon1.png");
}

.service_item .icon_block.icon2 {
	background-image: url("../images/icon2.png");
}

.service_item .icon_block.icon3 {
	background-image: url("../images/icon3.png");
}

.service_item .icon_block.icon4 {
	background-image: url("../images/icon4.png");
}

.service_item:hover .icon_block {
	background-position: 0 -111px;
	border-color: transparent;
	transform: translateY(43px);
}

/* Service item text - uppercase title that moves up on hover */
.service_item p {
	position: relative;
	z-index: 2;
	margin-bottom: 17px;
	padding: 0;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 14px;
	transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.service_item:hover p {
	transform: translateY(-9px);
}

/* Service item description text that fades on hover */
.service_item span {
	position: relative;
	z-index: 2;
	display: block;
	color: #797979;
	transition: all 0.3s ease-in-out;
}

.service_item:hover span {
	opacity: 0;
	transform: translateY(-30px);
}

/* Service section title styling */
.service_title {
	text-align: center;
}

/* Service block padding */
.padbot40 {
	padding-bottom: 40px;
}

/* ====================
   JUMBOTRON SECTIONS
   ==================== */

/* General jumbotron styling */
.jumbotron {
	margin-bottom: 64px;
	padding: 38px 30px 36px;
	font-weight: 400;
	line-height: 15px;
	font-size: 13px;
	color: #333;
	background-color: rgba(185, 196, 182, 0.2);
	border-radius: 0;
	border: 0;
}

.jumbotron h2 {
	margin: -2px 0 6px;
	text-transform: none;
	font-weight: 400;
	line-height: 33px;
	font-size: 33px;
	color: #354E71;
}

/* Services block variant */
.jumbotron.services_block {
	color: #333;
}

.jumbotron.services_block h2 {
	color: var(--castelli-dark);
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	line-height: 33px;
	font-size: 33px;
	margin: -2px 0 6px;
}

.jumbotron.services_block hr {
	border-color: var(--castelli-accent);
	border-top: 2px solid var(--castelli-accent);
}

/* ====================
   LATEST NEWS SECTION
   ==================== */

/* News item container - white box with gray background */
.latest_news_item {
	margin-bottom: 20px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 12px;
	background-color: white;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* News image with background and opacity effect on hover */
.latest_news_item .recent_post {
	overflow: hidden;
	display: block;
	margin: 0px 0 15px 0;
	background-color: #A5CEE2;
	text-decoration: none;
	color: inherit;
}

.latest_news_item .recent_post img {
	transition: opacity 0.3s ease-in-out;
	max-width: 100%;
	width: 100%;
}

.latest_news_item:hover .recent_post img {
	opacity: 0.10;
	border-bottom-style: dotted;
	border-bottom-width: 1px;
}

/* News title styling */
.latest_news_item .recent_post_title {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 14px;
}

/* News metadata information (date, etc.) */
.recent_post_inf {
	list-style: none;
	padding: 0;
	margin: 0;
}

.recent_post_inf li {
	display: inline-block;
	padding: 0 5px 5px 0;
	color: #979797;
	font-size: 14px;
}

/* News text excerpt container */
.recent_post_txt {
	padding: 10px 5px 0px 5px;
}

/* News content wrapper with negative margin fix */
.news_content {
	margin-top: -5px;
}

/* Subtitle for "In Evidenza" section with link to all news */
.evidenza_subtitle {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--castelli-primary);
	margin: -30px 0 20px 0;
	text-align: right;
	font-family: 'Raleway', sans-serif;
}

.evidenza_subtitle a {
	color: var(--castelli-accent);
	text-decoration: none;
	transition: color 0.3s, text-decoration 0.3s;
}

.evidenza_subtitle a:hover {
	color: var(--castelli-primary);
	text-decoration: underline;
}

/* Links in news items - orange accent color */
.latest_news_item a {
	color: var(--castelli-accent);
	text-decoration: none;
	transition: color 0.3s, text-decoration 0.3s;
}

.latest_news_item a:hover {
	color: var(--castelli-primary);
	text-decoration: underline;
}

/* Box in evidenza styling - light gray with border */
.box_inevidenza {
	color: #797979;
	background-color: #F5F5F5;
	padding-bottom: 5px;
	border-bottom: 2px solid #354E71;
	border-radius: 2px;
	font-size: 15px;
	line-height: 24px;
}

.margbot30 {
	margin-bottom: 30px;
}

.jumbotron .margbot30 {
	border-radius: 6px;
	overflow: hidden;
}

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

/* ====================
   POST/CARD STYLES
   ==================== */

/* Individual post card - white with left accent border */
.post-card {
	background: white;
	border-radius: 0.75rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	padding: 2rem;
	margin-bottom: 2rem;
	border-left: 5px solid var(--castelli-accent);
	transition: transform 0.3s, box-shadow 0.3s;
}

.post-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Post title styling */
.post-card h2 {
	color: var(--castelli-dark);
	font-size: 1.75rem;
	margin-bottom: 0.5rem;
}

.post-card h2 i {
	color: var(--castelli-accent);
	margin-right: 0.5rem;
}

.post-card h2 a {
	color: var(--castelli-dark);
	text-decoration: none;
	transition: color 0.3s;
}

.post-card h2 a:hover {
	color: var(--castelli-accent);
}

/* Post date and time metadata */
.post-datetime {
	color: #666;
	font-size: 0.95rem;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.post-datetime i {
	color: var(--castelli-accent);
}

/* Post content text */
.post-content {
	color: #333;
	line-height: 1.8;
}

.post-content p {
	margin-bottom: 1rem;
}

.post-content strong {
	color: var(--castelli-primary);
	font-weight: 600;
}

.post-content em {
	color: var(--castelli-accent);
	font-style: italic;
}

/* Links in post content - orange accent color */
.post-content a {
	color: var(--castelli-accent);
	text-decoration: none;
	transition: color 0.3s, text-decoration 0.3s;
}

.post-content a:hover {
	color: var(--castelli-primary);
	text-decoration: underline;
}

/* Images in post content - responsive */
.post-content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1rem 0;
	border-radius: 4px;
}

/* ====================
   SIDEBARS & WIDGETS
   ==================== */

/* Sidebar widget container */
.sidebar-widget {
	background: white;
	border-radius: 0.75rem;
	padding: 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	margin-bottom: 2rem;
}

.sidebar-widget h5 {
	color: var(--castelli-dark);
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 3px solid var(--castelli-accent);
}

.sidebar-widget h5 i {
	color: var(--castelli-accent);
	margin-right: 0.5rem;
}

/* Banner widget - larger images */
.sidebar-widget:first-of-type .widget-item-img {
	width: 100%;
	height: auto;
}

/* Quick access widget - medium images */
.sidebar-widget:nth-of-type(2) .widget-item-img {
	width: 120px;
	height: 120px;
}

/* Individual widget item - flex container for items */
.widget-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	transition: transform 0.3s;
}

.widget-item:hover {
	transform: translateY(-2px);
}

.widget-item:last-child {
	margin-bottom: 0;
}

/* Widget image container */
.widget-item-img {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	margin: 0 auto;
}

.widget-item-img img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border-radius: 0.5rem;
	object-fit: contain;
	display: block;
	margin: auto;
}

/* Widget text content */
.widget-item-content {
	width: 100%;
}

.widget-item-content h6 {
	color: var(--castelli-primary);
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.widget-item-content p {
	margin: 0;
	color: #666;
	font-size: 0.9rem;
}

/* Widget link styling */
.widget-item-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.widget-item-link:hover h6 {
	color: var(--castelli-accent);
}

/* ====================
   ATTACHMENTS
   ==================== */

/* Attachment box with accent border */
.post-attachments {
	background: var(--castelli-light);
	border-radius: 0.5rem;
	padding: 1.5rem;
	margin-top: 1.5rem;
	border-left: 4px solid var(--castelli-accent);
}

/* Individual attachment link */
.attachment-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--castelli-primary);
	text-decoration: none;
	padding: 0.75rem 0;
	border-bottom: 1px solid #ddd;
	transition: color 0.3s;
}

.attachment-link:last-child {
	border-bottom: none;
}

.attachment-link:hover {
	color: var(--castelli-accent);
}

.attachment-link i {
	font-size: 1.25rem;
	width: 25px;
	text-align: center;
}

/* ====================
   FOOTER
   ==================== */

/* Footer section - dark background */
.footer-section {
	background: var(--castelli-dark);
	color: white;
	padding: 3rem 0 1rem;
	margin-top: 3rem;
}

.footer-section h5 {
	color: white;
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
}

.footer-section a {
	color: #bbb;
	text-decoration: none;
	transition: color 0.3s;
}

.footer-section a:hover {
	color: var(--castelli-accent);
}

.footer-section ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-section li {
	padding: 0.5rem 0;
	color: #bbb;
}

.footer-section li i {
	color: var(--castelli-accent);
	margin-right: 0.5rem;
	width: 20px;
}

/* Footer bottom with separator and additional information */
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 1.5rem;
	margin-top: 2rem;
	color: #999;
	font-size: 0.95rem;
}

.footer-bottom a {
	margin: 0 1rem;
}

/* ====================
   PAGINATION
   ==================== */

/* Pagination navigation container */
.pagination-nav {
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 2px solid var(--castelli-border);
}

/* Pagination link styling */
.pagination-nav a {
	color: var(--castelli-primary);
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;
	transition: background-color 0.3s, color 0.3s;
	font-weight: 500;
}

.pagination-nav a:hover {
	background-color: var(--castelli-accent);
	color: white;
}

/* ====================
   ACCORDION & TABS
   ==================== */

/* Accordion item styling */
.accordion-item {
	background: white;
	border: 1px solid var(--castelli-border);
	border-radius: 0.5rem;
	overflow: hidden;
}

/* Accordion header styling */
.accordion-header {
	margin: 0;
	background-color: transparent;
}

/* Accordion button styling */
.accordion-button {
	background-color: var(--castelli-light) !important;
	color: var(--castelli-dark) !important;
	font-weight: 600;
	padding: 1rem;
	border: none !important;
	border-radius: 0 !important;
	transition: background-color 0.3s, color 0.3s;
	text-align: left;
	display: flex;
	align-items: center;
}

.accordion-button:hover {
	background-color: rgba(67, 120, 196, 0.15) !important;
}

.accordion-button.collapsed {
	background-color: var(--castelli-light) !important;
}

.accordion-button:not(.collapsed) {
	background-color: var(--castelli-primary) !important;
	color: white !important;
	box-shadow: none !important;
	border-color: transparent !important;
}

.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* Accordion content styling */
.accordion-content {
	padding: 1.5rem;
	color: #333;
	line-height: 1.8;
}

.accordion-content p {
	margin-bottom: 1rem;
}

.accordion-content p:last-child {
	margin-bottom: 0;
}

/* Tabs styling */
.myTab {
	margin-top: 2rem;
}

/* Tab navigation */
.nav-tabs {
	border-bottom: 2px solid var(--castelli-border);
	gap: 0.5rem;
}

/* Tab button styling */
.nav-tabs .nav-link {
	color: var(--castelli-dark) !important;
	background-color: var(--castelli-light);
	border: none !important;
	border-radius: 0.375rem 0.375rem 0 0 !important;
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	transition: background-color 0.3s, color 0.3s;
	text-decoration: none;
}

.nav-tabs .nav-link:hover {
	background-color: rgba(67, 120, 196, 0.15) !important;
	color: var(--castelli-primary) !important;
}

.nav-tabs .nav-link.active {
	background-color: var(--castelli-primary) !important;
	color: white !important;
	border-color: transparent !important;
}

/* Tab pane styling */
.tab-pane {
	padding: 2rem 0;
	color: #333 !important;
	animation: fadeIn 0.3s ease-in;
}

.tab-pane h5 {
	margin-bottom: 1rem;
	font-weight: 700;
}

.tab-pane p {
	margin-bottom: 1rem;
	line-height: 1.8;
}

.tab-pane ul {
	margin-left: 1.5rem;
	margin-bottom: 1rem;
}

.tab-pane ul li {
	margin-bottom: 0.5rem;
	color: #333;
}

.tab-pane strong {
	color: var(--castelli-primary);
	font-weight: 600;
}

/* Tab pane links - orange accent color */
.tab-pane a {
	color: var(--castelli-accent);
	text-decoration: none;
	transition: color 0.3s, text-decoration 0.3s;
}

.tab-pane a:hover {
	color: var(--castelli-primary);
	text-decoration: underline;
}

/* Tab pane fade animation */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ====================
   UTILITY CLASSES
   ==================== */

/* Accent color utility */
.text-accent {
	color: var(--castelli-accent);
}

/* Accent border utility */
.border-accent {
	border-color: var(--castelli-accent) !important;
}

/* Light accent background utility */
.bg-light-accent {
	background-color: rgba(253, 102, 0, 0.05);
}

/* Padding bottom utilities */
.padbot20 {
	padding-bottom: 20px;
}

.padbot30 {
	padding-bottom: 30px;
}

/* ====================
   RESPONSIVE DESIGN
   ==================== */

@media (max-width: 768px) {
	.logo-container {
		gap: 1rem;
	}

	.logo-container h1 {
		font-size: 1.25rem;
	}

	.breadcrumb-content h2 {
		font-size: 1.75rem;
	}

	.breadcrumb-nav {
		flex-wrap: wrap;
	}
}