/*! *
Theme Name: Sunland Website Theme
Author: Sunland RV Resorts
Author URI: https://www.sunlandrvresorts.com/
Description: This is a custom child theme for Sunland Website. Please do not edit this file or disable it. If you are not sure, please contact the author of the theme.
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sunland-website-theme
Template: astra */

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

:root {
  /* Colors */
  --color-primary: #354f93;
  --color-primary-light: #7e91c4;
  --color-secondary: #ffc526;
  --color-secondary-hover: #f4b300;
  --color-text: #202020;
  --color-text-dark: #303030;
  --color-text-gray: #5f6868;
  --color-text-light: #3f444b;
  --color-light-bg: #f1f0f0;
  --color-bg-light-blue: aliceblue;
  --color-accent: #0071e3;
  --color-accent-light: rgba(0, 113, 227, 0.1);
  --color-error: #ea4335;
  --color-border: #e3e3e3;
  --color-border-gray: lightgray;
  --color-gray: darkgray;
  --color-white: #fff;
  --color-slate: #334155;
  
  /* Spacing */
  --spacing-xs: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem);
  --spacing-s: clamp(1.5rem, 1.2692rem + 1.0256vw, 2.5rem);
  --spacing-m: clamp(4rem, 3.76915rem + 1.026vw, 5rem);
  --spacing-l: clamp(7rem, 6.76915rem + 1.026vw, 8rem);
  --spacing-pad-s: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem);
  --spacing-pad-m: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem);
  --spacing-pad-l: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);
  
  /* Typography Scale */
  --text-xs: clamp(0.8125rem, 0.7409rem + 0.2729vw, 0.9375rem);
  --text-sm: clamp(1.2rem, 1.0914rem + 0.2266vw, 1.25rem);
  --text-base: 17px;
  --text-md: clamp(1.6rem, 1.2741rem + 0.6799vw, 1.75rem);
  
  /* Heading Sizes */
  --text-h1: clamp(3.1875rem, 3.0904rem + 0.3883vw, 3.4011rem);
  --text-h2: clamp(2.3906rem, 2.3178rem + 0.2912vw, 2.5508rem);
  --text-h3: clamp(1.9922rem, 1.9315rem + 0.2427vw, 2.1257rem);
  --text-h4: clamp(1.5938rem, 1.5452rem + 0.1941vw, 1.7005rem);
  --text-h5: clamp(1.3281rem, 1.2877rem + 0.1618vw, 1.4171rem);
  --text-h6: clamp(1.1953rem, 1.1589rem + 0.1456vw, 1.2754rem);
  --text-h2-alt: clamp(2.25rem, 2.0455rem + 0.8182vw, 2.7rem);
  --text-h1-page: clamp(2.6rem, 1.7309rem + 1.813vw, 3rem);
  
  /* Font Families */
  --font-body: "NunitoSans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-modal: 9999999;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 12px;
  
  /* Transitions */
  --transition-base: 0.3s ease;
}

/* ==========================================================================
   Base Typography
   ========================================================================== */

body {
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5em;
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  text-transform: capitalize;
  font-weight: 800;
}

h1 {
  font-size: var(--text-h1);
  margin-bottom: var(--spacing-xs);
}

h2 {
  font-size: var(--text-h2);
  margin-bottom: var(--spacing-xs);
}

h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--spacing-xs);
}

h4 {
  font-size: var(--text-h4);
  margin-bottom: var(--spacing-xs);
}

h5 {
  font-size: var(--text-h5);
  margin-bottom: var(--spacing-xs);
}

h6 {
  font-size: var(--text-h6);
  margin-bottom: var(--spacing-xs);
}

.fs-h2 h1 {
  font-size: var(--text-h2-alt);
}

h1.page-title {
  text-align: center;
  margin: 0;
  color: var(--color-white);
  font-weight: 700;
}

h1.ast-advanced-headers-title {
  margin: 0;
  font-size: var(--text-h1-page);
  color: var(--color-white);
}

/* ==========================================================================
   Lists
   ========================================================================== */

ol, ul {
  margin: 0 0 1.5em 1em;
}

.custom-icon-list {
  list-style: none;
  padding-left: 0;
}

.custom-icon-list li {
  position: relative;
  padding-left: 1.2em;
  font-weight: 700;
  text-transform: capitalize;
}

.custom-icon-list li::before {
  content: "\276F";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-size: 1rem;
}

/* ==========================================================================
   Links
   ========================================================================== */

p a:link {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  cursor: pointer;
  font-weight: bold;
}

p a:hover {
  text-decoration: none;
  color: var(--color-primary-light);
}

/* ==========================================================================
   Utility Classes - Spacing
   ========================================================================== */

.pad-s {
  padding: var(--spacing-pad-s);
}

.pad-m {
  padding: var(--spacing-pad-m);
}

.pad-l {
  padding: var(--spacing-pad-l);
}

.pad-tb-s {
  padding: var(--spacing-s) 0;
}

.pad-tb-m {
  padding: var(--spacing-m) 0;
}

.pad-tb-l {
  padding: var(--spacing-l) 0;
}

.pad-t-s {
  padding-top: var(--spacing-s);
}

.pad-t-m {
  padding-top: var(--spacing-m);
}

.pad-t-l {
  padding-top: var(--spacing-l);
}

.pad-b-s {
  padding-bottom: var(--spacing-s);
}

.pad-b-m {
  padding-bottom: var(--spacing-m);
}

.pad-b-l {
  padding-bottom: var(--spacing-l);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.buttonlink1 {
  padding: 12px 30px;
  border-width: 2px;
  border-style: solid;
  border-radius: var(--radius-md);
  color: var(--color-slate);
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.buttonlink1:hover {
  background: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  color: var(--color-slate);
}

.buttonlink1:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.buttonlink2 {
  padding: 12px 30px;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-md);
  color: var(--color-white);
  background: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.buttonlink2:hover {
  background: var(--color-white);
  border: 2px solid var(--color-white);
  color: var(--color-primary);
}

.buttonlink2:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

.ahfb-svg-iconset svg {
  width: 30px;
  height: 30px;
}

.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close {
  font-size: 30px;
}

.ast-mobile-popup-drawer {
  transition: transform var(--transition-base);
}

.ast-mobile-popup-drawer.active .menu-toggle-close:focus {
  border-style: none;
  border-color: inherit;
  border-width: thin;
}

.ast-header-break-point .ast-icon.icon-arrow svg {
  height: 1.1em;
  width: 1em;
  fill: var(--color-white);
}

.ast-desktop .submenu-with-border .astra-megamenu {
  border-width: 0;
}

ul.sub-menu {
  padding: 0.5em 0.6em;
}

.main-header-menu .sub-menu .menu-link {
  padding: 0;
  line-height: 32px;
}

.ast-builder-menu-1 .menu-item > .menu-link {
  font-size: var(--text-xs);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-white);
  text-align: center;
}

.breadcrumbs a {
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
}

/* ==========================================================================
   Elementor Components
   ========================================================================== */

.elementor-cta__bg-wrapper {
  border-radius: var(--radius-lg);
}

.elementor-cta__title {
  font-size: var(--text-h2);
}

.elementor-slides-wrapper {
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   Accordion Styles
   ========================================================================== */

.sp-easy-accordion > .sp-ea-single {
  margin-bottom: 14px;
  border: 1px solid var(--ast-global-color-0);
}

.sp-easy-accordion .sp-ea-single .ea-header {
  border-bottom: 2px solid var(--ast-global-color-1);
  background: var(--ast-global-color-0);
}

.sp-easy-accordion > .sp-ea-single > .ea-header a .ea-expand-icon {
  color: var(--color-white) !important;
}

.sp-easy-accordion > .sp-ea-single > .sp-collapse > .ea-body {
  background: var(--color-light-bg) !important;
  color: var(--color-text) !important;
}

.sp-easy-accordion > .sp-ea-single > .sp-collapse > .ea-body p {
  margin-bottom: 5px !important;
  text-wrap: pretty;
}

.sp-easy-accordion > .sp-ea-single > .ea-header a {
  color: var(--color-white) !important;
}

.sp-easy-accordion .sp-ea-single .ea-header a {
  font-weight: inherit;
  color: var(--color-white) !important;
  font-size: var(--text-sm);
  letter-spacing: 0.5px;
}

/* ==========================================================================
   Blog Post Styles
   ========================================================================== */

.blogpost h2 {
  font-size: var(--text-h3);
}

.blogpost h3 {
  font-size: var(--text-h4);
}

/* ==========================================================================
   Media & Images
   ========================================================================== */

.wp-caption img {
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   Animations
   ========================================================================== */

.reloop-icon .elementor-button-icon {
  display: inline-flex;
  position: relative;
  transition: none;
}

.reloop-icon:hover .elementor-button-icon {
  animation: icon-reloop 0.4s ease forwards;
}

@keyframes icon-reloop {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  30% {
    transform: translateX(10px);
    opacity: 0;
  }
  31% {
    transform: translateX(-10px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ==========================================================================
   Gravity Forms - Base Styles
   ========================================================================== */

.gform_wrapper {
  padding: 10px;
}

.gform_description {
  color: var(--color-gray);
  font-size: 15px;
  font-family: var(--font-heading);
}

/* Form Labels */

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 8px;
  display: inline-block;
  font-family: var(--font-heading);
}

.gform_wrapper .ginput_complex label,
.gform_wrapper .ginput_complex legend {
  color: var(--color-gray);
  font-size: 13px;
}

/* Form Inputs - Text, Email, Tel, etc. */

.gform_wrapper .gfield input.large,
.gform_wrapper .gfield select.large,
.gform_wrapper .gfield input.medium,
.gform_wrapper .gfield select.medium,
.gform_wrapper .gfield input.small,
.gform_wrapper .gfield select.small,
.gform_wrapper input[type="email"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="text"],
.gform_wrapper input[type="url"] {
  border-radius: var(--radius-md);
  color: var(--color-text-gray);
  font-family: var(--font-heading);
  line-height: 3em;
  background-color: var(--color-bg-light-blue);
  border-color: var(--color-primary);
  border-width: 2px;
  border-style: solid;
  font-weight: 600;
  min-height: 45px;
}

.gform_wrapper input[type="email"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="text"],
.gform_wrapper input[type="url"] {
  min-width: 90%;
}

/* Form Input Focus States */

.gform_wrapper .gfield input.large:focus,
.gform_wrapper .gfield input.medium:focus,
.gform_wrapper .gfield input.small:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper textarea:focus {
  box-shadow: none;
  border-color: var(--color-primary-light);
  border-style: solid;
  border-width: 2px;
}

/* Textarea */

.gform_wrapper textarea {
  background-color: var(--color-bg-light-blue);
  border-color: var(--color-primary);
  border-radius: var(--radius-md);
  border-width: 2px;
  border-style: solid;
}

/* Select Dropdowns */

select {
  -webkit-appearance: none;
  min-height: 32px;
}

body .gform_wrapper .gform_body .gform_fields .gfield select {
  border-style: solid;
  border-width: 2px;
  border-color: var(--color-primary);
  min-width: 100px;
  min-height: 45px;
}

/* Name Fields */

body .gform_wrapper .gform_body .gform_fields .gfield .name_first input,
body .gform_wrapper .gform_body .gform_fields .gfield .name_last input {
  background-color: var(--color-bg-light-blue);
  color: #575252;
  border-color: var(--color-primary);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--radius-md);
}

/* Complex Inputs */

.gform_wrapper .ginput_complex input,
.gform_wrapper .ginput_complex select {
  width: 100%;
  border-radius: var(--radius-md);
  color: var(--color-gray);
  font-family: var(--font-heading);
  line-height: 1.5;
  background-color: var(--color-bg-light-blue);
  border-color: var(--color-primary);
  border-width: 2px;
  border-style: solid;
}

.gform_wrapper .ginput_complex input:focus,
.gform_wrapper .ginput_complex select:focus {
  box-shadow: none;
  border-color: var(--color-border);
  border-style: solid;
  border-width: 1px;
}

/* Time Container */

.gform_wrapper .ginput_container_time {
  min-width: 86px;
}

/* Chained Select */

.gform_wrapper .gfield_chainedselect.horizontal select {
  background-color: var(--color-bg-light-blue);
  border-width: 0;
  border-radius: 8px;
  color: var(--color-accent);
  min-width: 120px;
}

/* Form Descriptions */

.gform_wrapper .description,
.gform_wrapper .gfield_description,
.gform_wrapper .gsection_description,
.gform_wrapper .instruction {
  color: var(--color-gray);
  font-size: var(--text-sm);
}

body .gform_wrapper .gform_body .gform_fields .gfield_html {
  background-color: transparent;
  box-shadow: none;
  color: var(--color-gray);
  font-family: var(--font-heading);
  font-size: 16px;
}

/* Form Links */

.gform_wrapper a,
body .gform_wrapper .gform_body .gform_fields a {
  color: var(--color-primary);
}

/* Required Field Indicator */

.gform_wrapper .gfield_required {
  color: var(--color-error);
}

/* ==========================================================================
   Gravity Forms - Multi-Select & Chosen Plugin
   ========================================================================== */

.gform_wrapper .chosen-container-multi .chosen-choices li.search-choice {
  position: relative;
  margin: 3px 5px 3px 0;
  max-width: 100%;
  border-radius: 3px;
  background-image: none;
  background-size: 100% 19px;
  background-repeat: repeat-x;
  background-clip: padding-box;
  line-height: 13px;
  cursor: default;
  background-color: var(--color-accent-light);
  color: var(--color-accent);
  padding: 5px 20px;
  box-shadow: none;
  border-width: 0;
  border-color: var(--color-border);
}

.gform_wrapper .chosen-container-multi .chosen-choices {
  border-radius: var(--radius-md);
  background: var(--color-bg-light-blue);
  color: var(--color-accent);
  font-family: var(--font-heading);
  line-height: 1.5;
  background-color: var(--color-bg-light-blue);
  border: 1px solid var(--color-border);
}

.gform_wrapper .chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  width: 100%;
  border-top: 0;
  background: var(--color-white);
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
  display: none;
  background-color: var(--color-white);
  z-index: var(--z-modal);
  margin-bottom: 30px;
  padding-bottom: 19px;
  border-radius: 10px;
  border-width: 0;
}

.gform_wrapper .chosen-container .chosen-results li.active-result {
  background: var(--color-white);
}

.gform_wrapper .chosen-container .chosen-results li.active-result:hover {
  background: var(--color-bg-light-blue);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-gray);
}

/* ==========================================================================
   Gravity Forms - Datepicker
   ========================================================================== */

.gform-theme-datepicker:not(.gform-legacy-datepicker) {
  background: var(--color-white);
  border: 1px solid var(--color-border-gray);
}

.ui-datepicker:not(.gform-legacy-datepicker)[style] {
  z-index: var(--z-modal);
}

.gform-theme-datepicker:not(.gform-legacy-datepicker) .ui-datepicker-calendar .ui-datepicker-current-day .ui-state-default {
  background: var(--color-accent-light);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ==========================================================================
   Gravity Forms - Progress Bar
   ========================================================================== */

.gform_wrapper .gf_progressbar_blue {
  background: var(--color-border);
}

.gform_wrapper .gf_progressbar_percentage.percentbar_blue {
  background-color: #1a73e8;
  color: var(--color-white);
  font-family: var(--font-heading);
}

.gform_wrapper .gf_progressbar_title {
  color: var(--color-white);
}

/* ==========================================================================
   Gravity Forms - Sections
   ========================================================================== */

.gform_wrapper .gsection {
  border-bottom: 1px dashed var(--color-primary);
  padding: 1.25rem 0 0.5rem;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

body .gform_wrapper .gform_body .gform_fields .gsection .gsection_title {
  position: relative;
  margin: 10px auto;
  color: var(--color-primary);
  font-size: var(--text-md);
  font-weight: 900;
  display: inline-block;
}

body .gform_wrapper .gform_body .gform_fields .gsection .gsection_description {
  color: var(--color-text-light);
  font-size: inherit;
}

/* ==========================================================================
   Gravity Forms - Consent Fields
   ========================================================================== */

.gfield_consent_label {
  color: var(--color-primary);
  box-shadow: none;
  font-weight: 600;
}

.gform_wrapper .field_description_below .gfield_consent_description,
.gform_wrapper .gfield_consent_description {
  border: transparent;
}

/* ==========================================================================
   Gravity Forms - Submit Buttons
   ========================================================================== */

body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer input[type="button"],
body .gform_wrapper .gform_footer input[type="reset"],
body .gform_wrapper .gform_page_footer input[type="submit"],
body .gform_wrapper .gform_page_footer input[type="button"],
body .gform_wrapper .gform_page_footer input[type="reset"] {
  width: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  border: 2px solid var(--color-primary);
  font-size: var(--text-sm);
  font-family: var(--font-heading);
  line-height: 1.4;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 0;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 12px 45px;
}

body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer input[type="button"]:hover,
body .gform_wrapper .gform_page_footer input[type="submit"]:hover,
body .gform_wrapper .gform_page_footer input[type="button"]:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-dark);
}

.gform_wrapper.gravity-theme .gform_footer button + input,
.gform_wrapper.gravity-theme .gform_footer input + button,
.gform_wrapper.gravity-theme .gform_footer input + input,
.gform_wrapper.gravity-theme .gform_page_footer button + input,
.gform_wrapper.gravity-theme .gform_page_footer input + button,
.gform_wrapper.gravity-theme .gform_page_footer input + input {
  margin-left: 0;
}

.gform-theme--foundation #field_submit,
.gform-theme--foundation .gform_footer,
.gform-theme--foundation .gform_page_footer {
  justify-content: center;
  margin: 0 auto;
}