/*
Theme Name: Brandefiner
Theme URI: https://brandefiner.com/
Description: Brandefiner child theme for GeneratePress.
Author: Brandefiner
Author URI: https://brandefiner.com/
Template: generatepress
Version: 1.0.0
Text Domain: brandefiner
*/

/* =========================================================
   BRANDEFINER CHILD THEME
   Parent theme: GeneratePress
========================================================= */


/* ---------------------------------------------------------
   GLOBAL
--------------------------------------------------------- */

:root {
    --bf-purple: #3F2AC7;
    --bf-purple-dark: #2E1B9E;

    --bf-coral: #FF6B4A;
    --bf-coral-dark: #E95435;

    --bf-dark: #16152A;
    --bf-text: #36354A;
    --bf-muted: #747386;

    --bf-light: #F8F7FC;
    --bf-purple-light: #F1EEFF;
    --bf-coral-light: #FFF0EC;

    --bf-border: #E8E6F0;

    --bf-gradient: linear-gradient(
        90deg,
        #3F2AC7 0%,
        #FF6B4A 100%
    );
}


html {
    scroll-behavior: smooth;
}


body {
    color: var(--bf-text);
    background: #ffffff;
}


body,
button,
input,
select,
textarea {
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


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


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


/* ---------------------------------------------------------
   LINKS
--------------------------------------------------------- */

a {
    color: var(--bf-purple);
    transition:
        color .2s ease,
        opacity .2s ease;
}


a:hover {
    color: var(--bf-purple-dark);
}


/* ---------------------------------------------------------
   SELECTION
--------------------------------------------------------- */

::selection {
    background: var(--bf-purple);
    color: #ffffff;
}


/* ---------------------------------------------------------
   HEADINGS
--------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--bf-dark);
    font-weight: 700;
}


/* ---------------------------------------------------------
   FORM ELEMENTS
--------------------------------------------------------- */

input,
textarea,
select {
    border-color: var(--bf-border);
}


input:focus,
textarea:focus,
select:focus {
    border-color: var(--bf-purple);
    outline: none;
}


/* ---------------------------------------------------------
   ACCESSIBILITY
--------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--bf-purple);
    outline-offset: 2px;
}


/* ---------------------------------------------------------
   BRANDEFINER UTILITIES
--------------------------------------------------------- */

.bf-gradient-text {
    background: var(--bf-gradient);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.bf-purple {
    color: var(--bf-purple);
}


.bf-coral {
    color: var(--bf-coral);
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.bf-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 22px;

    border: 0;
    border-radius: 9px;

    background: var(--bf-coral);

    color: #ffffff !important;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.bf-button:hover {
    background: var(--bf-coral-dark);

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 10px 25px
        rgba(255, 107, 74, .22);
}


.bf-button-secondary {
    background: var(--bf-purple);
}


.bf-button-secondary:hover {
    background: var(--bf-purple-dark);
}


/* ---------------------------------------------------------
   AUTH PAGE
--------------------------------------------------------- */

/*
 * The custom Brandefiner Login/Register template outputs
 * its own complete layout, so remove any default spacing.
 */

body.brandefiner-auth-page {
    margin: 0;
    padding: 0;

    background: #ffffff;
}


/* ---------------------------------------------------------
   GENERATEPRESS
--------------------------------------------------------- */

/*
 * Keep GeneratePress defaults mostly untouched.
 * Brandefiner-specific pages can override these individually.
 */

.site-content {
    min-height: 1px;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {

    .bf-button {
        min-height: 44px;
        padding-left: 18px;
        padding-right: 18px;
    }

}