/* ==========================================================================
   Fir Tree College – Under Construction
   Mobile-first, responsive CSS (2025)
   ========================================================================== */

/* ------------------------------
   0) Reset & base
   ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }
body {
  margin: 0;
  height: 100%;
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #111; /* improved contrast */
  background: #fff;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #fdc018;
  outline-offset: 2px;
}

/* Utility spacing (lightweight) */
.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}
.mt-1{margin-top:.5rem!important}.mb-1{margin-bottom:.5rem!important}
.mt-2{margin-top:1rem!important}.mb-2{margin-bottom:1rem!important}
.mt-3{margin-top:1.5rem!important}.mb-3{margin-bottom:1.5rem!important}

/* ------------------------------
   1) Layout shell (sticky footer)
   ------------------------------ */
.page-shell {
  min-height: 100svh;       /* safe viewport on mobile browsers */
  display: flex;
  flex-direction: column;
}

/* main content area centred both ways */
#content-wrapper.hero-center {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 3rem;      /* breathing room on short viewports */
}

/* footer naturally stays at the bottom */
.site-footer { margin-top: auto; }

/* Neutralise any legacy absolute/footer rules */
footer {
  position: static !important;
  width: 100%;
  left: auto; right: auto; bottom: auto;
}

/* ------------------------------
   2) Typography
   ------------------------------ */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .75rem 0;
  font-weight: 800;
  line-height: 1.2;
  color: #000;
  text-wrap: balance;
}

.h1, h1 { font-size: clamp(32px, 5vw, 48px); }
.h2, h2 { font-size: clamp(18px, 3.2vw, 22px); font-weight: 400; }

/* prevent overflow on mobiles */
.h1, .h2 { white-space: normal !important; }

/* Body text helpers (kept for compatibility) */
.small  { font-size: 14px; line-height: 1.6; }
.normall{ font-size: 16px; line-height: 1.7; }
.big    { font-size: 18px; line-height: 1.7; }

/* ------------------------------
   3) Theme colours / variants
   ------------------------------ */
.coming-soon-promo-style-3,
.block.coming-soon-style3,
.coming-soon-promo-style-3 .full-screen-popup .center-align {
  background: #fff;
  color: #111;
}

/* Accent buttons/inputs for style 3 */
.coming-soon-promo-style-3 header,
.coming-soon-promo-style-3 .menu-button div,
.coming-soon-promo-style-3 .menu-button { background: #131e3a; }

.coming-soon-promo-style-3 #content-wrapper input[type="submit"],
.coming-soon-promo-style-3 .button {
  background: #fdc018;
  color: #111;
}
.coming-soon-promo-style-3 #content-wrapper input[type="submit"]:hover,
.coming-soon-promo-style-3 .button:hover {
  background: #3e2924;
  color: #fff;
}

/* ------------------------------
   4) Hero content area
   ------------------------------ */
/* Remove legacy table-display and offsets */
.col-table, .col-td { display: block !important; }

/* Article spacing */
article { width: 100%; }

/* Image block (logo / illustration) */
.tree-wrap { position: relative; top: 0 !important; }
.tree-wrap img { width: 100%; height: auto; }

/* ------------------------------
   5) Forms / inputs / buttons
   ------------------------------ */
#content-wrapper input[type="text"] {
  background: #fff;
  height: 48px;
  line-height: 48px;
  color: #111;
  font-size: 16px;
  border-radius: 6px;
  border: 2px solid #ddd;
  width: 100%;
  padding: 0 14px;
}
#content-wrapper input[type="text"]:focus {
  border-color: #fdc018;
}
#content-wrapper input[type="submit"] {
  border: 0;
  cursor: pointer;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0 22px;
  border-radius: 6px;
}

.button {
  display: inline-block;
  padding: 12px 28px;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 6px;
  background: #fdc018;
  color: #111;
  transition: background .15s ease-out,color .15s ease-out;
}
.button:hover { background: #3e2924; color:#fff; }

/* ------------------------------
   6) Footer
   ------------------------------ */
footer .footer-linck {
  font-size: 15px;
  color: #111;
  display: inline-block;
  margin-right: 24px;
}
footer .footer-linck:last-child { margin-right: 0; }
footer .footer-linck a { font-weight: 900; color: inherit; position: relative; }
footer .footer-linck a span { position: relative; }

/* subtle link hover wipe */
footer .footer-linck a::before {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  height: 2px; width: 0;
  background: #8a714f;
  transition: width .2s ease-out;
}
footer .footer-linck a:hover::before { width: 100%; }

footer .follow-us { text-align: right; }
footer .follow-us .titel {
  display: inline-block;
  color: #111;
  font-size: 14px;
  font-weight: 900;
  margin-right: 12px;
}
footer .follow-us .thumbs {
  display: inline-block;
  margin-left: 8px;
  width: 40px; height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: #111;
  background: #fff;
  position: relative;
  overflow: hidden;
  transition: color .15s ease-out;
}
footer .follow-us .thumbs::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #8a714f;
  transform: scale(0);
  transition: transform .15s ease-out;
}
footer .follow-us .thumbs:hover { color: #fff; }
footer .follow-us .thumbs:hover::before { transform: scale(1); }

/* Stack footer items nicely on small screens */
@media (max-width: 767.98px) {
  footer .footer-linck {
    display: block;
    margin-right: 0;
    margin-bottom: .25rem;
  }
  footer .follow-us {
    text-align: left;
    margin-top: .5rem;
  }
}

/* ------------------------------
   7) Flip clock (if used)
   ------------------------------ */
.flip-clock-wrapper { margin: 0; }
.flip-clock-wrapper ul { margin: 3px; width: 55px; }
.flip-clock-wrapper .flip { box-shadow: 0 2px 5px rgba(62,41,36,.15); }
.flip-clock-dot{ background:#ccc; width:8px; height:8px; }
.flip-clock-wrapper ul li a div div.inn{
  color:#fff; background:#3e2924; font-weight:900; font-size:48px;
}
.flip-clock-divider .flip-clock-label{
  bottom:-20px; left:0; text-transform:uppercase; font-size:13px; color:#666;
  width:122px; text-align:center; margin-left:20px;
}

/* Smaller devices: scale the clock */
@media (max-width: 575.98px) {
  .flip-clock-wrapper ul { width: 36px; margin: 2px; }
  .flip-clock-wrapper ul li a div div.inn { font-size: 28px; }
  .flip-clock-divider .flip-clock-label { font-size: 11px; }
}

/* ------------------------------
   8) Navigation / header (neutralised)
   ------------------------------ */
/* If present in DOM, keep it out of the way on mobiles */
header {
  width: 50px; height: 100%;
  right: 0; top: 0;
  background: #131e3a;
}
@media (max-width: 1199.98px) {
  header { transform: translateX(100%); }
  header.active { transform: translateX(0%); }
}

/* Minimal nav styling (kept for compatibility; won’t interfere) */
nav { position: absolute; width: 50px; left: 0; top: 50%; transform: translateY(-50%); }
nav a {
  display: block; height: 55px; line-height: 55px; text-align: center; margin-bottom: 2px;
  border-radius: 10px 0 0 10px;
  transition: background .15s ease-out;
}
nav a .fa { color: #fff; font-size: 27px; line-height: 55px; }
nav a.active { background: #fdc018; }
nav a > span {
  position: absolute; left: 100%; top: 0; height: 100%;
  padding: 0 50px 0 15px; background: #fdc018;
  border-radius: 10px 0 0 10px; white-space: nowrap; font-weight: 700; color: #111; font-size: 16px;
  transform: translateX(0);
  transition: transform .15s ease-out;
}
nav a:hover > span { transform: translateX(-100%); }

/* ------------------------------
   9) Buttons/links hover transitions
   ------------------------------ */
input[type="text"],
footer .footer-linck a::before,
footer .follow-us .thumbs,
footer .follow-us .thumbs::before,
.button {
  transition: all .15s ease-out;
}

/* ------------------------------
   10) Accessibility / motion
   ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------
   11) Container tweaks (Bootstrap helpers safe)
   ------------------------------ */
/* Ensure long words don’t cause sideways scroll */
.container, .row, [class*="col-"] { min-width: 0; }

/* ------------------------------
   12) Promo slide background (no iOS jank)
   ------------------------------ */
.promo-slide-background {
  background-size: cover;
  background-position: center center;
  background-attachment: scroll; /* avoid fixed on mobile */
}

/* ------------------------------
   13) Legacy class compatibility
   ------------------------------ */
/* Retain your theme’s accent behaviour in style-3 context */
.block.coming-soon-style3 footer .footer-linck a::before { background: #8a714f; }
.block.coming-soon-style3 footer .follow-us .thumbs::before { background: #8a714f; }

/* Keep article alignment from your original style */
.block.coming-soon-style3 h1,
.block.coming-soon-style3 h2 {
  width: 100%;
  text-align: center;
}

/* On very narrow screens, gently shrink headings */
@media (max-width: 413px) {
  .h1 { font-size: 28px; }
  .h2 { font-size: 17px; }
}
@media (max-width: 374px) {
  .h1 { font-size: 24px; }
  .h2 { font-size: 15px; }
}

/* --- Sticky footer + centred hero (bullet-proof) --- */

/* Make sure the document can grow to full viewport height */
html, body {
  height: 100%;
  min-height: 100%;
}

/* Kill any legacy absolute footer rules */
.block.coming-soon-style3 footer,
footer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100%;
}

/* Turn the main block into a flex column that fills the screen */
.block.coming-soon-style3 {
  min-height: 100svh;            /* safe viewport height on mobile */
  display: flex;
  flex-direction: column;
}

/* The content area grows to fill space; centre it vertically */
.block.coming-soon-style3 > .container {
  flex: 1 0 auto;                /* take remaining height */
  display: flex;
  align-items: center;           /* vertical centre */
}

/* Optional: centre horizontally as well */
.block.coming-soon-style3 > .container > .row {
  width: 100%;
  justify-content: center;       /* needs Bootstrap flex utilities present */
  text-align: center;
}

/* Footer naturally sits at the bottom of the flex column */
.block.coming-soon-style3 footer {
  margin-top: auto;              /* pushes footer to the bottom */
}

/* Tidy up any old “full height”/overflow rules that get in the way */
#content-wrapper {
  height: auto !important;
  min-height: 100%;
  overflow: visible !important;
}

/* Ensure the image doesn’t yank itself with negative margins */
.tree-wrap { top: 0 !important; }
.tree-wrap img { max-width: 100%; height: auto; display: block; }

/* Headings should be allowed to wrap on mobile */
.h1, .h2,
.block.coming-soon-style3 .h1,
.block.coming-soon-style3 .h2 {
  white-space: normal !important;
}

/* Comfortable sizes on small screens */
@media (max-width: 768px) {
  .h1 { font-size: 32px; line-height: 1.2; }
  .h2 { font-size: 18px; line-height: 1.5; }
}

/* ===== Footer + hero alignment fixes (append at end) ===== */

/* Centre the hero columns to each other */
.block.coming-soon-style3 > .container { display: flex; align-items: center; }
.block.coming-soon-style3 > .container > .row {
  width: 100%;
  display: flex;                 /* ensure flex context even if Bootstrap not applied */
  align-items: center;           /* vertical centre across columns */
  justify-content: center;       /* horizontal centring */
  gap: 2rem;
  text-align: center;
}
.block.coming-soon-style3 .tree-wrap { top: 0 !important; }
.block.coming-soon-style3 .tree-wrap img {
  display: block;
  margin-inline: auto;           /* centre the logo */
  max-width: 100%;
  height: auto;
}

/* Make footer use flex instead of floats so both halves align perfectly */
.block.coming-soon-style3 footer .row {
  display: flex;
  align-items: center;           /* vertical alignment */
  justify-content: space-between;
  gap: 1rem;
}

/* Left footer column (contact) */
.block.coming-soon-style3 footer .col-md-6:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;                 /* tidy spacing between phone/email */
  justify-content: flex-start;
}

/* Right footer column (social) */
.block.coming-soon-style3 footer .col-md-6:last-child {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Remove legacy floats/heights that knock things off-centre */
footer .footer-linck {
  float: none !important;
  margin: 0;                     /* we’re managing spacing with gap */
  height: auto;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
}

/* Social block becomes a neat inline flex row */
footer .follow-us {
  float: none !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  text-align: left;
}
footer .follow-us .titel { margin: 0; line-height: 1; }

/* Centre icons inside their circles precisely */
footer .follow-us .thumbs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  line-height: 1;
}
footer .follow-us .thumbs i {
  display: inline-block;
  line-height: 1;                /* stop font-awesome from stretching */
}

/* Sticky footer behaviour kept */
.block.coming-soon-style3 { min-height: 100svh; display: flex; flex-direction: column; }
.block.coming-soon-style3 footer { margin-top: auto; }

/* Mobile stacking that still stays centred */
@media (max-width: 767.98px) {
  .block.coming-soon-style3 footer .row {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .block.coming-soon-style3 footer .col-md-6:first-child,
  .block.coming-soon-style3 footer .col-md-6:last-child {
    justify-content: center;
  }
  footer .follow-us { justify-content: center; }
}

/* ===== Mobile logo positioning ===== */

/* Default: desktop keeps text left, logo right */
.block.coming-soon-style3 > .container > .row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

/* --- OPTION 1: Logo moves ABOVE text on mobile --- */
@media (max-width: 767.98px) {
  .block.coming-soon-style3 > .container > .row {
    flex-direction: column;     /* stack */
  }
  .block.coming-soon-style3 .tree-wrap {
    order: -1;                  /* logo first (top) */
    margin-bottom: 1rem;
  }
}

/* --- OPTION 2: Logo moves BELOW text on mobile --- */
/*
@media (max-width: 767.98px) {
  .block.coming-soon-style3 > .container > .row {
    flex-direction: column;     /* stack */
  }
  .block.coming-soon-style3 .tree-wrap {
    order: 2;                   /* logo last (bottom) */
    margin-top: 1rem;
  }
}
*/