/*
Theme Name:   FanHub
Theme URI:    https://apoel.club
Description:  Child theme of Hello Elementor for the club fan sites (apoel.club, omonia.club, anorthosis.club): club colours, name, logo and disclaimer are set per site in Appearance → Customize → Club identity. Pairs with the Fan News Aggregator plugin.
Author:       Club fan sites
Template:     hello-elementor
Version:      1.0.0
Text Domain:  fanhub
*/

/* ---------- Tokens (the club colours come from the Customizer as --fh-primary / --fh-accent / --fh-dark) ---------- */
:root {
	--fh-primary: #0047ab;
	--fh-accent: #ffd100;
	--fh-dark: #0b1f3a;
	--fh-on-accent: #0b1f3a;
	--fh-bg: #f3f5f9;
	--fh-surface: #ffffff;
	--fh-text: #172033;
	--fh-muted: #5d6779;
	--fh-line: #e2e6ee;
	--fh-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--fh-container: 1200px;
	--fh-gutter: 20px;
	--fh-radius: 10px;
	--fh-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--fh-bg);
	color: var(--fh-text);
	font-family: var(--fh-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--fh-primary); }
a:hover, a:focus { color: var(--fh-dark); }
h1, h2, h3, h4 { font-family: var(--fh-font); color: var(--fh-text); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; margin: 0 0 .6em; }
h1 { font-size: clamp(28px, 2.4vw + 16px, 42px); }
h2 { font-size: clamp(22px, 1.2vw + 16px, 30px); }
h3 { font-size: 19px; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--fh-accent); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.fh-skip:focus { position: fixed; top: 10px; left: 10px; z-index: 100; width: auto; height: auto; clip: auto; padding: 10px 14px; background: var(--fh-accent); color: var(--fh-on-accent); font-weight: 700; }

.fh-container { max-width: var(--fh-container); margin: 0 auto; padding: 0 var(--fh-gutter); }

/* ---------- Header ---------- */
.fh-header { background: var(--fh-dark); color: #fff; position: sticky; top: 0; z-index: 50; border-bottom: 4px solid var(--fh-accent); }
.fh-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.fh-brand { display: inline-flex; flex: none; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.fh-brand:hover, .fh-brand:focus { color: #fff; }
.fh-brand img, .fh-brand__logo { display: block; width: 48px; height: 48px; object-fit: contain; }
.fh-footer .fh-brand__logo { width: 64px; height: 64px; }
.fh-brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fh-accent); color: var(--fh-on-accent); font-weight: 900; font-size: 15px; letter-spacing: -.02em; }
.fh-brand__name { font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.fh-brand__name span { color: var(--fh-accent); }

.fh-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.fh-nav a { display: block; padding: 10px 8px; border-radius: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.fh-nav a:hover, .fh-nav a:focus { background: rgba(255, 255, 255, .1); color: #fff; }
.fh-nav .current-menu-item > a, .fh-nav .current_page_item > a { color: var(--fh-accent); }
.fh-nav { display: flex; align-items: center; gap: 12px; }
.fh-account { display: flex; align-items: center; gap: 6px; padding-left: 12px; margin-left: 4px; border-left: 1px solid rgba(255, 255, 255, .18); }
.fh-account__link { display: block; padding: 10px 10px; white-space: nowrap; border-radius: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; }
.fh-account__link:hover, .fh-account__link:focus { background: rgba(255, 255, 255, .1); color: #fff; }
.fh-account__btn { display: block; padding: 9px 14px; border-radius: 8px; background: var(--fh-accent); color: var(--fh-on-accent); text-decoration: none; font-weight: 800; font-size: 15px; }
.fh-account__btn:hover, .fh-account__btn:focus { background: #fff; color: var(--fh-dark); }
.fh-nav-toggle { display: none; background: none; border: 0; color: #fff; padding: 10px; cursor: pointer; }
.fh-nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: currentColor; transition: transform .2s ease, opacity .2s ease; }

/* Eight menu items plus the account links need about 1180px; below that, the menu button. */
@media (max-width: 1180px) {
	.fh-nav-toggle { display: block; }
	.fh-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--fh-dark); border-bottom: 4px solid var(--fh-accent); display: none; }
	.fh-nav ul { flex-direction: column; align-items: stretch; padding: 8px var(--fh-gutter) 8px; }
	.fh-nav a { padding: 12px 10px; font-size: 17px; }
	.fh-account { border-left: 0; margin: 0; padding: 8px var(--fh-gutter) 16px; border-top: 1px solid rgba(255, 255, 255, .14); gap: 10px; }
	.fh-account__btn { padding: 11px 16px; }
	body.fh-nav-open .fh-nav { display: block; }
	body.fh-nav-open .fh-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.fh-nav-open .fh-nav-toggle span:nth-child(2) { opacity: 0; }
	body.fh-nav-open .fh-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Main ---------- */
.fh-main { min-height: 60vh; }
.fh-page { padding: 40px 0 64px; }
.fh-page .entry-title { margin-bottom: 24px; }
.fh-card { background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); }
.fh-prose { max-width: 760px; }
.fh-prose p, .fh-prose li { line-height: 1.75; }

/* Elementor sections sit straight on the page background. */
.elementor-page .fh-page { padding: 0; }

/* Building blocks for Elementor pages (add the class in Advanced → CSS Classes); colours follow the club. */
.elementor .fh-hero { background: var(--fh-dark); color: #fff; }
.elementor .fh-hero .elementor-heading-title { color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
.elementor .fh-hero .elementor-heading-title span, .fh-hl { color: var(--fh-accent); }
.elementor .fh-hero .elementor-widget-text-editor { color: rgba(255, 255, 255, .86); font-size: 17px; max-width: 620px; }
.elementor .fh-section-title .elementor-heading-title, .fh-section-heading { font-size: 22px; display: flex; align-items: center; gap: 10px; }
.elementor .fh-section-title .elementor-heading-title::before, .fh-section-heading::before { content: ""; width: 6px; height: 22px; border-radius: 3px; background: var(--fh-accent); }
.fh-section-heading { margin: 0 0 16px; }
.elementor .fh-side-card { background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); box-shadow: var(--fh-shadow); }
.elementor .fh-side-card .elementor-heading-title { font-size: 17px; }
.elementor .fh-side-card .elementor-widget-text-editor { font-size: 14.5px; color: var(--fh-muted); }

/* Latest forum topics ([fanhub_latest_topics]). */
.fh-topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fh-topics a { display: block; font-weight: 700; color: var(--fh-text); text-decoration: none; line-height: 1.35; }
.fh-topics a:hover, .fh-topics a:focus { color: var(--fh-primary); }
.fh-topics span { display: block; margin-top: 2px; font-size: 13px; color: var(--fh-muted); }
.fh-topics__empty { color: var(--fh-muted); font-size: 14.5px; }

/* Honeypot fields (spam protection) stay out of sight. */
.fh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Posts and comments (Hello's templates) ---------- */
.single-post .site-main, .single-fan_poll .site-main, .post-type-archive-fan_poll .site-main, .archive .site-main, .blog .site-main { max-width: 820px; margin: 0 auto; padding: 40px var(--fh-gutter) 24px; }
.single .site-main .page-header .entry-title { margin-bottom: 12px; }
/* Hello pads main and titles by 10px; use the theme gutter so titles line up with the text. */
body #fh-content .site-main { padding-left: var(--fh-gutter); padding-right: var(--fh-gutter); }
.site-main .page-header .entry-title { padding-left: 0; padding-right: 0; }
.single .page-content > p:first-child { font-size: 17px; color: var(--fh-muted); }
.single .page-content .fna-feed { margin: 20px 0; }
.single .page-content .fan-poll { margin: 8px 0 24px; }
.comments-area { max-width: 820px; margin: 0 auto; padding: 8px var(--fh-gutter) 40px; }
.comments-area .title-comments, .comment-reply-title { font-size: 22px; }
.comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.comment-list .comment { margin: 0 0 14px; }
.comment-list .comment-body { background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 14px 16px; }
.comment-list .children { list-style: none; margin: 14px 0 0 24px; padding: 0; }
.comment-meta, .comment-metadata { font-size: 13px; color: var(--fh-muted); }
.comment-author .fn { font-weight: 800; font-style: normal; color: var(--fh-text); }
.comment-metadata a { color: var(--fh-muted); }
.comment-content p { margin: 8px 0 0; }
.reply a { font-size: 13.5px; font-weight: 700; }
.comment-awaiting-moderation { display: block; margin-top: 6px; font-size: 13px; color: var(--fh-muted); }
.comment-respond { background: var(--fh-surface); border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 20px; }
.comment-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--fh-line); border-radius: 8px; font: inherit; font-size: 16px; background: #fff; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--fh-primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fh-primary) 18%, transparent); }
.comment-form .comment-form-cookies-consent label { display: inline; font-weight: 400; }
.comment-form .submit, .bbp-submit-wrapper button, #bbpress-forums .button.submit { padding: 11px 20px; border: 0; border-radius: 8px; background: var(--fh-primary); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.comment-form .submit:hover, .comment-form .submit:focus, .bbp-submit-wrapper button:hover, #bbpress-forums .button.submit:hover { background: var(--fh-dark); }

/* ---------- Forum (bbPress) ---------- */
.bbpress .site-main, .bbpress #fh-content > .site-main { max-width: var(--fh-container); margin: 0 auto; padding: 40px var(--fh-gutter); }
.fh-forum .page-header .entry-title { margin-bottom: 18px; }
#bbpress-forums { font-size: 15px; }
#bbpress-forums #bbp-search-form { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 16px; }
#bbpress-forums #bbp-search-form #bbp_search { width: min(280px, 100%); padding: 9px 12px; border: 1px solid var(--fh-line); border-radius: 8px; font: inherit; font-size: 15px; background: #fff; }
#bbpress-forums #bbp-search-form #bbp_search_submit { padding: 9px 16px; border: 0; border-radius: 8px; background: var(--fh-primary); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
#bbpress-forums #bbp-search-form #bbp_search_submit:hover, #bbpress-forums #bbp-search-form #bbp_search_submit:focus { background: var(--fh-dark); }
#bbpress-forums div.bbp-breadcrumb, #bbpress-forums div.bbp-breadcrumb p { font-size: 14px; }
#bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-topics, #bbpress-forums ul.bbp-replies, #bbpress-forums ul.bbp-lead-topic, #bbpress-forums ul.bbp-search-results { border: 1px solid var(--fh-line); border-radius: var(--fh-radius); overflow: hidden; background: var(--fh-surface); font-size: 15px; }
#bbpress-forums li.bbp-header { background: var(--fh-dark); color: #fff; border: 0; padding: 10px 14px; font-weight: 700; }
#bbpress-forums li.bbp-header a { color: #fff; }
#bbpress-forums li.bbp-footer { background: var(--fh-bg); border-top: 1px solid var(--fh-line); }
#bbpress-forums li.bbp-body ul.forum, #bbpress-forums li.bbp-body ul.topic { padding: 14px; border-top: 1px solid var(--fh-line); }
#bbpress-forums .bbp-forum-title, #bbpress-forums .bbp-topic-permalink { font-weight: 800; font-size: 16px; color: var(--fh-text); }
#bbpress-forums .bbp-forum-title:hover, #bbpress-forums .bbp-topic-permalink:hover { color: var(--fh-primary); }
#bbpress-forums .bbp-forum-content, #bbpress-forums p.bbp-topic-meta { color: var(--fh-muted); font-size: 13.5px; }
#bbpress-forums div.odd, #bbpress-forums ul.odd { background: var(--fh-surface); }
#bbpress-forums div.even, #bbpress-forums ul.even { background: #fafbfd; }
#bbpress-forums .bbp-topic-content, #bbpress-forums .bbp-reply-content { font-size: 15.5px; line-height: 1.65; }
#bbpress-forums div.bbp-forum-header, #bbpress-forums div.bbp-reply-header, #bbpress-forums div.bbp-topic-header { background: var(--fh-bg); border-top: 1px solid var(--fh-line); }
#bbpress-forums fieldset.bbp-form { border: 1px solid var(--fh-line); border-radius: var(--fh-radius); padding: 16px 18px; background: var(--fh-surface); }
#bbpress-forums fieldset.bbp-form legend { font-weight: 800; padding: 0 6px; }
#bbpress-forums fieldset.bbp-form input[type=text], #bbpress-forums fieldset.bbp-form textarea, #bbpress-forums fieldset.bbp-form select { border: 1px solid var(--fh-line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 16px; }
#bbpress-forums .bbp-template-notice { border-radius: 8px; }
#bbpress-forums .bbp-pagination-links a, #bbpress-forums .bbp-pagination-links span.current { border-radius: 6px; }
@media (max-width: 600px) {
	#bbpress-forums li.bbp-forum-info, #bbpress-forums li.bbp-topic-title { width: 100%; }
	#bbpress-forums li.bbp-forum-topic-count, #bbpress-forums li.bbp-forum-reply-count, #bbpress-forums li.bbp-forum-freshness,
	#bbpress-forums li.bbp-topic-voice-count, #bbpress-forums li.bbp-topic-reply-count, #bbpress-forums li.bbp-topic-freshness { display: none; }
}

/* About and other plain pages. */
.fh-page .page-content, .page .site-main .page-content { max-width: 760px; }
.page .site-main { padding-top: 40px; padding-bottom: 40px; }

/* ---------- Footer ---------- */
.fh-footer { background: var(--fh-dark); color: rgba(255, 255, 255, .78); margin-top: 64px; font-size: 14px; }
.fh-footer__inner { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; padding-top: 40px; padding-bottom: 24px; }
.fh-footer a { color: #fff; }
.fh-footer a:hover, .fh-footer a:focus { color: var(--fh-accent); }
.fh-footer__disclaimer { max-width: 620px; margin: 10px 0 0; }
.fh-footer__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fh-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 16px; padding-bottom: 24px; font-size: 13px; color: rgba(255, 255, 255, .6); }
@media (max-width: 700px) { .fh-footer__inner { grid-template-columns: 1fr; } }

.fh-form-note { font-size: 13px; color: var(--fh-muted); margin: 8px 0 12px; }

/* Text pages: lead paragraph, highlighted note, motto (manifesto). */
.page-content .fh-lead { font-size: 19px; line-height: 1.6; color: var(--fh-dark); }
.page-content .fh-note { padding: 14px 18px; border-left: 4px solid var(--fh-accent); background: #fff; border-radius: 0 8px 8px 0; }
.page-content .fh-motto { margin: 36px 0 8px; padding: 28px 24px; background: var(--fh-dark); color: #fff; border-radius: 12px; font-size: 22px; font-weight: 800; line-height: 1.45; text-align: center; letter-spacing: -.01em; }
.page-content .fh-motto::first-line { color: var(--fh-accent); }
.page-content h2 { margin-top: 36px; margin-bottom: 12px; }
.page-content h3 { margin-top: 24px; margin-bottom: 8px; }
.page-content li + li { margin-top: 8px; }
/* Match-centre pages: wider content. */
.page.fh-wide .site-main { max-width: 1100px; }
.page.fh-wide .site-main .page-content { max-width: none; }
.page.fh-wide .page-content > p { max-width: 760px; }