@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@700&display=swap');

:root {
  --bd-color-primary: #ee2b7c;
  --bd-color-primary-rgb: 238,43,124;
  --bd-color-text: #ffffff;
  --bd-color-text-muted: #94A3B8;
  --bd-color-text-body: #CBD5E1;
  --bd-color-bg: #000;
  --bd-color-bg-darker: #020617;
  --bd-color-footer: #221018;
  --bd-color-border: rgba(255, 255, 255, 0.1);
  --bd-color-card: rgba(15,23,42,.5);
  --bd-color-card-stroke: #1E293B;
  --bd-color-input: 30, 41, 59, .5;
  
  /* Typography Variables */
  --bd-font-sans: 'Montserrat', sans-serif;
  --bd-font-accent: 'Space Grotesk', sans-serif;
  
  /* Hover shadow */
  --bd-box-shadow-hover: 0 0 50px -10px rgba(var(--bd-color-primary-rgb),.75);

  /* Transition */
  --bd-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Section images */
  --bd-img-progettazione: '../images/progettazione.png';
  --bd-img-sviluppo: '../images/sviluppo.png';
  --bd-img-fotografia: '../images/fotografia.png';
}

html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

[data-bs-theme="dark"] body {
  background-color: var(--bd-color-bg);
  color: var(--bd-color-text);
}

body {
  font-family: var(--bd-font-sans);
  background-color: var(--bd-color-bg);
  color: var(--bd-color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a, button {
	transition: var(--bd-transition);
}

h1, h2, h3, h4, h5, h6,
.text-hero,
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6  {
  /*font-family: var(--bd-font-sans);*/
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  color: var(--bd-color-text);
}

/* Typography Utility Classes */
.font-accent { font-family: var(--bd-font-accent) !important; }

.hero-section {
	padding-top: 80px;
}
.text-hero {
  font-size: clamp(3.5rem, 8vw, 8rem);
  white-space: pre-line;
}
.text-lead {
	font-size: 1.5rem;
  white-space: pre-line;
}
/*
.text-h1 {
  font-size: clamp(2.5rem, 7vw, 6rem);
}
*/
.text-h2 {
  font-size: clamp(3rem, 6vw, 6rem);
  white-space: pre-line;
}

.text-h3 {
  font-size: clamp(2.75rem, 5vw, 4rem);
  white-space: pre-line;
}

.text-h4,
.text-quote {
  font-size: clamp(2rem, 4vw, 3rem);
  white-space: pre-line;
}

.text-h5 {
  font-size: clamp(1.75rem, 3vw, 2rem);
  line-height: 1.2;
  white-space: pre-line;
}

.text-h6 {
  font-size: clamp(1.5rem, 2vw, 1.5rem);
  line-height: 1.2;
  white-space: pre-line;
}

.text-body {
  font-size: clamp(1rem, 3vw, 1.125rem); /*1.125rem;*/
  line-height: 1.75;
  color: var(--bd-color-text-body) !important;
  white-space: pre-line;
}

.text-small {
  font-family: var(--bd-font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bd-color-primary);
}

/* =======================================
   Color Utility Classes
   ======================================= */
.text-primary-accent {
  color: var(--bd-color-primary) !important;
}

.bg-primary-accent {
  background-color: var(--bd-color-primary) !important;
}

.bg-darker {
  background-color: var(--bd-color-bg-darker) !important;
}

.bg-default-1 {
	background: #2F121E;
	background: radial-gradient(ellipse,rgba(47, 18, 30, 1) 0%, rgba(0, 0, 0, 1) 90%);
}
.bg-default-2 {
	background: #222;
	background: radial-gradient(ellipse,rgba(50,50,50, 1) 0%, rgba(0, 0, 0, 1) 65%);
}
.bg-linear-h {
	background: #1B0D13;
	background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(27, 13, 19, 1) 50%);
}
.bg-footer {
	background: var(--bd-color-footer);
}

/* =======================================
   Components
   ======================================= */
/* Buttons */
.btn-bd-primary {
  background-color: var(--bd-color-primary);
  color: var(--bd-color-text);
  border: none;
  border-radius: 0.75rem;
  padding: clamp(1rem, 1.5vw + 0.5rem, 1.5rem) clamp(1.5rem, 4vw + 0.75rem, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.125em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-bd-primary::after {
	content: '';
	background: url('../images/link-arrow.svg');
	width: 1rem;
	height: 1rem;
	margin-left: 1.5rem
}
.btn-bd-primary:hover,
.btn-bd-primary:focus {
  /*background-color: #d11e64; /* Slightly darker pink */
  box-shadow: var(--bd-box-shadow-hover);
  color: var(--bd-color-text);
}

/* Link Component */
.btn-bd-link {
  background-color: none;
  color: var(--bd-color-text);
  border: none;
  padding: clamp(1rem, 1.5vw + 0.5rem, 1.5rem) 0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.125em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.btn-bd-link::after {
	content: '';
	background: url('../images/link-arrow.svg');
	width: 1rem;
	height: 1rem;
	margin-left: 1rem
}
.btn-bd-link:hover,
.btn-bd-link:hover {
  opacity: .6;
}

.btn-bd-secondary {
	display: inline-block;
	background: rgba(var(--bd-color-input));
	color: var(--bd-color-text);
	padding: clamp(1rem, 1.5vw + 0.5rem, 1.5rem);
	border-radius: 0.75rem;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.125em;
}
.btn-bd-secondary:hover {
	box-shadow: var(--bd-box-shadow-hover);
}

/* =======================================
   Layout Utilities
   ======================================= */
.py-section {
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

.m-128 { margin: 8rem; }
.mx-128 { margin-left: 8rem; margin-right: 8rem; }
.my-128 { margin-top: 8rem; margin-bottom: 8rem; }
.ms-128 { margin-left: 8rem; }
.me-128 { margin-right: 8rem; }
.mt-128 { margin-top: 8rem; }
.mb-128 { margin-bottom: 8rem; }

.m-96 { margin: 6rem; }
.mx-96 { margin-left: 6rem; margin-right: 6rem; }
.my-96 { margin-top: 6rem; margin-bottom: 6rem; }
.ms-96 { margin-left: 6rem; }
.me-96 { margin-right: 6rem; }
.mt-96 { margin-top: 6rem; }
.mb-96 { margin-bottom: 6rem; }

.p-128 { padding: 8rem; }
.px-128 { padding-left: 8rem; padding-right: 8rem; }
.py-128 { padding-top: 8rem; padding-bottom: 8rem; }
.ps-128 { padding-left: 8rem; }
.pe-128 { padding-right: 8rem; }
.pt-128 { padding-top: 8rem; }
.pb-128 { padding-bottom: 8rem; }

.p-96 { padding: 6rem; }
.px-96 { padding-left: 6rem; padding-right: 6rem; }
.py-96 { padding-top: 6rem; padding-bottom: 6rem; }
.ps-96 { padding-left: 6rem; }
.pe-96 { padding-right: 6rem; }
.pt-96 { padding-top: 6rem; }
.pb-96 { padding-bottom: 6rem; }

.bd-border-radius { border-radius: 1.5rem; }
.bd-border-box { border: 1px solid var(--bd-color-card-stroke); }

/* Container customizations to extend max-width for ultra-wide screens if needed */
@media (min-width: 1400px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
.container-fluid.limited {
	max-width: 1920px;
}

.container.w-md {
	max-width: 960px;
}
.w-xl {
	max-width: 1600px;
}

/* Header Navbar */
.navbar-toggler { border: none; }
.bd-navbar {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(24px);
  padding: 0.75rem 0;
  text-align: center;
  width: 100%;
}
@media (min-width: 1200px) {
	.bd-navbar {
		max-height: 80px;
		text-align: left;
	}
}

.bd-navbar .nav-link {
  color: var(--bd-color-text-muted);
  font-weight: 700;
  font-family: var(--bd-font-sans);
  text-transform: uppercase;
  font-size: clamp(0.875rem, 1.10vw, 1rem);
  letter-spacing: 0.1em;
  transition: color var(--bd-transition);
  margin: 0 0.75rem;
  padding: 0.75rem 0;
}

.bd-navbar .nav-link:hover,
.bd-navbar .nav-link.active {
  color: var(--bd-color-text);
}

/* Footer - Base Styling for future PHP include */
.bd-footer {
  border-top: 1px solid var(--bd-color-border);
  letter-spacing: 0.125rem;
}

/*ELEMENTS*/
.bd-divider {
  background-color: var(--bd-color-primary);
  width: 3rem;
  height: 1px;
}
.bd-scroll-button-container {
	display: flex;
	gap: 1.5rem
}
.bd-scroll-button-container > a {
	display: flex;
	justify-content: center;
    align-items: center;
	background-color: var(--bd-color-card-stroke);
	width: 4rem;
	height: 4rem;
	border-radius: 0.75rem;
}
.bd-scroll-button-container > a:hover {
	box-shadow: var(--bd-box-shadow-hover);
}
.bd-card-container-scroll {
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
    overflow: visible;
    padding-bottom: 2rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (min-width: 768px) {
    .bd-card-container-scroll {
        gap: 3rem;
        padding-bottom: 0;
    }
}
.bd-card {
    transition: 0.3s ease;
	border: 1px solid var(--bd-color-card-stroke);
	border-radius: 1.5rem;
	background-color: var(--bd-color-card);
	background-position: center;
	background-size: cover;
	padding: 3rem;
	min-height: 450px;
	text-decoration: none;
}
.bd-card-container-scroll .bd-card {
	width: calc(100% - 48px);
    flex: 0 0 calc(100% - 48px);
    scroll-snap-align: center;
	padding: 3rem 2rem 6rem;
}

@media (min-width: 768px) {
    .bd-card-container-scroll .bd-card {
        width: 424px;
        flex: 0 0 424px;
    }
}
.bd-card-progettazione {
	background-image: url('../images/chi-sono-progettazione.png');
}
.bd-card-sviluppo {
	background-image: url('../images/chi-sono-sviluppo.png');
}
.bd-card-fotografia {
	background-image: url('../images/chi-sono-fotografia.png');
}
a.bd-card:hover {
	box-shadow: var(--bd-box-shadow-hover);
}

/*AREA 50/50w*/
.bd-split-section {
	position: relative;
	background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .7) 50%), var(--bd-split-image) no-repeat right center / auto 100%;
}
@media (min-width: 992px) {
	.bd-split-section {
		background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(27, 13, 19, 1) 50%);
	}
	.bd-split-section .col::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right:0;
		left: 50%;
		background: var(--bd-split-image) no-repeat left center / cover;
	}
}
.page-progettazione .bd-split-section {
    --bd-split-image: url(../images/progettazione.png);
}
.page-sviluppo .bd-split-section {
    --bd-split-image: url(../images/sviluppo.png);
}
.page-fotografia .bd-split-section {
    --bd-split-image: url(../images/fotografia.png);
}

/*AREA 100w*/
.bg-full-section {
	background: var(--bd-split-image) no-repeat center / cover;
}
.page-progettazione .bg-full-section {
    --bd-split-image: url(../images/progettazione-full.png);
}
.page-sviluppo .bg-full-section {
    --bd-split-image: url(../images/sviluppo-full.png);
}
.page-fotografia .bg-full-section {
    --bd-split-image: url(../images/fotografia-full.png);
}

/*FORM*/
form#sendemail label {
	color: var(--bd-color-text-muted);
	text-transform: uppercase;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.18rem;
}
form#sendemail input,
form#sendemail textarea,
form#sendemail select {
	background: rgba(var(--bd-color-input));
	border: none;
	padding: 1rem;
	font-size: 1rem;
}

form#sendemail textarea {
	min-height: 152px;
}

/* Honeypot Hidden Class */
.bd-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}