/* White Fortress Academy - shared styles for course and area pages (moved out of per-page inline CSS) */
.course-hero h1 { font-size: 2.8rem; color: white; margin-bottom: 16px; }
.course-hero p { max-width: 720px; margin: 0 auto 28px; font-size: 1.1rem; opacity: 0.92; }
.badge-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.hero-badge { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 7px 18px; border-radius: 25px; font-size: 0.85rem; font-weight: 600; backdrop-filter: blur(4px); }
.hero-badge.red { background: var(--accent-red); border-color: var(--accent-red); }
.info-bar { background: var(--primary-blue); padding: 0; }
.info-bar-inner { max-width: 1000px; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.info-bar-item { padding: 22px 16px; border-right: 1px solid rgba(255,255,255,0.12); }
.info-bar-item:last-child { border-right: none; }
.info-bar-item strong { display: block; color: white; font-size: 1rem; margin-bottom: 4px; }
.info-bar-item span { color: rgba(255,255,255,0.65); font-size: 0.8rem; }
.module-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: var(--transition); }
.module-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.module-header { background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-light)); padding: 16px 20px; display: flex; align-items: center; gap: 12px; }
.module-num { background: rgba(255,255,255,0.2); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
.module-header h3 { color: white; font-size: 0.97rem; }
.module-header span { margin-left: auto; color: rgba(255,255,255,0.7); font-size: 0.75rem; white-space: nowrap; }
.module-body { padding: 18px 20px; }
.module-body ul { list-style: none; padding: 0; }
.module-body li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 1rem; font-weight: 600; color: var(--muted-text); display: flex; align-items: center; gap: 8px; text-align: left; }
.module-body li::before { content: '✦'; color: var(--accent-red); font-size: 0.65rem; flex-shrink: 0; }
.module-body li:last-child { border-bottom: none; }
.tools-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; justify-content: center; }
.tool-tag { background: white; border: 1.5px solid var(--border); color: var(--dark-text); padding: 8px 18px; border-radius: 25px; font-size: 0.88rem; font-weight: 600; transition: var(--transition); }
.tool-tag:hover { background: var(--primary-blue); color: white; border-color: var(--primary-blue); }
.career-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 36px; }
.career-card { background: white; border-radius: var(--radius); padding: 18px 20px; text-align: left; display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center; box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: var(--transition); }
.career-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--accent-red); }
.career-icon { width: 56px; height: 56px; margin: 0; grid-row: 1 / span 2; align-self: start; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; box-shadow: 0 6px 14px rgba(0,36,77,.2); }
.career-icon svg { stroke: #fff; stroke-width: 1.8; vertical-align: 0 !important; }
.wf-c-blue{background:linear-gradient(135deg,#0d47a1,#42a5f5)}.wf-c-red{background:linear-gradient(135deg,#c62828,#ff7043)}
.wf-c-teal{background:linear-gradient(135deg,#00796b,#26c6da)}.wf-c-amber{background:linear-gradient(135deg,#ef6c00,#ffb300)}
.wf-c-purple{background:linear-gradient(135deg,#5e35b1,#ab47bc)}.wf-c-green{background:linear-gradient(135deg,#2e7d32,#66bb6a)}
.wf-c-indigo{background:linear-gradient(135deg,#283593,#7986cb)}.wf-c-pink{background:linear-gradient(135deg,#ad1457,#f06292)}
.flagship-tag svg{color:#ffb300;fill:#ffb300}
.career-card h3 { grid-column: 2; font-size: 1.05rem !important; font-weight: 600; margin: 0 0 3px !important; color: var(--dark-text, #0b1b33); }
.career-card p { grid-column: 2; line-height: 1.4; color: var(--muted-text); font-size: 0.82rem; }
.has-dropdown { position: relative; }
.has-dropdown > a { display: flex !important; align-items: center; gap: 5px; cursor: pointer; }
.nav-arrow { font-size: 0.55rem; opacity: 0.55; transition: transform 0.25s; display: inline-block; margin-left: 2px; }
.has-dropdown.open > a .nav-arrow { transform: rotate(180deg); }
.labs-badge { background: var(--accent-red); color: white; font-size: 0.58rem; font-weight: 700; padding: 1px 6px; border-radius: 20px; }
.dropdown { display: none; position: absolute; top: calc(100% + 10px); left: 0; background: white; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 200px; padding: 8px 0; z-index: 9999; list-style: none; }
.has-dropdown.open > .dropdown { display: block; }
.dropdown li { position: relative; list-style: none; }
.dropdown li a { display: flex !important; align-items: center; gap: 8px; padding: 10px 18px; font-size: 0.88rem; font-weight: 600; color: var(--primary-blue) !important; white-space: nowrap; border-radius: 0; }
.dropdown li a:hover { background: #f0f4ff; color: var(--accent-red) !important; }
.dropdown li a::after { display: none !important; }
.dropdown-divider { height: 1px; background: var(--border); margin: 5px 14px; }
.sub-arrow { font-size: 0.5rem; opacity: 0.4; margin-left: auto; transition: transform 0.2s; }
.has-sub { position: relative; }
.submenu { display: none; position: absolute; top: 0; right: 100%; background: white; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 200px; padding: 8px 0; z-index: 10000; list-style: none; }
.has-sub.open > .submenu { display: block; }
.submenu li a { padding: 9px 18px; font-size: 0.85rem; }
.lab-num { background: var(--primary-blue); color: white; font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 8px; }
.coming-soon-tag { font-size: 0.58rem; color: #999; background: #f0f0f0; padding: 2px 6px; border-radius: 8px; margin-left: auto; }

/* ---- FAQ accordion + area pages (added) ---- */
.faq-list{display:grid;gap:12px;margin-top:24px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 52px 16px 20px;font-weight:600;color:var(--primary-blue);position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.4rem;line-height:1;color:var(--accent-red)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:focus-visible{outline:3px solid #4d9bff;outline-offset:2px;border-radius:var(--radius)}
.faq-item p{padding:0 20px 18px;margin:0;color:var(--muted-text);line-height:1.7}
a.career-card{display:block;text-decoration:none}
.area-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.area-links a{padding:8px 16px;border:1px solid var(--border);border-radius:20px;text-decoration:none;color:var(--primary-blue);font-weight:600;font-size:.9rem;background:#fff}
.area-links a:hover{border-color:var(--accent-red);color:var(--accent-red)}
.nap p{margin:0 0 8px}

.career-card:not(:has(p)) .career-icon{grid-row:auto;align-self:center}
.career-card:not(:has(p)) h3{margin:0 !important}