.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   Sherwood Glen Apartments
   Site styles layered over the nexsas template. Grouped by intent so any single
   rule can be found and changed later.
   ========================================================================== */

/* --- Brand tokens ------------------------------------------------------- */
:root {
  --sg-navy: #1F394F;
  --sg-navy-deep: #16293A;
  --sg-taupe: #C9B7A3;
  --sg-sand: #EFE9E1;
  --sg-ink: #1A1A1C;
  --sg-hairline: #E6E8EC;
  --sg-shadow: 0 2px 14px rgba(15, 27, 36, .09);
}

/* --- Header: three separate zones --------------------------------------- */
/* The bar is transparent; logo, nav and CTA each carry their own surface, so the
   logo sits hard left and the CTA hard right with the nav alone in the middle. */
.nextsaas-header .nav-menu.header-one {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 14px;
}

.nextsaas-header .nav-menu.header-one > .header-logo {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--sg-hairline);
  border-radius: 999px;
  padding: 9px 24px;
  box-shadow: var(--sg-shadow);
}
/* No display rule here on purpose. The theme prints both a desktop and a mobile logo and
   relies on Tailwind's `hidden md:block` / `block md:hidden` to show one at a time, so
   forcing display:block renders the wordmark twice, stacked. */
.nextsaas-header .nav-menu.header-one > .header-logo img {
  width: auto;
  max-width: 168px;
  height: auto;
}

.nextsaas-header .nextsaas_nav_menu {
  background: #fff;
  border: 1px solid var(--sg-hairline);
  border-radius: 999px;
  padding: 5px 10px;
  box-shadow: var(--sg-shadow);
}
.nextsaas-header .nextsaas_nav_menu > li { padding: 0 !important; }
.nextsaas-header .nextsaas_nav_menu > li > a {
  white-space: nowrap;          /* "Floor Plans" was wrapping onto two lines */
  padding: 9px 15px;
  border-radius: 999px;
  color: var(--sg-ink);
  transition: background-color .18s ease, color .18s ease;
}
.nextsaas-header .nextsaas_nav_menu > li > a:hover {
  background: var(--sg-sand);
  color: var(--sg-navy);
}
.nextsaas-header .nextsaas_nav_menu > li.current-menu-item > a,
.nextsaas-header .nextsaas_nav_menu > li.current_page_item > a {
  background: var(--sg-sand);
  color: var(--sg-navy);
  font-weight: 500;
}

/* --- Buttons: brand navy, never the template's purple -------------------- */
.nextsaas-header .btn.btn-primary,
.nextsaas-header .nav-menu .btn.btn-primary {
  background: var(--sg-navy) !important;
  border-color: var(--sg-navy) !important;
  color: #fff !important;
  white-space: nowrap;
  box-shadow: var(--sg-shadow);
}
.nextsaas-header .btn.btn-primary:hover {
  background: var(--sg-navy-deep) !important;
  border-color: var(--sg-navy-deep) !important;
  color: #fff !important;
}
/* the arrow glyph the theme injects before the label */
.nextsaas-header .btn.btn-primary::before { filter: brightness(0) invert(1); }

/* --- Badges: the template's lime green reads as generic SaaS ------------- */
.elementor-widget-nextsaas_badge .badge,
.elementor-widget-nextsaas_badge > div > span,
span.nextsaas-badge,
.nextsaas_badge_wrapper span {
  background: var(--sg-sand) !important;
  color: var(--sg-navy) !important;
  border-color: var(--sg-taupe) !important;
  letter-spacing: .04em;
  text-transform: none !important;   /* the theme lower-cased "West Olympia" */
}

/* --- Body buttons: match the header, not the template's near-black ------- */
.elementor-widget-nextsaas-button .btn,
.nextsaas_button_wrap .btn {
  background: var(--sg-navy) !important;
  border-color: var(--sg-navy) !important;
  color: #fff !important;
}
.elementor-widget-nextsaas-button .btn:hover,
.nextsaas_button_wrap .btn:hover {
  background: var(--sg-navy-deep) !important;
  border-color: var(--sg-navy-deep) !important;
  color: #fff !important;
}

/* --- Consistent corners on every photograph -------------------------------
   The template mixed radii: one welcome image had square corners (0px), the monument sign
   was rounded on the top two corners only (20px 20px 0 0), and the rest were 20px. Mixed
   corners on adjacent images is the main reason the sections looked unfinished. */
.elementor-widget-image img { border-radius: 20px !important; }
/* the logo and the site icon are not content photographs */
.nextsaas-header .header-logo img,
#nextsass-footer .elementor-widget-image img { border-radius: 0 !important; }

/* --- Two header calls to action ------------------------------------------
   "Schedule a Tour" is the softer, higher volume action and comes first as an outline
   button; "Apply Now" follows as the solid one, so they read as a pair rather than two
   competing primaries. */
.nextsaas-header .nav-menu > div > a.btn:first-child {
  background: #fff !important;
  border-color: var(--sg-navy) !important;
  color: var(--sg-navy) !important;
}
.nextsaas-header .nav-menu > div > a.btn:first-child span { color: var(--sg-navy) !important; }
.nextsaas-header .nav-menu > div > a.btn:first-child:hover {
  background: var(--sg-sand) !important;
}
.nextsaas-header .nav-menu > div > a.btn:first-child::before { filter: none; }
.nextsaas-header .nav-menu > div { gap: 8px !important; }

/* --- Tabs: navy, not the template's violet ------------------------------- */
.bg-primary-500, .active-tab-bar { background-color: var(--sg-navy) !important; }
[class*="tab"] .bg-primary-500 { background-color: var(--sg-navy) !important; }
.text-primary-500 { color: var(--sg-navy) !important; }
.border-primary-500 { border-color: var(--sg-navy) !important; }

/* --- Never stretch a photograph ------------------------------------------
   Several template slots set both a width and a height, and the default object-fit of
   `fill` squashes the photo to match. Cropping is always better than distorting: a 3:2
   carport shot was being squeezed into a portrait box on the Amenities page. */
.elementor-widget-image img,
.elementor-widget-theme-post-featured-image img {
  object-fit: cover;
  object-position: center;
}

/* --- Card imagery: one crop, so grids stop looking ragged ---------------- */
.sg-card .elementor-widget-container,
.sg-card { width: 100%; }
/* Square crops: taller than the original 4:3, which left the cards looking like
   thumbnails, and a square grid reads as deliberate rather than incidental. */
.sg-card img {
  display: block;
  width: 100% !important;
  /* the theme sets an explicit pixel height per widget, which overrides aspect-ratio and
     left these cards short and wide; height must be forced back to auto for the ratio to
     take effect */
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px !important;
}
/* Single square feature photo, used where an overlapping collage was removed. */
.sg-square img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px !important;
}

/* the two-photo pair in the location section */
.sg-photo img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 18px;
}
/* the welcome collage: keep the overlap intentional rather than clipped */
.sg-collage img {
  border-radius: 16px;
  object-fit: cover;
}

/* --- Feature grids: equal columns -----------------------------------------
   The theme gave the middle column a slightly smaller percentage, so at a fixed aspect
   ratio one card per row came out shorter than its neighbours. */
.sg-grid > .e-con {
  flex: 0 0 auto !important;
  width: calc((100% - 2 * 28px) / 3) !important;
}
@media (max-width: 1024px) {
  .sg-grid > .e-con { width: calc((100% - 28px) / 2) !important; }
}
@media (max-width: 640px) {
  .sg-grid > .e-con { width: 100% !important; }
}

/* --- Gallery --------------------------------------------------------------
   Square crops on a three-up grid, so rows line up whatever each photo's native ratio is.
   The floor plan drawings are line art, so they get a contained fit on a tinted mat
   instead of being cropped. */
.sg-gal img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px !important;
  transition: transform .35s ease, box-shadow .35s ease;
}
.sg-gal img:hover {
  transform: scale(1.02);
  box-shadow: 0 14px 36px rgba(15, 27, 36, .16);
}
.sg-gal-plan img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #F4F1EC;
  border-radius: 20px !important;
}

/* --- Floor plan cards -----------------------------------------------------
   Replaces the theme's pricing matrix. The drawings are line art on white, so they get a
   contained fit on a tinted panel rather than a cover crop, which would cut off rooms. */
.sg-plan-card { overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.sg-plan-card:hover {
  box-shadow: 0 12px 34px rgba(15, 27, 36, .10);
  transform: translateY(-2px);
}
.sg-plan-img img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #F4F1EC;
  border-radius: 0 !important;
}
.sg-plan-btn .elementor-button {
  background: var(--sg-navy) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 500;
}
.sg-plan-btn .elementor-button:hover { background: var(--sg-navy-deep) !important; }
/* the included list reads as two columns on desktop, one on narrow screens */
.sg-included-list .elementor-icon-list-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
}
@media (max-width: 767px) {
  .sg-included-list .elementor-icon-list-items { grid-template-columns: 1fr; }
}

/* --- Featured plan card --------------------------------------------------
   The highlighted plan sits on a near-black panel, but the template's `text-accent`
   utility resolves to black in light mode, so the plan name and its description were
   black on near-black and effectively invisible. */
.pricing-card.featured-card .bg-secondary,
.pricing-card.featured-card .bg-secondary h1,
.pricing-card.featured-card .bg-secondary h2,
.pricing-card.featured-card .bg-secondary h3,
.pricing-card.featured-card .bg-secondary h4,
.pricing-card.featured-card .bg-secondary span,
.pricing-card.featured-card .bg-secondary li { color: #FCFCFC !important; }
.pricing-card.featured-card .bg-secondary p { color: rgba(252, 252, 252, .74) !important; }
.pricing-card.featured-card .bg-secondary svg,
.pricing-card.featured-card .bg-secondary i {
  color: var(--sg-taupe) !important;
  fill: var(--sg-taupe) !important;
}
/* keep the card's own call-to-action readable against that dark panel */
.pricing-card.featured-card .bg-secondary .btn {
  background: #fff !important; border-color: #fff !important;
}
.pricing-card.featured-card .bg-secondary .btn span { color: var(--sg-navy) !important; }

/* --- Photo bands: text needs a scrim to be readable ----------------------
   The community-amenities band uses a building photograph as its background. Without
   darkening, the paragraph was dark grey text on a bright photo and the tick list was
   near-white on the same photo. Set here rather than in the container's own settings
   because Elementor did not regenerate that page's CSS after the REST write. */
.sg-band { position: relative; isolation: isolate; }
.sg-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 32, 43, .88) 0%, rgba(18, 32, 43, .66) 100%);
  border-radius: inherit;
  z-index: -1;
}
.sg-band, .sg-band h1, .sg-band h2, .sg-band h3, .sg-band h4, .sg-band h5, .sg-band h6,
.sg-band p, .sg-band li, .sg-band span { color: #FCFCFC !important; }
.sg-band svg, .sg-band i { color: var(--sg-taupe) !important; fill: var(--sg-taupe) !important; }
.sg-band .btn {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--sg-navy) !important;
}
/* The label sits in a span, and the white-text rule above targets spans directly, so it
   wins over the colour inherited from .btn. This has to be more specific or the button
   reads as blank white. Same trap that once left every hero permanently blurred. */
.sg-band .btn span,
.sg-band a.btn span { color: var(--sg-navy) !important; }
.sg-band .btn svg, .sg-band .btn i {
  color: var(--sg-navy) !important;
  fill: var(--sg-navy) !important;
}
.sg-band .btn:hover {
  background: var(--sg-sand) !important;
  border-color: var(--sg-sand) !important;
}

/* --- Footer: navy, with the white wordmark -------------------------------
   The colours live here rather than in the footer template's own settings because
   Elementor does not reliably regenerate post-34022.css after the document is written
   over the REST API, so settings made there never reach the stylesheet. */
#nextsass-footer > .elementor > .e-con:first-child {
  background-color: var(--sg-navy) !important;
}
#nextsass-footer,
#nextsass-footer p,
#nextsass-footer li,
#nextsass-footer a { color: rgba(252, 252, 252, .72); }
#nextsass-footer h1, #nextsass-footer h2, #nextsass-footer h3,
#nextsass-footer h4, #nextsass-footer h5, #nextsass-footer h6 {
  color: var(--sg-taupe) !important;
}
#nextsass-footer .nextsaas_nav_menu a,
#nextsass-footer .nextsaas_menu a { color: rgba(252, 252, 252, .88) !important; }
#nextsass-footer a:hover,
#nextsass-footer .nextsaas_nav_menu a:hover { color: var(--sg-taupe) !important; }
#nextsass-footer .nextsaas_nav_menu,
#nextsass-footer ul { background: none; border: 0; box-shadow: none; padding: 0; }
#nextsass-footer a { transition: color .18s ease; }
#nextsass-footer img { max-width: 190px; height: auto; }

/* --- Housekeeping ------------------------------------------------------- */
/* the host plugin's credit line, pushed out of the way of the real copyright */
.milesweb-security-badge, .milesweb-footer-credit { opacity: .5; font-size: 11px; }

@media (max-width: 1279px) {
  .nextsaas-header .nav-menu.header-one > .header-logo { padding: 7px 16px; }
  .nextsaas-header .nav-menu.header-one > .header-logo img { max-width: 140px; }
}/* End custom CSS */