/*
**	File:		theme.css
**	Purpose:	Contains styles for the site
**	Theme:		veritara
**	Author:		toycardesign.com
**  
*/

/* ------------------ CSS Variables ------------------ */
:root {
    /* Base Colors */
    --color-white: #FFFFFF;
    --color-body: #666666;
    
    /* Brand Colors */
    --color-highlight: #217a7e;
    --color-highlight-bright: #2db6a3;
    --color-highlight-dark: #175e5e;
    --color-highlight-muted: #6fa7a3;
    
    /* Font Colors */
    --color-font: #CCCCCC;
    --color-font-light: #CACACA;

    /* Component Backgrounds */
    --color-article-bg: #FAFAFA;
    --color-article-bg-alt: #F1F1F1;

    /* Links - Reference brand colors */
    --color-link: var(--color-highlight);
    --color-link-hover: var(--color-highlight-dark);

    /* Header - Reference base/brand colors */
    --color-header-bg: var(--color-white);
    --color-header-link: var(--color-body);
    --color-header-link-hover: var(--color-highlight);
    --color-header-dark-link: var(--color-article-bg);

    /* Footer */
    --color-footer-bg: rgba(44, 46, 46, 1);
    --color-footer-link: var(--color-font-light);
    --color-footer-secondary-bg: rgba(61, 63, 62, 1);
    
    /* Buttons & UI Elements */
    --color-button-bg: rgba(101, 103, 102, 1);
    --color-alternate-bg: rgba(96, 100, 104, 1);
    --color-alternate-bg-2: rgba(80, 90, 100, 1);
    --color-price-bg: rgba(76, 80, 84, 1);
    --color-border-gray: #DDDDDD;

    /* Tables */
    --color-table-header: #999999;
    --color-table-border: #888888;
    --color-table-even: #E2E2E2;

    /* Messages/Alerts */
    --color-success: #1c724d;
    --color-success-bg: #d7f8e5;
    --color-success-border: #c6f5e2;
    --color-error: #721c24;
    --color-error-bg: #f8d7da;
    --color-error-border: #f5c6cb;
    --color-info: #354f5e;
    --color-info-bg: #93CFE9;
    --color-info-border: #81D3F7;
    --color-question: #6B5CA5;
    --color-question-bg: #E6E3F7;
    --color-question-border: #B3A7D9;
    --color-warning: #B89B2B;
    --color-warning-bg: #FFF9E3;
    --color-warning-border: #F5E6A2;
    
    /* Overlays & Effects */
    --color-overlay-dark: rgba(13, 13, 13, 0.65);
    --color-overlay-light: rgba(5, 13, 27, 0.65);
    --color-shadow: rgba(0, 0, 0, 0.6);
    --color-overlay-button: rgba(13, 13, 13, 0.35);
    
    /* Loading skeleton colors */
    --skeleton-base: #e0e0e0;
    --skeleton-highlight: #f0f0f0;
    
    /* Font Families */
    --font-family-main: "Cormorant SC", serif;
    --font-family-body: Raleway, Verdana, sans-serif;

    /* Misc */
    --max-width: 1180px;
    --border-radius: 3px;
}


/* ------------------ General ------------------ */

* {
    box-sizing: border-box;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Offset for fixed header when scrolling to anchors */
#about-us,
#contact-us,
#our-services,
#contact-us {
    scroll-margin-top: 120px;
}


/* hidden things */
[hidden],
.grecaptcha-badge {
    display: none !important;
}

body {
    background-color: var(--color-white);
    height: auto;
    font-family: var(--font-family-body);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    line-height: 1.3;
    font-size: 1em;
    color: var(--color-body);
    margin: 0;
}

p {
    line-height: 2em;
    margin: 0 0 2em;
    text-align: justify;
}

h1,h2,h3,h4,h5,h6 {
    text-transform: uppercase;
    font-family: var(--font-family-main);
    font-weight: 400;
    font-style: normal;
    flex: 1 1 100%;
    margin-bottom: 0.35em;
}

h1 {
    font-size: 1.35em;
}

h2 {
    font-size: 1.25em;
}

blockquote {
    background-color: var(--color-article-bg-alt);
    border-left: 4px solid var(--color-font);
    font-style: italic;
    margin: 1.5em 0.75em;
    padding: 0.5em 0.75em;
    color: var(--color-body);
    quotes: "\201C" "\201D";
}

blockquote:before {
    color: var(--color-body);
    content: "\201C";
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.2em;
    display: block;
    width: 0.5em;
    float: left;
    position: relative;
    top: 0.25em;
}

blockquote cite {
    display: block;
    margin-right: 1em;
}

blockquote cite:before {
    content: " - ";
}

ul li {
    margin-bottom: 0.85em;
}

a,
a:visited {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    filter: brightness(0.75);
    text-decoration: none;
}

/* ------------------ Featured Projects ------------------ */
.featured-project {
    position: relative; /* for our overlay to position properly */
    margin-bottom: 1em;
}

.featured-project a {
    color: var(--color-article-bg) !important;
}

.featured-project a:hover {
    background-color: var(--color-highlight-bright) !important;
    cursor: pointer;
}

.featured-project wrapper {
    line-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-project-description p:first-of-type {
    margin-top: 1em;
}

.featured-project h3 {
    font-size: 1.25em;
}

.featured-project h4 {
    margin: 0;
}

.project-close-button {
    display: block;
    position: absolute;
    top: 0;
    right: 1em;

    width: 36px;
    height: 36px;
    line-height: 36px;
    padding: 6px;
    background-color: var(--color-overlay-button);
    color: var(--color-article-bg);
    cursor: pointer;
    justify-content: center;
    align-items: center;
}


/* ------------------ Scroll Margin Overrides ------------------ */

/* On screens that are 850px wide or less */
@media only screen and (max-width: 768px) {
    /* Adjust scroll offset for tablet/mobile header height */
    #featured-homes,
    #about-us,
    #contact-us,
    #property-info,
    #img-gallery,
    #location {
        scroll-margin-top: 106px;
    }
    
}


/* ------------------ Tables ------------------ */
table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: none;
    letter-spacing: 1px;
    font-size: .75rem;
}

caption {
    font-weight: bold;
    padding: 0.25rem;
    caption-side: top;
}

thead {
    border-bottom: 1px solid var(--color-table-border);
}

tfoot {
    border-top: 1px solid var(--color-table-border);
}

thead,
tfoot {
    background-color: var(--color-table-header);
    color: var(--color-white);
    font-weight: bold;
}

tbody tr:nth-child(even) {
    background-color: var(--color-table-even);
}

td,
th {
    padding: 0.15rem 0.25rem;
    height: 2.5rem;
    text-align: center;
}

td.left {
    text-align: left;
    word-wrap: break-word;
}

td.right {
    text-align: right;
}

/* --------------------------- Buttons ----------------------------- */
.button,
a.button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.85em 1.25em;
    border: 0;
    border-radius: var(--border-radius, 3px);
    text-transform: uppercase;
    cursor: pointer;
    font-size: 100%;
    background-color: var(--color-highlight, #29A9DF);
    color: var(--color-white, #fff);
    width: 100%;
    text-decoration: none;
    gap: 0.25rem;
    transition: background 0.2s;
    box-sizing: border-box;
}

.button:hover,
a.button:hover {
    filter: brightness(1.15);
    border-bottom: 3px solid rgba(0, 0, 0, 0.2);
    margin-bottom: -3px;
}

/* ------------------ Skeleton Loading Animations ------------------ */
@keyframes skeleton-loading {
  0% { 
    background-position: 200% 0; 
  }
  100% { 
    background-position: -200% 0; 
  }
}

vt-splash-msg.loading h1,
vt-splash-msg.loading p {
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  color: transparent !important;
  text-shadow: none !important;
  border-radius: 4px;
  min-width: 300px;
  min-height: 1.2em;
}

vt-property-info.loading h2,
vt-property-info.loading .price,
vt-property-info.loading .stat-value {
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  color: transparent !important;
  border-radius: 4px;
}

vt-property-info.loading h2 {
  min-height: 1.5em;
}

vt-property-info.loading .price {
  background-color: var(--skeleton-base);
}