/* ==========================================================================
   GLOBAL VARIABLES & RESET
   ========================================================================== */
:root {
  --font-body:      'Lora', serif;
  --bg-image:       url('../images/bg-texture.jpg');
  --bg-papyrus:     url('../images/bg-papyrus.jpg') center/cover no-repeat;
  --bg-wood:        url('../images/bg-wood.png') center/cover no-repeat;
  --clay:           #2e2a27;
  --cream-dark:     #d6cdaa;
  --cream:          #f5f1e8;
  --gold-dark:      #9F4613;
  --gold:           #CB5713;
  --maroon:         #5c3d3a;
  --sand:           #A68E6D;
  --wood-brown:     #32221D;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html, body {
  height: 100%;
}

body {
  display:               flex;
  flex-direction:        column;
  font:                  1.2rem/1.3 var(--font-body);
  background-image:      var(--bg-image);
  background-position:   center;
  background-size:       cover;
  background-repeat:     no-repeat;
  background-attachment: fixed;
  background-color:      var(--wood-brown);
  color:                 var(--clay);
}

body.modal-open {
  overflow: hidden;
  position: relative;
}

/* ==========================================================================
   GLOBAL LINKS
   ========================================================================== */
a {
  color:           var(--gold);
  text-decoration: none;
  font-weight:     bold;
}
a:hover {
  color:           var(--gold-dark);
  text-decoration: underline;
}

q {
  color:      var(--maroon);
  font-style: italic;
}

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */
.page-header {
  font-size:   2rem;
  color:       var(--maroon);
  margin:      0 0 1rem;
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */
.container {
  max-width: 1100px;
  margin:    0 auto;
  padding:   0 1rem;
}

/* ==========================================================================
   HEADER & NAV
   ========================================================================== */
.site-header {
  position:       sticky;
  top:            0;
  width:          100%;
  background:     var(--bg-wood);
  padding:        1rem 0;
  transition:     padding 0.3s ease;
  box-shadow:     0 4px 10px rgba(0,0,0,0.3);
  z-index:        1000;
}
.site-header.scrolled {
  padding: 0.5rem 0;
}

.header-inner {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  min-height:      44px;
}
.site-header.scrolled .header-inner {
  min-height: 33px;
}

.logo {
  display:         flex;
  align-items:     center;
}
.logo img {
  /* ensure true block-level centering inside the flex container */
  display:         block;
  vertical-align:  middle;
  margin:          0;
  height:          44px;
  transition:      height 0.3s ease;
  border:          1px solid rgba(0,0,0,0.1);
  box-shadow:      0 2px 6px rgba(0,0,0,0.15);
  border-radius:   16px;
}
.site-header.scrolled .logo img {
  height: 33px;
}

.site-nav {
  display:        flex;
  align-items:    center;
  gap:            1rem;
  white-space:    nowrap;
}
.site-nav a {
  display:         inline-block;
  color:           var(--cream);
  text-decoration: none;
  font-weight:     bold;
  font-size:       1.1rem;
  padding:         0;
}
.site-nav a:hover,
.site-nav a.active {
  color: var(--sand);
}

.hamburger {
  display:      none;
  background:   none;
  border:       none;
  font-size:    2rem;
  color:        var(--cream);
  cursor:       pointer;
}

@media (max-width: 1023px) {
  .site-nav  { display: none; }
  .hamburger { display: block; }
}

/* ==========================================================================
   SIDE‑DRAWER
   ========================================================================== */
.side-drawer {
  position:       fixed;
  top:            0;
  right:          0;
  width:          75%;
  max-width:      300px;
  height:         100%;
  background:     var(--bg-wood);
  transform:      translateX(100%);
  transition:     transform 0.3s ease;
  z-index:        1001;
  padding-top:    2rem;
}
.side-drawer.open {
  transform: translateX(0);
}
.side-drawer .site-nav {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  padding:        2rem 1rem;
}
.drawer-close {
  position:      absolute;
  top:           1rem;
  right:         1rem;
  background:    none;
  border:        none;
  font-size:     2rem;
  color:         var(--cream);
  cursor:        pointer;
}

/* ==========================================================================
   MAIN & HERO
   ========================================================================== */
main {
  flex:       1;
  margin-top: 25px;
}
.hero {
  margin: 1rem 0 2rem;
}
.hero-inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     flex-start;
  gap:             2rem;
  width:           calc(100% - 2rem);
  max-width:       1100px;
  margin:          0 auto;
  background:      var(--bg-papyrus);
  border-radius:   16px;
  padding:         2rem;
  box-shadow:      0 12px 32px rgba(0,0,0,0.2);
  z-index:         10;
}
.hero-inner h2 {
  font-size:     2rem;
  margin-bottom: 0.5rem;
}
.hero-content {
  flex:       1 1 0;
  min-width:  0;
}
.hero-content p {
  margin-bottom: 1rem;
}

/* ==========================================================================
   PORTRAIT
   ========================================================================== */
.portrait {
  flex:       0 0 280px;
  text-align: center;
}
.portrait img {
  max-width:      100%;
  border-radius:  16px;
  display:        block;
  margin:         0 auto;
  box-shadow:     0 4px 12px rgba(0,0,0,0.2);
}
.portrait figcaption {
  margin-top:      1rem;
  text-align:      center;
}
.portrait figcaption img {
  display:        block;
  max-width:      90%;
  box-shadow:     none;
}

/* ==========================================================================
   MASONRY & APARTMENT CARDS
   ========================================================================== */
.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.card {
  background:    var(--cream-dark);
  border-radius: 8px;
  overflow:      hidden;
  box-shadow:    0 4px 8px rgba(0,0,0,0.1);
  cursor:        pointer;
}

.card img {
  width:         100%;
  aspect-ratio:  4/3;
  object-fit:    cover;
}

.card-text {
  font-size:       1rem;
  font-weight:     bold;
  line-height:     1.2;
  display:         flex;
  justify-content: center;
  align-items:     center;
  padding:         0 0.5rem 0.5rem;
  text-align:      center;
}

/* ==========================================================================
   MODAL GALLERY
   ========================================================================== */
.modal {
  position:        fixed;
  top:             0;
  left:            0;
  width:           100%;
  height:          100%;
  display:         none;
  align-items:     center;
  justify-content: center;
  background:      rgba(0,0,0,0.7);
  z-index:         2000;
}
.modal.open {
  display: flex;
}
.modal-content {
  display:           flex;
  flex-direction:    column;
  width:             95%; 
  max-width:         1000px; 
  height:            calc(100vh - 2rem);
  background:        var(--bg-papyrus);
  border-radius:     8px;
  overflow:          hidden;
  position:          relative;
  padding:           1rem;
}
.modal-close {
  position:         absolute;
  top:              0.5rem;
  right:            0.5rem;
  width:            32px;
  height:           32px;
  background:       var(--maroon);
  border-radius:    50%;
  box-shadow:       0 2px 6px rgba(0,0,0,0.3);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        1.25rem;
  color:            var(--cream);
  border:           none;
  cursor:           pointer;
  z-index:          2;
}

/* 1) Header & Description */
.modal-header {
  padding:    1rem;
  text-align: left;
}
.modal-title {
  margin:    0 0 0.5rem;
  color:     var(--maroon);
  font-size: 1.5rem;
}
.modal-description-card {
  margin:           0 1rem 1rem;
  background:       var(--cream-dark);
  padding:          1rem;
  border-radius:    8px;
  box-shadow:       0 2px 6px rgba(0,0,0,0.1);
}
.modal-description {
  margin:      0;
  color:       var(--clay);
  line-height: 1.4;
}
.modal-description-card .apply-text {
  margin-top: 0.5rem;
}

/* 2) Main Image + Nav */
.modal-image-nav {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
  padding:         0 1rem;
  overflow:        hidden;
}
.modal-main-image {
  max-width:     100%;
  max-height:    100%;
  object-fit:    contain;
  border-radius: 8px;
  border:        1px solid var(--clay);
  box-shadow:    0 2px 6px rgba(0,0,0,0.2);
}

/* ==========================================================================
   MODAL ARROW BUTTONS
   ========================================================================== */
.modal-image-nav > button.modal-prev,
.modal-image-nav > button.modal-next {
  position:         absolute;
  top:              50%;
  transform:        translateY(-50%);
  background:       transparent;
  border:           none;
  cursor:           pointer;
  padding:          0;
  width:            3rem;
  height:           3rem;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  z-index:          1;
}
.modal-image-nav > button.modal-prev::before {
  content: "";
  display: inline-block;
  width: 2em; height: 2em;
  border-left:   0.5em solid var(--maroon);
  border-bottom: 0.5em solid var(--maroon);
  transform: rotate(45deg);
}
.modal-image-nav > button.modal-next::before {
  content: "";
  display: inline-block;
  width: 2em; height: 2em;
  border-right:  0.5em solid var(--maroon);
  border-top:    0.5em solid var(--maroon);
  transform: rotate(45deg);
}
.modal-image-nav > button.modal-prev { left: 1rem; }
.modal-image-nav > button.modal-next { right: 1rem; }
.modal-image-nav > button.modal-prev:hover::before,
.modal-image-nav > button.modal-next:hover::before {
  border-color: var(--sand);
}

/* 3) Filmstrip */
.filmstrip {
  display:         flex;
  gap:             0.5rem;
  padding:         0.75rem 1rem;
  overflow-x:      auto;
  overflow-y:      hidden;
  white-space:     nowrap;
  justify-content: center;
}
.filmstrip img {
  flex:         0 0 auto;
  width:        60px;
  height:       60px;
  object-fit:   cover;
  border-radius:4px;
  cursor:       pointer;
  border:       1px solid rgba(0,0,0,0.1);
}
.filmstrip img.active {
  border:     2px solid var(--gold);
  transform:  scale(1.2);
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

/* ==========================================================================
   PAGE DESCRIPTION CARD
   ========================================================================== */
.description-card {
  background:     var(--cream-dark);
  padding:        1rem;
  border-radius:  8px;
  box-shadow:     0 2px 6px rgba(0,0,0,0.1);
  margin:         1rem 0;
  color:          var(--clay);
}
.description-card h2 {
  margin: 0 0 0.5rem;
}
.description-card p {
    margin: 0 0 1rem;
}
.description-card p:last-child {
    margin: 0;
}
.description-card .apply-text,
.modal-description-card .apply-text {
  margin-top: 0.5rem;
}

/* ==========================================================================
   NEIGHBORHOOD
   ========================================================================== */
.neighborhood-card {
  background:      var(--cream-dark);
  padding:         1.5rem;
  border-radius:   8px;
  box-shadow:      0 4px 12px rgba(0,0,0,0.1);
  display:         flex;
  flex-direction:  column;
  gap:             1.5rem;
}

/* Headline */
.neighborhood-card h2 {
  margin:          0;
  font-size:       1.75rem;
  color:           var(--maroon);
  text-align:      center;
}

/* Logos row */
.neighborhood-card .logo-container {
  display:        grid;
  grid-template-columns: repeat(6, 100px); /* six fixed‐width slots */
  justify-content: center;
  gap:            1rem;
  margin-bottom:  1.5rem;
}
.neighborhood-card .logo-container img {
  width:          100px;
  height:         100px;
  object-fit:     contain;
  border-radius:  6px;
  box-shadow:     0 2px 6px rgba(0,0,0,0.2);
}

/* Collapse to two rows of 3 logos on narrower viewports */
@media (max-width: 800px) {
  .neighborhood-card .logo-container {
    grid-template-columns: repeat(3, 100px);
  }
}

/* Highlights list in two columns */
.neighborhood-card .amenities {
  list-style:      inside disc;
  columns:         2;
  column-gap:      2rem;
  margin:          0 auto;
  max-width:       70%;
}
.neighborhood-card .amenities li {
  margin-bottom:   0.75rem;
  white-space:     nowrap;
}

.neighborhood-card .shops-btn {
  background-color: var(--gold);
  color:            white;
  border:           none;
  padding:          1rem 2rem;
  text-align:       center;
  font-size:        1.3rem;
  border-radius:    6px;
  cursor:           pointer;
  box-shadow:       0 2px 6px rgba(0,0,0,0.2);
  max-width:        60%;
  white-space:      nowrap;
  margin:           0 auto;
  transition:       background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;;
}

.neighborhood-card .shops-btn:hover {
  background-color: var(--maroon);
  transform:        scale(1.05);
}

@media (max-width: 900px) {
  .neighborhood-card .amenities {
    max-width:      95%;
  }
}

/* Collapse to one column on small screens */
@media (max-width: 600px) {
  .neighborhood-card .amenities {
    columns:      1;
    padding:      0;
  }
  .neighborhood-card .logo-container {
    gap:          0.5rem;
  }
}

/* ==========================================================================
   SOUTHPORT IMAGE GRID
   ========================================================================== */
.image-grid {
  display:         grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:             0.5rem;
  margin:          1rem 0 2rem;
}
.image-grid img {
  width:           100%;
  height:          120px;
  object-fit:      cover;
  border-radius:   8px;
}

/* ==========================================================================
   SHOPS & SERVICES MODAL
   ========================================================================== */
#shopsModal .modal-content {
  width:         90%;
  max-width:     1200px;
  height:        90vh;
  padding:       2rem;
  overflow-y:    auto;
  box-sizing:    border-box;
}

#shopsModal .modal-header {
  padding:       0;
}

#shopsModal .modal-title {
  font-size:     2.5rem;
}

#shopsModal .shops-grid {
  display:       block;
  margin-top:    1rem;
  column-count:  3;
  column-gap:    2rem;
}

#shopsModal .shops-grid > div {
  break-inside:  avoid;
  margin-bottom: 2rem;
}

/* ==========================================================================
   CATEGORY HEADINGS
   ========================================================================== */
#shopsModal .shops-grid h3 {
  font-size:       1.6rem;
  font-weight:     bold;
  color:           var(--gold-dark);
  margin:          0 0 1rem;
  display:         inline-block;
  padding:         0.1rem 1rem 0.1rem 0;
  border-top:      2px solid var(--gold-dark);
  border-bottom:   2px solid var(--gold-dark);
}

#shopsModal .shops-grid ul {
  list-style:      none;
  padding:         0;
  margin:          0;
}
#shopsModal .shops-grid li {
  margin-bottom:   0.5rem;
}
#shopsModal .shops-grid a {
  color:           var(--clay);
  text-decoration: none;
  transition:      color 0.2s ease;
}
#shopsModal .shops-grid a:hover {
  color:           var(--gold);
}

/* ==========================================================================
   ADAPT SHOPS MODAL FOR SMALL SCREENS
   ========================================================================== */
@media (max-width: 800px) {
  #shopsModal .shops-grid {
    column-count: 2;
  }
}
@media (max-width: 600px) {
  #shopsModal .modal-content {
    width: 95%;
    height: 90vh;
    padding: 1rem;
  }
  #shopsModal .modal-title {
    font-size:     2rem;
  }
  #shopsModal .shops-grid {
    column-count: 1;
  }
}

/* ==========================================================================
   APPLY PAGE FORMS GRID
   ========================================================================== */
.apply-forms {
  display:         flex;
  gap:             1rem;
  justify-content: center;
  margin:          1.5rem;
  flex-wrap:       wrap;
}

.apply-forms .apply-btn {
  display:           inline-block;
  width:             100%;
  max-width:         200px;
  background:        var(--maroon);
  color:             var(--cream);
  padding:           0.75rem 1rem;
  border-radius:     8px;
  text-decoration:   none;
  font-weight:       bold;
  text-align:        center;
  transition:        transform 0.2s ease, background 0.2s ease;
}

.apply-forms .apply-btn:hover {
  background:  var(--gold-dark);
  transform:   scale(1.05);
}

/* ==========================================================================
   BUTTONS & FOOTER
   ========================================================================== */
.btn {
  display:         inline-block;
  background:      var(--maroon);
  color:           var(--cream);
  padding:         0.75rem 1.5rem;
  border-radius:   8px;
  text-decoration: none;
  font-weight:     bold;
  transition:      background 0.2s, transform 0.2s;
  font-family:     var(--font-body);
  font-size:       1.2rem;
  line-height:     1.3;
}
.btn:hover {
  background:      var(--gold-dark);
  transform:       scale(1.05);
}

.site-footer {
  background:      var(--bg-wood);
  color:           var(--cream-dark);
  text-align:      center;
  padding:         1rem 0;
  box-shadow:      0 -2px 8px rgba(0,0,0,0.2);
}
.site-footer p {
  margin:          0;
  font-size:       0.9rem;
}
.site-footer a {
  color:           var(--cream-dark);
  font-weight:     normal;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
  .site-nav  { display: none; }
  .hamburger { display: block; }
}
@media (max-width: 800px) {
  .hero-inner {
    flex-direction: column;
    padding:       2rem 1rem;
  }
  .shops-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .logo img {
    height:        33px;
  }
  .page-header {
    font-size:     1rem;
  }
  .description-card h2 {
    font-size:     1rem;
  }
  .description-card .apply-text,
  .modal-description-card .apply-text {
    font-size:     0.85rem;
    line-height:   1.2;
  }
  .shops-grid {
    grid-template-columns: 1fr;
  }
  .neighborhood-card .shops-btn {
    white-space: normal;
    width: 100%; 
    max-width: 100%;
    font-size: 1.2rem;
    padding: 0.75rem 1rem;
  }
}