/* ==========================================================
   HerGame Phoenix
   Components
   File: components.css
   ========================================================== */


/* ==========================================================
   Logo
   ========================================================== */

.logo {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    color: var(--color-text);
    user-select: none;
}

.logo span {
    color: var(--color-primary);
}


/* ==========================================================
   Navigation
   ========================================================== */

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.site-nav a {
    position: relative;

    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);

    color: var(--color-text);

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

.site-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0;
    height: 2px;

    background: var(--color-primary);

    transition: width var(--transition-normal);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
    width: 100%;
}


/* ==========================================================
   Buttons
   ========================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: .5rem;

    min-height: 48px;

    padding-inline: 1.75rem;

    border-radius: var(--radius-pill);

    background: var(--color-primary);

    color: #fff;

    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);

    transition:
        background-color var(--transition-normal),
        transform var(--transition-fast),
        box-shadow var(--transition-normal);
}

.btn:hover {
    background: var(--color-primary-dark);
    color: #fff;

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: transparent;
    color: var(--color-text);

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

.btn-secondary:hover {
    background: var(--color-surface-alt);
}


/* ==========================================================
   Eyebrow
   ========================================================== */

.eyebrow {

    display:inline-block;

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

    color:var(--color-primary);

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

    font-size: var(--fs-sm);

    font-weight:700;

    line-height:1.2;

    letter-spacing:.14em;

    text-transform:uppercase;

    padding-top:2px;

}


/* ==========================================================
   Section Heading
   ========================================================== */



.section-title {
    margin-bottom: var(--space-3);
}

.section-description {
    max-width: 700px;

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

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


/* ==========================================================
   Article Card
   ========================================================== */

.article-card {
    display: flex;
    flex-direction: column;

    background: var(--color-surface);

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

    border-radius: var(--radius-lg);

    overflow: hidden;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.article-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.article-card__image {
    aspect-ratio: 16 / 10;

    overflow: hidden;
}

.article-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}

.article-card:hover .article-card__image img {
    transform: scale(1.04);
}

.article-card__content {
    padding: var(--space-5);
}

.article-card__category {
    display: inline-block;

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

    color: var(--color-primary);

    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);

    letter-spacing: .08em;
    text-transform: uppercase;
}

.article-card__title {
    margin-bottom: var(--space-3);

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

.article-card__excerpt {
    margin-bottom: var(--space-5);

    color: var(--color-text-light);
}

.article-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

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

    font-size: var(--fs-sm);
}


/* ==========================================================
   Image
   ========================================================== */

.image-rounded {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.image-shadow {
    box-shadow: var(--shadow-lg);
}


/* ==========================================================
   Divider
   ========================================================== */

.divider {
    width: 100%;
    height: 1px;

    background: var(--color-border);

    margin-block: var(--space-8);
}


/* ==========================================================
   Badge
   ========================================================== */

.badge {
    display: inline-flex;
    align-items: center;

    padding: .4rem .8rem;

    border-radius: var(--radius-pill);

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

    color: var(--color-primary);

    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);

    letter-spacing: .05em;
    text-transform: uppercase;
}


/* ==========================================================
   Placeholder
   (bruges kun under udvikling)
   ========================================================== */

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

    min-height: 280px;

    border: 2px dashed var(--color-border);

    border-radius: var(--radius-lg);

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

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

    font-size: var(--fs-sm);
}

/* ==========================================================
   HEADER
   ========================================================== */

.header__logo {

    flex-shrink: 0;

}

.header__logo img {

    height:60px;

    width:auto;

    display:block;

}


/* ==========================================================
   Navigation
   ========================================================== */

.header__nav {

    display: flex;

    align-items: center;

    gap: 1.8rem;

   justify-self:center;

}

.header__nav a {

    position: relative;

    color: var(--color-text);

    font-size: .95rem;

    font-weight: 600;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    transition: color .25s ease;

}

.header__nav a:hover {

    color: var(--color-primary);

}

.header__nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;

    height: 2px;

    background: var(--color-primary);

    transition: width .25s ease;

}

.header__nav a:hover::after {

    width: 100%;

}


/* ==========================================================
   Actions
   ========================================================== */

.header__actions {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}

.header__icon {

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    color: var(--color-text);

    transition:
        background .25s ease,
        color .25s ease;

}

.header__icon:hover {

    background: rgba(0,0,0,.05);

    color: var(--color-primary);

}

.header__icon svg {

    width: 20px;
    height: 20px;

}


/* ==========================================================
   CTA
   ========================================================== */

.header__cta {

    margin-left: .25rem;

    padding: .75rem 1.35rem;

    font-size: .78rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

}