/* My Account Online Programs tab */
.sop-account-wrap { margin-top: 8px; }
.sop-programs-table { width: 100%; border-collapse: collapse; }
.sop-programs-table th,
.sop-programs-table td { padding: 14px 16px; border-bottom: 1px solid #e0e0e0; vertical-align: middle; }
.sop-programs-table thead th { background: #0084c9; color: #fff; font-weight: 600; }
.sop-view-btn { background: #0084c9 !important; color: #fff !important; border: none !important; padding: 8px 16px !important; border-radius: 4px !important; font-size: 14px !important; }
.sop-view-btn:hover { background: #005f8a !important; }
.sop-active { color: #2e7d32; font-weight: 500; }
.sop-expired { color: #c62828; }
.sop-card { display: block; text-decoration: none; color: inherit; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; margin-bottom: 20px; transition: box-shadow .2s; }
.sop-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.sop-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.sop-no-img { width: 100%; height: 200px; background: #f0f0f0; }
.sop-card h2 { font-size: 1rem; font-weight: 600; padding: 12px 14px; margin: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   FIX #5 — Hyperlinks
   Themes often reset anchor colour to inherit or #333.  Explicitly set link
   colour inside all program content areas so users can see clickable links.
   ───────────────────────────────────────────────────────────────────────── */
.online-program .sop-post-body a,
.online-program .details a,
.online-program .accordion-paragraphs-details a,
.online-program .sop-keypoints a {
    color: #0084c9 !important;
    text-decoration: underline !important;
}
.online-program .sop-post-body a:hover,
.online-program .details a:hover,
.online-program .accordion-paragraphs-details a:hover { color: #005f94 !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   FIX #11 — Recipe / Key Ingredients layout
   The [accordion-item-content class="seventh"] shortcode adds .recipe-layout
   to the panel-body. It must be a full-width block so the .sop-keypoints
   children stack vertically and fill the width. The old grid rule caused
   the whole section to collapse into narrow ~20% width cells.
   ───────────────────────────────────────────────────────────────────────── */
.recipe-layout {
    display: block !important;
    width: 100% !important;
    padding: 0;
}
.recipe-layout ul { list-style: disc; padding-left: 18px; margin: 0; }
.recipe-layout li { font-size: 15px; line-height: 1.75; margin-bottom: 5px; color: #333; }
.recipe-layout .sop-keypoints { margin-bottom: 16px; }
.recipe-layout .accordion-paragraphs-details { padding: 16px 20px; font-size: 15px; line-height: 1.75; }
.recipe-layout .video-placeholder { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 16px 0; }
.recipe-layout .video-placeholder iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ─────────────────────────────────────────────────────────────────────────────
   FIX #14 / #16 — Invisible text
   Content editors may paste text from dark-background sources that carries
   inline color:#ffffff.  Force readable colour on all paragraph/list text
   inside program panels so the bug cannot recur regardless of editor input.
   ───────────────────────────────────────────────────────────────────────── */
.online-program .details p,
.online-program .details li,
.online-program .details span,
.online-program .accordion-paragraphs-details p,
.online-program .accordion-paragraphs-details li,
.online-program .accordion-paragraphs-details span {
    color: #333 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   KEYPOINTS — dark navy panel, white text (standalone + inside accordion)
   ───────────────────────────────────────────────────────────────────────── */
.sop-keypoints { background:#15396b; padding:20px; }
.sop-keypoints .keypoint-title,
.sop-keypoints h4.keypoint-title { color:#fed970 !important; font-weight:700; margin-bottom:10px; font-size:15px; }
.sop-keypoints .keypoints-list { list-style:disc; padding-left:18px; margin:0 0 12px; }
.sop-keypoints .keypoints-list li { color:#fff !important; font-size:13px; margin-bottom:6px; line-height:1.5; }
.sop-keypoints .keypoints-list a { color:#fed970 !important; text-decoration:underline; }
.sop-keypoints .keypoints-list li,
.sop-keypoints p,
.sop-keypoints span { color:#fff !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   RECIPE LAYOUT — reset to full-width block (was grid, causing 20% width)
   ───────────────────────────────────────────────────────────────────────── */
.recipe-layout { display:block !important; width:100%; padding:0; }
.recipe-layout .sop-keypoints { margin-bottom:16px; }
.recipe-layout .accordion-paragraphs-details { padding:16px 20px; font-size:15px; line-height:1.75; }
.recipe-layout .video-placeholder { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; margin:16px 0; }
.recipe-layout .video-placeholder iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

/* ─────────────────────────────────────────────────────────────────────────────
   SAMPLE DAILY MENU — [accordion-sample-menu] / [accordion-menu-details]
   ───────────────────────────────────────────────────────────────────────── */
.sop-sample-menu { border:1px solid #e0e0e0; border-radius:6px; overflow:hidden; margin:16px 0; }
.sop-sample-menu-heading { background:#0084c9; color:#fff; font-size:15px; font-weight:700; text-transform:uppercase; padding:12px 20px; margin:0; letter-spacing:.04em; }
.sop-menu-slots { display:flex; flex-direction:column; }
.sop-menu-slot { display:flex; align-items:flex-start; border-bottom:1px solid #e8e8e8; }
.sop-menu-slot:last-child { border-bottom:none; }
.sop-menu-slot-title { flex:0 0 210px; min-width:210px; background:#fed96f; color:#1a1a1a; font-weight:700; font-size:13px; text-transform:uppercase; padding:14px 16px; line-height:1.4; letter-spacing:.02em; }
.sop-menu-slot-details { flex:1; padding:12px 18px; font-size:14px; line-height:1.65; color:#333; background:#fff; }
.sop-menu-or { display:inline-block; background:#0084c9; color:#fff; font-size:11px; font-weight:700; padding:1px 8px; border-radius:3px; margin:4px 6px; vertical-align:middle; letter-spacing:.05em; }
@media (max-width:600px) {
    .sop-menu-slot { flex-direction:column; }
    .sop-menu-slot-title { flex:none; width:100%; min-width:0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   2-COLUMN LAYOUT — [2-column] / [2-column-content] shortcodes
   ───────────────────────────────────────────────────────────────────────── */
.sop-2col-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
    padding: 0 20px;
}
.sop-2col { border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; background: #fff; }
.sop-2col-title { background: #c0392b; color: #fff; margin: 0; padding: 12px 18px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sop-2col-body { padding: 16px 20px; font-size: 14px; line-height: 1.7; color: #333; }
.sop-2col-body p { margin: 0 0 12px; }
.sop-2col-body p:last-child { margin-bottom: 0; }
.sop-2col-body strong { color: #1a1a1a; }
.sop-2col-body a { color: #0084c9; text-decoration: underline; }
.sop-2col-body a:hover { color: #005f94; }
@media (max-width:600px) {
    .sop-2col-wrap { grid-template-columns: 1fr; padding: 0 10px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIX F — Recipe layout reset (was display:grid causing 20% width bug)
   FIX E — Keypoints text stays white regardless of selector context
   ───────────────────────────────────────────────────────────────────────── */
.recipe-layout { display: block !important; width: 100%; padding: 0; }
.online-program .sop-keypoints p,
.online-program .sop-keypoints li,
.online-program .sop-keypoints span,
.online-program .sop-keypoints .keypoints-list li { color: #fff !important; }
.online-program .sop-keypoints .keypoint-title,
.online-program .sop-keypoints h4 { color: #fed970 !important; }