/*
Theme Name: Hello-Child
Theme URI: https://elementor.com/hello-theme/
Description: Child theme for Hello Elementor. Lightweight foundation for custom CSS, Elementor, and site-specific customizations.
Author: Shangrila
Author URI:
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shangrila-hello-child
*/

/* =========================================================
   SHANGRILA HELLO CHILD
   =========================================================

   This stylesheet is intentionally lightweight.

   Theme-specific styling belongs here.
   Elementor widget-specific styling should preferably stay
   inside the corresponding custom widget/plugin.

   ========================================================= */


/* =========================================================
   1. ROOT VARIABLES
   ========================================================= */

:root {

    /* Brand */
    --shangrila-primary: #111111;
    --shangrila-secondary: #e8d8b8;
    --shangrila-accent: #c8a66a;

    /* Neutral */
    --shangrila-white: #ffffff;
    --shangrila-black: #000000;
    --shangrila-gray-100: #f7f7f7;
    --shangrila-gray-200: #eeeeee;
    --shangrila-gray-300: #dddddd;
    --shangrila-gray-500: #888888;
    --shangrila-gray-700: #444444;

    /* Typography */
    --shangrila-font-primary: inherit;
    --shangrila-font-heading: inherit;

    /* Layout */
    --shangrila-content-width: 1200px;
    --shangrila-spacing-section: 80px;

    /* Border */
    --shangrila-border-radius: 0px;
    --shangrila-border-color: #e5e5e5;

    /* Transition */
    --shangrila-transition: 0.3s ease;

}


/* =========================================================
   2. GLOBAL RESET
   ========================================================= */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   3. BODY
   ========================================================= */

body {
    font-family: var(--shangrila-font-primary);
    color: var(--shangrila-primary);
    background-color: var(--shangrila-white);
    line-height: 1.6;
}


/* =========================================================
   4. LINKS
   ========================================================= */

a {
    color: inherit;
    text-decoration: none;
    transition:
        color var(--shangrila-transition),
        background-color var(--shangrila-transition),
        border-color var(--shangrila-transition),
        opacity var(--shangrila-transition);
}

a:hover {
    color: var(--shangrila-accent);
}


/* =========================================================
   5. HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    font-family: var(--shangrila-font-heading);
}


/* =========================================================
   6. PARAGRAPH
   ========================================================= */

p {
    margin-top: 0;
}


/* =========================================================
   7. BUTTON
   ========================================================= */

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    cursor: pointer;
}


/* =========================================================
   8. ACCESSIBILITY
   ========================================================= */

:focus-visible {
    outline: 2px solid var(--shangrila-accent);
    outline-offset: 3px;
}


/* =========================================================
   9. SELECTION
   ========================================================= */

::selection {
    background-color: var(--shangrila-primary);
    color: var(--shangrila-white);
}


/* =========================================================
   10. UTILITY CLASSES
   ========================================================= */

.shangrila-container {
    width: min(
        100% - 40px,
        var(--shangrila-content-width)
    );
    margin-left: auto;
    margin-right: auto;
}

.shangrila-section {
    padding-top: var(--shangrila-spacing-section);
    padding-bottom: var(--shangrila-spacing-section);
}


/* =========================================================
   11. HIDE ELEMENTOR DEFAULT SPACING WHEN NEEDED
   ========================================================= */

/*
 * Gunakan class "shangrila-no-margin" pada Elementor
 * jika sebuah element membutuhkan margin 0.
 */

.shangrila-no-margin {
    margin: 0 !important;
}


/* =========================================================
   12. IMAGE UTILITIES
   ========================================================= */

.shangrila-image-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shangrila-image-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* =========================================================
   13. TEXT UTILITIES
   ========================================================= */

.shangrila-text-center {
    text-align: center;
}

.shangrila-text-left {
    text-align: left;
}

.shangrila-text-right {
    text-align: right;
}


/* =========================================================
   14. DISPLAY UTILITIES
   ========================================================= */

.shangrila-hidden {
    display: none !important;
}

.shangrila-flex {
    display: flex;
}

.shangrila-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   15. RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {

    :root {
        --shangrila-spacing-section: 60px;
    }

    .shangrila-container {
        width: min(
            100% - 32px,
            var(--shangrila-content-width)
        );
    }

}


@media (max-width: 767px) {

    :root {
        --shangrila-spacing-section: 50px;
    }

    .shangrila-container {
        width: calc(100% - 30px);
    }

    .shangrila-text-center-mobile {
        text-align: center;
    }

    .shangrila-hidden-mobile {
        display: none !important;
    }

}


/* =========================================================
   16. PRINT
   ========================================================= */

@media print {

    *,
    *::before,
    *::after {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    nav,
    .elementor-menu-toggle,
    .elementor-nav-menu--dropdown {
        display: none !important;
    }

}


/* =========================================================
   END — SHANGRILA HELLO CHILD
   ========================================================= */