@import url(../fonts/fonts.css);

:root {
    --cs-primary: #0345bf;
    --cs-primary-hover: #044cd0;
    --cs-text: #252525;
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--cs-text);
}

h1 {
    font-family: 'Overlock SC', sans-serif;
}

h2,
h3,
h4 {
    font-family: 'Noto Sans', sans-serif;
}

a {
    color: var(--cs-primary);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--cs-primary-hover);
}

.cs-navbar {
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.cs-navbar .navbar-brand img {
    height: 36px;
}

.cs-navbar .nav-link {
    color: var(--cs-text);
    font-weight: 500;
}

.cs-navbar .nav-link.active,
.cs-navbar .nav-link:hover {
    color: var(--cs-primary);
}

.cs-page-title {
    background-color: var(--cs-primary);
    color: #ffffff;
    padding: 2rem 0;
}

.cs-page-title h1 {
    margin: 0;
    font-size: 2rem;
}

.cs-hero {
    background-image: linear-gradient(165deg, #e1e8fd 0%, rgba(241, 216, 180, .47) 128%);
}

.cs-btn-dark {
    background-color: #212529;
    border-color: #212529;
    color: #ffffff;
    border-radius: 2rem;
    padding: .6rem 1.75rem;
    font-weight: 500;
    display: inline-block;
}

.cs-btn-dark:hover {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}

.cs-info-bar {
    background-color: #171717;
    color: #ffffff;
    padding: 3.75rem 0 1.875rem;
}

.cs-info-bar h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.875rem;
}

.cs-info-bar a {
    color: #a2a2a2;
}

.cs-info-bar a:hover,
.cs-info-bar a:focus {
    color: #ffffff;
}

.cs-footer {
    background-color: #171717;
    color: #ffffff;
    padding: 1.875rem 0;
    font-size: .875rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.cs-footer a {
    color: #ffffff;
}

/* Room / portfolio grid (La Casa) */
.cs-room-card {
    display: block;
}

.cs-room-card .cs-lightbox-thumb {
    aspect-ratio: 4 / 3;
}

.cs-room-card .cs-room-title {
    display: block;
    margin-top: .5rem;
    font-weight: 500;
    color: var(--cs-text);
    text-decoration: none;
}

.cs-room-card .cs-room-title:hover,
.cs-room-card .cs-room-title:focus {
    color: var(--cs-primary);
}

/* Lightbox thumbnails (Bootstrap modal based) */
.cs-lightbox-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: .25rem;
    cursor: zoom-in;
}

.cs-lightbox-thumb:hover {
    opacity: .85;
}