/* ==========================================================================
   Rao Nete Website
   base.css
   Version: 1.0
   ========================================================================== */


/* ==========================================================================
   HTML
   ========================================================================== */

html {
    scroll-behavior: smooth;
    overflow-y: scroll;
}


/* ==========================================================================
   BODY
   ========================================================================== */

body {

    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-body);

    color: var(--color-text);
    background: var(--color-forest);

    overflow: hidden;

}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-tight);

    color: var(--color-heading);

}

h1 {

    font-size: var(--text-5xl);

}

h2 {

    font-size: var(--text-4xl);

}

h3 {

    font-size: var(--text-2xl);

}

h4 {

    font-size: var(--text-xl);

}

h5 {

    font-size: var(--text-lg);

}

h6 {

    font-size: var(--text-md);

}

p {

    margin-bottom: var(--space-24);
    max-width: var(--reading-width);

}

p:last-child {

    margin-bottom: 0;

}

strong {

    font-weight: var(--font-bold);

}

em {

    font-style: italic;

}


/* ==========================================================================
   LINKS
   ========================================================================== */

a {

    transition: color var(--transition-base);

}

a:hover {

    color: var(--color-gold);

}


/* ==========================================================================
   IMAGES
   ========================================================================== */

img {

    width: 100%;
    display: block;

}


/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {

    background: rgba(200,156,61,.35);
    color: var(--color-white);

}


/* ==========================================================================
   CONTAINER
   ========================================================================== */

.container {

    width: min(100% - (var(--container-padding) * 2), var(--container-width));
    margin-inline: auto;

}


/* ==========================================================================
   SITE WRAPPER
   ========================================================================== */

.site-wrapper {

    position: relative;
    overflow: hidden;

}


/* ==========================================================================
   MAIN
   ========================================================================== */

main {

    display: block;

}


/* ==========================================================================
   SECTIONS
   ========================================================================== */

section {

    position: relative;

    padding-top: var(--space-128);
    padding-bottom: var(--space-128);

}

.hero {

    padding: 0;

}


/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.section-header {

    text-align: center;

    max-width: 820px;

    margin: 0 auto var(--space-64);

}

.section-eyebrow {

    display: inline-block;

    margin-bottom: var(--space-16);

    font-size: var(--text-sm);
    font-weight: var(--font-semibold);

    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;

    color: var(--color-gold);

}

.section-title {

    margin-bottom: var(--space-24);

}

.section-description {

    margin-inline: auto;

    color: var(--color-muted);

}


/* ==========================================================================
   HERO TYPOGRAPHY
   ========================================================================== */

.hero-title {

    margin-bottom: var(--space-24);

}

.hero-subtitle {

    max-width: 760px;

    margin: 0 auto;

    font-size: var(--text-lg);

    color: var(--color-muted);

}


/* ==========================================================================
   CONTENT LABEL
   ========================================================================== */

.content-label,
.plant-category,
.family-role {

    display: inline-block;

    margin-bottom: var(--space-12);

    font-size: var(--text-sm);
    font-weight: var(--font-semibold);

    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;

    color: var(--color-gold);

}


/* ==========================================================================
   LISTS
   ========================================================================== */

ul {

    padding: 0;

}

li {

    list-style: none;

}


/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

label {

    display: block;

    margin-bottom: var(--space-8);

    font-weight: var(--font-medium);

}

input,
textarea {

    width: 100%;

    padding: var(--space-16);

    background: rgba(255,255,255,.05);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    color: var(--color-text);

    transition:
        border-color var(--transition-base),
        background var(--transition-base);

}

textarea {

    min-height: 180px;

}

input::placeholder,
textarea::placeholder {

    color: rgba(255,255,255,.45);

}

input:focus,
textarea:focus {

    border-color: var(--color-gold);

    background: rgba(255,255,255,.08);

}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.skip-link {

    position: absolute;

    left: -9999px;
    top: 0;

    padding: var(--space-16) var(--space-24);

    background: var(--color-gold);
    color: var(--color-black);

    font-weight: var(--font-semibold);

    z-index: var(--z-modal);

}

.skip-link:focus {

    left: var(--space-16);
    top: var(--space-16);

}


/* ==========================================================================
   FOCUS STATES
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {

    outline: 2px solid var(--color-gold);
    outline-offset: 4px;

}


/* ==========================================================================
   UTILITIES
   ========================================================================== */

.text-center {

    text-align: center;

}

.text-left {

    text-align: left;

}

.text-right {

    text-align: right;

}

.hidden {

    display: none !important;

}

.visually-hidden {

    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    white-space: nowrap;

    border: 0;

    clip: rect(0, 0, 0, 0);

}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {

    section {

        padding-top: var(--space-96);
        padding-bottom: var(--space-96);

    }

}


@media (max-width: 768px) {

    body {

        font-size: .95rem;

    }

    .section-header {

        margin-bottom: var(--space-48);

    }

    .hero-subtitle {

        font-size: var(--text-base);

    }

}


@media (max-width: 480px) {

    section {

        padding-top: var(--space-64);
        padding-bottom: var(--space-64);

    }

}


/* ==========================================================================
   END OF FILE
   ========================================================================== */