/* Cervello Elettrico — site personalizations. Layered on top of w3.css. */

/* Landing placeholder — centered logo */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px ;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ce-link {
  display: flex;        /* hug the logo, no baseline gap */
  flex: 0 0 auto;       /* never grow or shrink in the navbar flex row */
  align-items: center;
  text-decoration: none;
  color: inherit;
  outline: none;
}

#ce-text {
  height: 40px;
  width: auto;
  max-width: 60vw;      /* small-screen cap, relative to viewport not the anchor */
}

#hamburger-menu {
  height: 40px;
  cursor: pointer;
}

/* anchor the dropdown to the navbar's right edge, not off-screen */
#nav-menu {
  right: 0;
}

#content-background {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 70px;
  padding-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#content {
  width: 100%;
  max-width: 1500px;
  margin: auto;
}

.ce-hero {
  display: block;
  margin: 0 auto;        /* centre within the now full-width #content */
  width: calc(100vw - 4rem);
  max-width: 900px;
  height: auto;
  margin-bottom: 50px;
}

/* card grid — 3 per row now; bump the repeat() count when cards are added */
.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}

@media (max-width: 992px) {   /* W3.CSS medium and below */
  .card-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {   /* W3.CSS small */
  .card-row { grid-template-columns: 1fr; }
}

/* card links in the content grid — distinct from .ce-link (navbar logo) */
.card-link {
  display: flex;               /* let the card fill the grid cell */
  text-decoration: none;
  color: inherit;
}

.card-link > .w3-card {
  flex: 1;                     /* equal height + full width across a row */
}

/* Typography. Plain sans-serif everywhere (w3.css defaults to Verdana for
   body and "Segoe UI"/Arial for headings). */
body,
h1, h2, h3, h4, h5, h6 {
  font-family: sans-serif;
}

.page-title {
  margin-top: 0;
}

/* Desktop: the w3.css sizes read small on wide screens. Bump body copy to
   ~w3-large (18px) and scale the content headings to match. Mobile and
   tablet keep the w3.css defaults. */
@media (min-width: 993px) {   /* W3.CSS large breakpoint */
  #content            { font-size: 18px; }
  #content h1,
  .page-title         { font-size: 45px; }
  #content h2          { font-size: 37px; }
  #content h3          { font-size: 30px; }
  #content h4          { font-size: 25px; }
  #content h5          { font-size: 22px; }
  #content h6          { font-size: 20px; }
}

/* Contact form (contatti.html). box-sizing:border-box and font:inherit on
   controls both come from w3.css already. */
.ce-form {
  max-width: 700px;
  padding: 20px;
  border-radius: 5px;
  background-color: #f2f2f2;
}

.ce-form-group {
  margin-bottom: 16px;
}

.ce-form-label {
  display: block;
  margin-bottom: 6px;
}

.ce-form-required {
  color: #d32f2f;
}

.ce-form-input,
.ce-form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.ce-form-textarea {
  min-height: 140px;
  resize: vertical;
}

.ce-form-submit {
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  background-color: #04aa6d;
  color: #fff;
  cursor: pointer;
}

.ce-form-submit:hover {
  background-color: #45a049;
}