/* Mobile overrides for ~390x844 (e.g., iPhone 12/13/14/15 baseline) */
/* ==========================
   FlipClock: Auto-responsive
   ========================== */

/* Base: make FlipClock behave as a centered, scalable block */
/* Prevent FlipClock labels from overlapping content above */
.flipTimebox{
  /* create a buffer area for the absolute-positioned labels */
  padding-top: 28px;            /* reserves space for "Days / Hours / ..." */
  margin-top: 16px;             /* separates from the poem <h2> */
}

/* Make divider a positioning context (labels stay inside the clock zone) */
.flipTimebox .clock.clock-fix.flip-clock-wrapper > span.flip-clock-divider{
  position: relative !important;
}

/* Place labels within the reserved padding area */
.flipTimebox .clock.clock-fix.flip-clock-wrapper
> span.flip-clock-divider > span.flip-clock-label{
  top: -24px !important;        /* sits inside padding-top space */
}

.flipTimebox{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

/* Your wrapper element is the clock itself */
.flipTimebox .clock.clock-fix.flip-clock-wrapper{
  /* stop float-based layout issues */
  float: none !important;
  margin: 0 auto !important;

  /* center content */
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;

  /* keep as a single unit */
  width: max-content !important;
  max-width: 100% !important;

  /* scale control */
  --flipclock-scale: 1;
  transform: scale(var(--flipclock-scale));
  transform-origin: center top;
}

/* Remove floats from direct children so flex layout is stable */
.flipTimebox .clock.clock-fix.flip-clock-wrapper > ul,
.flipTimebox .clock.clock-fix.flip-clock-wrapper > span.flip-clock-divider{
  float: none !important;
}

/* Keep labels centered above their divider (prevents drifting) */
.flipTimebox .clock.clock-fix.flip-clock-wrapper
> span.flip-clock-divider{
  position: relative !important;
}

.flipTimebox .clock.clock-fix.flip-clock-wrapper
> span.flip-clock-divider > span.flip-clock-label{
  position: absolute !important;
  top: -22px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Center the dots inside the divider */
.flipTimebox .clock.clock-fix.flip-clock-wrapper
> span.flip-clock-divider > span.flip-clock-dot{
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ==========================
   Adaptive scaling by width
   (tune if you want bigger/smaller)
   ========================== */

/* Large screens: normal size */
@media (min-width: 1200px){
  .flipTimebox .clock.clock-fix.flip-clock-wrapper{ --flipclock-scale: 1; }
}

/* Typical laptop/tablet landscape */
@media (max-width: 1199px){
  .flipTimebox .clock.clock-fix.flip-clock-wrapper{ --flipclock-scale: 0.95; }
}

/* Tablet portrait / large phones */
@media (max-width: 900px){
  .flipTimebox .clock.clock-fix.flip-clock-wrapper{ --flipclock-scale: 0.90; }
}

/* Phones (most common) */
@media (max-width: 600px){
  .flipTimebox .clock.clock-fix.flip-clock-wrapper{ --flipclock-scale: 0.82; }
}

/* Small phones */
@media (max-width: 420px){
  .flipTimebox .clock.clock-fix.flip-clock-wrapper{ --flipclock-scale: 0.76; }
}

/* Very small devices */
@media (max-width: 360px){
  .flipTimebox .clock.clock-fix.flip-clock-wrapper{ --flipclock-scale: 0.70; }
}

@media (max-width: 420px) {

  /* Global spacing */
  html, body { overflow-x: hidden; }
  body { font-size: 16px; line-height: 1.5; }
  .container, .container-fluid { padding-left: 16px; padding-right: 16px; }

  /* Images & embeds */
  img, video, iframe { max-width: 100%; height: auto; }

  /* Sections: reduce vertical padding */
  section, .fh5co-section, .fh5co-cover, .fh5co-bg { padding-top: 48px; padding-bottom: 48px; }

  /* Hero/cover: prevent text overflow */
  .fh5co-cover { min-height: 720px; height: auto; }
  .fh5co-cover .display-tc,
  .fh5co-cover .display-tc2 { padding: 0 8px; }

  /* Typical template hero headings */
  .fh5co-cover h1,
  .fh5co-cover .display-tc h1 { font-size: 40px; line-height: 1.1; word-break: break-word; }
  .fh5co-cover h2,
  .fh5co-cover .display-tc h2 { font-size: 18px; line-height: 1.3; }

  /* Countdown blocks (common in these templates) */
  .simply-countdown > .simply-section,
  .countdown li {
    width: 70px !important;
    height: 70px !important;
    margin: 6px !important;
  }
  .simply-countdown > .simply-section .simply-amount,
  .countdown li span {
    font-size: 22px !important;
  }
  .simply-countdown > .simply-section .simply-word,
  .countdown li p {
    font-size: 11px !important;
  }

  /* Buttons: increase touch friendliness */
  .btn, button, input[type="submit"] {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 16px;
  }

  /* Navbar: avoid horizontal overflow */
  .navbar, .fh5co-nav { padding-left: 0; padding-right: 0; }
  .fh5co-nav ul { padding-left: 0; }
  .fh5co-nav .menu-1 ul li { margin-left: 10px; }

  /* If using Bootstrap navbar collapse, ensure it fits */
  .navbar-collapse { max-height: 70vh; overflow-y: auto; }

  /* Event cards / text blocks */
  .fh5co-event, .fh5co-heading, .feature-left, .feature-right {
    text-align: left;
  }
  .fh5co-heading h2 { font-size: 28px; }
  .fh5co-heading p { font-size: 15px; }

  /* Gallery: force 1 column (or 2 if you prefer) */
  .fh5co-gallery,
  .gallery,
  .row { margin-left: -8px; margin-right: -8px; }
  .fh5co-gallery .col-md-3,
  .fh5co-gallery .col-md-4,
  .fh5co-gallery .col-sm-6,
  .gallery .col-md-3,
  .gallery .col-md-4,
  .gallery .col-sm-6 {
    width: 100% !important;
    float: none !important;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Fix common “fixed background” jank on iOS */
  .fh5co-cover, .fh5co-bg, .fh5co-section {
    background-attachment: scroll !important;
  }
}

/* Optional: handle short height devices / browser UI bars */
@media (max-width: 420px) and (max-height: 860px) {
  .fh5co-cover { min-height: 680px; }
}

@media (max-width: 420px){
  .flipTimebox .flip-clock-label{
    display: none !important;
  }
  .flipTimebox{
    padding-top: 0;
    margin-bottom: 20px;
  }
}

/* ===== Responsive background base ===== */
#fh5co-header{
  background-image: url("../images/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}