/*
============================================================
OAK REALTY MN — DESIGN SYSTEM
============================================================
Source: Existing Oak Realty custom styles + current Gantry styling.
Figma: Not yet available at the time of implementation.

PURPOSE
- Global visual tokens and reusable components only.
- This file is intended to load BEFORE override.css/custom.css.
- Page-specific styles belong in override.css/custom.css.
- Do not add one-off page/ItemID styles here.
============================================================
*/

/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */
@import url("override1.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@import url("https://use.typekit.net/tdx6xio.css");
:root {
    /* Brand */
   
    /* =========================
       Primary Colors
       ========================= */
    --color-primary-red: #A81F29;
    --color-primary-tan: #CCA168;
    --color-primary-khaki: #C9BDA8;
    --color-secondary-nav :#2A2725;

    /* =========================
       Secondary Colors
       ========================= */
    --color-secondary-cream: #F2EDDE;
    --color-secondary-sage: #79826B;
    --color-secondary-orange: #FA9A0F;
    --color-secondary-charcoal: #2A2725;
    --color-secondary-light-gray: #F1F1F1;

    /* =========================
       Neutral Colors
       ========================= */
    --color-neutral-black: #000000;
    --color-neutral-gray-900: #212121;
    --color-neutral-gray-800: #424242;
    --color-neutral-gray-700: #616161;
    --color-neutral-gray-600: #757575;
    --color-neutral-gray-500: #9F9F9F;
    --color-neutral-gray-400: #BDBDBD;
    --color-neutral-gray-300: #E0E0E0;
    --color-neutral-gray-200: #EEEEEE;
    --color-neutral-gray-100: #F5F5F5;
    --color-neutral-white: #FFFFFF;

    --color-primary-khaki-300: rgba(201, 189, 168, 0.30);


    /* Neutrals */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-text: #444444;
    --color-body: #2A2725;
    --color-muted: #999999;
    --color-border: #B5B5B580;
    --color-borer-dark:#666666;
    --color-borer-gold:#CCA16B;
    --color-border-hover:#CCCCCC;
    --color-border-light: #E5E5E5;
    --color-border-brand: #DFDACD;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F5F5F5;


    /* Feedback / utility */
    --color-focus: rgba(82, 168, 236, 0.8);
    --color-overlay: rgba(0, 0, 0, 0.04);

    /* Typography */
    --font-body: "avenir-lt-pro", sans-serif;
    --font-heading: "avenir-lt-pro", sans-serif;
    --font-heading-second:'Vollkorn', serif;
    --font-nav: "avenir-lt-pro", sans-serif;
    --font-button: "avenir-lt-pro", sans-serif;
    --font-footer: "Inter", sans-serif;

    /* Heading */
    --font-size-h1: 60px;
    --font-size-h2: 40px;
    --font-size-h3: 36px;
    --font-size-h4: 26px;
    --font-size-h5: 16px;
    --font-size-h6: 20px;

    --font-size-body: 16px;
    --font-size-small: 14px;
    --font-size-nav: 16px;
    --font-size-footer:14px;
    --font-size-footer-small:12px;


    --font-size-button: 16px;
    --font-size-button-large:20px;
    --font-size-button-small:14px;

     /* line height */    
    --line-height-h1: 72px;
    --line-height-h2: 52px;
    --line-height-h3: 50px;
    --line-height-h4: 38px;
    --line-height-h5: 28px;
    --line-height-h6: 26px;

    --line-height-body: 28px;
    --line-height-small: 26px;
    --line-height-nav: 22px;

    --line-height-button: 28px;
    --line-height-button-large:26px;
    --line-height-button-small:22px;  

    --line-height-footer:28px;
    --line-height-small:16px;


    /* font weight */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;


    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 120px;

    /* Column gap */
    --gap-0: 0px;
    --gap-1: 4px;
    --gap-2: 8px;
    --gap-3: 12px;
    --gap-4: 16px;
    --gap-5: 24px;
    --gap-6: 32px;
    --gap-7: 48px;
    --gap-8: 64px;
    --gap-9: 96px;
    --gap-10: 120px;
  

    /* Layout */
    --container-width: 1250px;
    --container-wide: 1650px;
    --content-width: 1170px;

    /* Borders / radius */
    --radius-none: 0;
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-card: 24px;
    --radius-pill: 30px;

    /* Shadows */
    --shadow-page: 0 0 10px #C8C8C8;
    --shadow-dropdown: 0 0 6px #939393;
    --box-shadow-focus:
        inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 0 8px rgba(82, 168, 236, 0.6);

    --border-radius-img: 20px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;

    /* media break point */
    --breakpoint-1200: 1200px;
    --breakpoint-1199: 1199px;
    --breakpoint-960: 960px;
    --breakpoint-959: 959px;
    --breakpoint-767: 767px;

}

.bg-gold{
    background-color: var(--color-primary-khaki);
}
.bg-white{
    background-color: var(--color-neutral-white);
}
.bg-black{
    background-color: var(--color-body);
}
/* ==========================================================
   2. GLOBAL RESET / BASE TYPOGRAPHY
   ========================================================== */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    color: var(--color-body);
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-body);
}

p {
    margin: 0 0 var(--space-4);
}

a {
    color: var(--color-primary);
    outline: none !important;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--color-primary-hover);
    text-decoration: none;
}

h1,

h3,
h4,
h5,
h6 {
    color: var(--color-body);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-heading);
    margin-top: 0;
}

h2{
    color: var(--color-text);
    font-family: var(--font-heading-second);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-heading);
    margin-top: 0;
}
h1,
.h1 {
    font-size: var(--font-size-h1);
}

h2,
.h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-3);
}

h3,
.h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    margin-bottom: calc(var(--space-2) - 1px);
}


h4,
.h4 {
    font-size: var(--font-size-h4);
}

h5,
.h5 {
    font-size: var(--font-size-h5);
}

h6,
.h6 {
    font-size: var(--font-size-h6);
}

.center{
    text-align: center;
}

blockquote p {
    color: var(--color-borer-dark);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-medium);
    margin-bottom: 0;
}
/* ==========================================================
   4. COLUMN GAP 
   ========================================================== */
.gap-0{
  gap:var(--gap-0);
}
/* ==========================================================
   4. COMMON LAYOUT TOKENS
   ========================================================== */

.platform-content {
    margin: 0;
    padding: 0;
}

#g-mainbar {
    padding: 0;
}

.bottom-content .platform-content,
.bottom-content .g-content {
    margin: 0;
    padding: 0;
}

#g-page-surround {
    box-shadow: var(--shadow-page);
}

.container {
    width: 100%;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   4. BUTTON SYSTEM
   ========================================================== */

/*
Reusable button classes:
.btn
.button
.g-button

Existing site-specific selectors can continue to override
these rules in override.css.
*/

.btn {
    color: #2A2725 !important;
    background-image: none;
    background-repeat: repeat-x;
    border: 1.5px solid var(--color-borer-gold);
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: 18px;
    margin-bottom: 0;
    font-weight: var(--font-weight-extrabold);
    padding: 10px 24px;
    text-align: center;
    text-transform: capitalize;
    vertical-align: middle;
    background: none !important;
     box-shadow: 0 0px 0 rgba(255, 255, 255, 0.2) inset, 0 0px 0px rgba(0, 0, 0, 0.05) !important;
    text-shadow: 0 0px 0px rgba(255, 255, 255, 0.75) !important;
    margin-top: var(--space-3);
}

.button,
.g-button {
    align-items: center;
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-none);
    box-shadow: none !important;
    color: var(--color-white) !important;
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-button);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.5px;
    line-height: var(--line-height-medium);
    padding: var(--space-2) calc(var(--space-8) + 5px);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: none !important;
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
    vertical-align: middle;
}

.btn:hover,
.btn:focus,
.button:hover,
.button:focus,
.g-button:hover,
.g-button:focus {
    background: var(--color-secondary-light);
    border-color: var(--color-secondary-light);
    color: var(--color-primary) !important;
}

/* Pill button variant used by the existing site */
.btn--pill,
.button--pill,
.g-button--pill {
    border-radius: var(--radius-pill);
}

.btn-charcoal .btn{
    background-color: var(--color-secondary-charcoal) !important;
    border: 1px solid var(--color-secondary-charcoal) !important;
    color: var(--color-white) !important;
}
.btn-charcoal .btn:hover{
    background-color: var(--color-primary-red)!important;
    border: 1px solid var(--color-primary-red) !important;
}

/* ==========================================================
   5. READ MORE / OUTLINE BUTTON
   ========================================================== */

p.readmore .btn {
    background: transparent !important;
    border: 2px solid var(--color-border-brand);
    border-radius: var(--radius-none);
    box-shadow: none !important;
    color: var(--color-borer-dark) !important;
    display: inline-block;
    font-family: var(--font-button);
    font-size: calc(var(--font-size-body) - 1px);
    font-weight: var(--font-weight-normal);
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 0;
    padding: calc(var(--space-2) - 1px)  calc(var(--space-8) + 2px);
    text-align: center;
    text-transform: uppercase;
}

p.readmore .btn:hover,
p.readmore .btn:focus {
    background: var(--color-secondary-light) !important;
    border-color: var(--color-secondary);
    color: var(--color-primary) !important;
}

.bottom-content .tagline a.btn {
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}


/* ==========================================================
   6. CARD / TILE COMPONENT
   ========================================================== */

.card,
.tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-none);
    box-shadow: none;
    overflow: hidden;
}

.card__content,
.tile__content {
    padding: var(--space-2);
}

.card.cart-large .card__content,
.card.cart-large .tile__content {
    padding: var(--space-6) var(--space-77);
}
.card.cart-small .card__content,
.tile.tile-small .card__content{
    padding: var(--space-4) var(--space-5);
}


.card__title,
.tile__title {
    color: var(--color-text);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    margin: 0 0 var(--space-3);
}

.card__text,
.tile__text {
    color: var(--color-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}

.card__image,
.tile__image {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}


/* ==========================================================
   7. FORM ELEMENTS
   ========================================================== */

input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
input:not([type]),
textarea,
select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-none);
    box-shadow: none;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: calc(var(--line-height-body) - .10);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="url"]:hover,
input:not([type]):hover,
textarea:hover,
select:hover {
    border-color: var(--color-border-hover);
    box-shadow: none;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
    border-color: var(--color-focus);
    outline: 0;
    box-shadow: var(--box-shadow-focus);        
}

label {
    display: block;
    margin-bottom: var(--space-2);
}


/* ==========================================================
   8. HEADER / NAVIGATION
   ========================================================== */

.g-home-particles #g-navigation {
    position: absolute;
    z-index: 9999;
    left: 0;
}
.g-logo.g-logo-helium img, .g-logo.g-logo-helium svg{
    max-height: 70px;
}

#g-header {
    padding: 0;
}

#g-navigation {
    background: transparent;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid var(--color-border)
}

#g-navigation .g-main-nav .g-toplevel > li {
    font-family: var(--font-nav);
    font-size: calc(var(--font-size-body) - 1px);
    line-height: 37px;
    min-height: 37px;
    margin: 0;
    padding: 0;
}

#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
    color: var(--color-white);
    font-family: var(--font-nav) !important;
    font-size: var(--font-size-nav);
    font-weight: var( --font-weight-medium);
    letter-spacing: 0.5px;
    margin: 0  var(--space-3);
    position: relative;
    text-transform: capitalize;
    line-height: normal;
}

#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container > .g-menu-item-content{
    box-shadow: none;
}

#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container,
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container {
    color: var(--color-primary-khaki);
    position: relative;
}
#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container .g-menu-item-title::before,
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container .g-menu-item-title::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -7px;
    height: 1.5px;
    background: rgba(201, 189, 168, 1);
    z-index: 9999;

}



#g-navigation .g-main-nav .g-toplevel > li:last-child > .g-menu-item-container {
    padding-right: 0;
}


#g-navigation .g-main-nav .g-toplevel > li:last-child > .g-menu-item-container:after,
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container .g-menu-parent-indicator:after {
    display: none;
}

#g-navigation .g-main-nav .g-toplevel {
    margin-top: calc(var(--space-1) + 1px);
}

#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
    padding: 0;
}

#g-navigation .g-main-nav .g-dropdown {
    background: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-dropdown);
    display: block;
    font-size: calc(var(--font-size-small) - 1px); 
    margin-top: 0;
    padding: 0 !important;
    position: absolute;
    width: 200px;
    z-index: 10;
}

#g-navigation .g-main-nav .g-dropdown .g-sublevel li {
    border-bottom: 1px solid var(--color-border-light);
    margin: 0;
    min-height: 22px;
}

#g-navigation .g-main-nav .g-dropdown .g-sublevel li:last-child {
    border-bottom: none;
}

#g-navigation .g-main-nav .g-dropdown .g-sublevel li a {
    color: var(--color-body);
    display: block;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
    padding: calc(var(--space-2) + 1px) calc(var(--space-6) + 1px);
    text-transform: capitalize;
}

#g-navigation .g-main-nav .g-dropdown .g-sublevel li:hover,
#g-navigation .g-main-nav .g-dropdown .g-sublevel li a:hover {
    background-color: var(--color-secondary-light);
}

#g-navigation .g-main-nav .g-dropdown .g-sublevel li a:hover {
    color: var(--color-primary) !important;
}


/* Inner-page navigation variant retained as a reusable theme variant */

.outline-13 #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container,
.outline-11 #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
    color: var(--color-secondary-nav);
}

.outline-13 #g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container,
.outline-13 #g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container,
.outline-11 #g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container,
.outline-11 #g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container {
    color: var(--color-primary-red);
    position: relative;
}

.outline-13 #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container:after,
.outline-11 #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container:after {
    border-right-color: var(--color-secondary-dark);
}

.outline-13 #g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container .g-menu-item-title::before,
.outline-13 #g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container .g-menu-item-title::before,
.outline-11 #g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container .g-menu-item-title::before,
.outline-11 #g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container .g-menu-item-title::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -7px;
    height: 1.5px;
    background: var(--color-primary-red);
    z-index: 9999;

}





/* ==========================================================
   9. MOBILE NAVIGATION
   ========================================================== */
   .g-offcanvas-right .g-offcanvas-toggle{
    right: 1.3rem;
   }

#offcanvas #g-mobilemenu-container ul > li > .g-menu-item-container,
#g-offcanvas #g-mobilemenu-container ul > li > .g-menu-item-container {
    padding:calc(var(--space-2) + 2px);
}

#g-offcanvas #g-mobilemenu-container ul > li.g-menu-item-link-parent > .g-menu-item-container > .g-menu-parent-indicator {
    font-size: 10px;
    padding: 0;
    top: 15px;
}


/* ==========================================================
   10. FOOTER
   ========================================================== */

#g-footer {
    background: url("/images/footer_bk.png") repeat;
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    padding: 0;
    padding-top: calc(var(--space-8) + 11px);
    padding-bottom: calc(var(--space-8) + 11px);
}

#g-footer .moduletable {
    float: none;
    margin: 0 auto;
    max-width: 860px;
}

#g-footer .custom {
    display: table;
    margin: auto;
    max-width: 1170px;
}

#g-footer .moduletable .g-title{
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
    color: var(--color-white);
    font-weight: var(--font-weight-extrabold);
    text-align: center;
    letter-spacing: 1.92px;
    text-transform: uppercase;

} 
#g-footer .footer-nav{
    padding-bottom: calc(var(--space-4) - 1px);
}
#g-footer .footer-nav .g-main-nav{
    border-bottom: 1px solid var(--color-border);
    padding-bottom: calc(var(--space-4) - 1px);
}
#g-footer .footer-nav .g-main-nav .g-toplevel > li{
    padding: calc(var(--space-2) + 2px);
}
#g-footer .g-container .g-grid:nth-child(4) {
    border-top: 1px solid var(--color-border);
    padding-top: calc(var(--space-6) + 8px);
}
#g-footer .footer-logo{
    display: flex;
    justify-content: center;
}

#g-footer .footer-nav .g-main-nav .g-toplevel > li > .g-menu-item-container, 
#g-footer .g-main-nav .g-sublevel > li > .g-menu-item-container{
     font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
    color: var(--color-secondary-cream);
    font-weight: var(--font-weight-extrabold);
}
#g-footer .footer-nav .g-main-nav .g-toplevel > li:hover > .g-menu-item-container, 
#g-footer .g-main-nav .g-sublevel > li.active > .g-menu-item-container{
    color: var(--color-white);
}
#g-footer .moduletable .nav {
    border: 0;
    display: block;
    float: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

#g-footer .footer-socials-sec .mod-custom{
    margin-top: var(--space-10);
    margin-bottom:var(--space-10);
}

#g-footer .moduletable .nav li {
    border-bottom: 0;
    display: inline-block;
    line-height: 1;
    margin: 0;
    padding: calc(var(--space-2) + 2px);
}

#g-footer .nav > li > a {
    color: var(--color-white);
    font-size: var(--font-size-footer);
    line-height: var(--line-height-footer);    
}

#g-footer .nav > li > a:hover,
#g-footer .nav > li > a:focus {
    color: var(--color-white);
}


#g-footer .g-totop {
    padding: 0;
}
#g-footer .footer-top-link .g-totop {
    padding: 0;

}

#g-footer .footer-top-link .g-totop a#g-totop {
    font-family: var(--font-footer);
    font-size: var(--font-size-footer-small);
    font-weight: var(--font-weight-normal);
    line-height: 25px;
}

.footer-copyright .g-content {
    font-size: var(--font-size-footer-small);
    font-weight: var(--font-weight-normal);
    font-family: var(--font-footer);
    text-align: left;
}
.footer-copyright .g-content a{
    margin-left: 10px;
}



/* ==========================================================
   11. COMMON LIST / TABLE STYLES
   ========================================================== */

table {
    border: none;
}

.nav-tabs.nav-stacked > li {
    line-height: calc(var(--line-height-body) + .10);
    padding: calc(var(--space-3) - 2px 0 0);
}

.nav-tabs.nav-stacked > li > a {
    border: 1px solid var(--color-border);
}

.nav-tabs.nav-stacked > li > a:hover {
    background: var(--color-surface-muted);
}

.blog .pagination .page-item .page-link,
.blog .pagination .page-item.active .page-link {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    color: var(--color-secondary);
    padding: var(--space-1) var(--space-3);
}

.blog .pagination .page-item .page-link:hover,
.blog .pagination .page-item.active .page-link:hover {
    background: var(--color-surface-muted);
    color: var(--color-primary);
}

.blog .pagination .page-item.active .page-link {
    background: var(--color-surface-muted);
    color: var(--color-muted);
}


/* ==========================================================
   12. ACCESSORY / UTILITY
   ========================================================== */

.seprator {
    margin: 0 var(--space-3);
}

.form-actions .btn button span {
    font-weight: var(--font-weight-semibold);
}

.icon-rightarrow:before,
.icon-arrow-right:before,
.icon-chevron-right:before,
p.readmore .btn .icon-chevron-right:before {
    content: "\f054";
    font-family: FontAwesome;
}


/* ==========================================================
   13. RESPONSIVE DESIGN TOKENS / GLOBAL BEHAVIOR
   ========================================================== */

@media screen and (min-width: var(--breakpoint-1200)) {
    .container {
        width: var(--content-width);
        margin: 0 auto;
    }
}

@media screen and (min-width: var(--breakpoint-960)) and (max-width: var(--breakpoint-1199)) {
    #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
        font-size: var(--font-size-small);
        padding: 0 calc(var(--space-2) - 1px);
    }
}

@media screen and (max-width: var(--breakpoint-959)) {
    #g-offcanvas .g-offcanvas-toggle {
        right: 1.5rem !important;
    }
}

@media screen and (max-width: var(--breakpoint-767)) {
    .container {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    #g-footer .g-container {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .g-logo,
    .g-logo img {
        margin: 0;
        padding: 0;
    }
}