/**
 * ISPA Custom Styles
 * 
 * WCAG 2.1 AA Compliance fixes and design improvements
 * 
 * @package Betheme Child Theme
 * @author ISPA
 */

/* ================================================
   Subheader — fix height to match sticky header
   ================================================ */
#Subheader {
    padding: 80px 0 40px 0 !important;
}

/* Pages with BeBuilder background image sections requiring more vertical room */
body.home #Subheader, body.page-id-2 #Subheader, body.page-id-7711 #Subheader, body.page-id-7713 #Subheader, body.page-id-7721 #Subheader, body.page-id-7723 #Subheader, body.page-id-7727 #Subheader, body.page-id-7729 #Subheader, body.page-id-7732 #Subheader, body.page-id-7734 #Subheader, body.page-id-7736 #Subheader, body.page-id-7739 #Subheader, body.page-id-7743 #Subheader, body.page-id-7746 #Subheader, body.page-id-7751 #Subheader, body.page-id-7753 #Subheader, body.page-id-7756 #Subheader, body.page-id-7758 #Subheader, body.page-id-7765 #Subheader, body.page-id-7767 #Subheader, body.page-id-7769 #Subheader, body.page-id-7771 #Subheader, body.page-id-7773 #Subheader, body.page-id-7776 #Subheader, body.page-id-7778 #Subheader, body.page-id-7780 #Subheader, body.page-id-7784 #Subheader, body.page-id-7786 #Subheader, body.page-id-7788 #Subheader, body.page-id-7790 #Subheader, body.page-id-7792 #Subheader, body.page-id-7794 #Subheader, body.page-id-7796 #Subheader, body.page-id-7798 #Subheader, body.page-id-7800 #Subheader, body.page-id-7802 #Subheader, body.page-id-7804 #Subheader, body.page-id-7806 #Subheader, body.page-id-7808 #Subheader, body.page-id-7810 #Subheader, body.page-id-7812 #Subheader, body.page-id-7814 #Subheader, body.page-id-7817 #Subheader, body.page-id-7819 #Subheader, body.page-id-7821 #Subheader, body.page-id-7824 #Subheader, body.page-id-7826 #Subheader, body.page-id-7832 #Subheader, body.page-id-7834 #Subheader, body.page-id-7836 #Subheader, body.page-id-7838 #Subheader, body.page-id-7840 #Subheader, body.page-id-8204 #Subheader, body.page-id-8210 #Subheader, body.page-id-8212 #Subheader, body.page-id-8214 #Subheader, body.page-id-8216 #Subheader, body.page-id-8218 #Subheader, body.page-id-8231 #Subheader, body.page-id-8235 #Subheader, body.page-id-8237 #Subheader, body.page-id-8239 #Subheader, body.page-id-8241 #Subheader, body.page-id-8307 #Subheader, body.page-id-8309 #Subheader, body.page-id-8311 #Subheader, body.page-id-8396 #Subheader, body.page-id-8401 #Subheader, body.page-id-8494 #Subheader {
    padding: 120px 0 60px 0 !important;
}

/* ================================================
   Fix empty #Content min-height on short/no-content pages
   ================================================ */

#Content {
    min-height: 0 !important;
}

/* ============================================
   Fix email obfuscation link colour JB 2026-04-18
   ============================================ */
.ispa-obf a,
.ispa-obf a:visited {
    color: #333333 !important;
    text-decoration: none;
    margin-left: 5px;
}

/* ============================================
   Fix active menu item colors/design JB 2026-04-13
   ============================================ */
/* Active menu item - scoped to side menu only */
.mfn-sidemenu-menu .current_page_item > a,
.mfn-sidemenu-menu .current-menu-item > a,
.mfn-sidemenu-menu .current-menu-ancestor > a {
    font-weight: bold !important;
    color: #ffffff !important;
}

/* Reset breadcrumbs to normal weight */
.breadcrumb-list a,
.breadcrumb-nav a {
    font-weight: normal !important;
}

/* ============================================
   Add X icon (CRITICAL) JB 2026-04-02
   ============================================ */
/* Target the X link specifically */
/* Official ISPA X (Twitter) Target */
/* --- 1. HIDE ORIGINAL BEBUILDER ICONS AND TEXT--- */
a[href*="ispa_za"], 
a[href*="the-internet-service-providers"] {
    display: inline-flex !important;
    align-items: center;
    text-decoration: none !important;
    font-size: 0 !important; /* Forces text to disappear */
}

/* Hide the theme's built-in icon if it exists inside these links */
a[href*="ispa_za"] i, 
a[href*="the-internet-service-providers"] i {
    display: none !important;
}

/* --- 2. THE OFFICIAL X (TWITTER) ICONS --- */
/* ================================================
   Social icon replacement — shared base
   ================================================ */

a[href*="ispa_za"],
a[href*="the-internet-service-providers"],
a[href*="inx_za"],
a[href*="inxza"] {
    display: inline-flex !important;
    align-items: center;
    text-decoration: none !important;
    font-size: 0 !important;
}

a[href*="ispa_za"] i,
a[href*="the-internet-service-providers"] i,
a[href*="inx_za"] i,
a[href*="inxza"] i {
    display: none !important;
}

a[href*="ispa_za"]::before,
a[href*="the-internet-service-providers"]::before,
a[href*="inx_za"]::before,
a[href*="inxza"]::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    -webkit-mask: var(--social-icon) no-repeat center;
    mask: var(--social-icon) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* --- X (Twitter) --- */
a[href*="ispa_za"]::before,
a[href*="inx_za"]::before {
    background-color: #000000;
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

/* --- LinkedIn --- */
a[href*="the-internet-service-providers"]::before,
a[href*="inxza"]::before {
    background-color: #0077b5;
    --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

/* --- To add a new organisation, append their anchor selector to the
       relevant platform block only. Example for a hypothetical WASPA:

a[href*="waspa_za"]::before,          ← X block
a[href*="waspa-wireless-providers"]::before { ... }    ← LinkedIn block

   Also add to the shared reset blocks (display, font-size, i hide).
   No other changes required.                                          --- */

/* ============================================
   Add breadcrumbs (CRITICAL) JB 2026-04-02
   ============================================ */
.ispa-universal-bc {
    width: 100%;
    font-size: 13px;
    clear: both;
}

.ispa-bc-plain {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    color: #666;
}

.ispa-bc-banner,
.ispa-bc-hidden {
    display: none;
}

.ispa-bc-banner {
    position: absolute;
    bottom: 16px;
    left: 0;
    z-index: 10;
    color: rgba(255, 255, 255, 0.9);
}

.ispa-bc-banner.ispa-bc-ready {
    display: block;
}

.breadcrumb-nav {
    position: relative;
    z-index: 10;
    clear: both;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb-ancestor::before,
.breadcrumb-current::before {
    content: ">";
    padding: 0 10px;
    opacity: 0.5;
}

.breadcrumb-item a {
    color: inherit;
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline !important;
}

.breadcrumb-current {
    font-weight: 600;
}

.ispa-bc-banner .breadcrumb-item a {
    color: #fff;
}

/* ============================================
   WCAG Typography Fixes (CRITICAL)
   ============================================ */

/* Base font size - WCAG minimum 16px */
html {
    font-size: 16px;
}

body {
    font-size: 1rem;
    line-height: 1.5;
}

/* Line height minimum 1.5 for readability - WCAG SC 1.4.12 */
p, li, td, th, span, div {
    line-height: 1.5;
}

/* Responsive heading sizes */
h1 {
    font-size: 48px;
    line-height: 1.2;
}

h2 {
    font-size: 36px;
    line-height: 1.3;
}

h3 {
    font-size: 28px;
    line-height: 1.3;
}

/* Mobile responsive - prevent H1 overflow */
@media (max-width: 767px) {
    h1 {
        font-size: 32px !important;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 24px;
    }
    
    h3 {
        font-size: 20px;
    }
}

/* ============================================
   Table Styling (Consistency & Readability)
   ============================================ */

/* Left-align table content - standard UX practice */
.ispa-members-table td,
.ispa-members-table th {
    text-align: left;
    padding: 8px 12px;
    vertical-align: top;
}

/* Table header styling */
.ispa-members-table thead th {
    font-weight: bold;
    border-bottom: 2px solid #ddd;
}

/* Table row hover for better UX */
.ispa-members-table tbody tr:hover {
    background-color: #f5f5f5;
}

/* Alternating row colors for readability */
.ispa-members-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* Member info table styling (profile pages) */
.member-info-table {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
}

.member-info-table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eee;
}

.member-info-table .section-header {
    background-color: #f0f0f0;
    font-weight: bold;
    padding: 12px;
}

/* ============================================
   Member Profile Tabs
   ============================================ */

.member-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 20px 0;
    border-bottom: 2px solid #ddd;
}

.member-tabs button {
    background-color: transparent;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.member-tabs button:hover {
    background-color: #f5f5f5;
    border-bottom-color: #ccc;
}

.member-tabs button.active {
    border-bottom-color: #ff6600;
    color: #ff6600;
    font-weight: bold;
}

.tabcontent {
    display: none;
    padding: 20px 0;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================
   Press Release Styling
   ============================================ */

.ispa-press-releases {
    margin-top: 30px;
}

.ispa-press-releases h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ddd;
}

.ispa-press-releases table {
    margin-bottom: 40px;
}

/* ============================================
   DNSSEC Provider Styling
   ============================================ */

.ispa-dnssec-table td,
.ispa-dnssec-table th {
    text-align: left;
    padding: 8px 12px;
}

.ispa-dnssec-table thead th {
    text-align: center;
}

.ispa-dnssec-table tbody td:first-child {
    text-align: left;
    padding-right: 15px;
}

.ispa-dnssec-table tbody td:not(:first-child) {
    text-align: center;
}

/* ============================================
   Background Image Override (remove orange lines)
   ============================================ */

/* Option 1: Replace with gradient */
.mcb-section[style*="Home-Africa-ISPA.webp"] {
    background-image: none !important;
    background: linear-gradient(135deg, #1a3a52 0%, #2d5a7b 100%) !important;
}

/* Option 2: Solid color (comment out gradient above, uncomment below)
.mcb-section[style*="Home-Africa-ISPA.webp"] {
    background-image: none !important;
    background-color: #1a3a52 !important;
}
*/

/* ============================================
   Text Alignment Fixes
   ============================================ */

/* Don't center-align long text blocks on mobile */
@media (max-width: 767px) {
    .mcb-column-inner p {
        text-align: left;
    }
}

/* ============================================
   Member Profile Elements
   ============================================ */

.member-header {
    margin-bottom: 30px;
}

.member-logo {
    text-align: center;
    margin-bottom: 20px;
}

.member-logo img {
    max-width: 275px;
    height: auto;
}

.member-description {
    margin: 20px 0;
    padding: 20px;
    background-color: #f9f9f9;
    border-left: 4px solid #ff6600;
}

.member-compliance-badge {
    text-align: center;
    margin: 20px 0;
}

.member-grade {
    text-align: center;
    font-size: 18px;
    margin: 15px 0;
}

.back-link {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #ddd;
}

.back-link a {
    font-size: 16px;
    text-decoration: none;
    color: #ff6600;
    font-weight: 500;
}

.back-link a:hover {
    text-decoration: underline;
}

/* ============================================
   Notice Boxes
   ============================================ */

.ex-member-notice,
.non-member-notice {
    padding: 20px;
    margin: 20px 0;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
}

.ex-member-notice p,
.non-member-notice p {
    margin: 0;
    line-height: 1.6;
}

/* ============================================
   Accessibility Improvements
   ============================================ */

/* Focus indicators for keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #ff6600;
    outline-offset: 2px;
}

/* Skip to content link for screen readers */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #ff6600;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .member-tabs,
    .back-link,
    .mcb-background-overlay {
        display: none;
    }
    
    .tabcontent {
        display: block !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }
}

/* ============================================
   Utility Classes
   ============================================ */

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-20 {
    margin-top: 20px;
}

/* ============================================
   Mobile Optimizations
   ============================================ */

@media (max-width: 767px) {
    /* Stack table cells on mobile if needed */
    .ispa-members-table td,
    .ispa-members-table th {
        padding: 6px 8px;
        font-size: 14px;
    }
    
    /* Better mobile padding */
    .member-profile {
        padding: 0 15px;
    }
    
    /* Responsive tabs */
    .member-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .member-tabs button {
        white-space: nowrap;
        font-size: 14px;
        padding: 10px 15px;
    }
}

/* ============================================
   Contact form fixes
   ============================================ */
.ispa-contact a,
.ispa-contact a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.mcb-column-inner {
    margin-left: 0;
    margin-right: 0;
}

/* ============================================
   END OF CUSTOM STYLES
   ============================================ */