/* styles.css - Consolidated stylesheet for Newfound Living
   - Centralized and unified logo sizing/centering (use --site-logo-width)
   - Preserves existing layout and behavior; footer icons forced to small size
   Replace your current styles.css with this file (backup first), then hard-refresh.
*/

/* ===== variables ===== */
:root{
  --brand-green-1: #1f8f80;
  --brand-green-2: #21706A;
  --accent-red-1: #e53935;
  --accent-red-2: #c62828;
  --nav-bg-strong: rgba(0,0,0,0.78);
  --white: #ffffff;

  --container-max-width: 980px;
  --container-padding: 2.5rem;
  --container-bg: rgba(0,0,0,0.82);
  --muted: rgba(255,255,255,0.12);

  --btn-padding-regular: .85em 1.6em;
  --btn-padding-small: .45em .8em;
  --btn-radius: 8px;

  /* Canonical width used for logos across pages (change to adjust size globally) */
  --site-logo-width: 160px;
}

/* Responsive tweak for very small screens */
@media (max-width:520px) {
  :root { --site-logo-width: 120px; }
}

/* ===== base/reset ===== */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; padding:0; font-family:'Segoe UI','Arial',sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:var(--white); }
body { background: #222 url('Logos/city.png') no-repeat center center fixed; background-size:cover; }

/* ===== Logo helpers: center and unify size across pages =====
   - Targets common logo classes used across your pages so minimal markup changes required.
   - Use .logo-container around your logo (optional) and .site-logo on the <img>.
   - Footer icons are handled separately below to avoid being scaled by site-logo rules.
*/
.logo-container { text-align: center; }

.site-logo,
img.logo,
.intro-logo,
.header-logo,
.brand-logo,
.listing-logo,
.rental-logo,
img[src*="logo"] {
  display: block;
  margin: 0 auto;
  width: var(--site-logo-width) !important;
  max-width: 100%;
  height: auto !important;
  vertical-align: middle;
  image-rendering: auto;
}

/* SVG specific handling */
svg.site-logo,
.site-logo.svg,
img.site-logo[role="img"] {
  width: var(--site-logo-width) !important;
  height: auto !important;
}

/* ===== container / site frame ===== */
.container, .rental-container, .about-container {
  max-width: var(--container-max-width);
  margin: 2.5rem auto;
  padding: var(--container-padding);
  background: var(--container-bg);
  color:#fff;
  border-radius:1.2rem;
  box-shadow:0 2px 20px rgba(0,0,0,0.19);
  text-align:center;
}
@media (max-width:700px) { .container, .rental-container, .about-container { padding:1.1rem 5vw; } }

/* ===== NAV ===== */
.nav-left-placeholder,
.nav-center > [aria-hidden="true"] {
  width: 40px;
  height: 36px;
  background: transparent !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  line-height: 0 !important;
}
.navbar-minimal {
  width:100%;
  background:var(--nav-bg-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
  padding:.9rem 0;
  margin-bottom:1.5em;
  position:relative;
  z-index:1200;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.nav-center { max-width: var(--container-max-width); margin:0 auto; padding:0 12px; display:flex; align-items:center; justify-content:space-between; position:relative; height:100%; }
.nav-links { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center; justify-content:center; white-space:nowrap; z-index:10; }
.nav-links a { color:var(--white); text-decoration:none; padding:12px 18px; border-radius:12px; background: rgba(255,255,255,0.06); font-weight:700; font-size:1.05rem; transition: background .15s, transform .12s; }
.nav-links a:hover, .nav-links a:focus { background: rgba(255,255,255,0.12); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.12); outline:none; }
.nav-links a.active { background: linear-gradient(180deg,var(--brand-green-1),var(--brand-green-2)); color:#fff; box-shadow: 0 10px 26px rgba(33,112,106,0.18); transform:none; }

/* hamburger */
.nav-toggle { display:none; background:transparent; border:none; padding:8px; border-radius:var(--btn-radius); cursor:pointer; align-items:center; justify-content:center; position:relative; z-index:1400; }
.hamburger { width:22px; height:2px; background:var(--white); position:relative; display:block; border-radius:2px; transition: transform .18s, background .18s; }
.hamburger::before, .hamburger::after { content:""; position:absolute; left:0; width:100%; height:2px; background:var(--white); border-radius:2px; transition: transform .18s, top .18s, opacity .18s; }
.hamburger::before { top:-7px } .hamburger::after { top:7px }
.nav-toggle.open .hamburger { background: transparent; }
.nav-toggle.open .hamburger::before { transform: rotate(45deg) translate(5px, 5px); top:0; }
.nav-toggle.open .hamburger::after { transform: rotate(-45deg) translate(5px, -5px); top:0; }
@media (max-width:760px) { .nav-links { display:none; } .nav-toggle { display:inline-flex; } }

/* ===== MOBILE MENU (floating) ===== */
.mobile-menu-wrap {
  position: absolute;
  top: calc(100% + 8px);
  right: 12px;
  z-index: 1300;
  min-width: 220px;
  background: var(--nav-bg-strong);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.04);
  display: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .18s ease, transform .18s ease;
  opacity: 0;
  transform: translateY(-6px);
}
.mobile-menu-wrap.visible { display:block; opacity:1; transform: translateY(0); }
.mobile-menu { display:flex; flex-direction:column; gap:6px; padding:6px; }
.mobile-menu a, .mobile-menu a:visited { color: var(--white); background: transparent; padding: 10px 14px; border-radius:8px; text-decoration:none; font-weight:700; white-space:nowrap; transition: background .12s, transform .12s; display:block; }
.mobile-menu a:hover, .mobile-menu a:focus { background: rgba(255,255,255,0.06); transform: translateY(-2px); outline:none; }
.mobile-menu a.active { background: linear-gradient(180deg,var(--brand-green-1),var(--brand-green-2)); box-shadow:0 8px 24px rgba(33,112,106,0.12); color:#fff; transform:none; }

/* ===== Panels (intro + listing) ===== */
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 1.4rem;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
.panel-intro {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:22px;
}
.intro-logo { width:var(--site-logo-width); height:auto; display:block; }
.intro { max-width:760px; text-align:center; color:#e8f6f1; font-size:1.06rem; line-height:1.6; }
.intro-text { margin-bottom:0.6rem; }
.panel-listing { padding:16px; }

/* ===== Carousel ===== */
.carousel-wrap { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:1.2rem; flex-wrap:wrap; position:relative; }
.carousel-main { position:relative; width:680px; max-width:92vw; height:420px; background:#111; border-radius:12px; overflow:hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; }
.carousel-main img { width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }
.carousel-caption { position:absolute; left:20px; bottom:18px; background: linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0.48)); padding:10px 14px; border-radius:10px; color:#fff; text-align:left; }
.carousel-arrow { background:none; border:none; width:44px; height:44px; border-radius:8px; background: rgba(0,0,0,0.48); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:26px; cursor:pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.32); transition: transform .12s, background .12s; }
.carousel-arrow:hover { transform: translateY(-2px); background: rgba(0,0,0,0.62); }
@media (max-width:540px) { .carousel-arrow { display:none; } }
.carousel-thumbs { margin-top:12px; display:flex; gap:10px; overflow:hidden; white-space:nowrap; padding:6px 4px; justify-content:center; width:100%; }
.carousel-thumbs img { width:110px !important; height:70px !important; object-fit:cover !important; border-radius:8px; cursor:pointer; border:2px solid transparent; transition: transform .12s, box-shadow .12s, border-color .12s; display:inline-block; }
.carousel-thumbs img.active { transform: translateY(-4px); border-color: var(--brand-green-2); box-shadow: 0 10px 28px rgba(33,112,106,0.12); }

/* ===== Lightbox ===== */
.modal { position:fixed; z-index:9999; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,0.9); display:none; align-items:center; justify-content:center; padding:1.5rem; box-sizing:border-box; }
.lightbox { max-width:1100px; width:100%; height:86vh; background:#fff; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.lightbox-main { width:100%; height:calc(100% - 110px); display:flex; align-items:center; justify-content:center; background:#000; position:relative; }
.lightbox-main img { max-width:100%; max-height:100%; object-fit:contain; display:block; margin:0 auto; }
.lightbox-thumbs { width:100%; padding:10px; box-sizing:border-box; background:#fafafa; display:flex; gap:.6rem; overflow-x:auto; border-top:1px solid rgba(0,0,0,0.06); }
.lightbox-thumbs img { width:110px; height:70px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; }
.lightbox-thumbs img.active { border-color:var(--brand-green-2); box-shadow:0 6px 18px rgba(0,0,0,0.12); }
.lb-btn { position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:8px; border:none; background: rgba(0,0,0,0.48); color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; cursor:pointer; z-index:10002; box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
.lb-btn:hover { background: rgba(0,0,0,0.62); transform: translateY(-50%) scale(1.03); }
.lb-prev { left:12px; } .lb-next { right:12px; }
.close { position:absolute; top:16px; right:16px; z-index:10003; width:40px; height:40px; border-radius:8px; border:none; background: rgba(0,0,0,0.45); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.slideshow-toggle { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:10002; width:40px; height:40px; border-radius:8px; background: rgba(255,255,255,0.92); color:#111; border:none; font-size:16px; box-shadow:0 6px 18px rgba(0,0,0,0.12); cursor:pointer; }

/* ===== Details & Pricing ===== */
.features-list { list-style:none; margin:0 auto; padding:0; max-width:820px; columns:2; gap:1.1rem; }
.features-list li { position:relative; padding-left:32px; margin-bottom:0.9rem; font-size:1.03rem; line-height:1.36; color:#eef7f4; }
.features-list li::before { content: "•"; position:absolute; left:0; top:2px; font-size:22px; color: var(--white); text-shadow: 0 1px 0 rgba(0,0,0,0.4); }
.original-price { text-decoration: line-through; color: var(--accent-red-1); font-weight:800; margin-right:0.6rem; font-size:1.05rem; vertical-align:middle; text-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.price-badge { display:inline-block; background: linear-gradient(180deg,var(--accent-red-2),var(--accent-red-1)); color:#fff; padding:.45em .9em; border-radius:12px; font-weight:800; box-shadow:0 10px 30px rgba(198,40,40,0.12); }

/* ===== Buttons, forms, badges ===== */
.btn-primary, .contact-us-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: linear-gradient(180deg, var(--brand-green-2), #1b6b62);
  color:#fff; padding:var(--btn-padding-regular); border-radius:var(--btn-radius);
  font-weight:800; text-decoration:none; border:2px solid rgba(0,0,0,0.06); box-shadow:0 14px 36px rgba(33,112,106,0.18); transition: box-shadow .12s ease, opacity .12s ease, filter .12s ease; cursor:pointer; line-height:1; white-space:nowrap;
}
.btn-primary--small, .remove-entry, .btn-mini {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:var(--btn-padding-small); border-radius: calc(var(--btn-radius)-2px); background: linear-gradient(180deg, var(--brand-green-2), #1b6b62); color:#fff; border:2px solid rgba(0,0,0,0.06); box-shadow:0 8px 22px rgba(33,112,106,0.14); cursor:pointer; font-size:0.92rem;
}
.btn-primary:hover, .btn-primary--small:hover, .remove-entry:hover, .contact-us-btn:hover { box-shadow: 0 20px 50px rgba(33,112,106,0.26); opacity:0.98; }
.btn-primary:active, .btn-primary--small:active, .remove-entry:active { box-shadow: inset 0 3px 8px rgba(0,0,0,0.12), 0 8px 26px rgba(33,112,106,0.14); opacity:0.96; }
.btn-primary:focus, .btn-primary--small:focus, .contact-us-btn:focus, .remove-entry:focus { outline: 3px solid rgba(31,143,128,0.18); outline-offset: 3px; }

/* floating contact pill */
.floating-contact { position: fixed; right: 18px; bottom: 18px; z-index: 2000; display:inline-flex; align-items:center; gap:10px; background: linear-gradient(180deg,var(--brand-green-2),#1b6b62); color:#fff; padding:12px 14px; border-radius:12px; text-decoration:none; box-shadow:0 12px 34px rgba(33,112,106,0.18); font-weight:800; font-size:0.95rem; }
.floating-contact::before { content: "✉"; display:inline-block; font-size:16px; opacity:0.95; }
.floating-contact:hover { box-shadow:0 18px 40px rgba(33,112,106,0.22); filter: saturate(1.03); }
@media (max-width:540px) { .floating-contact { display:none !important; } }

/* ===== Rental form ===== */
form#rental-form, form { display:flex; flex-direction:column; gap:1rem; align-items:center; width:100%; }
fieldset.form-section { margin-bottom:2.4rem; padding:1.6rem; background: rgba(255,255,255,0.03); border-radius:1rem; border:1px solid rgba(255,255,255,0.06); max-width:700px; width:100%; box-shadow: 0 6px 24px rgba(0,0,0,0.12); }
fieldset.form-section h2 { margin-top:0; margin-bottom:0.8rem; font-size:1.25rem; text-align:center; color:#F7F7F7; }
label { display:block; color:#F7F7F7; font-weight:600; margin-bottom:0.35rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="url"], textarea, select, input[type="number"] { width:100%; max-width:640px; padding:0.9em; border-radius:8px; border:1px solid var(--muted); background: rgba(255,255,255,0.06); color:#fff; font-size:1rem; margin-bottom:0.9rem; box-sizing:border-box; }
textarea { min-height:120px; resize:vertical; }
.helper { color:#dfeee9; font-size:0.95rem; text-align:center; margin:0.4rem 0; }

/* select */
select { background: rgba(255,255,255,0.06); color: #ffffff; border:1px solid var(--muted); border-radius:8px; padding:0.85em 1rem; appearance:none; cursor:pointer; }
select:focus { outline:3px solid rgba(31,143,128,0.12); outline-offset:3px; }

/* pets */
.pets-center-block { display:flex; flex-direction:column; align-items:center; gap:8px; }
.pet-radio-group { display:flex; gap:16px; align-items:center; justify-content:center; }
.pet-option { display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; user-select:none; position:relative; }
.pet-option input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.radio-square { width:44px; height:44px; border-radius:10px; border:2px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; font-size:18px; color:transparent; transition: transform .10s, box-shadow .12s, background .10s, border-color .10s; box-shadow: 0 6px 14px rgba(0,0,0,0.12); }
.radio-square .icon { font-weight:700; font-size:18px; color:#fff; opacity:0; transform:scale(.95); transition: opacity .10s, transform .10s; }
.pet-label-text { color:#F7F7F7; font-weight:700; font-size:.95rem; text-align:center; }
.pet-option input[type="radio"]:checked + .radio-square { border-color: var(--brand-green-2); background: linear-gradient(180deg, rgba(33,112,106,0.12), rgba(31,143,128,0.06)); }
.pet-option input[type="radio"]:checked + .radio-square .icon { opacity:1; transform:scale(1); color:#fff; }
@media (max-width:480px) { .radio-square { width:40px; height:40px; font-size:16px; } }

/* ===== Utilities ===== */
.hidden { display:none !important; }
.visible { display:block !important; }

/* ===== Footer (fixed spacing and stacked order) =====
   Ensures the about page matches index & application (email above Facebook),
   and eliminates the extra/double spacing that appeared on about.
*/
footer {
  background: rgba(0,0,0,0.60);
  color:#fff;
  text-align:center;
  padding:2em 1em;
  margin:3em auto 0 auto;
  border-radius:1.2em;
  max-width: var(--container-max-width);
  box-shadow:0 1px 12px rgba(0,0,0,0.13);
}

/* Force consistent stacked layout and remove extra margins that caused double spacing */
footer .footer-row {
  display:flex !important;
  flex-direction:column !important; /* email above social link */
  gap:0.6rem !important;
  align-items:center;
  justify-content:center;
  margin:0 !important;
  padding:0 !important;
}

/* contact link blocks */
footer .email-link, footer .social-link {
  display:flex;
  gap:.6rem;
  align-items:center;
  justify-content:center;
}

/* privacy text */
footer .privacy {
  font-size:0.93em;
  opacity:0.85;
  text-align:center;
  margin-top:0.6rem;
}

/* ===== Footer icons: force consistent small size (fixes oversized remote SVGs) =====
   - Targets the specific icon class used in footer markup (.icon) and the
     footer link images to ensure small, predictable sizing.
   - Uses !important to override inline SVG attributes from remote files if necessary.
*/
footer img.icon,
footer .email-link img,
footer .social-link img {
  width: 22px !important;
  height: 22px !important;
  max-width: none !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* Backwards-compatible selector: keep older, simpler rule as fallback */
footer img { height:22px; vertical-align:middle; }

/* footer links */
footer a { color:#fff; text-decoration:underline; }

/* focus helpers */
a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid rgba(31,143,128,0.12); outline-offset: 3px; }

/* responsiveness tweaks */
@media (max-width:880px) {
  .features-list { columns:1; }
  .carousel-main { height:320px; }
}
@media (max-width:700px) {
  .container, .rental-container, .about-container { margin:1rem 1rem; border-radius:1rem; padding:1.1rem; }
  footer .footer-row { gap:0.6rem; }
}

/* desktop widen overrides (conservative) */
@media (min-width:1100px) {
  .carousel-main { width:780px; height:460px; }
  .carousel-thumbs img { width:120px !important; height:78px !important; }
}