/* Studio Legale Bogoni — Color & Theme Overrides */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");

/* --- Base --- */

body {
  background: #ffffff;
}

body,
input,
select,
textarea {
  color: #888888;
  font-family:
    "Montserrat",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

a:hover {
  color: #c78c28;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #172e4e;
}

strong,
b {
  color: #172e4e;
}

/* H1 SEO nascosto ma accessibile */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* h1.major accent line: solid gold */
h1.major:after {
  background-image: none !important;
  background: #c78c28 !important;
}

/* --- Sidebar --- */

#sidebar {
  background: #172e4e;
}

#sidebar .firm-name {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.5em;
  font-weight: bold;
  letter-spacing: 0.3em;
  text-align: right;
  text-transform: uppercase;
  margin-bottom: 2.5em;
  line-height: 1.6;
}

/* Logo immagine nel hero */
.logo-image {
  display: block;
  width: 50vw;
  max-width: 640px;
  height: auto;
  margin-bottom: 1.25em;
}

.logo-picture {
  display: block;
}

@media screen and (max-width: 736px) {
  .logo-image {
    width: 80vw;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

#sidebar nav a:before {
  background: rgba(255, 255, 255, 0.07);
}

#sidebar nav a:after {
  background-image: none;
  background-color: #c78c28;
}

@media screen and (max-width: 1280px) {
  #sidebar nav a:after {
    background-color: #c78c28;
  }
}

/* --- Header (detail pages) --- */

#header {
  background-color: #172e4e;
  text-align: center;
}

/* Header a tutta altezza solo dove serve (logo centrato nel viewport) */
#header.header-logo-viewport {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header .title {
  display: inline-block;
}

#header .title img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 260px;
}

@media screen and (max-width: 736px) {
  #header .title img {
    max-width: 220px;
  }
}

#header > nav > ul > li a {
  color: rgba(255, 255, 255, 0.45);
}

#header > nav > ul > li a:hover {
  color: rgba(255, 255, 255, 0.75);
}

#header > nav > ul > li a.active {
  color: #ffffff;
}

/* --- Wrappers --- */

/* style1 e style1-alt: sfondo chiaro, testo scuro */
.wrapper.style1 {
  background-color: #ffffff;
}

.wrapper.style1-alt {
  background-color: #f5f5f5;
}

/* style2: clean white (spotlights section) */
.wrapper.style2 {
  background-color: #ffffff;
}

.wrapper.style2-alt {
  background-color: #f5f5f5;
}

.wrapper.style2,
.wrapper.style2-alt {
  color: #888888;
}

.wrapper.style2 h1,
.wrapper.style2 h2,
.wrapper.style2 h3,
.wrapper.style2 h4,
.wrapper.style2 h5,
.wrapper.style2 h6,
.wrapper.style2-alt h1,
.wrapper.style2-alt h2,
.wrapper.style2-alt h3 {
  color: #172e4e;
}

.wrapper.style2 a,
.wrapper.style2-alt a {
  border-bottom-color: rgba(23, 46, 78, 0.2);
  color: #172e4e;
}

.wrapper.style2 a:hover,
.wrapper.style2-alt a:hover {
  border-bottom-color: transparent;
  color: #c78c28;
}

.wrapper.style2 strong,
.wrapper.style2 b,
.wrapper.style2-alt strong,
.wrapper.style2-alt b {
  color: #172e4e;
}

/* style3: warm light gray (features section) */
.wrapper.style3 {
  background-color: #f8f8f8;
}

.wrapper.style3-alt {
  background-color: #f0f0f0;
}

.wrapper.style3,
.wrapper.style3-alt {
  color: #888888;
}

.wrapper.style3 h1,
.wrapper.style3 h2,
.wrapper.style3 h3,
.wrapper.style3 h4,
.wrapper.style3 h5,
.wrapper.style3 h6,
.wrapper.style3-alt h1,
.wrapper.style3-alt h2,
.wrapper.style3-alt h3 {
  color: #172e4e;
}

.wrapper.style3 a,
.wrapper.style3-alt a {
  border-bottom-color: rgba(23, 46, 78, 0.2);
  color: #172e4e;
}

.wrapper.style3 a:hover,
.wrapper.style3-alt a:hover {
  border-bottom-color: transparent;
  color: #c78c28;
}

.wrapper.style3 strong,
.wrapper.style3 b,
.wrapper.style3-alt strong,
.wrapper.style3-alt b {
  color: #172e4e;
}

/* --- Intro background pattern (reticolo grigio chiaro) --- */

#intro {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* alt (footer) */
.wrapper.alt {
  background-color: #0d1e30;
}

/* --- Buttons: gold accent --- */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
  border-color: rgba(199, 140, 40, 0.5) !important;
  color: #c78c28 !important;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
  border-color: #c78c28 !important;
}

input[type="submit"]:hover:active,
input[type="reset"]:hover:active,
input[type="button"]:hover:active,
button:hover:active,
.button:hover:active {
  border-color: #c78c28 !important;
}

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
  background-color: #c78c28;
  border-color: #c78c28 !important;
  color: #ffffff !important;
}

/* --- Feature grid: dark borders on light bg --- */

.features {
  border-color: rgba(23, 46, 78, 0.1);
  background: rgba(23, 46, 78, 0.03);
}

.features section {
  border-top-color: rgba(23, 46, 78, 0.1);
}

.features section:nth-child(2n) {
  border-left-color: rgba(23, 46, 78, 0.1);
}

/* --- Icon.major circles: gold --- */

.icon.major {
  background: #c78c28;
  color: #ffffff;
}

.wrapper.style1 .icon.major:before,
.wrapper.style1-alt .icon.major:before,
.wrapper.style2 .icon.major:before,
.wrapper.style2-alt .icon.major:before,
.wrapper.style3 .icon.major:before,
.wrapper.style3-alt .icon.major:before {
  color: #ffffff;
}

/* --- Spotlights: image hover overlay dark navy --- */

.spotlights > section > .image:before {
  background: rgba(23, 46, 78, 0.9);
}

/* --- Hours grid (inside contact section) --- */

.hours-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 2.5em;
  row-gap: 0.45em;
  margin-bottom: 3em;
  font-size: 0.85em;
}

.hours-grid .day {
  color: #172e4e;
  font-weight: bold;
}

.hours-grid .time {
  color: #888888;
}

/* Indirizzo e telefono con stessa dimensione degli orari */
.contact-line {
  font-size: 0.85em;
}

/* Form contatti: label, input e textarea in blu scuro */
#three .fields label {
  color: #172e4e;
  text-align: left;
}

#three .fields input[type="text"],
#three .fields input[type="email"],
#three .fields textarea {
  color: #172e4e;
  border-color: rgba(23, 46, 78, 0.4);
}

/* Form contatti: label a sinistra, azioni su una riga */
#three form {
  text-align: left;
}

#three .form-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  flex-wrap: wrap;
}

#three .form-actions-row [data-netlify-recaptcha="true"] {
  display: block;
}

#three .form-actions-row ul.actions {
  margin: 0;
  -moz-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end;
}

@media screen and (max-width: 736px) {
  #three .form-actions-row {
    justify-content: center;
  }
}

/* --- Google Maps embed --- */

.map-embed {
  margin-bottom: 3em;
  line-height: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.map-embed iframe {
  width: 100%;
  height: 360px;
  border: none;
  display: block;
}

/* --- Footer menu text --- */

#footer > .inner .menu {
  color: rgba(255, 255, 255, 0.25);
}

/* --- Detail page: main section on white bg --- */

#main.wrapper {
  background-color: #ffffff;
}

#main.wrapper h1,
#main.wrapper h2,
#main.wrapper h3 {
  color: #172e4e;
}

#main.wrapper {
  color: #888888;
}

#main.wrapper a {
  border-bottom-color: rgba(23, 46, 78, 0.2);
  color: #172e4e;
}

#main.wrapper a:hover {
  color: #c78c28;
}

#main.wrapper strong,
#main.wrapper b {
  color: #172e4e;
}

/* --- Pagina Chi Siamo: foto profilo --- */

#main.wrapper .profile-layout {
  display: flex;
  align-items: flex-start;
  gap: 2em;
}

#main.wrapper .about-photo {
  display: block;
  flex: 0 0 30%;
  text-align: left;
  margin: 0;
}

#main.wrapper .about-photo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 80px;
}

#main.wrapper .profile-text {
  flex: 1 1 auto;
  text-align: left;
}

@media screen and (max-width: 980px) {
  #main.wrapper .profile-layout {
    flex-direction: column;
  }

  #main.wrapper .about-photo {
    flex-basis: auto;
    width: 100%;
    max-width: 360px;
    margin-bottom: 1.25em;
  }
}