/* ShowMyIP Educational Content Styles - Clean & Simple */

/* Educational content container */
.educational-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333333;
}

/* Typography */
.educational-content h2 {
    color: #222222;
    border-bottom: 2px solid #dddddd;
    padding-bottom: 0.75rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
    font-size: 1.8em;
    line-height: 1.3;
}

.educational-content h3 {
    color: #222222;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.4em;
    line-height: 1.4;
}

.educational-content h4 {
    color: #222222;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.2em;
    line-height: 1.4;
}

.educational-content p {
    margin-bottom: 1.5rem;
    color: #444444;
    line-height: 1.7;
}

/* Section styling - clean and simple */
.edu-tool-purpose,
.edu-how-to-use,
.edu-understanding-results,
.edu-use-cases,
.edu-technical-details,
.edu-integration-examples,
.edu-best-practices,
.edu-resources {
    background-color: #fff;
    padding: 2rem;
    margin-bottom: 3rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Related tools - no box styling */
.edu-related-tools {
    margin-bottom: 3rem;
    padding-top: 1rem;
}

/* Lists */
.educational-content ul,
.educational-content ol {
    margin-bottom: 1.5rem;
    padding-left: 24px;
    line-height: 1.8;
}

.educational-content li {
    margin-bottom: 0.8rem;
    color: #444444;
}

/* Definition lists */
.educational-content dl {
    margin-bottom: 2rem;
}

.educational-content dt {
    font-weight: bold;
    color: #222222;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.05em;
}

.educational-content dt:first-child {
    margin-top: 0;
}

.educational-content dd {
    margin-left: 24px;
    margin-bottom: 1.2rem;
    color: #555555;
    line-height: 1.7;
}

/* Code styling */
.educational-content code {
    background-color: #eef1f2;
    padding: 0.3em 0.5em;
    border-radius: 3px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    color: #444444;
    font-size: 0.9em;
}

/* Example boxes */
.edu-example {
    background-color: #f0f0f0;
    border-left: 4px solid #cccccc;
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 4px;
}

.edu-example h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #222222;
}

/* Use cases - card layout */
.edu-use-cases .edu-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.edu-use-case {
    background-color: #fdfdfd;
    padding: 2rem;
    border: 1px solid #eeeeee;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.edu-use-case h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #222222;
}

.edu-use-case p {
    margin-bottom: 0;
    line-height: 1.6;
}

/* Result categories - simple info boxes */
.edu-result-categories {
    margin: 2rem 0;
}

.edu-result-good,
.edu-result-warning,
.edu-result-critical {
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 4px;
    border-left-width: 4px;
    border-left-style: solid;
}

.edu-result-good {
    background-color: #e8f5e9;
    border-color: #c8e6c9;
    color: #1b5e20;
}

.edu-result-warning {
    background-color: #fffbeb;
    border-color: #ffdf7e;
    color: #775d1c;
}

.edu-result-critical {
    background-color: #ffebee;
    border-color: #ffcdd2;
    color: #b71c1c;
}

.edu-result-good h4,
.edu-result-warning h4,
.edu-result-critical h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: none;
}

/* Important notes */
.edu-limitations,
.edu-important-note {
    background-color: #fffbeb;
    border-left: 4px solid #ffdf7e;
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 4px;
    color: #775d1c;
}

/* Related tools styling - simple text links */
.edu-related-tools ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.edu-related-tools li {
    display: inline;
    margin-right: 2.5rem;
    margin-bottom: 0.8rem;
}

.edu-related-tools a {
    color: #495057;
    text-decoration: none;
    font-size: 1.05em;
}

.edu-related-tools a:hover {
    color: #333333;
    text-decoration: underline;
}

/* No collapsible sections - everything visible */

/* Links */
.educational-content a {
    color: #495057;
    text-decoration: none;
    transition: color 0.3s ease;
}

.educational-content a:hover {
    color: #333333;
}

/* Responsive design */
@media (max-width: 768px) {
    .educational-content h2 {
        font-size: 1.5em;
        margin-top: 2rem;
    }
    
    .educational-content h3 {
        font-size: 1.3em;
        margin-top: 2rem;
    }
    
    .educational-content h4 {
        margin-top: 1.5rem;
    }
    
    .edu-use-cases .edu-card-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .edu-related-tools li {
        display: block;
        margin-bottom: 0.8rem;
        margin-right: 0;
    }
    
    .edu-tool-purpose,
    .edu-how-to-use,
    .edu-understanding-results,
    .edu-use-cases,
    .edu-technical-details {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
}

/* Print styles */
@media print {
    .educational-content {
        max-width: none;
        margin: 0;
        padding: 0;
        font-size: 12pt;
        line-height: 1.4;
    }
    
        .tool-purpose,    .how-to-use,    .understanding-results,    .use-cases,    .technical-details,    .integration-examples,    .best-practices,    .resources {        background-color: transparent;        border: 1pt solid #ccc;        box-shadow: none;        page-break-inside: avoid;    }
    
    .educational-content h2,
    .educational-content h3,
    .educational-content h4 {
        page-break-after: avoid;
    }
    
    .educational-content a {
        color: #000;
        text-decoration: none;
    }
    
    .educational-content a:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    .collapsible-content {
        display: block !important;
    }
    
    .show-more-btn {
        display: none;
    }
}

/* Accessibility enhancements */
.educational-content :focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

.educational-content .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .educational-content {
        background-color: white;
        color: black;
    }
    
        .tool-purpose,    .how-to-use,    .understanding-results,    .use-cases,    .technical-details,    .integration-examples,    .best-practices,    .resources {        background-color: white;        border: 2px solid black;    }
    
    .educational-content a {
        color: blue;
        text-decoration: underline;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .educational-content * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}