/**
 * Mahogany Estates — Social Profile Icons
 * Footer, Contact page and shortcode.
 */

/* =====================================
   BRAND COLOURS AND ICON SIZES
===================================== */

:root {
    --me-burgundy-deep: var(--burgundy-deep, #4a0b18);
    --me-burgundy: var(--burgundy, #6e1425);
    --me-gold: #e3c58a;
    --me-gold-bright: #f0d79b;
    --me-ivory: var(--ivory, #faf6ee);

    --social-links-gap: 12px;

    --social-links-target-sm: 36px;
    --social-links-target-md: 44px;
    --social-links-target-lg: 52px;

    --social-links-glyph-sm: 16px;
    --social-links-glyph-md: 18px;
    --social-links-glyph-lg: 20px;
}

/* =====================================
   SVG ICONS
===================================== */

.social-links svg,
.social-links svg path {
    fill: currentColor;
    stroke: none;
}

/* =====================================
   HORIZONTAL ICON LAYOUT
===================================== */

.site-footer .social-links__list,
.contact__info .social-links__list,
.social-links__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--social-links-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Override the footer's default grid layout */

.site-footer ul.social-links__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

/* Individual icon items */

.social-links__item {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* =====================================
   CLICKABLE ICON AREA
===================================== */

.social-links__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Small icons */

.social-links--sm .social-links__link {
    width: var(--social-links-target-sm);
    height: var(--social-links-target-sm);
    min-width: var(--social-links-target-sm);
    min-height: var(--social-links-target-sm);
}

/* Medium icons */

.social-links--md .social-links__link {
    width: var(--social-links-target-md);
    height: var(--social-links-target-md);
    min-width: var(--social-links-target-md);
    min-height: var(--social-links-target-md);
}

/* Large icons */

.social-links--lg .social-links__link {
    width: var(--social-links-target-lg);
    height: var(--social-links-target-lg);
    min-width: var(--social-links-target-lg);
    min-height: var(--social-links-target-lg);
}

/* =====================================
   CIRCULAR ICON BACKGROUND
===================================== */

.social-links__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;

    transition:
        background 250ms ease,
        border-color 250ms ease,
        box-shadow 250ms ease,
        transform 250ms ease,
        color 250ms ease;
}

/* =====================================
   SVG GLYPH SIZES
===================================== */

.social-links__glyph {
    display: block;
    width: var(--social-links-glyph-md);
    height: var(--social-links-glyph-md);
}

.social-links--sm .social-links__glyph {
    width: var(--social-links-glyph-sm);
    height: var(--social-links-glyph-sm);
}

.social-links--lg .social-links__glyph {
    width: var(--social-links-glyph-lg);
    height: var(--social-links-glyph-lg);
}

/* =====================================
   DARK VARIANT — BURGUNDY FOOTER
===================================== */

.social-links--dark .social-links__circle {
    background: #ffffff;
    border: 1px solid var(--me-gold);
    color: var(--me-burgundy);
}

/* Hover and keyboard focus */

.social-links--dark .social-links__link:hover .social-links__circle,
.social-links--dark .social-links__link:focus-visible .social-links__circle {
    background: linear-gradient(
        145deg,
        var(--me-gold) 0%,
        var(--me-gold-bright) 100%
    );

    border-color: var(--me-gold-bright);
    color: var(--me-burgundy-deep);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

.social-links--dark .social-links__link:focus-visible {
    outline: 2px solid var(--me-gold);
    outline-offset: 3px;
}

/* =====================================
   LIGHT VARIANT — CONTACT PAGE
===================================== */

.social-links--light .social-links__circle {
    background: #ffffff;
    border: 1px solid var(--me-burgundy);
    color: var(--me-burgundy);
}

/* Hover and keyboard focus */

.social-links--light .social-links__link:hover .social-links__circle,
.social-links--light .social-links__link:focus-visible .social-links__circle {
    background: var(--me-burgundy);
    border-color: var(--me-burgundy);
    color: #ffffff;

    box-shadow: 0 6px 16px rgba(74, 11, 24, 0.22);
    transform: translateY(-2px);
}

.social-links--light .social-links__link:focus-visible {
    outline: 2px solid var(--me-burgundy);
    outline-offset: 3px;
}

/* =====================================
   FOOTER SPACING AND ALIGNMENT
===================================== */

/* Space below FOLLOW US heading */

.site-footer .footer__social .footer__h {
    margin-bottom: 12px;
}

/* Keep icons aligned to the left */

.site-footer .footer__social .social-links__list {
    justify-content: flex-start;
}

/* =====================================
   CONTACT PAGE SPACING
===================================== */

/* Space below Follow us heading */

.contact__social .contact__social-title {
    margin-bottom: 12px;
}

/* =====================================
   MOBILE RESPONSIVENESS
===================================== */

@media (max-width: 759px) {
    .site-footer .footer__social .social-links__list {
        justify-content: center;
    }
}

/* =====================================
   ACCESSIBILITY — REDUCED MOTION
===================================== */

@media (prefers-reduced-motion: reduce) {
    .social-links__circle {
        transition: none;
    }

    .social-links--dark .social-links__link:hover .social-links__circle,
    .social-links--dark .social-links__link:focus-visible .social-links__circle,
    .social-links--light .social-links__link:hover .social-links__circle,
    .social-links--light .social-links__link:focus-visible .social-links__circle {
        transform: none;
    }
}

/* Extra space between FOLLOW US heading and social icons */
.site-footer .footer__social .social-links {
    margin-top: 16px;
}

/* Space between Mahogany Estates logo and FOLLOW US */
.site-footer .footer__brand .footer__social {
    margin-top: 24px;
}