/* =========================================================
   Oyester Homes - UI/UX fixes
   Load this LAST. support.css is linked inside <body>, so put this
   line just before </body> (after every other stylesheet link):
   <link rel="stylesheet" href="/assets/css/ui-fixes.css?v=1">
   ========================================================= */

/* 1. Top banner (home + blog + other inner pages)
   The old CSS pushed the image left by fixed amounts (left:-142% etc.)
   that only lined up on one screen height, so many phones showed a
   blank strip. object-fit:cover fills the box on every screen. */
.slider ul li {
  height: auto;
}
.slider ul li img {
  width: 100% !important;
  height: 70vh;
  min-height: 260px;
  max-height: 760px;
  left: 0 !important;
  object-fit: cover;
  object-position: center;
}
/* Keep 70vh on mobile too: the page reserves space for a 70vh banner,
   so a shorter banner leaves an empty gap below it. */

/* 2. Mobile menu: items started under the close (X) button because
   ".navigation ul { padding:0 }" beat ".active_nav { padding:30% }" */
@media only screen and (max-width: 960px) {
  .navigation ul.navrow.active_nav {
    padding: 90px 0 0;
    overflow-y: auto;
  }
  .navigation .menuclose {
    z-index: 10000;
    top: 20px;
    right: 16px;
  }
}

/* 3. Top bar: Instagram icon touching / cut at the right edge */
@media only screen and (max-width: 500px) {
  .top_menu .top {
    width: auto;
    padding: 12px 16px;
    box-sizing: border-box;
  }
  .top_menu .top ul {
    flex-wrap: wrap;
    gap: 4px 0;
  }
}

/* 4. Justified text leaves big gaps between words on small screens */
.about_cont p,
.div_lf p:nth-child(1),
.review_txt,
.footer_logo p,
.popup_sec p,
.popup_ban {
  text-align: left;
}

/* 5. Low-contrast footer text */
.rights p:nth-child(1) {
  color: #b3b3b3;            /* was #4b4647 on black (2.3:1), now about 9.6:1 */
}
.subscribe p {
  opacity: 0.85;             /* was 0.3 */
}

/* 6. Review cards: 5th star wrapping onto its own line */
.name_star {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.name_star .star {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 7. Blog excerpts: clean cut-off at 4 lines (pair with the
   server-side word limit so words aren't chopped in half) */
.blog_cont .sub_text,
.occupy .sub_text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 0;
  margin-bottom: 20px;
}

/* 8. Blog page cards: Read More button overlapping the text */
.occupy {
  display: flex;
  flex-direction: column;
}
.occupy .list_typ {
  height: auto !important;   /* overrides inline height:200px */
}
.occupy .about_btn {
  position: static;
  width: auto;
  margin-top: auto;
  padding: 0 10px 10px;
}
.occupy .about_btn a {
  float: none;
  margin: 10px 0 0 auto;
}
@media only screen and (max-width: 768px) {
  .occupy .about_btn a { margin-left: 0; }
}