/* ================================================
   CUSTOM OVERRIDES — Invara Architects
   ================================================ */

/* ── Hero Section: Full-width, 75vh height ── */

/* Remove all constrained widths and side margins from the slider */
.hero-1 .hero-slider1 {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}

/* Make each slide fill exactly 75% of the viewport height */
.hero-1 .hero-slider1 .hero-inner {
  height: 75vh;
  min-height: 480px;
  /* safety floor for very small screens */
  padding-top: 0 !important;
  display: flex;
  align-items: center;
}

/* Background image must fill the full slide area */
.hero-1 .hero-slider1 .hero-inner .th-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-1 .hero-slider1 .hero-inner .th-hero-bg img,
.hero-1 .hero-slider1 .hero-inner .th-hero-bg[data-bg-src] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero content: vertically centred, left-aligned */
.hero-1 .hero-slider1 .hero-inner .container {
  position: relative;
  z-index: 5;
}

/* Neutralise the hard-coded padding on hero-style1 so the 75vh drives the height */
.hero-1 .hero-slider1 .hero-inner .hero-style1 {
  padding: 0 !important;
}

/* Ensure the header top-area background spans full width */
.hero-1 {
  width: 100%;
  overflow: hidden;
}

/* ── Footer: Warm yellow background with dark readable text ── */
footer.footer-wrapper {
  background-color: #f5c518 !important;
}

/* All text inside the footer → dark charcoal for contrast */
footer.footer-wrapper,
footer.footer-wrapper p,
footer.footer-wrapper span,
footer.footer-wrapper a,
footer.footer-wrapper li,
footer.footer-wrapper .widget_title,
footer.footer-wrapper .footer-info,
footer.footer-wrapper .info-box_link,
footer.footer-wrapper .info-box_text,
footer.footer-wrapper .copyright-text {
  color: #1a1a1a !important;
}

/* Links: dark with underline on hover */
footer.footer-wrapper a:hover {
  color: #5a3e00 !important;
  text-decoration: underline;
}

/* Icons stay visible */
footer.footer-wrapper img[src*="icon"] {
  filter: brightness(0) !important;
  /* makes SVG icons black */
}

/* Form fields on yellow background */
footer.footer-wrapper .form-control,
footer.footer-wrapper .form-select {
  background-color: rgba(255, 255, 255, 0.6) !important;
  color: #1a1a1a !important;
  border-color: #a88000 !important;
}

footer.footer-wrapper .form-control::placeholder {
  color: #555 !important;
}

/* Submit button stays distinct */
footer.footer-wrapper .th-btn {
  background-color: #1a1a1a !important;
  color: #f5c518 !important;
  border-color: #1a1a1a !important;
}

footer.footer-wrapper .th-btn:hover {
  background-color: #333 !important;
  color: #fff !important;
}

/* ── Standard Bullet List ── */
.bullet-list ul {
  list-style: disc !important;
  padding-left: 20px !important;
  margin-top: 16px;
}

.bullet-list ul li {
  list-style-type: disc !important;
  display: list-item !important;
  padding-left: 0 !important;
  margin-bottom: 8px !important;
  font-size: 18px;
  color: var(--theme-color);
}

.bullet-list ul li::before {
  content: none !important;
}

/* ── Sidemenu (right slider) logo: smaller, cleaner placement ── */
.sidemenu-wrapper .sidemenu-content {
  width: 400px !important;
  padding: 56px 24px !important;
}

.sidemenu-wrapper .widget {
  margin-bottom: 28px !important;
}

.sidemenu-wrapper .th-widget-about .about-logo {
  margin-bottom: 14px !important;
}

.sidemenu-wrapper .th-widget-about .about-logo a {
  display: inline-block;
}

.sidemenu-wrapper .th-widget-about .about-logo img {
  max-width: 118px !important;
  height: auto;
  display: block;
}

.sidemenu-wrapper .th-widget-about .about-text {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 0 !important;
}

/* ── What Our Clients Say: Fix alignment across testimonial cards ── */
#testimonial .testi-slider1 .swiper-wrapper {
  align-items: stretch;
}

#testimonial .testi-slider1 .swiper-slide {
  height: auto;
  display: flex;
}

#testimonial .testi-slider1 .swiper-slide .testi-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 100%;
}

#testimonial .testi-slider1 .testi-card .testi-grid_review {
  flex-shrink: 0;
}

#testimonial .testi-slider1 .testi-card_text {
  flex: 1;
  margin-bottom: 15px;
}

#testimonial .testi-slider1 .testi-card .testi-grid-wrap {
  flex-shrink: 0;
  margin-top: auto;
  align-items: center;
}

/* ── Services page: keep 3rd OK; slightly reduce 1st/2nd images ── */
#architectural .row,
#interior .row {
  align-items: stretch;
}

#landscape .row {
  align-items: stretch;
}

/* Make the image sit slightly lower than a full-height fill */
#architectural .th-team .team-img,
#interior .th-team .team-img {
  height: 100%;
  display: flex;
  align-items: flex-end;
}

#architectural .th-team .team-img img,
#interior .th-team .team-img img {
  width: 100%;
  height: calc(100% - 40px);
  object-fit: cover;
  display: block;
}

/* Third section: keep stretch behavior (user says it's OK) */
#landscape .th-team,
#landscape .th-team .img-wrap,
#landscape .th-team .team-img,
#landscape .th-team .team-img img,
#landscape .about-card {
  height: 100%;
}

/* ── About section: architecture image, equal height with text ── */
#about-sec .row {
  align-items: stretch !important;
}

#about-sec .row > [class*="col-"] {
  display: flex;
}

#about-sec .th-team,
#about-sec .th-team .img-wrap,
#about-sec .th-team .team-img,
#about-sec .about-card {
  height: 100%;
  width: 100%;
}

#about-sec .th-team .team-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── About: Core values card redesign ── */
#core-value .rent-card {
  background: linear-gradient(180deg, #1c2d37 0%, #203847 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 22px 18px;
  box-shadow: 0 10px 24px rgba(12, 24, 32, 0.16);
}

#core-value .rent-card .box-title {
  margin-bottom: 10px;
  font-size: 30px;
}

#core-value .core-value-text {
  color: rgba(255, 255, 255, 0.9) !important;
  text-align: left !important;
  line-height: 1.55;
  font-size: 17px;
}

#about-sec .about-arch-gallery .img-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#about-sec .about-arch-gallery .team-img {
  flex: 1;
  min-height: 0;
}

/* Contact page: clickable address card (open maps) */
.about-contact-map-link {
  display: block;
  text-decoration: none !important;
}

.about-contact-map-link:hover {
  text-decoration: none !important;
}

/* ── Blog sidebar: reduce spacing in "Need Help" banner ── */
.th-blog-wrapper .widget_banner {
  padding: 62px 50px !important;
}

.th-blog-wrapper .widget_banner .title {
  margin-bottom: 24px !important;
  margin-top: 0 !important;
}

.th-blog-wrapper .widget_banner .logo {
  margin-bottom: 16px !important;
}

.th-blog-wrapper .widget_banner .subtitle {
  margin-bottom: 0 !important;
}

.th-blog-wrapper .widget_banner .link {
  margin-bottom: 0 !important;
}

/* Blog SEO: table of contents, FAQ, internal links */
.blog-toc {
  background: #f8f6f2;
  border-left: 4px solid var(--theme-color, #c9a227);
  padding: 20px 24px;
  margin: 24px 0 32px;
  border-radius: 0 8px 8px 0;
}

.blog-toc h3 {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.blog-toc ol {
  margin: 0;
  padding-left: 1.25rem;
}

.blog-toc li {
  margin-bottom: 6px;
}

.blog-toc .toc-level-3 {
  list-style-type: circle;
  margin-left: 1rem;
}

.blog-toc a {
  color: inherit;
  text-decoration: none;
}

.blog-toc a:hover {
  color: var(--theme-color, #c9a227);
}

.blog-article-body h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.blog-internal-links {
  background: #fff;
  border: 1px solid #e8e4dc;
  border-radius: 8px;
  padding: 24px;
  margin-top: 2rem;
}

.blog-internal-links h3 {
  margin-bottom: 0.75rem;
}

.blog-internal-links ul {
  margin: 0;
  padding-left: 1.25rem;
}

.blog-internal-links li {
  margin-bottom: 0.5rem;
}

.blog-internal-links a {
  color: var(--theme-color, #c9a227);
  font-weight: 500;
}

.blog-faq-accordion .accordion-button {
  font-weight: 600;
  font-size: 1rem;
}

.blog-related-posts .blog-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.blog-related-posts .blog-content {
  padding: 16px;
}

.blog-filter-note {
  padding: 16px 20px;
  background: #f8f6f2;
  border-radius: 8px;
}