/* Canadian Teacher Forum - Custom Styling Override
   Colors: Dark red accent (#8B1A1A), white/light-blue background
   Matches thecanadianteacher.com main site */

/* Force light mode as default */
body.ff-body {
    --ff-primary: #8B1A1A !important;
    --ff-primary-hover: #701515 !important;
    --ff-primary-light: rgba(139, 26, 26, 0.12) !important;
    --ff-primary-ghost: rgba(139, 26, 26, 0.06) !important;
    --ff-bg: #f0f6fb !important;
    --ff-bg-raised: #ffffff !important;
    --ff-bg-overlay: #ffffff !important;
    --ff-bg-hover: #e8f0f8 !important;
    --ff-bg-active: #dce8f2 !important;
    --ff-border: #d4dfe8 !important;
    --ff-border-light: #e8f0f8 !important;
    --ff-text: #1a1a2e !important;
    --ff-text-secondary: #4a4a5a !important;
    --ff-text-muted: #7a7a8a !important;
    --ff-text-inverse: #ffffff !important;
    --ff-shadow-sm: 0 1px 2px rgba(0,0,0,0.05) !important;
    --ff-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    --ff-shadow-lg: 0 8px 30px rgba(0,0,0,0.12) !important;
    --ff-shadow-xl: 0 20px 60px rgba(0,0,0,0.15) !important;
    --ff-upvote: #8B1A1A !important;
}

/* Header bar */
.ff-header {
    background: #ffffff !important;
    border-bottom: 1px solid #d4dfe8 !important;
}

.ff-header__logo-text,
.ff-header a {
    color: #1a1a2e !important;
}

/* Sidebar */
.ff-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #d4dfe8 !important;
}

.ff-sidebar__link:hover,
.ff-sidebar__link--active {
    background: rgba(139, 26, 26, 0.08) !important;
    color: #8B1A1A !important;
}

/* Cards and posts */
.ff-card,
.ff-post-card {
    background: #ffffff !important;
    border: 1px solid #d4dfe8 !important;
}

.ff-card:hover,
.ff-post-card:hover {
    border-color: #8B1A1A !important;
}

/* Buttons */
.ff-btn--primary,
button[class*="primary"] {
    background: #8B1A1A !important;
    color: #ffffff !important;
}

.ff-btn--primary:hover,
button[class*="primary"]:hover {
    background: #701515 !important;
}

/* Links */
a:not(.ff-btn):not(.ff-sidebar__link):not(.ff-header a) {
    color: #8B1A1A;
}

/* Category/section badges */
.ff-badge--section,
.ff-section-badge {
    background: rgba(139, 26, 26, 0.1) !important;
    color: #8B1A1A !important;
}

/* Search */
.ff-search-input {
    background: #f0f6fb !important;
    border: 1px solid #d4dfe8 !important;
}

/* wpForo overrides */
#wpforo .wpforo-wrap {
    background: transparent !important;
}

#wpforo .wpf-head-bar {
    background: #8B1A1A !important;
    color: #ffffff !important;
}

#wpforo a {
    color: #8B1A1A !important;
}

#wpforo a:hover {
    color: #701515 !important;
}

#wpforo .wpf-button,
#wpforo .wpf-nbs-create-topic-button,
#wpforo input[type="submit"] {
    background: #8B1A1A !important;
    color: #ffffff !important;
    border: none !important;
}

#wpforo .wpf-button:hover,
#wpforo input[type="submit"]:hover {
    background: #701515 !important;
}

/* Footer area */
.ff-footer {
    background: #1a1a2e !important;
    color: #ffffff !important;
}

/* Comment image upload */
.ff-comment-upload {
    margin: 8px 0;
}
.ff-comment-upload__label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px dashed #d4dfe8;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #4a4a5a;
    transition: all 0.2s;
}
.ff-comment-upload__label:hover {
    border-color: #8B1A1A;
    color: #8B1A1A;
}
.ff-comment-upload__input {
    display: none !important;
}
.ff-comment-upload__preview img {
    max-width: 200px;
    max-height: 150px;
    margin-top: 8px;
    border-radius: 6px;
    border: 1px solid #d4dfe8;
}
.ff-comment-image {
    margin-top: 10px;
}
.ff-comment-image img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    border: 1px solid #d4dfe8;
}

/* ── SEO/visible headings (added 2026-04-30) ── */
.ff-home-header { padding: 24px 4px 8px; }
.ff-home-header__title { font-size: 26px; font-weight: 700; margin: 0 0 4px; color: var(--ff-text, #0f172a); }
.ff-home-header__tagline { font-size: 15px; color: var(--ff-text-muted, #64748b); margin: 0 0 8px; }
.ff-feed-heading { font-size: 18px; font-weight: 600; margin: 16px 4px 12px; color: var(--ff-text, #0f172a); }


/* ── Footer link contrast + bottom padding (added 2026-05-13) ── */
.ff-footer {
    padding-top: 28px !important;
    padding-bottom: 40px !important;
}
.ff-footer__inner {
    color: rgba(255, 255, 255, 0.85) !important;
    flex-wrap: wrap;
    gap: 12px 24px;
}
.ff-footer__links {
    flex-wrap: wrap;
}
.ff-footer__links a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
    transition: color 0.15s ease;
}
.ff-footer__links a:hover,
.ff-footer__links a:focus {
    color: #ffffff !important;
    text-decoration: underline;
}


/* ── Static page template (page.php) — added 2026-05-14 ── */
.ff-page {
    background: #ffffff;
    border: 1px solid var(--ff-border, #d4dfe8);
    border-radius: 12px;
    padding: 40px 48px;
    max-width: 820px;
    margin: 24px auto 48px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ff-page__header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--ff-border, #e8f0f8); }
.ff-page__title { font-size: 32px; font-weight: 700; line-height: 1.2; margin: 0; color: var(--ff-text, #1a1a2e); }
.ff-page__content { font-size: 16px; line-height: 1.65; color: var(--ff-text, #1a1a2e); }
.ff-page__content > * + * { margin-top: 16px; }
.ff-page__content h2 { font-size: 20px; font-weight: 600; margin-top: 28px !important; margin-bottom: 8px; color: var(--ff-text, #1a1a2e); }
.ff-page__content h3 { font-size: 17px; font-weight: 600; margin-top: 22px !important; margin-bottom: 6px; }
.ff-page__content p { margin-bottom: 0; }
.ff-page__content ul, .ff-page__content ol { margin-left: 1.4em; padding-left: 0; }
.ff-page__content li + li { margin-top: 6px; }
.ff-page__content a { color: #8B1A1A; text-decoration: underline; text-underline-offset: 2px; }
.ff-page__content a:hover { color: #701515; }

@media (max-width: 768px) {
    .ff-page { padding: 24px 20px; margin: 12px 8px 32px; }
    .ff-page__title { font-size: 26px; }
}


/* ── Knowledge Hub pages (taxonomy-ff_tag.php) — added 2026-05-14 ── */

.ff-hub__breadcrumb {
    margin: 16px 0 24px;
    font-size: 13px;
    color: var(--ff-text-secondary, #555560);
}
.ff-hub__breadcrumb a { color: var(--ff-text-secondary, #555560); text-decoration: none; }
.ff-hub__breadcrumb a:hover { color: #8B1A1A; text-decoration: underline; }
.ff-hub__breadcrumb-sep { margin: 0 8px; opacity: 0.5; }
.ff-hub__breadcrumb-current { color: var(--ff-text, #1a1a2e); font-weight: 500; }

.ff-hub {
    max-width: 920px;
    margin: 0 auto 64px;
}

.ff-hub__zone {
    background: #ffffff;
    border: 1px solid var(--ff-border, #d4dfe8);
    border-radius: 12px;
    padding: 36px 40px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.ff-hub__intro { border-left: 4px solid #8B1A1A; }
.ff-hub__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 16px;
    color: var(--ff-text, #1a1a2e);
}
.ff-hub__editorial {
    font-size: 17px;
    line-height: 1.65;
    color: var(--ff-text-secondary, #4a4a5a);
    margin-bottom: 20px;
}
.ff-hub__editorial p:last-child { margin-bottom: 0; }

.ff-hub__stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding-top: 16px;
    border-top: 1px solid var(--ff-border-light, #e8f0f8);
    font-size: 14px;
    color: var(--ff-text-secondary, #4a4a5a);
}
.ff-hub__stat strong { font-weight: 700; color: var(--ff-text, #1a1a2e); margin-right: 4px; }
.ff-hub__stat-sep { opacity: 0.5; }

.ff-hub__zone-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ff-text, #1a1a2e);
}
.ff-hub__zone-sub {
    font-size: 14px;
    color: var(--ff-text-muted, #7a7a8a);
    margin: 0 0 24px;
}

.ff-hub__thread-list { display: flex; flex-direction: column; gap: 0; }
.ff-hub__thread {
    padding: 20px 0;
    border-bottom: 1px solid var(--ff-border-light, #e8f0f8);
}
.ff-hub__thread:last-child { border-bottom: none; padding-bottom: 0; }
.ff-hub__thread:first-child { padding-top: 0; }
.ff-hub__thread-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px;
    line-height: 1.35;
}
.ff-hub__thread-title a { color: var(--ff-text, #1a1a2e); text-decoration: none; }
.ff-hub__thread-title a:hover { color: #8B1A1A; }
.ff-hub__thread-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ff-text-secondary, #555560);
    margin: 0 0 10px;
}
.ff-hub__thread-meta {
    display: flex;
    align-items: center;
    gap: 4px 8px;
    font-size: 13px;
    color: var(--ff-text-muted, #7a7a8a);
    margin-bottom: 8px;
}
.ff-hub__thread-meta-sep { opacity: 0.5; }
.ff-hub__thread-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ff-hub__chip {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(139, 26, 26, 0.08);
    color: #8B1A1A;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.15s ease;
}
.ff-hub__chip:hover { background: rgba(139, 26, 26, 0.18); color: #701515; }

.ff-hub__empty { font-size: 14px; color: var(--ff-text-muted, #7a7a8a); font-style: italic; }

.ff-hub__wisdom { margin-bottom: 32px; }
.ff-hub__wisdom:last-child { margin-bottom: 0; }

.ff-hub__qa-list { display: flex; flex-direction: column; gap: 12px; }
.ff-hub__qa {
    background: var(--ff-bg, #f0f6fb);
    border: 1px solid var(--ff-border-light, #e8f0f8);
    border-radius: 8px;
    padding: 16px 20px;
}
.ff-hub__qa[open] { background: #ffffff; border-color: var(--ff-border, #d4dfe8); }
.ff-hub__qa-q {
    font-weight: 600;
    color: var(--ff-text, #1a1a2e);
    cursor: pointer;
    list-style: none;
    padding-right: 24px;
    position: relative;
    font-size: 15px;
}
.ff-hub__qa-q::-webkit-details-marker { display: none; }
.ff-hub__qa-q::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 400;
    color: #8B1A1A;
}
.ff-hub__qa[open] .ff-hub__qa-q::after { content: '−'; }
.ff-hub__qa-a {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ff-border-light, #e8f0f8);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ff-text-secondary, #555560);
}

.ff-hub__related-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-hub__related-chip {
    display: inline-block;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid var(--ff-border, #d4dfe8);
    border-radius: 20px;
    color: var(--ff-text, #1a1a2e);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}
.ff-hub__related-chip:hover {
    background: #8B1A1A;
    color: #ffffff;
    border-color: #8B1A1A;
}

@media (max-width: 768px) {
    .ff-hub__zone { padding: 24px 20px; }
    .ff-hub__title { font-size: 28px; }
    .ff-hub__zone-title { font-size: 20px; }
}


/* ── Hub index page (archive-hubs.php) — added 2026-05-14 ── */
.ff-hub-index__header {
    max-width: 920px;
    margin: 12px auto 24px;
    padding: 0 4px;
}
.ff-hub-index__title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ff-text, #1a1a2e);
}
.ff-hub-index__sub {
    font-size: 15px;
    color: var(--ff-text-secondary, #4a4a5a);
    margin: 0;
    max-width: 720px;
    line-height: 1.55;
}
.ff-hub-index__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    max-width: 920px;
    margin: 0 auto 48px;
}
.ff-hub-card {
    display: block;
    background: #ffffff;
    border: 1px solid var(--ff-border, #d4dfe8);
    border-radius: 12px;
    padding: 20px 22px;
    color: var(--ff-text, #1a1a2e);
    text-decoration: none;
    transition: all 0.15s ease;
}
.ff-hub-card:hover {
    border-color: #8B1A1A;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.ff-hub-card__meta {
    font-size: 12px;
    color: var(--ff-text-muted, #7a7a8a);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.ff-hub-card__title {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--ff-text, #1a1a2e);
    line-height: 1.25;
}
.ff-hub-card__intro {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ff-text-secondary, #4a4a5a);
    margin: 0 0 14px;
}
.ff-hub-card__cta {
    font-size: 13px;
    font-weight: 600;
    color: #8B1A1A;
}

/* Hub chips on topic cards in the main feed */
.ff-card-topic__hubs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 12px;
}
.ff-card-topic__hub-chip {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(139, 26, 26, 0.08);
    color: #8B1A1A;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.15s ease;
}
.ff-card-topic__hub-chip:hover { background: rgba(139, 26, 26, 0.18); color: #701515; }


/* ── Right sidebar fix — 2026-06-03 ──
   The right sidebar was position:fixed + overflow-y:auto, which made it
   absorb wheel-scroll events when hovered, scrolling its own contents
   instead of the page. That hid the top of the author card (avatar, name,
   role) when users scrolled, making the widget look broken.
   Fix: make the sidebar a normal flex item with position:sticky so it
   flows with the page, no separate scroll container. */
.ff-sidebar-right {
    position: sticky !important;
    top: var(--ff-header-h, 56px) !important;
    right: auto !important;
    bottom: auto !important;
    align-self: flex-start !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}
.ff-main {
    margin-right: 0 !important;
}
@media (max-width: 1280px) {
    .ff-sidebar-right { display: none !important; }
}