/* =====================================================
   OGA ARTICLE STYLES - Shared Stylesheet
   Upload to: Supabase Storage > public-assets > article.css
   ===================================================== */

:root {
    --background-color: #6d6c6e;
    --white: #fff;
    --box-shadow-color: hsla(30, 100%, 50%, 1);
    --box-shadow-color-hover: #e66a00;
    --cta-background: transparent;
    --cta-hover-background: #0056b3;
    --cta-border-color: ghostwhite;
    --success-green: #7CFC00;
    --dark-bg: #333;
}

/* === BASE STYLES === */
body {
    color: var(--white);
    margin: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--background-color);
}

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1002%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(45%2c 41%2c 41%2c 1)'%3e%3c/rect%3e%3cg transform='translate(0%2c 0)' stroke-linecap='round' stroke='url(%26quot%3b%23SvgjsRadialGradient1003%26quot%3b)'%3e%3cpath d='M150 255.09 L150 304.9' stroke-width='15'%3e%3c/path%3e%3cpath d='M170 131.96 L170 428.04' stroke-width='15'%3e%3c/path%3e%3cpath d='M190 114.42 L190 445.58' stroke-width='15'%3e%3c/path%3e%3cpath d='M210 114.44 L210 445.56' stroke-width='15'%3e%3c/path%3e%3cpath d='M230 213.51 L230 346.49' stroke-width='15'%3e%3c/path%3e%3cpath d='M250 226.82 L250 333.18' stroke-width='15'%3e%3c/path%3e%3cpath d='M270 242.19 L270 317.81' stroke-width='15'%3e%3c/path%3e%3cpath d='M290 132.03 L290 427.97' stroke-width='15'%3e%3c/path%3e%3cpath d='M310 75.97 L310 484.03' stroke-width='15'%3e%3c/path%3e%3cpath d='M330 140.17 L330 419.83' stroke-width='15'%3e%3c/path%3e%3cpath d='M350 79.03 L350 480.97' stroke-width='15'%3e%3c/path%3e%3cpath d='M370 238.71 L370 321.29' stroke-width='15'%3e%3c/path%3e%3cpath d='M390 63.29 L390 496.71' stroke-width='15'%3e%3c/path%3e%3cpath d='M410 124.6 L410 435.4' stroke-width='15'%3e%3c/path%3e%3cpath d='M430 104.31 L430 455.69' stroke-width='15'%3e%3c/path%3e%3cpath d='M450 197.12 L450 362.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M470 240.84 L470 319.16' stroke-width='15'%3e%3c/path%3e%3cpath d='M490 70.62 L490 489.38' stroke-width='15'%3e%3c/path%3e%3cpath d='M510 197.34 L510 362.66' stroke-width='15'%3e%3c/path%3e%3cpath d='M530 185.75 L530 374.25' stroke-width='15'%3e%3c/path%3e%3cpath d='M550 233.06 L550 326.94' stroke-width='15'%3e%3c/path%3e%3cpath d='M570 97.81 L570 462.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M590 95.45 L590 464.55' stroke-width='15'%3e%3c/path%3e%3cpath d='M610 96.88 L610 463.12' stroke-width='15'%3e%3c/path%3e%3cpath d='M630 177.42 L630 382.58' stroke-width='15'%3e%3c/path%3e%3cpath d='M650 105.92 L650 454.08' stroke-width='15'%3e%3c/path%3e%3cpath d='M670 186.93 L670 373.07' stroke-width='15'%3e%3c/path%3e%3cpath d='M690 256.46 L690 303.54' stroke-width='15'%3e%3c/path%3e%3cpath d='M710 93.61 L710 466.39' stroke-width='15'%3e%3c/path%3e%3cpath d='M730 110.04 L730 449.96' stroke-width='15'%3e%3c/path%3e%3cpath d='M750 196.95 L750 363.05' stroke-width='15'%3e%3c/path%3e%3cpath d='M770 178.28 L770 381.72' stroke-width='15'%3e%3c/path%3e%3cpath d='M790 218.09 L790 341.92' stroke-width='15'%3e%3c/path%3e%3cpath d='M810 74.78 L810 485.22' stroke-width='15'%3e%3c/path%3e%3cpath d='M830 83.28 L830 476.73' stroke-width='15'%3e%3c/path%3e%3cpath d='M850 183.53 L850 376.48' stroke-width='15'%3e%3c/path%3e%3cpath d='M870 249.84 L870 310.17' stroke-width='15'%3e%3c/path%3e%3cpath d='M890 123.81 L890 436.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M910 183.99 L910 376.01' stroke-width='15'%3e%3c/path%3e%3cpath d='M930 66.54 L930 493.46' stroke-width='15'%3e%3c/path%3e%3cpath d='M950 236.62 L950 323.38' stroke-width='15'%3e%3c/path%3e%3cpath d='M970 109.81 L970 450.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M990 133.38 L990 426.63' stroke-width='15'%3e%3c/path%3e%3cpath d='M1010 208.34 L1010 351.65' stroke-width='15'%3e%3c/path%3e%3cpath d='M1030 218.09 L1030 341.91' stroke-width='15'%3e%3c/path%3e%3cpath d='M1050 248.28 L1050 311.71' stroke-width='15'%3e%3c/path%3e%3cpath d='M1070 191.13 L1070 368.87' stroke-width='15'%3e%3c/path%3e%3cpath d='M1090 141.13 L1090 418.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M1110 249.12 L1110 310.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M1130 84.91 L1130 475.09' stroke-width='15'%3e%3c/path%3e%3cpath d='M1150 211.07 L1150 348.93' stroke-width='15'%3e%3c/path%3e%3cpath d='M1170 246.77 L1170 313.23' stroke-width='15'%3e%3c/path%3e%3cpath d='M1190 158.69 L1190 401.31' stroke-width='15'%3e%3c/path%3e%3cpath d='M1210 218.26 L1210 341.74' stroke-width='15'%3e%3c/path%3e%3cpath d='M1230 113.88 L1230 446.12' stroke-width='15'%3e%3c/path%3e%3cpath d='M1250 187.94 L1250 372.06' stroke-width='15'%3e%3c/path%3e%3cpath d='M1270 185.73 L1270 374.27' stroke-width='15'%3e%3c/path%3e%3cpath d='M1290 180.03 L1290 379.97' stroke-width='15'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1002'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='720' cy='280' r='625.75' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1003'%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='0.25'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 124%2c 0%2c 1)' offset='1'%3e%3c/stop%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e");
    background-repeat: repeat-y;
    background-size: contain;
    background-position: center;
}

.main-content {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    color: ghostwhite;
    padding: 20px;
    border-radius: 10px;
    margin: 20px auto;
    box-sizing: border-box;
    max-width: 900px;
}

/* === TYPOGRAPHY === */
h1, h2, h3, p, ul, ol { margin-bottom: 20px; padding: 10px; }
h1 { font-size: 2.5rem; text-align: center; }
h2 {
    font-size: 2rem !important;
    padding-top: 40px !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    border-top: 1px solid rgba(255, 124, 0, 0.3) !important;
}
h3 { font-size: 1.5rem; padding-top: 10px; }
h4 { color: ghostwhite; }
p { line-height: 1.6; }
ul, ol { padding-left: 40px; }
img { max-width: 100%; border-radius: 10px; margin: 20px 0; display: block; margin-left: auto; margin-right: auto; }

/* === ARTICLE BODY === */
.article-body { text-align: left; }
.article-body img { max-width: 700px; width: 100%; height: auto; }
.article-body a { color: var(--box-shadow-color); text-decoration: none; }
.article-body a:hover { text-decoration: underline; color: var(--box-shadow-color-hover); }
.article-body p, .article-body ul, .article-body ol { margin-left: 30px; margin-right: 30px; }

/* === HEADER / TITLE === */
.main-title { text-align: center; }
.main-title .byline { font-size: 1rem; font-style: italic; color: #ccc; margin-top: 10px; margin-bottom: 25px; }
.main-title .description { font-size: 1.2rem; font-style: italic; color: #ddd; margin-top: 10px; margin-bottom: 20px; }

/* === SOCIAL SHARE === */
.social-share { display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; }
.social-share a { color: var(--white); transition: color 0.3s ease, transform 0.2s ease; }
.social-share a:hover { transform: scale(1.1); color: var(--box-shadow-color); }
.social-share svg { width: 28px; height: 28px; fill: currentColor; }

/* === BREADCRUMB === */
#breadcrumb-container { text-align: center; margin-bottom: 30px; font-size: 0.9rem; color: #ccc; font-style: italic; }
#breadcrumb-container a { color: var(--box-shadow-color) !important; font-weight: bold; text-decoration: none; }
#breadcrumb-container a:hover { text-decoration: underline; }

/* === TABLE OF CONTENTS === */
.toc-container { background: rgba(0,0,0,0.2); border: 1px solid var(--box-shadow-color); border-radius: 8px; padding: 20px; margin: 30px; }
.toc-container h3 { margin-top: 0; color: var(--box-shadow-color); }
.toc-container ol { padding-left: 20px; margin-bottom: 0; }
.toc-container li { margin-bottom: 10px; }
.toc-container a { color: ghostwhite; text-decoration: none; }
.toc-container a:hover { text-decoration: underline; color: var(--box-shadow-color); }

/* === CTA BLOCKS === */
.cta-block {
    background-color: rgba(0,0,0,0.3);
    border: 2px solid var(--box-shadow-color);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 40px auto;
    max-width: 800px;
}
.cta-block h3 { margin-top: 0; font-size: 1.8rem; color: var(--box-shadow-color); }
.cta-block p { font-size: 1.1rem; color: ghostwhite; }
.cta-block .form-message { margin-top: 15px; font-weight: bold; color: var(--success-green); min-height: 1.2em; }

.cta-form { display: block; }
.cta-form input {
    width: calc(100% - 24px);
    max-width: 400px;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: var(--dark-bg);
    color: white;
    font-size: 1rem;
}
.cta-form button {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--box-shadow-color);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.cta-form button:hover { background-color: var(--box-shadow-color-hover); }

.cta-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: var(--cta-background);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    border: 2px solid var(--cta-border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.cta-button:hover { background-color: var(--cta-hover-background); border-color: var(--cta-hover-background); }

.cta-block-lesson { border-color: var(--box-shadow-color); }
.cta-block-lesson h3 { color: var(--box-shadow-color); }
.cta-block-lesson a.cta-button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: var(--box-shadow-color);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    border: 2px solid var(--box-shadow-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.cta-block-lesson a.cta-button:hover { background-color: var(--box-shadow-color-hover); border-color: var(--box-shadow-color-hover); }

/* === FAQ / ACCORDION === */
.faq-container { margin: 30px; }
.faq-item { border: 1px solid rgba(255, 124, 0, 0.3); margin-bottom: 10px; border-radius: 8px; overflow: hidden; }
.faq-question {
    width: 100%;
    background: rgba(255, 124, 0, 0.1);
    border: none;
    padding: 20px;
    text-align: left;
    cursor: pointer;
    font-size: 1.1rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}
.faq-question:hover { background: rgba(255, 124, 0, 0.2); }
.faq-icon { font-size: 1.2rem; font-weight: bold; color: var(--box-shadow-color); transition: transform 0.3s ease; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: rgba(0, 0, 0, 0.2); }
.faq-answer.active { max-height: 300px; padding: 20px; transition: max-height 0.4s ease-in; }
.faq-answer p { margin: 0; line-height: 1.6; }

/* Problem-Solution Accordion (alternate style) */
.problem-solution-accordion { margin: 40px 0; }
.accordion-item { border: 1px solid rgba(255, 124, 0, 0.3); margin-bottom: 10px; border-radius: 8px; overflow: hidden; transition: background-color 0.3s ease; }
.accordion-item:hover { background-color: rgba(255, 124, 0, 0.05); }
.accordion-question { width: 100%; background: transparent; border: none; padding: 20px; text-align: left; cursor: pointer; font-size: 1.2rem; color: var(--white); font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.accordion-icon { font-size: 1.5rem; font-weight: bold; color: var(--box-shadow-color); transition: transform 0.3s ease; }
.accordion-question.active .accordion-icon { transform: rotate(45deg); }
.accordion-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; background: rgba(0, 0, 0, 0.2); padding: 0 20px; }
.accordion-answer.active { max-height: 300px; padding: 20px; transition: max-height 0.5s ease-in, padding 0.5s ease-in; }
.accordion-answer p { margin: 0 0 15px 0; line-height: 1.6; }
.accordion-answer p:last-child { margin-bottom: 0; }

/* === RETURN TO HUB === */
.return-link-block {
    text-align: center;
    padding: 30px;
    margin: 40px auto;
    border: 1px solid var(--box-shadow-color);
    border-radius: 8px;
    background: rgba(0,0,0,0.2);
    max-width: 800px;
}
.return-link-block p { margin: 0 0 15px 0; font-size: 1.2rem; font-weight: bold; }
.return-link-block a {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--box-shadow-color);
    color: #000 !important;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.return-link-block a:hover { background-color: var(--box-shadow-color-hover); }

/* === HELPFUL WIDGET === */
.helpful-widget {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,124,0,0.3);
    border-radius: 8px;
    padding: 25px;
    margin: 40px auto;
    text-align: center;
    max-width: 800px;
}
.helpful-widget p { margin-top: 0; font-size: 1.2rem; font-weight: bold; }
.helpful-widget button {
    background: var(--dark-bg);
    color: white;
    border: 1px solid var(--box-shadow-color);
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1rem;
    margin: 0 10px;
    transition: all 0.3s ease;
}
.helpful-widget button:hover { background: var(--box-shadow-color); }
.helpful-widget button.selected { background-color: var(--box-shadow-color); border-color: var(--box-shadow-color-hover); transform: scale(1.05); }
.helpful-widget button:disabled { background: #555; cursor: not-allowed; opacity: 0.7; }

/* === RELATED ARTICLES === */
.related-articles { margin: 40px 0; }
.related-articles h3 { text-align: center; color: var(--box-shadow-color); font-size: 1.8rem; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.related-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,124,0,0.2);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.related-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(255,124,0,0.3); }
.related-card img { width: 100%; height: 150px; object-fit: cover; margin: 0; border-radius: 0; }
.related-card-content { padding: 15px; }
.related-card-content h4 { margin: 0 0 10px 0; font-size: 1.1rem; color: var(--white); }
.related-card-content p { margin: 0; font-size: 0.9rem; color: #ccc; }

/* === COMMENTS SECTION === */
.comment-divider { border: none; border-top: 1px solid #444; margin: 30px 0; }
.comment-section, .comments-section {
    background: rgba(0,0,0,0.2);
    padding: 30px;
    border-radius: 8px;
    margin-top: 40px;
    border: 1px solid rgba(255,124,0,0.3);
}
.comment-section h3, .comments-section h3, .comments-header h3 {
    margin-top: 0;
    color: var(--box-shadow-color);
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 1.5px;
}
.comments-header h4 { color: ghostwhite; font-size: 1rem; font-weight: normal; margin: 5px 0 25px 0; letter-spacing: 1.5px; }
.comment-section textarea, .comments-section textarea {
    width: 100%;
    height: 120px;
    background: var(--dark-bg);
    color: white;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
    margin-top: 15px;
    resize: vertical;
}
.comments-section textarea::placeholder { color: #888; }
.comment-section button, .comments-section button {
    margin-top: 15px;
    padding: 10px 25px;
    background-color: var(--box-shadow-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
}
.comment-section button:hover, .comments-section button:hover { background-color: var(--box-shadow-color-hover); }
.comment-submission-box h4 { color: ghostwhite; margin-top: 0; font-size: 1.3rem; }

/* Rating Stars */
.rating-input { display: flex; align-items: center; gap: 15px; margin-top: 15px; }
.rating-input .rating-label { font-weight: bold; color: #fff; }
.stars-input { font-size: 2rem; cursor: pointer; color: #555; }
.stars-input .star:hover { transform: scale(1.2); transition: transform 0.2s; color: var(--box-shadow-color-hover); }
.stars-input .star.filled { color: var(--box-shadow-color); }
.stars-container { display: flex; font-size: 1rem; color: #666; }
.stars-container .star.filled { color: var(--box-shadow-color); }

/* Comment Cards */
.comments-list .comment-card { border-top: 1px solid #444; padding: 20px 0; }
.comments-list .comment-card:first-child { padding-top: 0; border-top: none; }
.comments-list .comment-card:last-child { padding-bottom: 0; }
.comment-card .comment-meta { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; font-size: 0.9rem; color: #aaa; }
.comment-card .comment-content { color: #ddd; line-height: 1.6; font-weight: normal; margin: 0; }

/* === MODALS === */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    backdrop-filter: blur(5px);
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--dark-bg);
    padding: 40px;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    border: 2px solid var(--box-shadow-color);
}
.modal-content h3 { color: var(--box-shadow-color); margin-bottom: 15px; font-size: 1.8rem; }
.modal-content p { color: var(--white); margin-bottom: 25px; line-height: 1.6; }
.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #a0aec0;
}

/* === ARTICLE STATS === */
.article-stats-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 8px;
    margin: 20px auto;
    max-width: 400px;
    transition: opacity 0.3s ease-in-out;
}

/* === VIDEO CONTAINER === */
.video-container {
    position: relative;
    width: 100%;
    margin: 2rem 0;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 12px;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* === AAA STEP BOX (Special formatting) === */
.aaa-step-box {
    border-left: 4px solid var(--box-shadow-color);
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 25px;
    margin: 40px 0;
}
.aaa-step-box h2 {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    font-size: 1.8rem !important;
    color: var(--box-shadow-color);
}
.aaa-step-box .step-tagline {
    font-size: 1.2rem;
    font-style: italic;
    color: #ccc;
    margin-top: -15px;
    margin-bottom: 20px;
}

/* === PATTERN INTERRUPT QUESTION === */
.pattern-interrupt-question {
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    font-style: italic;
    margin: 40px auto;
    max-width: 80%;
    color: #fff;
    padding: 20px;
    border: 1px solid rgba(255,124,0,0.3);
    border-radius: 8px;
    background-color: rgba(0,0,0,0.1);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .main-content { margin: 10px; padding: 15px; }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem !important; }
    .article-body p, .article-body ul, .article-body ol { margin-left: 15px; margin-right: 15px; }
    .toc-container, .faq-container { margin: 15px; }
    .cta-block { margin: 20px 10px; padding: 20px; }
    .related-grid { grid-template-columns: 1fr; }
}