/* ==========================================================================
   Jellyband – static site
   ========================================================================== */

/* --- Local font: Anton -------------------------------------------------- */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton/anton-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton/anton-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/anton/anton-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309,
    U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* --- Reset & base -------------------------------------------------------- */

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

body {
  margin: 0;
  color: #3c3e3f;
  font: 13px/1.7 Georgia, 'Times New Roman', serif;
  background: #fff;
  min-width: 1024px;
}

img { max-width: 100%; height: auto; display: block; }

a { color: #3c3e3f; text-decoration: none; }
a:hover { color: #dd5c1a; }

ul { list-style: none; margin: 0; padding: 0; }
h1 { margin: 0; font-weight: normal; }
p { margin: 0 0 16px; }

/* --- Header ------------------------------------------------------------- */

#header {
  height: 105px;
  position: relative;
  border-top: 2px solid #dd5c1a;
}

.header-inner {
  max-width: 1008px;
  margin: 0 auto;
  position: relative;
  height: 100%;
  padding: 0 16px;
}

.logo {
  position: absolute;
  left: 16px;
  top: 28px;
}

#nav {
  position: absolute;
  right: 16px;
  top: 0;
  display: flex;
  gap: 36px;
}

#nav li { padding-top: 41px; }

#nav a {
  font-family: 'Anton', Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 22px;
  font-weight: 400; /* Anton is inherently heavy */
  text-transform: uppercase;
  color: #141618;
  letter-spacing: 0.5px;
}

#nav a:hover { color: #dd5c1a; }

/* --- Slideshow ---------------------------------------------------------- */

.slider-section {
  margin-bottom: 40px;
}

/* no max-width — slider is truly full viewport width */
.slider-wrap {
  width: 100%;
}

.slider {
  position: relative;
  overflow: hidden;
  line-height: 0; /* prevent gap below inline images */
  width: 100%;
}

.slides {
  display: flex;
  transition: transform 0.55s ease-in-out;
  will-change: transform;
  /* width must equal slider width so percentage translate is correct */
  width: 100%;
}

/* Each slide is exactly one slider-width wide — flex: 0 0 100% is reliable
   where min-width: 100% can be misinterpreted inside a flex container */
.slide {
  flex: 0 0 100%;
  width: 100%;
}

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

/* Prev / next arrows */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  border: none;
  width: 44px;
  height: 64px;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  z-index: 10;
  transition: background 0.2s;
}

.slider-btn:hover { background: rgba(0, 0, 0, 0.58); }
.slider-btn.prev { left: 0; }
.slider-btn.next { right: 0; }

/* Dot indicators — absolutely positioned over the bottom of the image */
.slider-dots {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
  line-height: 1;
}

.dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.85);
  margin: 0 4px;
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
  transition: background 0.2s, border-color 0.2s;
}

.dot.active {
  background: rgba(255, 255, 255, 0.95);
  border-color: #fff;
}

/* --- Content blocks ----------------------------------------------------- */

.items-holder {
  max-width: 1008px;
  margin: 0 auto 56px;
  display: flex;
  padding: 0 8px;
}

.item-block {
  flex: 1;
  padding: 0 16px;
}

.widget-title {
  font-family: 'Anton', Arial, Helvetica, sans-serif;
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  color: #141618;
  margin: 0 0 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid #d0cec4;
}

.item-block > p {
  font: 13px/22px Georgia, serif;
  color: #3c3e3f;
  margin: 0 0 20px;
}

.item-block iframe {
  border: none;
}

/* --- Button ------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: linear-gradient(to bottom, #8e8c86 0%, #737169 100%);
  color: #f4f2e7;
  border: 1px solid #5e5c58;
  border-top-color: #9a9892;
  padding: 0 16px;
  height: 36px;
  line-height: 36px;
  border-radius: 3px;
  text-transform: uppercase;
  font: bold 11px/36px Arial, sans-serif;
  letter-spacing: 1.5px;
}

.btn:hover {
  background: linear-gradient(to bottom, #9e9c96 0%, #838179 100%);
  color: #f4f2e7;
}

/* --- Social block ------------------------------------------------------- */

#main {
  max-width: 978px;
  margin: 0 auto 52px;
  padding: 0 16px;
}

.social-block {
  background: #a8a59c;
  border-radius: 3px;
  border: 1px solid #9b9990;
  padding: 40px 20px;
  display: flex;
  align-items: center;
}

/* Both halves sit side by side */
.social-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Shared caption style: bold sans, mixed case, dark text with white emboss */
.caption {
  font: bold 22px/54px Arial, Helvetica, sans-serif;
  color: #444;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
  margin-right:12px;
}

/* Circular social icons */
.soc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.soc-icon:hover { opacity: 0.82; }
.soc-fb { background: #3b5998; }
.soc-yt { background: #cc0000; }

/* Right half: inline label + button with <br> between rows.
   The 54px line-height on .caption keeps each pair on one line. */
.email-signup {
  text-align: center;
}

.email-signup .btn {
  vertical-align: middle;
}

/* --- Footer ------------------------------------------------------------- */

.footer-holder {
  background-color: #272727;
  padding: 58px 0 0;
}

#footer {
  max-width: 978px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

.footer-top {
  border-bottom: 1px solid #3d3b33;
  margin-bottom: 18px;
  padding-bottom: 18px;
}

.footer-tagline {
  font: 13px/24px Georgia, serif;
  color: #dcdbd0;
  margin: 0;
}

.footer-nav {
  display: flex;
  gap: 28px;
  margin-bottom: 14px;
}

.footer-nav a {
  font: 13px/16px Georgia, serif;
  color: #a19f95;
}

.footer-nav a:hover { color: #dcdbd0; }

.copy {
  font: 13px/16px Arial, Helvetica, sans-serif;
  color: #a19f95;
  margin: 0;
}