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

/* ============================================
   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) ICON & COLOR --- */
a[href*="ispa_za"]::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #000000 !important; /* Official X Black */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932 6.064-6.932zm-1.294 19.497h2.039L6.486 3.24H4.298l13.309 17.41z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932 6.064-6.932zm-1.294 19.497h2.039L6.486 3.24H4.298l13.309 17.41z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* --- 3. THE OFFICIAL LINKEDIN ICON & COLOR --- */
a[href*="the-internet-service-providers"]::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #0077b5 !important; /* Official LinkedIn Blue */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* ============================================
   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;
    }
}

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