.contextual-internal-link {color: #4285f4;text-decoration: underline;text-decoration-color: rgba(66, 133, 244, 0.4);text-underline-offset: 3px;text-decoration-thickness: 2px;font-weight: 600;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position: relative;padding: 2px 4px;border-radius: 3px} .contextual-internal-link:hover {color: #1a73e8;text-decoration-color: #1a73e8;background: rgba(66, 133, 244, 0.1);transform: translateY(-1px)} .contextual-internal-link::after {content: '🔗';font-size: 0.7em;opacity: 0;margin-right: 3px;transition: opacity 0.3s ease} .contextual-internal-link:hover::after {opacity: 0.7} .related-content-section {background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);padding: 3rem 0;margin: 4rem 0;border-top: 3px solid #4285f4;position: relative} .related-content-section::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 1px;background: linear-gradient(90deg, transparent, #4285f4, transparent)} .related-content-section h3 {text-align: center;color: #1e293b;margin-bottom: 2.5rem;font-size: 2rem;font-weight: 800;position: relative} .related-content-section h3::after {content: '';position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 80px;height: 4px;background: linear-gradient(90deg, #4285f4, #34a853);border-radius: 2px} .related-content-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 2rem;max-width: 1200px;margin: 0 auto;padding: 0 1rem} .related-content-card {display: flex;align-items: center;gap: 1.5rem;padding: 2rem;background: white;border: 2px solid #e2e8f0;border-radius: 16px;text-decoration: none;color: #374151;transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);position: relative;overflow: hidden} .related-content-card::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(66, 133, 244, 0.1), transparent);transition: left 0.6s ease} .related-content-card:hover::before {left: 100%} .related-content-card:hover {transform: translateY(-8px);box-shadow: 0 12px 32px rgba(66, 133, 244, 0.2);border-color: #4285f4;background: linear-gradient(135deg, #fff, #f8faff)} .card-icon {font-size: 2.5rem;min-width: 60px;text-align: center;transition: transform 0.4s ease} .related-content-card:hover .card-icon {transform: scale(1.2) rotate(5deg)} .card-content {flex: 1} .card-content h4 {font-size: 1.2rem;font-weight: 700;margin-bottom: 0.5rem;color: #1e293b;line-height: 1.4} .card-type {font-size: 0.9rem;color: #6b7280;margin: 0;font-weight: 500} .card-arrow {font-size: 1.5rem;color: #4285f4;transition: transform 0.3s ease;font-weight: bold} .related-content-card:hover .card-arrow {transform: translateX(-5px);color: #1a73e8} .article-cross-links {background: rgba(66, 133, 244, 0.05);padding: 2rem;border-radius: 12px;margin-top: 2rem;border-right: 4px solid #4285f4} .article-cross-links h4 {color: #4285f4;margin-bottom: 1.5rem;font-size: 1.3rem;font-weight: 700} .cross-links-list {display: flex;flex-direction: column;gap: 1rem} .cross-link {display: inline-flex;align-items: center;gap: 0.75rem;padding: 1rem 1.5rem;background: white;border: 2px solid #e2e8f0;border-radius: 10px;text-decoration: none;color: #374151;font-weight: 600;transition: all 0.3s ease} .cross-link:hover {border-color: #4285f4;background: rgba(66, 133, 244, 0.05);transform: translateX(-5px)} .learn-more-section {background: linear-gradient(135deg, rgba(52, 168, 83, 0.1), rgba(66, 133, 244, 0.05));padding: 3rem;border-radius: 16px;margin: 3rem 0;border: 2px solid rgba(52, 168, 83, 0.2);text-align: center} .learn-more-section h3 {color: #34a853;font-size: 2rem;margin-bottom: 1rem;font-weight: 800} .learn-more-section p {color: #6b7280;font-size: 1.1rem;margin-bottom: 2rem;max-width: 600px;margin-left: auto;margin-right: auto} .learn-more-links {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 1.5rem;margin-top: 2rem} .learn-more-link {display: flex;align-items: center;gap: 1rem;padding: 1.5rem;background: white;border: 2px solid #e2e8f0;border-radius: 12px;text-decoration: none;color: #374151;transition: all 0.3s ease;text-align: right} .learn-more-link:hover {border-color: #34a853;background: rgba(52, 168, 83, 0.05);transform: translateY(-3px);box-shadow: 0 8px 24px rgba(52, 168, 83, 0.15)} .learn-more-link .link-icon {font-size: 1.8rem;color: #34a853;min-width: 40px} .learn-more-link .link-text {font-weight: 600;font-size: 1.1rem;line-height: 1.4} .country-specific-links {background: rgba(251, 188, 4, 0.1);padding: 2.5rem;border-radius: 16px;margin: 3rem 0;border-top: 4px solid #fbbc04} .country-specific-links h4 {color: #f9ab00;font-size: 1.5rem;margin-bottom: 2rem;text-align: center;font-weight: 700} .country-links-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 1rem} .country-link {display: flex;align-items: center;justify-content: center;gap: 0.75rem;padding: 1rem 1.5rem;background: white;border: 2px solid #fde68a;border-radius: 10px;text-decoration: none;color: #92400e;font-weight: 600;transition: all 0.3s ease;text-align: center} .country-link:hover {border-color: #f59e0b;background: rgba(251, 188, 4, 0.1);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(251, 188, 4, 0.2)} @media (prefers-color-scheme: dark) {.related-content-section {background: linear-gradient(135deg, #1e293b 0%, #334155 100%)} .related-content-section h3 {color: #f1f5f9} .related-content-card {background: #1e293b;border-color: #475569;color: #e2e8f0} .related-content-card:hover {background: linear-gradient(135deg, #1e293b, #2d3748);border-color: #4285f4} .card-content h4 {color: #f1f5f9} .learn-more-section {background: linear-gradient(135deg, rgba(52, 168, 83, 0.15), rgba(66, 133, 244, 0.1))} .learn-more-link, .cross-link, .country-link {background: #1e293b;border-color: #475569;color: #e2e8f0} } @media (max-width: 768px) {.related-content-section {padding: 2rem 0;margin: 2rem 0} .related-content-section h3 {font-size: 1.5rem;margin-bottom: 1.5rem} .related-content-grid {grid-template-columns: 1fr;gap: 1rem;padding: 0 0.5rem} .related-content-card {padding: 1.5rem;gap: 1rem} .card-icon {font-size: 2rem;min-width: 50px} .card-content h4 {font-size: 1.1rem} .learn-more-section {padding: 2rem 1rem} .learn-more-links {grid-template-columns: 1fr;gap: 1rem} .learn-more-link {padding: 1rem;gap: 0.75rem} .country-links-grid {grid-template-columns: repeat(2, 1fr);gap: 0.75rem} .country-link {padding: 0.75rem 1rem;font-size: 0.9rem} .cross-links-list {gap: 0.75rem} .cross-link {padding: 0.75rem 1rem;font-size: 0.9rem} } @keyframes linkPulse {0%, 100% {box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.4)} 50% {box-shadow: 0 0 0 8px rgba(66, 133, 244, 0)} } .contextual-internal-link.highlighted {animation: linkPulse 2s infinite} .contextual-internal-link:focus, .related-content-card:focus, .cross-link:focus, .learn-more-link:focus, .country-link:focus {outline: 3px solid #4285f4;outline-offset: 2px} @media print {.related-content-section, .learn-more-section, .country-specific-links, .article-cross-links {display: none} .contextual-internal-link::after {display: none} .contextual-internal-link {color: #000;text-decoration: underline} } :root {--contextual-link-color: #4285f4;--contextual-link-hover-color: #1a73e8;--related-section-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--card-bg: white;--card-border: #e2e8f0;--card-hover-border: #4285f4;--learn-more-accent: #34a853;--country-accent: #fbbc04} .related-content-card, .learn-more-link, .cross-link, .country-link {will-change: transform} .related-content-section, .learn-more-section {contain: layout style paint}