/* Root Variables */

:root {
    /* Colors */
    --bg-color: #FAF9F7;
    --color-1: #8366AB;
    --color-2: #FFFFFF;
    --color-3: #000000;
    --color-4: #55D087;
    --color-5: #E3E3FF;
    --color-6: #FF8B37;

    --accent: var(--color-1);

    /* Fonts */
    --primary-font: "DM Serif Text", serif;
    --secondary-font: "Noto Sans", sans-serif;

    /* Fluid Font Sizes */
    /* Calculated using https://www.fluid-type-scale.com/ with rem (px): 16 */
    /* Mobile - Base font size (px): 16, Screen width (px): 400, Type scale ratio: 1.2 */
    /* Desktop - Base font size (px): 19, Screen width (px): 1200, Type scale ratio: 1.25 */
    --fs-sm: clamp(0.83rem, 0.21vi + 0.78rem, 0.95rem);
    --fs-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
    --fs-md: clamp(1.2rem, 0.52vi + 1.07rem, 1.48rem);
    --fs-lg: clamp(1.44rem, 0.76vi + 1.25rem, 1.86rem);
    --fs-xl: clamp(1.73rem, 1.08vi + 1.46rem, 2.32rem);
    --fs-xxl: clamp(2.07rem, 1.5vi + 1.7rem, 2.9rem);
    --fs-xxxl: clamp(2.49rem, 2.06vi + 1.97rem, 3.62rem);

    /* Utility Variables */
    --gap: 32px;
    /* for rows, columns, grids */
    --content-width: 1200px;
    --text-width: 800px;

    /* Transitions */
    --tn-duration: 0.4s;
    --tn-curve: cubic-bezier(.4, 0, .6, 1);
}

/* Themes */

.th-blur {
    background: rgba(250, 249, 247, 0.8);
    backdrop-filter: blur(20px);
}

.th-shadow {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
}

.th-drop-shadow {
    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.05));
}

.th-light {
    background: var(--color-2);
    color: var(--color-3);
}

.th-light pl-card {
    background: var(--bg-color);
}

/* Base Styles */

* {
    box-sizing: border-box;
}

body {
    opacity: 1;

    background: var(--bg-color);
    color: var(--color-3);
    font-family: var(--secondary-font);
    font-size: var(--fs-base);

    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--primary-font);

    text-wrap: balance;
    letter-spacing: -0.01em;
    font-weight: 400;
    line-height: 1.2;

    max-width: 920px;
    margin-block: 0px;
}

h1 {
    font-size: var(--fs-xxxl);
}

h2 {
    font-size: var(--fs-xxl);
}

h3 {
    font-size: var(--fs-xl);
}

h4 {
    font-size: var(--fs-lg);
}

h5 {
    font-size: var(--fs-md);
}

h6 {
    font-size: var(--fs-base);
}

p {
    font-family: var(--secondary-font);

    opacity: 0.75;
    --opacity: 0.75;
    /* For animated elements */
    line-height: 1.5;

    max-width: var(--text-width);
    margin-block-start: 0px;
    margin-block-end: 0px;
}

header {
    padding: 8px 24px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-color);
    z-index: 1000;
}

/* Header Animation styles */
header {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity var(--tn-duration) var(--tn-curve), transform var(--tn-duration) var(--tn-curve);
}

header.visible {
    opacity: 1;
    transform: translateY(0);
}

header.hidden {
    transform: translateY(-100%);
}

button, a[pl-button] {
    /* Default Button Theme */
    background-color: var(--color-1);
    color: var(--bg-color);
    font-family: var(--secondary-font);
    font-size: var(--fs-sm);

    padding: 10px 16px;
    border-radius: 1000px;
    border: 0;

    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    transition: padding-right var(--tn-duration) var(--tn-curve);
}

button:after, a[pl-button]:after {
    content: '→';
    opacity: 0;
    width: 0;
    display: inline-block;
    transition: opacity var(--tn-duration) var(--tn-curve),
        width var(--tn-duration) var(--tn-curve),
        margin-left var(--tn-duration) var(--tn-curve);
}

button:hover:after, a[pl-button]:hover:after {
    opacity: 1;
    width: 12px;
    margin-left: 8px;
}

a {
    color: var(--color-3);
    font-size: var(--fs-sm);
    opacity: 0.8;
    text-decoration: none;
    position: relative;
    padding-right: 0;
}

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

a[pl-button]:hover {
    opacity: 1;
    color: var(--bg-color);
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

section, footer {
    width: 100%;
    padding: 100px 24px;
    gap: 100px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

:is(section, footer)>* {
    width: 100%;
    max-width: var(--content-width);
}

svg {
    flex-shrink: 0;
}

img {
    max-width: 100%;
}

/* Custom Portal Elements and Attributes */

pl-card {
    background-color: var(--color-2);
    --accent: var(--color-1);
    font-size: var(--fs-sm);

    padding: 32px;
    border-radius: 32px;
    gap: var(--gap);

    display: flex;
    flex-direction: column;
}

[pl-accent] {
    color: var(--accent);
    opacity: 1;
    --opacity: 1;
}

pl-row, pl-column {
    display: flex;
    gap: var(--gap);
}

pl-row {
    flex-direction: row;
}

pl-column {
    flex-direction: column;
}

pl-row [pl-wrap], pl-column [pl-wrap] {
    flex-wrap: wrap;
}

pl-grid {
    --min: 280px;
    --max: 1fr;
    --cols: 3;

    width: 100%;
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit,
            minmax(clamp(var(--min),
                    calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)),
                    100%),
                var(--max)));
    grid-auto-rows: 1fr;
}

/* Accordion Styles */
[pl-accordion]>*:first-child {
    cursor: pointer;
}

[pl-accordion]>*:not(:first-child) {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--tn-duration) var(--tn-curve), opacity var(--tn-duration) var(--tn-curve);
}

[pl-accordion] [pl-icon] {
    transition: transform var(--tn-duration) var(--tn-curve);
    user-select: none;
}

[pl-accordion] [pl-icon].open {
    transform: rotate(45deg);
}

/* Mobile Navigation Styles */
pl-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    height: 24px;
    width: 24px;
    padding: 0;
}

pl-hamburger span {
    width: 24px;
    height: 2px;
    background-color: var(--color-3);
    transition: transform var(--tn-duration) var(--tn-curve);
}

pl-hamburger.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

pl-hamburger.active span:nth-child(2) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu overlay styles */
[pl-mobile-menu] {
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    justify-content: center;
    align-items: center;
    gap: 32px;
    opacity: 0;
    transition: opacity 0.3s var(--tn-curve), height 0.3s var(--tn-curve);
    z-index: 998;
}

[pl-mobile-menu].active {
    opacity: 1;
    height: calc(100vh - 40px);
}

[pl-mobile-menu] [pl-anim] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--tn-duration) var(--tn-curve), transform var(--tn-duration) var(--tn-curve);
}

[pl-mobile-menu] [pl-anim].animate {
    opacity: 1;
    transform: translateY(0);
}

/* Animation styles for elements with pl-anim attribute */
[pl-anim] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--tn-duration) var(--tn-curve), transform var(--tn-duration) var(--tn-curve);
}

[pl-anim].animate {
    opacity: var(--opacity, 1);
    transform: translateY(0);
}

/* Default state: hide md and sm elements */
[pl-md], [pl-sm] {
    display: none !important;
}

/* Responsive styles for small screens */
@media (max-width: 767px) {
    [pl-md] {
        display: flex !important;
    }

    [pl-hide-md] {
        display: none !important;
    }

    pl-row[pl-wrap-md] {
        flex-wrap: wrap;
        /* Wrap items on medium screens */
    }
}

@media (max-width: 480px) {
    [pl-sm] {
        display: flex !important;
    }

    [pl-hide-sm] {
        display: none !important;
    }

    pl-row[pl-wrap-sm] {
        flex-wrap: wrap;
        /* Wrap items on small screens */
    }
}

/* Custom Styles */

.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity var(--tn-duration) var(--tn-curve);
}

.loader {
    height: 20px;
    width: 80px;
    transform: rotate(-30deg);
    background:
        radial-gradient(farthest-side, var(--color-1) 90%, #0000) left bottom/15px 15px no-repeat #ddd;
    animation:
        l17-0 2s infinite alternate linear,
        l17-1 2s infinite cubic-bezier(.75, 0, 1, .6);
}

@keyframes l17-0 {
    50% {
        transform: rotate(30deg)
    }
}

@keyframes l17-1 {
    50% {
        background-position: right bottom
    }
}

#faqs h6 {
    text-wrap: wrap;
}

/* Responsive styles for small screens */
@media (max-width: 767px) {

    #features pl-row[pl-reverse] {
        flex-direction: column-reverse;
    }

    #features pl-row[pl-reverse]>* {
        flex: 0 !important;
    }

}

@media (max-width: 480px) {

    .templates > :nth-child(1) {
        margin-right: 0 !important;
        margin-bottom: -16px;
      }
      
      .templates > :nth-child(2) {
        margin-left: 16px;
        margin-right: 0 !important;
        margin-bottom: -16px;
        margin-top: 0 !important;
      }

      .templates > * {
        min-width: 280px;
      }
}