/*
    social-share-styles.css
    Created by Grok (xAI) for https://realquarkbeat.com/
    Purpose:
    - Styles social share icons for articles (e.g., QuarkHealth.html in #tswcontent)
    - Responsive layout with orange icons (#e09248) on top, text labels below for accessibility
    - Matches site aesthetic: #00FF00 (green), #386af7 (blue), #ffe500 (yellow links)
    Features:
    - Flexbox for horizontal layout (desktop), vertical stack (mobile ≤ 629px)
    - Orange icons (24px desktop, 32px mobile) with visible text labels
    - Hover effect: Yellow (#ffe500) for links
    - Accessible: aria-label, high-contrast colors, readable font size
    - Flexible: Adjustable icon size (20-32px), spacing (5-15px), colors
    Compatibility:
    - BlueGriffon-compatible with simple CSS (flex, color, font-size)
    - Works with styles.css (13%/60%/13% three-column, 30%/69.5% single-column)
    - Complements image-modules-styles.css
    Instructions:
    1. Create/save social-share-styles.css with this code
    2. Upload to /public_html/ and /public_html/articles/, ensuring identical files
    3. Link in HTML: <link rel="stylesheet" href="social-share-styles.css?v=1">
    4. Add Font Awesome: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    5. Insert <div class="social-share">...</div> in #tswcontent (see HTML)
    6. Update href URLs with article-specific links (e.g., replace QuarkHealth.html)
    7. Test on https://realquarkbeat.com/QuarkHealth.html
    8. Adjust icon size, spacing, colors below (see comments for ranges)
    Credit: Inspired by thesitewizard.com’s Layout Wizard 4.0.0 ecosystem
*/

/* Social share container */
.social-share {
    display: flex; /* Horizontal layout for icons; don’t change */
    flex-wrap: wrap; /* Wraps icons to next line if needed; don’t change */
    justify-content: center; /* Centers icons; change to 'flex-start' (left), 'flex-end' (right) */
    align-items: center; /* Vertically aligns icons/text; don’t change */
    gap: 10px; /* Space between icons; change to 5px (tighter), 15px (looser) */
    margin: 20px 0; /* Vertical spacing; change to 10px (less), 30px (more) */
    padding: 10px; /* Inner padding; change to 5px (less), 15px (more) */
    background-color: #386af7; /* Blue background; change to #0066cc (darker), #fff (white) */
}

/* Share heading */
.social-share p {
    width: 100%; /* Full width for text; don’t change */
    text-align: center; /* Centers text; change to 'left', 'right' */
    color: #00ff00 !important; /* Green text; change to #fff (white), #ffe500 (yellow) */
    font-size: 16px; /* Text size; change to 14px (smaller), 18px (larger) */
    margin: 0 0 10px; /* Bottom spacing; change to 5px (less), 15px (more) */
    font-family: 'Atkinson Hyperlegible', Arial, Helvetica, sans-serif; /* Matches site font; change to 'Verdana', 'Georgia' */
}

/* Social share link (icon + text) */
.social-share-link {
    display: flex; /* Stacks icon and text vertically; don’t change */
    flex-direction: column; /* Icon above text; don’t change */
    align-items: center; /* Centers icon/text; don’t change */
    text-decoration: none; /* Removes underline; don’t change */
    color: #e09248 !important; /* Orange icon; change to #00ff00 (green), #fff (white) */
    font-size: 24px; /* Icon size; change to 20px (smaller), 28px (larger) */
    transition: color 0.3s ease; /* Smooth hover effect; don’t change */
}

/* Icon */
.social-share-link i {
    margin-bottom: 5px; /* Space below icon; change to 3px (less), 8px (more) */
}

/* Text label */
.social-share-link span {
    color: #00ff00 !important; /* Green text; change to #fff (white), #ffe500 (yellow) */
    font-size: 12px; /* Text size; change to 10px (smaller), 14px (larger) */
    font-family: 'Atkinson Hyperlegible', Arial, Helvetica, sans-serif; /* Matches site font */
}

/* Hover effect */
.social-share-link:hover {
    color: #ffe500 !important; /* Yellow on hover; change to #00ff00 (green), #ff0000 (red) */
}

/* Ensure no conflicts with other styles */
.social-share-link, .social-share-link i, .social-share-link span {
    width: auto !important; /* Prevents fixed widths; don’t change */
    max-width: 100% !important; /* Prevents overflow; don’t change */
    box-sizing: border-box !important; /* Includes padding in width; don’t change */
}

/* Responsive: Stack vertically on mobile (screens ≤ 629px) */
@media only screen and (max-width: 629px) {
    .social-share {
        flex-direction: column; /* Stacks icons vertically; don’t change */
        gap: 15px; /* Larger gap for touch; change to 10px (tighter), 20px (looser) */
        padding: 15px; /* More padding; change to 10px, 20px */
    }
    .social-share-link {
        font-size: 32px; /* Larger icon; change to 28px (smaller), 36px (larger) */
    }
    .social-share-link span {
        font-size: 14px; /* Larger text; change to 12px, 16px */
    }
}
