/* =========================
   BASE + PAGES
   ========================= */

/* Resets */
html, body { margin: 0; padding: 0; height: 100%; }
* { box-sizing: border-box; }

/* ===== Landing page (home) ===== */
body.landing-page { overflow: hidden; }  /* no scroll ONLY here */

/* Hero (image URL is set inline in index.blade.php via asset()) */
.landing-hero{
  min-height: 100svh;   /* safe for mobile UI bars */
  height: 100dvh;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;   /* cover ALL the screen */
  display: grid;
  place-items: center;
  position: relative;
  z-index: 0;              /* header is above */
  margin: 0;
  background-color: #111;  /* fallback if image fails */
}

/* Overlay with your text */
.landing-hero .overlay{
  background: rgba(0,0,0,.45);
  color: #fff;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  text-align: center;
  max-width: 900px;
}

.landing-title{
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 800;
  margin: 0 0 1rem;
}
.landing-sub{
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.values{
  display: grid;
  gap: .4rem;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .02em;
}

/* Prevent default container spacing from interfering */
main { margin: 0; padding: 0; }

/* ===== About page ===== */
.about{
  max-width: 900px;
  margin: 2rem auto;
  line-height: 1.6;
  padding: 0 1rem;
}
.about h1, .about h2{
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #0b0e3a;
  font-weight: 700;
}
.about h1.page-title{
  font-size: 2.2rem;
  text-align: center;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: .5rem;
  margin-top: 0; /* avoid margin-collapse under header */
}
.about ul{ margin: 1rem 0 1rem 1.5rem; padding: 0; }
.about ul li{ margin-bottom: .5rem; }
.about a{ color: #1c4ad8; text-decoration: underline; }
.about a:hover{ text-decoration: none; }
/* About page image sizing */
.about .about-image,
.about .about-flag {          /* works for either class */
  display: block;
  max-width: 420px;           /* 👈 smaller overall width */
  width: 100%;
  height: auto;
  margin: 0 auto 1rem;        /* center it */
  border-radius: 8px;
}

/* (Optional) even smaller on phones */
@media (max-width: 480px) {
  .about .about-image,
  .about .about-flag {
    max-width: 320px;
  }
}

/* (Optional alt): cap height instead of width */
.about .about-image--short {
  width: 100%;
  max-height: 180px;
  object-fit: cover;          /* may crop; use only if you want a short banner look */
  border-radius: 8px;
}
/* Contact page layout */
.contact { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
.contact .page-title {
  font-size: 2rem; font-weight: 800; text-align: center;
  margin: 0 0 1.25rem; color: #0b0e3a;
  border-bottom: 2px solid #e5e7eb; padding-bottom: .5rem;
}
.alert { padding: .75rem 1rem; border-radius: 8px; margin: 0 0 1rem; }
.alert.success { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.alert.error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

.contact-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.contact-form .field { display: grid; gap: .4rem; }
.contact-form .field.full { grid-column: 1 / -1; }

.contact-form label { font-weight: 600; color:#111827; }
.contact-form input, .contact-form textarea {
  border: 1px solid #e5e7eb; border-radius: 8px;
  padding: .65rem .8rem; font: inherit;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: 2px solid #93c5fd; outline-offset: 2px; border-color: #93c5fd;
}
.btn-primary {
  grid-column: 1 / -1; justify-self: start;
  background:#0b0e3a; color:#fff; border:0; border-radius:10px;
  padding:.7rem 1.1rem; cursor:pointer; font-weight:700;
}
.btn-primary:hover { opacity: .95; }
@media (max-width: 720px){
  .contact-form { grid-template-columns: 1fr; }
  .btn-primary { justify-self: stretch; text-align:center; }
}
/* public/css/app.css */
altcha-widget { display:block; min-height:72px; }