/* ==========================================================================
   SAPIENCE DESIGN SYSTEM
   Version : 1.0
   Author  : Shivaprakash D
   ========================================================================== */

/*

    SAPIENCE DESIGN PRINCIPLES

    - Editorial rather than promotional.
    - Typography before decoration.
    - Colour used with restraint.
    - Generous whitespace.
    - Responsive by default.
    - Timeless over fashionable.

*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {

    /* ======================================================================
       BRAND COLOURS
       ====================================================================== */

    --color-brand:               #264F46;
    --color-brand-hover:         #1F433B;

    /* ======================================================================
       BACKGROUNDS
       ====================================================================== */

    --color-background:          #EBEDDF;
    --color-surface:             #FFFFFF;

    /* ======================================================================
       TEXT
       ====================================================================== */

    --color-text-primary:        #404040;
    --color-text-secondary:      #6A6A6A;

    /* ======================================================================
       BORDERS
       ====================================================================== */

    --color-border:              #D8DCCF;

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

    --font-serif: "IBM Plex Serif", serif;
    --font-sans:  "IBM Plex Sans", sans-serif;

    /* ======================================================================
       LAYOUT
       ====================================================================== */

    --layout-page-width:         1200px;
    --layout-content-width:      720px;

    /* ======================================================================
       SPACING
       ====================================================================== */

    --space-xs:                  0.5rem;     /* 8px  */
    --space-sm:                  1rem;       /* 16px */
    --space-md:                  1.5rem;     /* 24px */
    --space-lg:                  2.5rem;     /* 40px */
    --space-xl:                  4rem;       /* 64px */
    --space-2xl:                 6rem;       /* 96px */
    --space-3xl:                 8rem;       /*128px */
    
    /* ======================================================================
       TRANSITIONS
       ====================================================================== */

    --transition-fast:           0.20s ease;
 
}

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

/*
   Use a more intuitive box model.
*/

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


/*
   Remove default spacing.
*/

* {
    margin: 0;
    padding: 0;
}


/*
   Improve scrolling.
   Prevent text size adjustments on mobile browsers.
*/

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/*
   Images should never overflow their containers.
*/

img,
picture {
    display: block;
    max-width: 100%;
}


/*
   Form elements inherit typography.
*/

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


/*
   Remove default list styling.
*/

ul,
ol {
    list-style: none;
}


/*
   Improve table rendering.
*/

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*
   Prevent long words from breaking layouts.
*/

body {
    overflow-wrap: break-word;
}

/* ==========================================================================
   3. BASE STYLES
   ========================================================================== */

/*
   Base document styling.
*/

body {

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

    color: var(--color-text-primary);

    font-family: var(--font-sans);

    font-size: 1.125rem;

    font-weight: 400;

    line-height: 1.8;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    overflow-wrap: break-word;

}


/*
   Default link styling.
*/

a {

    color: var(--color-brand);

    text-decoration: none;

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

}

a:hover {

    color: var(--color-brand-hover);

}


/*
   Horizontal rule.
*/

hr {

    border: none;

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

    margin-block: var(--space-xl);

}


/*
   Selection colour.
*/

::selection {

    background: var(--color-brand);

    color: var(--color-surface);

}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

/*
   Wordmark
*/

.wordmark {

    font-family: var(--font-serif);

    font-size: 2.35rem;

    font-weight: 400;

    letter-spacing: -0.02em;

    color: var(--color-brand);

    text-decoration: none;

}

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

    color: var(--color-brand);

    font-weight: 400;

    line-height: 1.2;

}

/*
   H1
*/

h1 {
    font-size: 4rem;
    line-height: 1.15;
    letter-spacing:-0.02em;

    margin-bottom: var(--space-lg);
}


/*
   H2
*/

h2 {
    font-size: 2.35rem;
    letter-spacing: -0.02em;
    
    margin-top: 0;
    margin-bottom: var(--space-lg);
}


/*
   H3
*/

h3 {
    font-size: 1.85rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);

}


/*
   H4
*/

h4 {

    font-family: var(--font-sans);

    font-size: 1.25rem;

    font-weight: 600;

    margin-top: var(--space-lg);

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

}


/*
   Paragraphs
*/

p {
    max-width: var(--layout-content-width);
    margin-bottom: var(--space-lg);
}

/*
   Strong emphasis.
*/

strong {

    font-weight: 600;

}


/*
   Italics.
*/

em {

    font-style: italic;

}

/*
   Small text
*/

small {

    font-size: 0.9rem;

    color: var(--color-text-secondary);

}

/*
   Lists
*/

ul,
ol {

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

}


li {

    margin-bottom: 0.5rem;

}


/*
   Definition Lists
*/

dl {

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

}

dt {

    font-weight: 600;

    margin-bottom: 0.25rem;

}

dd {

    margin: 0 0 var(--space-lg) 0;

}

/*
   Block Quotes
*/

blockquote {

    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1.4;
    color: var(--color-brand);
    border-left: 3px solid var(--color-brand);

    padding-left: var(--space-md);
    margin-block: var(--space-xl);

}

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */


/*
   Overall page container.
*/

.page {

    width: min(100% - 4rem, var(--layout-page-width));

    margin-inline: auto;

}

/*
   Article layout.
*/

.article {

    max-width: var(--layout-content-width);

    margin: 0;

}

/*
   Article header.
*/

.article-header {
    padding-top: var(--space-sm);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-lg);
}

/*
   Standard vertical spacing.
*/

.section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

/*
   Two-column layout.
*/

.two-columns {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: var(--space-xl);

}


/*
   Three-column layout.
*/

.three-columns {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: var(--space-lg);

}


/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */

/*
   The navigation only styles the menu.
   The wordmark is styled separately in Typography.
*/

.navigation {

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

}


/*
   Navigation menu.
*/

.navigation-menu {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-xl);
}


/*
   Navigation links.
*/

.navigation-menu a {

    font-family: var(--font-sans);

    font-size: 1rem;

    font-weight: 400;

    color: var(--color-text-primary);

}


/*
   Navigation link hover state.
*/

.navigation-menu a:hover {

    color: var(--color-brand);

}


/*
   Active page.
*/

.navigation-menu a.active {

    color: var(--color-brand);

    font-weight: 500;

}

/* ==========================================================================
   7. EDITORIAL COMPONENTS
   ========================================================================== */

/*
   Hero title.
   Used only on the Home page.
*/

.hero-title {

    max-width: 900px;
    
    font-size: 3.5rem;

    line-height: 1.12;

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

}

.page-title {

    font-size: 3rem;
    line-height: 1.1;
    
    margin-bottom: var(--space-lg);

}


.key-statement {

    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-brand);

    max-width: 760px;
    margin-block: var(--space-lg) var(--space-lg);

}

/*
   Closing statement.
*/

.closing-statement {

    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-brand);

    max-width: 820px; 
    margin-bottom: var(--space-lg);

}

/*
   Section divider.
*/

.section-divider {

    border: none;

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

    margin: var(--space-xl) 0;

}

/*
   Editorial links.
*/

.text-link {

    font-family: var(--font-sans);

    font-size: 1rem;

    font-weight: 500;

    color: var(--color-brand);

}

.text-link:hover {

    color: var(--color-brand-hover);

}


/* ==========================================================================
   8. RESPONSIVE DESIGN
   ========================================================================== */


/*
   Tablets
*/

@media (max-width: 1023px) {

    /*
       Layout
    */

    .page {

        width: min(100% - 3rem, 900px);

    }

    .section {

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

    }

     /*
       Typography
    */

    .wordmark {

        font-size: 2.15rem;

    }
        
    .hero-title {

        font-size: 3rem;

    }

    .page-title {

        font-size: 2.7rem;

    }

    h2 {

        font-size: 2.1rem;

    }

    h3 {

        font-size: 1.7rem;

    }

}

/*
   Mobile Phones
*/

@media (max-width: 767px) {

    /*
       Layout
    */

    .page {

        width: min(100% - 2rem, 100%);

    }

    .hero{
        padding-top:1rem;
        padding-bottom:1.5rem;
    }

    .section {

        padding-top:1.5rem;
        padding-bottom:1rem;

    }

    .two-columns,
    .three-columns {

        grid-template-columns: 1fr;

    }

    /*
       Navigation
    */

    .navigation {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem;

    }

    .navigation-menu {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.25rem;

        width: 100%;

    }

    .navigation-menu li {

        width: 100%;

    }

    .navigation-menu a {

        display: block;

        width: 100%;

        padding-block: 0.15rem;

    }

    /*
       Typography
    */

    .wordmark {

        font-size: 2rem;

    }

    
    .hero-title {

        font-size: 2.3rem;

    }

    .page-title {

        font-size: 2.4rem;

    }

    h2 {

        font-size: 2.25rem;

    }

    h3 {

        font-size: 1.6rem;

    }

}