/* ============================================================
   Amigos 2025 — main.css
   Faithful port of the original Headway live CSS
   ============================================================ */

:root {
  --nav-height: 120px;
  --logo-bar-height: 160px;
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  background: #fff;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

/* ---- Custom font ---- */
@font-face {
  font-family: 'king_cool_kcregular';
  src: url('../fonts/king_cool_kc-webfont.eot');
  src: url('../fonts/king_cool_kc-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/king_cool_kc-webfont.woff') format('woff'),
       url('../fonts/king_cool_kc-webfont.ttf') format('truetype'),
       url('../fonts/king_cool_kc-webfont.svg#king_cool_kcregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* ---- Typography ---- */
body { font-family: 'Open Sans', sans-serif; }
h1, h2 { font-family: 'king_cool_kcregular'; color: white; font-weight: normal; }
h4 { font-family: 'king_cool_kcregular'; font-weight: normal; }

/* ---- Links ---- */
a { text-decoration: none; }
.section-block a { color: white; }

/* ---- Section boxes ---- */
.section-block {
  padding-top: 5%;
  padding-bottom: 200px;
  min-height: calc(100vh - var(--nav-height) - var(--logo-bar-height) - 20px);
  padding-left: 15%;
  padding-right: 15%;
  color: #fff;
}

.red-box    { background: url('/wp-content/uploads/2012/12/red-bg.jpg') no-repeat center bottom #BA1827; background-size: cover; }
.orange-box { background: url('/wp-content/uploads/2012/12/orange-bg.jpg') no-repeat center bottom #DB6612; background-size: cover; }
.blue-box   { background: url('/wp-content/uploads/2012/12/blue-bg.jpg') no-repeat center bottom #2B80A5; background-size: cover; }
.yellow-box { background: url('/wp-content/uploads/2012/12/yellow-bg.jpg') no-repeat center bottom #DCB305; background-size: cover; }
.green-box  { background: url('/wp-content/uploads/2012/12/green-bg.jpg') no-repeat center bottom #77912B; background-size: cover; }
.pink-box   { background: url('/wp-content/uploads/2012/12/pink-bg.jpg') no-repeat center bottom #E61D4C; background-size: cover; }

/* Section headings */
.red-box h1,    .orange-box h1, .blue-box h1,
.yellow-box h1, .green-box h1,  .pink-box h1 {
  margin: 0 !important;
}
.red-box h2,    .orange-box h2, .blue-box h2,
.yellow-box h2, .green-box h2,  .pink-box h2 {
  margin: 0 !important;
  line-height: 150%;
}

/* ---- Nav bar (layer 1 — bottom, z-index 200) ---- */
.site-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--nav-height);
}

.site-nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  border-top: 2px solid white;
}

.site-nav .menu li {
  flex: 1;
  display: flex;
  align-items: stretch;
}

.site-nav .menu li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: 3% 0;
  color: white;
  text-decoration: none;
}

.site-nav .menu li a h4 {
  margin: 0;
  padding: 0;
  color: white;
  width: 100%;
  text-align: center;
}

.menu-red    { background: #BA1827; }
.menu-orange { background: #DB6612; }
.menu-blue   { background: #2B80A5; }
.menu-yellow { background: #DCB305; }
.menu-green  { background: #77912B; }
.menu-pink   { background: #E61D4C; }

/* ---- Logo / header bar (layer 2 — sits above nav) ---- */
.site-logo-bar {
  position: fixed;
  bottom: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 199;
  background: white;
  padding: 20px 0;
}

.floating-header { padding: 0 15%; }

.logo-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo-left {
  display: flex;
  flex-direction: column;
}

.logo-right {
  display: flex;
  align-items: center;
}

.logo-container img {
  transition: transform 0.2s ease-in-out;
}
.logo-container img:hover { transform: translateY(-5px); }

#amigos {
  display: block;
  font-family: 'king_cool_kcregular';
  line-height: 100%;
  margin: 0;
}

#multi {
  display: block;
  font-family: 'king_cool_kcregular';
  color: #3C3C3B;
  line-height: 100%;
  margin: 0;
  padding-bottom: 4px;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.social-icons img {
  width: 24px;
  height: 24px;
}

/* ---- Copyright bar (layer 3 — behind nav, same bottom:0) ---- */
.site-copyright {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 198;
  border-top: 4px solid white;
  background: #333;
  color: white;
  font-size: 11px;
  padding: 8px 15px;
}

.site-copyright p { margin: 0; }

/* ---- Main content — clears fixed bottom bars ---- */
.site-main {
  padding-bottom: calc(var(--nav-height) + var(--logo-bar-height) + 20px);
}

.site-main.front-page {
  padding-bottom: calc(var(--nav-height) + var(--logo-bar-height) + 20px);
}

/* ---- Contact form layout ---- */
.half { width: 47%; float: left; padding-right: 3%; }
.half input { width: 100%; }
.full { padding-right: 3%; }
.full textarea { width: 100%; height: 90px; }

input[type="submit"],
button {
  background: none;
  color: #fff;
  font-size: 30px;
  font-family: 'king_cool_kcregular';
  padding: 0;
  border: none;
  cursor: pointer;
}

/* ============================================================
   Hero Slider
   ============================================================ */
.amigos-slider {
  position: relative;
  width: 100%;
  height: 750px;
  overflow: hidden;
  background: #111;
}

.amigos-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.amigos-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.amigos-slide--active {
  opacity: 1;
}

.amigos-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dot indicators */
.amigos-slider__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.amigos-slider__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

.amigos-slider__dot--active {
  background: white;
}