/* ==========================================================================
   Sunshine Homes – main stylesheet
   Sections follow the order of templates/index.html.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "Damion"; src: url("../fonts/Damion/Damion-Regular.4a8139bb305f.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/IBM_Plex_Serif/IBMPlexSerif-Light.79dc215dafa0.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/IBM_Plex_Serif/IBMPlexSerif-Regular.e12a62e88cb1.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/IBM_Plex_Serif/IBMPlexSerif-Italic.c0a80bb51479.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/IBM_Plex_Serif/IBMPlexSerif-Medium.b0289df1b0bc.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/IBM_Plex_Serif/IBMPlexSerif-SemiBold.6b8e1fdf1fc2.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/IBM_Plex_Serif/IBMPlexSerif-Bold.9763634ec28a.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* ---------- Design tokens ---------- */
:root {
  --navy: #17304f;
  --navy-deep: #10233b;
  --sun: #f3b33d;
  --sun-dark: #e09f22;
  --teal: #3f7f7d;
  --teal-dark: #326664;
  --cream: #faf6ef;       /* page background */
  --sand: #efe7da;        /* dividers */
  --ink: #23344a;         /* body text */
  --muted: #5d6b7c;       /* secondary text */
  --white: #fff;
  --radius-lg: 32px;
  --shadow: 0 18px 50px -20px rgba(23, 48, 79, .28);
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-cursive: "Damion", cursive;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-serif);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* Handwritten accent words, e.g. "Spain", "special" */
.cursive { font-family: var(--font-cursive); font-weight: 400; }

/* Line icons from the SVG sprite; they take the current text colour */
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- Buttons ---------- */
/* Yellow pill – main call to action ("Find my stay") */
.btn-sun {
  background: var(--sun); color: var(--navy); border: 0; border-radius: 999px;
  padding: 1rem 1.75rem; font: inherit; font-weight: 600; font-size: 1.05rem;
  display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap;
  transition: background-color .2s ease;
}
.btn-sun:hover { background: var(--sun-dark); }

/* Navy pill – secondary links ("Explore all homes") */
.btn-navy {
  background: var(--navy); color: var(--white); border-radius: 999px; text-decoration: none;
  padding: .95rem 1.75rem; display: inline-flex; align-items: center; gap: .7rem; font-weight: 500;
  transition: background-color .2s ease;
}
.btn-navy:hover { background: var(--navy-deep); color: var(--white); }
.btn-navy .icon { color: var(--sun); }

/* White circle with a single icon (menu, carousel arrow) */
.btn-round {
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  display: inline-grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35);
  transition: background-color .2s ease;
}
.btn-round:hover { background: var(--white); }

/* ---------- Wavy section edges ----------
   <svg class="wave wave-top|wave-bottom"> stretched across a section.
   The SVG paths use currentColor, so the colour is set here; the
   faint .wave-back layer gives the layered-shoreline look. */
.wave { position: absolute; left: 0; width: 100%; height: 160px; display: block; z-index: 1; color: var(--cream); }
.wave-top { top: -1px; }
.wave-bottom { bottom: -1px; }
.wave-back { opacity: .45; }

/* ==========================================================================
   1. Site header
   ========================================================================== */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  padding: 1.5rem 0;
}
.site-header .logo img { height: 84px; width: auto; display: block; }

.main-nav { gap: 2.25rem; }
.main-nav a {
  color: var(--white); text-decoration: none; font-size: 1rem; font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 14px rgba(0, 0, 0, .55);
  position: relative; padding: .25rem 0;
}
/* Yellow underline that slides in on hover */
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--sun); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }

.mobile-nav {
  background: var(--white); border-radius: 24px; margin-top: 1rem;
  padding: 1rem 1.5rem; box-shadow: var(--shadow);
}
.mobile-nav a { display: block; padding: .7rem 0; color: var(--navy); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--sand); }
.mobile-nav a:last-child { border-bottom: 0; }

/* ==========================================================================
   2. Hero
   ========================================================================== */
.hero {
  position: relative; min-height: 760px; height: 100vh; max-height: 980px;
  color: var(--white); overflow: hidden;
  display: flex; align-items: center;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
/* Dark gradient over the video so the white text stays readable */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(10, 30, 52, .72) 0%, rgba(10, 30, 52, .45) 45%, rgba(10, 30, 52, .05) 80%),
    linear-gradient(180deg, rgba(10, 30, 52, .55) 0%, rgba(10, 30, 52, 0) 28%);
}
.hero .container { position: relative; z-index: 2; padding-bottom: 170px; }
.hero .wave { height: 170px; z-index: 2; }

.hero-tagline { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--white); display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.hero-tagline .icon { color: var(--sun); width: 1.3em; height: 1.3em; }
.hero-title {
  font-weight: 600; font-size: clamp(3rem, 7vw, 5.6rem); line-height: 1.02; letter-spacing: -.02em;
  margin: 0 0 1.5rem; text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.hero-title .cursive { color: var(--sun); font-size: 1.15em; line-height: .8; letter-spacing: 0; display: inline-block; transform: rotate(-4deg); }
.hero-lead { font-size: 1.25rem; line-height: 1.6; max-width: 26rem; font-weight: 400; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 16px rgba(0, 0, 0, .55); }

/* ==========================================================================
   3. Search bar
   ========================================================================== */
/* Pulled up so the bar overlaps the hero's wavy edge */
.search-section { position: relative; z-index: 5; margin-top: -150px; }
.search-bar {
  background: var(--white); border-radius: 999px; box-shadow: var(--shadow);
  padding: 1rem 1rem 1rem 2.25rem;
  display: flex; align-items: center; gap: 0;
}
.search-field {
  flex: 1 1 0; min-width: 0; padding: .25rem 1.25rem; border-right: 1px solid var(--sand);
}
.search-field:first-child { padding-left: 0; }
.search-field:nth-last-child(2) { border-right: 0; }  /* last field before the button */
.search-field label { display: block; font-size: .85rem; font-weight: 600; color: var(--navy); margin-bottom: .35rem; }
.search-input { display: flex; align-items: center; gap: .6rem; color: var(--muted); }
.search-input .icon { color: var(--navy); }
.search-input input, .search-input select {
  border: 0; background: transparent; font: inherit; font-size: .95rem; color: var(--ink);
  width: 100%; min-width: 0; padding: .2rem 0; outline: none; appearance: none; -webkit-appearance: none;
}
.search-input select { cursor: pointer; padding-right: 1.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b7c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 16px;
}
.search-input input:focus-visible, .search-input select:focus-visible { box-shadow: 0 2px 0 var(--sun); }

/* ==========================================================================
   4. Homes
   ========================================================================== */
.homes-section { padding: 6rem 0 7rem; overflow-x: clip; }  /* the carousel bleeds past the container edges */

/* Small handwritten line above a section title */
.eyebrow { font-family: var(--font-cursive); color: var(--teal); font-size: 1.6rem; display: inline-flex; align-items: center; gap: .4rem; }
.section-title { font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 2.9rem); color: var(--navy); line-height: 1.1; margin: .25rem 0 1.5rem; }
.section-title .cursive { color: var(--teal); font-size: 1.3em; display: block; }
.homes-intro p { color: var(--muted); font-size: 1.1rem; line-height: 1.7; max-width: 22rem; }

/* Carousel: a horizontally scrolling grid that snaps to each card.
   The extra padding (cancelled by negative margin) leaves room for the
   card shadows and the lifted card on hover, which would otherwise be
   clipped by the scroll container. */
.homes-carousel { position: relative; }
.homes-carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 2.5rem) / 3);
  gap: 2.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 2.5rem 2rem 4rem; margin: -2.5rem -2rem -4rem; scroll-padding-inline: 2rem;
}
.homes-carousel-track::-webkit-scrollbar { display: none; }
.carousel-next {
  position: absolute; right: -24px; top: 34%; z-index: 3;
  width: 56px; height: 56px; background: var(--white); color: var(--navy);
}
.carousel-next[hidden] { display: none; }

/* Apartment card */
.home-card {
  position: relative;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  scroll-snap-align: start; display: flex; flex-direction: column;
  transition: transform .3s ease;
}
.home-card:hover { transform: translateY(-6px); }

/* Photo with a wavy outline that sticks out 10px past the card edges */
.home-photo { position: relative; aspect-ratio: 4 / 4.3; clip-path: url(#photo-shape); margin: -10px -10px 0; }
.home-card:nth-child(2) .home-photo { clip-path: url(#photo-shape-alt); }
.home-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.home-card:hover .home-photo img { transform: scale(1.05); }

/* Heart button in the photo's top-right corner; filled when saved */
.btn-favourite {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); color: var(--navy); display: grid; place-items: center;
}
.btn-favourite[aria-pressed="true"] .icon { fill: #e4546b; stroke: #e4546b; }

.home-details { padding: 1rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }

/* Title: always two lines tall so cards line up; longer names end in "…" */
.home-title {
  font-size: 1.35rem; font-weight: 500; color: var(--navy); margin: 0 0 .4rem; line-height: 1.25; min-height: 2.5em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.home-title a { text-decoration: none; }
.home-title a::after { content: ""; position: absolute; inset: 0; }  /* makes the whole card clickable */

.home-location { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .9rem; margin: 0 0 .85rem; }
.home-facts { display: flex; gap: 1.5rem; padding: 0 0 1rem; list-style: none; color: var(--muted); font-size: .9rem; border-bottom: 1px solid var(--sand); margin: 0 0 1rem; }
.home-facts li { display: inline-flex; align-items: center; gap: .4rem; }
.home-price { margin: auto 0 0; color: var(--muted); }
.home-price strong { color: var(--navy); font-weight: 600; font-size: 1.1rem; }

/* ==========================================================================
   5. Newsletter
   ========================================================================== */
.newsletter {
  position: relative; color: var(--white);
  background: url("../img/malaga-coast.3d8464ef5db2.jpg") center 55% / cover no-repeat;
  padding: 13rem 0 15rem;
}
/* Teal gradient over the photo so the text stays readable */
.newsletter::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12, 52, 66, .82) 0%, rgba(12, 52, 66, .55) 45%, rgba(12, 52, 66, .15) 100%);
}
.newsletter .container { position: relative; z-index: 2; }
.newsletter-title { font-family: var(--font-cursive); font-weight: 400; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1.05; margin-bottom: 1rem; }
.newsletter-title .icon { color: var(--sun); width: .8em; height: .8em; vertical-align: middle; }
.newsletter-text { font-size: 1.1rem; line-height: 1.6; max-width: 22rem; margin: 0; }

/* Email field and button joined in one white pill */
.signup-form {
  display: flex; background: var(--white); border-radius: 999px; padding: .4rem; box-shadow: var(--shadow); max-width: 30rem; margin-left: auto;
}
.signup-form:focus-within { box-shadow: var(--shadow), 0 0 0 3px rgba(243, 179, 61, .6); }
.signup-form input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .8rem 1.25rem; font: inherit; color: var(--ink); outline: none; }
.signup-form button {
  border: 0; border-radius: 999px; background: var(--teal); color: var(--white); font: inherit; font-weight: 600;
  padding: .8rem 1.5rem; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  transition: background-color .2s ease;
}
.signup-form button:hover { background: var(--teal-dark); }
.signup-form button .icon { color: var(--sun); }

/* ==========================================================================
   6. Features
   ========================================================================== */
/* Pulled up so the card overlaps the newsletter band */
.features-section { position: relative; z-index: 3; margin-top: -9rem; }
.features-card { background: var(--white); border-radius: 40px; box-shadow: var(--shadow); padding: 2.75rem 2.5rem; }
.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature-icon { width: 48px; height: 48px; color: var(--teal); stroke-width: 1.3; }
.feature h3 { font-size: 1.05rem; font-weight: 600; color: var(--navy); margin: 0 0 .35rem; line-height: 1.25; }
.feature p { font-size: .9rem; color: var(--muted); line-height: 1.55; margin: 0; }

/* ==========================================================================
   7. Site footer
   ========================================================================== */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .82); margin-top: 9rem; position: relative; padding: 5rem 0 2rem; }
.site-footer .wave { color: var(--navy); top: -159px; }  /* sits just above the footer */
.site-footer .wave-back { opacity: .35; }
.site-footer .logo img { height: 72px; width: auto; }
.site-footer a { text-decoration: none; color: rgba(255, 255, 255, .9); }
.site-footer a:hover { color: var(--sun); }
.site-footer address, .site-footer ul { font-style: normal; line-height: 1.8; margin: 0; padding: 0; list-style: none; }

.footer-about { max-width: 20rem; margin: 0; }
.footer-heading { font-family: var(--font-cursive); font-weight: 400; color: var(--sun); font-size: 1.6rem; margin-bottom: .75rem; }

.contact-link { display: inline-flex; align-items: center; gap: .6rem; }
.contact-link .icon { color: var(--sun); }

.site-footer .btn-whatsapp {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem;
  background: #25d366; color: #fff; font-weight: 600; border-radius: 999px; padding: .7rem 1.3rem;
  transition: background-color .2s ease;
}
.site-footer .btn-whatsapp:hover { background: #1ebe5b; color: #fff; }

.footer-copyright { border-top: 1px solid rgba(255, 255, 255, .15); margin: 3rem 0 0; padding-top: 1.5rem; font-size: .85rem; color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Below xl */
@media (max-width: 1199.98px) {
  .carousel-next { right: -12px; }
}

/* Below lg: tablet */
@media (max-width: 991.98px) {
  .site-header .logo img { height: 60px; }
  .hero { height: auto; min-height: 640px; }
  .hero .container { padding-top: 8rem; padding-bottom: 180px; }
  .search-section { margin-top: -170px; }
  .search-bar { flex-wrap: wrap; border-radius: 28px; padding: 1.25rem; gap: 1rem 0; }
  .search-field { flex: 1 1 50%; border-right: 0; padding: 0 .75rem; }
  .search-field:first-child { padding-left: .75rem; }
  .search-bar .btn-sun { flex: 1 1 100%; justify-content: center; }
  .homes-section { padding-top: 4rem; }
  .homes-carousel-track { grid-auto-columns: 46%; }
  .signup-form { margin: 2rem 0 0; }
  .features-card { padding: 2rem; }
}

/* Below sm: phone */
@media (max-width: 575.98px) {
  .container { --bs-gutter-x: 2.5rem; }
  .wave, .hero .wave { height: 90px; }
  .site-footer .wave { top: -89px; }
  .search-field { flex-basis: 100%; }
  .homes-carousel-track { grid-auto-columns: 84%; padding-inline: 1.25rem; margin-inline: -1.25rem; scroll-padding-inline: 1.25rem; }
  .carousel-next { display: none; }
  .newsletter { padding: 8rem 0 12rem; }
  .signup-form { flex-direction: column; border-radius: 24px; gap: .4rem; }
  .signup-form button { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}