/* Riverfront Real Estate Styles - Additional CSS for WP-Classic pages */
/* Version: 3.0.0
   Framework: Webflow, StyleLint, Stylelint-Order
   Client: Riverfront Real Estate
   Author: C.Clapshaw */

/*=============================================
=            TABLE OF CONTENTS              =
=============================================*/
/**
 * 1. Base Styles & Typography
 * 2. Layout & Grid System 
 * 3. Navigation Components
 * 4. Menu Components
 * 5. Button Styles
 * 6. Content Sections
 * 7. Footer
 * 8. Utilities
 * 9. GSAP Classes
 * 10. Media Queries
 */

/*=====  End of TABLE OF CONTENTS  ======*/

/*=============================================
=            1. Base Styles                  =
=============================================*/

/* ===GLOBAL=== */

* {
  box-sizing: border-box;
}

:root {
  --rre-navy: #071d49;
  --rre-yellow: #ffdc24;
  --rre-grey: #c3c8d7;
  --rre-white: #ffffff;
  --rre-transparent: #0000;
  --rre-font-primary: "Roboto", sans-serif;
  --rre-font-secondary: "Merriweather", serif;
  --rre-radius: 20px;
  --rre-gap: 1rem;
  --rre-max-width: 1280px;
}

.w-layout-grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-gap: 0rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

/* Base Styles */
body {
  font-family: var(--rre-font-primary);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--rre-navy);
  background-color: var(--rre-white);
}

h1 {
  font-family: var(--rre-font-secondary);
  font-weight: 400;
  line-height: auto;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
}

h2 {
  font-family: var(--rre-font-secondary);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: auto;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

h3 {
  font-family: var(--rre-font-secondary);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2;
  padding-left: 0;
}

h4 {
  font-family: var(--rre-font-secondary);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
  padding-left: 0;
}

h5 {
  font-family: var(--rre-font-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: auto;
  text-transform: uppercase;
}

h6 {
  font-family: var(--rre-font-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: auto;
}

p {
  margin-bottom: 10px;
}

a {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Remove these EPL-specific styles */

/* Keep base styles and non-EPL specific code */


/*=====  End of Base Styles  ======*/

/*=============================================
=            2. Layout & Grid                 =
=============================================*/

/* ===PRIMARY STRUCTURE DESKTOP=== */


/*=====  End of Layout & Grid  ======*/

/*=============================================
=            3. Navigation                    =
=============================================*/

/*=== Navigation: Desktop ===*/

.menu-icon.is-invisible {
  display: none;
}

.nav_button {
  padding: 0;
  color: var(--rre-navy);
}

.nav_button:hover {
  text-decoration: underline;
}

.menu-button-desktop {
  padding: 0.4rem 1.5rem;
  color: var(--rre-navy);
  text-align: center;
  text-decoration: none;
  background-color: var(--rre-yellow);
  border: 2px solid var(--rre-navy);
  border-radius: 0 var(--rre-radius) 0 0;
}

.menu-button-desktop.is-secondary {
  background-color: transparent;
  border-top-right-radius: 0;
}

.menu-button-back {
  margin-left: 50vw;
  padding: 0.4rem 1.5rem;
  color: var(--rre-navy);
  text-align: center;
  text-decoration: none;
  background-color: var(--rre-yellow);
  border: 2px solid var(--rre-navy);
  border-radius: var(--rre-radius) 0 0 var(--rre-radius);
}

.menu-navbar-buttons {
  display: grid;
  grid-auto-columns: 1fr;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  align-items: center;
  margin-left: 1rem;
  padding-bottom: 0.5rem;
}

.menu-desktop-navbar {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.menu-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: var(--rre-transparent);
  width: 1280px;
  max-width: 100%;
  height: 100%;
}

/* Navigation */
.menu-navbar {
  position: fixed;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: auto;
  min-height: 4.5rem;
  padding: 0;
  background-color: var(--rre-transparent);
  background-image: url("https://www.riverfront.com.au/images/topnav_bkgd.png");
  background-repeat: repeat-x;
  background-position: 50% 0;
  background-size: auto;
  border-bottom: 0;
}

.menu-logo-link {
  padding-left: 0;
  padding-right: 500px;
  padding-top: 4px;
}

.menu-navbar-link {
  padding: 0.5rem 1rem;
}

.menu-navbar-link.w--current {
  color: #c3c8d7;
}

.menu-navbar.w-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
}

/*=== Navigation: Mobile ===*/

/*=====  End of Navigation  ======*/

/*=============================================
=            4. Menu Components               =
=============================================*/

/*=====  End of Menu Components  ======*/

/*=============================================
=            5. Button Styles                 =
=============================================*/

/*=====  End of Button Styles  ======*/

/*=============================================
=            6. Content Sections              =
=============================================*/

.wp-block-heading {
  padding-top: 2rem;
  padding-left: 0rem;
  padding-right: 0rem;
  margin-left: 0%;
  margin-right: 0%;
  text-align: left;
}

.wp-block-group {
  padding-right: 0px;
  padding-left: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

.pointer-events-auto {
  pointer-events: auto;
}


/*=====  End of Content Sections  ======*/

/*=============================================
=            7. Footer                        =
=============================================*/

.footer-credit-text {
  font-size: 0.875rem;
  color: #ffdc24;
}

.footer-bottom-flex {
  display: flex;
  grid-gap: 10rem;
  flex-flow: column;
  align-items: center;
  justify-content: space-between;

  padding-top: 5rem;
  padding-bottom: 1rem;
}

.footer-line-divider {
  width: 100%;
  height: 0.125rem;
  min-height: 1px;

  color: #ffdc24;

  background-color: #ffdc24;
}

.text-color-tertiary {
  color: #9c9ab5;
}

.footer-text-size-1rem {
  font-family: Roboto, sans-serif;
  font-size: 1rem;
  color: #fff;
}

.footer-light-logo {
  width: 300px;
}

.footer-suburbs-flex {
  display: flex;
  grid-gap: 3rem;
  justify-content: flex-end;

  width: 100%;
  max-width: 1280px;
}

.footer-padding-global {
  width: auto;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  padding: 5rem 1rem 0;
}

.footer-link {
  font-size: 1rem;
  line-height: 1.5;
  color: #ffdc24;
  text-transform: uppercase;
}

.footer-link:hover {
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-gap: 0;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  justify-content: flex-end;
  justify-items: center;

  width: 100%;
  max-width: 1280px;
  padding-top: 5rem;
}

.footer-address-flex {
  display: flex;
  grid-gap: 1rem;
  flex-flow: column;
}

.footer-address-padding-flex {
  display: flex;
  grid-gap: 1rem;
  flex-flow: column;
  padding-left: 5rem;
}

.footer-sitemap-flex {
  display: flex;
  grid-gap: 1rem;
  flex-flow: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.footer-padding-vertical {
  width: 100%;
  max-width: 1280px;
  padding: 5rem 0 0;
}

.footer {
  position: static;
  z-index: 0;
  bottom: 0;

  clear: none;

  width: 100%;
  height: 50svh;
  min-height: 30svh;
  max-height: none;
  margin-right: 0;
  margin-left: 0;

  color: #ffdc24;

  background-color: #071d49;
}

.footer-dark-yellow {
  color: #8b7a21;
}

/*=====  End of Footer  ======*/

/*=============================================
=            8. Utilities                     =
=============================================*/

.sidebar-old {
  position: static;
  z-index: 1;

  width: 20rem;
  height: 100px;
  margin-right: 0;
  margin-left: 632px;
  padding-top: 0;
  padding-right: 5rem;
  padding-left: 0;

  background-color: #fffef0cc;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.background-color-alternative-mid-purple {
  background-color: #9c9ab5;
}

.background-color-alternative-purple {
  background-color: #6b6890;
}

.content {
  margin: 1rem;
  padding: 2rem;
}

.main {
  display: flex;
  justify-content: center;

  width: 100%;
  height: 100vh;
  margin: 0%;
  padding: 0%;
}

.merriweather {
  font-family: Merriweather, serif;
  font-weight: 400;
}

.loop-content {
  position: static;

  overflow: hidden;

  width: 100%;
  height: auto;
  margin: 0rem;
  padding: 0rem;
}

.image {
  position: fixed;
  inset: 0%;

  width: 100svw;
  height: 100svh;

  object-fit: fill;
}

/*=============================================
=            9. GSAP CLASSES                =
=============================================*/


/*=====  End of GSAP Classes  ======*/

/*=============================================
=            10. Media Queries                =
=============================================*/

/* Large Screens (1200px and below) */
@media screen and (max-width: 1200px) {
    /* Non-EPL related styles only */
}

/* Medium Screens (960px and below) */
@media screen and (max-width: 960px) {
    /* Move relevant styles from 991px here */
    /* ...existing 991px styles... */
}

/* Small-Medium Screens (879px and below) */
@media screen and (max-width: 879px) {
    /* Move relevant styles from 767px here */
    /* ...existing 767px styles... */
}

/* Small Screens (800px and below) */
@media screen and (max-width: 800px) {
    /* Move relevant styles from 767px here */
    /* ...existing 767px styles... */
}

/* Mobile (500px and below) */
@media screen and (max-width: 500px) {
    /* Move relevant styles from 479px here */
    /* ...existing 479px styles... */
}

/* Small Mobile (400px and below) */
@media screen and (max-width: 400px) {
    /* Move relevant styles from 479px here */
    /* ...existing 479px styles... */
}

/* Extra Small Mobile (360px and below) */
@media screen and (max-width: 360px) {
    /* Add any super small screen specific styles */
}

/*=====  End of Media Queries  ======*/