/* ---------------------------------------------------------------------------------------------
 * Theme Name: WorkDigital Foundation Child
 * Version: 0.1
 * Description: Child theme for WorkDigital Foundation theme
 * Author: WorkDigital
 * Author URI: https://workdigital.dk
 * Template: wd-foundation
 * --------------------------------------------------------------------------------------------- */


/* =============================================================================================
   1. VARIABLER
   ============================================================================================= */

:root {
    --bold: 700;

    /* Skriftstørrelser */
    --medium-font-size: calc(var(--body-font-size) * 1.25);
    --semi-font-size: calc(var(--body-font-size) * 1.5);
    --large-font-size: calc(var(--body-font-size) * 2);
    --huge-font-size: calc(var(--body-font-size) * 2.75);
    --small-font-size: calc(var(--body-font-size) * 0.85);
    --tiny-font-size: calc(var(--body-font-size) * 0.75);

    /* Layout */
    --header-height: 80px;
    --theme-border-radius: 12px;

    /* Animationer */
    --standard-transition: 200ms ease-in-out;
    --slow-transition: 400ms ease-in-out;

    /* Typografi */
    --body-line-height: 1.5;
}


/* =============================================================================================
   2. GENEREL TYPOGRAFI OG LINKS
   ============================================================================================= */

/* Accentfarve på links og relevante WordPress-elementer */
.color-accent,
.color-accent-hover:hover,
.color-accent-hover:focus,
:root .has-accent-color,
.has-drop-cap:not(:focus)::first-letter,
.wp-block-button.is-style-outline,
a {
    color: var(--accent-color);
}


/* Overskrifter */
.wp-block-heading h1 {
    font-variant-ligatures: no-common-ligatures;
    font-feature-settings: "lnum";
    font-variant-numeric: lining-nums;
    font-weight: 700;
    letter-spacing: -0.0415625em;
    line-height: 1.25;
    margin: 3.5rem 0 2rem;
}

h1.wp-block-heading {
    margin-top: 0 !important;
}

h4.wp-block-heading {
    opacity: 0.9;
    margin-bottom: -10px !important;
    font-size: 20px;
}


/* =============================================================================================
   3. GENERELT LAYOUT
   ============================================================================================= */

/* Begræns ikke indholdet inde i bredere sektioner */
.entry-content > :is(.wdf-width, .wp-block-cover) > *:not(
    .wp-block-cover__background,
    .wp-block-cover__image-background
) {
    max-width: 100%;
}

/* Hero-sektion */
.wp-block-cover.wd-topsektion {
    margin-bottom: 90px;
}

.hero-cards {
    width: 1200px;
    max-width: 100%;
}


/* =============================================================================================
   4. KORT
   ============================================================================================= */

/* Kortets titel */
.wd-card-title {
    position: absolute;
    bottom: 20px;
    left: 50%;

    width: auto;
    margin: 0;
    padding: 12px 20px;

    color: #FFFFFF;
    font-size: var(--body-font-size);
    white-space: nowrap;

    border: 3px solid #FFFFFF;
    border-radius: 6px;

    transform: translateX(-50%);

    z-index: 1;

    transition:
        background-color var(--slow-transition),
        color var(--slow-transition),
        border-color var(--slow-transition);
}


/* Mørk gradient nederst på kortets billede */
.wd-card::before {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 80px;

    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.5) 31%,
        rgba(0, 0, 0, 1) 59%,
        rgba(0, 0, 0, 1) 100%
    );

    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;

    z-index: 1;
}


/* Kortets billede */
.wd-card-image {
    transform-origin: center center;
    transition: transform var(--slow-transition);
}

.wd-card:hover .wd-card-image {
    transform: scale(1.1);
}


/* Hover-effekt på kortets titel */
.wd-card:hover .wd-card-title {
    color: var(--primary-color);
    background: var(--accent-color);
    border-color: var(--accent-color);
}


/* Specifik opsætning af custom-kort */
a.wd-card.wd-card-custom {
    grid-template-rows: 1fr 0;
}

.wd-card-content-wrapper {
    top: -60px;
    text-align: center;
    background: none;
}


/* Ældre/alternative kort-klasser */
.card:hover .card-title {
    color: var(--theme-primary-color);
    background: var(--theme-highlight-color);
    border-color: var(--theme-highlight-color);
}

.card-text {
    width: 100%;
    max-width: calc(100% - 50px);
    margin: 0 auto;
    padding-bottom: 20px;

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

    z-index: 1;
}

.card-url {
    color: var(--theme-text-color);
    text-decoration: none;

    z-index: 1;
}


/* =============================================================================================
   5. SEKTIONER MED BAGGRUND
   ============================================================================================= */

.column-with-background {
    padding: 30px;
    padding-top: 60px;

    border-radius: var(--theme-border-radius);
}

.wp-block-column.column-with-background.has-background-color-color {
    color: var(--light);
    box-shadow: var(--wp--preset--shadow--deep);
}

.wp-block-column.column-with-background.has-background-color-color.has-secondary-color-background-color.has-text-color.has-background.has-link-color.wp-elements-1.is-layout-flow.wp-block-column-is-layout-flow {
    color: var(--light);
    box-shadow: var(--wp--preset--shadow--deep);
}


/* Kort-lignende gruppe */
div.single-card {
    padding: 30px;

    background-color: var(--primary-color);
    border-radius: var(--theme-border-radius) !important;
}

.wp-block-group.single-card.has-surface-color-color.has-secondary-color-background-color.has-text-color.has-background.has-link-color.wp-elements-1 {
    color: var(--light);
}


/* Overskrift til kort med baggrund */
.h3-card-background {
    margin-top: 60px;
    margin-bottom: 30px !important;

    text-align: center;
}


/* =============================================================================================
   6. BILLEDER
   ============================================================================================= */

.wp-block-image img {
    border-radius: var(--theme-border-radius);
}

figure.wp-block-image.size-large {
    margin: 0 !important;
}


/* =============================================================================================
   7. HEADER OG NAVIGATION
   ============================================================================================= */

/* Dropdown-menu */
ul.sub-menu {
    background-color: var(--primary-color) !important;
}

ul.sub-menu li {
    border: none !important;
    border-width: 0;
}

ul.sub-menu li a {
    padding: 10px !important;

    color: var(--light) !important;
}

.main-header-menu ul.sub-menu li a:hover {
    color: var(--accent-color) !important;
    background-color: inherit;

    transition: var(--standard-transition);
}


/* Aktiv side i dropdown-menu */
ul.sub-menu li.current-menu-item a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    text-align: start;
}

ul.sub-menu li.current-menu-item a::after {
    content: "";

    width: 100%;
    height: 4px;

    background-color: var(--accent-color);
    border-radius: 9999px;
}


/* Understregning på hovedmenuen */
body.sometimes-burger .main-header--hide-icons .main-header-menu > .menu-item > a:before,
body.sometimes-burger .main-header--hide-icons-on-desktop .main-header-menu > .menu-item > a:before {
    bottom: 3px;
    left: calc(2px + 50%);

    width: 100%;
    height: 6px;

    border-radius: 99999px;
}


/* Justering for menupunkter med dropdown */
body.sometimes-burger .main-header-menu > .menu-item.menu-item-has-children > a:before,
body.sometimes-burger .main-header-menu > .menu-item.menu-item-has-children > a:before {
    left: calc(-2px + 50%);
}


/* =============================================================================================
   8. FORMULARER
   ============================================================================================= */

/* Contact Form 7 – overordnet container */
.wpcf7 {
    width: 100%;
    max-width: 600px;

    color: var(--light);
}


/* Alle tekstfelter */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
    display: block;

    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 1.5rem 1.8rem;

    font-size: inherit;
    letter-spacing: -0.015em;

    background: var(--light);
    border: 0.1rem solid var(--light);
    border-radius: calc(var(--theme-border-radius) / 2);
    box-shadow: none;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* Specifik padding til Contact Form 7 */
input.wpcf7-form-control {
    width: 100%;
}

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    padding: 10px;
}


/* Formularfelter i Contact Form 7 */
.wpcf7 input[type="text"],
.wpcf7 input[type="password"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="month"],
.wpcf7 input[type="time"],
.wpcf7 input[type="datetime"],
.wpcf7 input[type="datetime-local"],
.wpcf7 input[type="week"],
.wpcf7 input[type="number"],
.wpcf7 input[type="search"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="color"],
.wpcf7 textarea {
    border-radius: calc(var(--theme-border-radius) / 2);
}


/* Almindelige inputs */
input,
textarea {
    color: var(--text-color);
    border-color: var(--surface-color);
}

input[type="number"] {
    padding-right: 0.5rem;
}

select {
    font-size: 1em;
}

textarea {
    width: 100%;
    height: 12rem;
    line-height: 1.5;
    resize: vertical;
}


/* Placeholder-tekst */
input::-webkit-input-placeholder {
    line-height: normal;
}

input:-ms-input-placeholder {
    line-height: normal;
}

input::-moz-placeholder {
    line-height: revert;
}


/* Formularens submit-knap */
input[type="submit"].wpcf7-submit {
    display: block;

    width: 100%;
    padding: 15px;

    font-weight: 700;
    text-transform: uppercase;

    background-color: var(--accent-color);
    border: none;
    border-radius: calc(var(--theme-border-radius) / 2);

    transition: background-color var(--standard-transition);
}

input[type="submit"].wpcf7-submit:hover {
    color: var(--light);
    background-color: var(--primary-color);
    text-decoration: none;
}


/* Contact Form 7 loading-spinner */
.wpcf7-spinner {
    display: none;

    position: relative;
    margin: 24px auto 0;
}

form.submitting .wpcf7-spinner {
    display: block;

    position: relative;
    margin: 24px auto 0;
}


/* Contact Form 7-blok */
.wp-block-contact-form-7-contact-form-selector {
    margin-top: 15px;
}


/* =============================================================================================
   9. TEKNISKE INPUT-JUSTERINGER
   ============================================================================================= */

code,
input[type="url"],
input[type="email"],
input[type="tel"] {
    /* rtl:ignore */
    direction: ltr;
}


/* Nummerfelter */
input[type="number"] {
    padding-right: 0.5rem;
}