@charset "UTF-8";

/* Secondary: Nunito for long-form body (brand spec).
   Loaded from Google Fonts for resilience; bundle locally if preferred.
   NOTE: @import MUST appear before all rules except @charset per CSS spec. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>

 This file is part of a Moko Consulting project.

 SPDX-License-Identifier: GPL-3.0-or-later

 # FILE INFORMATION
 DEFGROUP: Joomla.Template.Site
 INGROUP:  ClarksvilleFurs.CustomTheme
 REPO:     https://git.mokoconsulting.tech/MokoConsulting/client-mokosuite-clarksvillefurs
 PATH:     /media/templates/site/mokoonyx/css/user.css
 VERSION:  01.13.00
 BRIEF:    Clarksville Furs site-wide overrides — fonts, typography, motifs
*/

/* ============================================================
 * CLARKSVILLE FURS — PERSISTENT OVERRIDES
 *
 * This file survives MokoOnyx template updates.
 * Palette files (light.custom.css / dark.custom.css) handle color.
 * This file handles everything else:
 *   - Fredoka variable-weight font loading
 *   - .site-title override (beats template's default Osaka font)
 *   - Body & heading font stack
 *   - Type hierarchy (per brand guide weight scale)
 *   - Rounded-corner enforcement on form/button/alert
 *   - Opt-in .cf-sticker utility for the heavy-outline aesthetic
 *   - Blue-background contrast override (links/muted on sky surfaces)
 *   - Opt-in .cf-brand-callout utility for welcome/community boxes
 *   - .custom.{sky|red|yellow|green} tinted card color classes
 *   - .cf-brand-accent utility + heading-scoped .text-danger→coral compat
 * ============================================================ */

/* ----- FONT LOADING ----- */
/* Primary brand font: Fredoka (variable weights 300–700) */
@font-face {
	font-family: 'Fredoka';
	src: url('../fonts/Fredoka-Variable.ttf') format('truetype-variations'),
	     url('../fonts/Fredoka-Variable.ttf') format('truetype');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

/* ----- BODY FONT STACK ----- */
:root {
	--body-font-family: "Fredoka", "Nunito", "Inter",
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body {
	font-family: var(--body-font-family);
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* ----- SITE TITLE OVERRIDE -----
   MokoOnyx's offline.css and template headers use 'Osaka' as
   the site-title display font. CF brand mandates Fredoka everywhere,
   so we override with !important to win against the cascade. */
.site-title,
.moko-offline-brand .site-title,
a.brand,
.brand .site-title {
	font-family: "Fredoka", sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
}

/* ----- TYPE HIERARCHY (per Clarksville Furs brand guide) ----- */
h1, .h1,
h2, .h2,
h3, .h3 {
	font-family: "Fredoka", sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
}

h4, .h4,
h5, .h5,
h6, .h6 {
	font-family: "Fredoka", sans-serif;
	font-weight: 600;
}

.lead, .callout, .subhead {
	font-family: "Fredoka", sans-serif;
	font-weight: 500;
}

p, li, td, dd {
	font-family: "Nunito", "Fredoka", sans-serif;
	font-weight: 400;
}

small, .small, caption, .caption,
.text-muted, .meta {
	font-weight: 300;
}

/* ----- ROUNDED-CORNER ENFORCEMENT (narrower scope) -----
   Only applied to form controls, badges, alerts where sharp corners
   would break the brand. Cards/modals use their own --card-border-radius
   variable and are NOT forced here — site-specific card styles
   (including glassmorphic overlays) are preserved. */
.form-control,
.form-select,
.alert,
.badge,
.input-group-text {
	border-radius: var(--border-radius);
}

.btn {
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.65rem 1.5rem;
	border-radius: var(--border-radius);
}

.btn-lg {
	padding: 0.9rem 2rem;
	font-size: 1.125rem;
}

/* ----- HEAVY-OUTLINE STICKER AESTHETIC (opt-in) -----
   Apply .cf-sticker to any card, callout, or feature module to get
   the mascot-inspired sticker look: thick outline + hard-offset shadow
   that lifts on hover. Intentionally opt-in so it doesn't fight with
   the site's existing glassmorphic / soft-shadow surfaces. */
.cf-sticker {
	border: 2.5px solid currentColor;
	border-radius: 1.25rem;
	box-shadow: 4px 4px 0 currentColor;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cf-sticker:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 currentColor;
}

/* ----- LINK UNDERLINE OFFSET -----
   Warmer, more readable underlines on body links. */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1.5px;
}

/* ----- FOCUS VISIBLE — accessibility ----- */
:focus-visible {
	outline: 3px solid var(--accent-color-primary, #FF4B3E);
	outline-offset: 2px;
	border-radius: var(--border-radius-sm, 0.5rem);
}

/* ============================================================
 * .custom.{sky|red|yellow|green} — TINTED CARD COLORS
 *
 * Drop `.custom.sky` / `.custom.red` / `.custom.yellow` /
 * `.custom.green` on a card wrapper (typically a Joomla module
 * class_sfx or inline wrapper) to get a brand-coded card surface.
 * Text color auto-flips for legibility on each tint.
 * ============================================================ */
.custom.sky .card-body,
.custom.yellow .card-body,
.custom.red .card-body {
	color: #1E1E1E;
	font-size: 1.15rem;
}

.custom.green .card-body {
	color: #F4F4F4;
	font-size: 1.15rem;
}

.custom.sky .card {
	background-color: var(--sky);
}

.custom.red .card {
	background-color: #ff7a73;
}

.custom.yellow .card {
	background-color: #ffd166;
}

.custom.green .card {
	background-color: #448344;
}

/* ============================================================
 * BLUE-BACKGROUND CONTRAST OVERRIDES
 *
 * Elements painted with --color-primary or --sky as their
 * background suffer a contrast problem with default link color:
 *   coral #FF4B3E on sky-2 #7FB7C6 = 2.06:1  (FAILS WCAG AA)
 *   coral #FF4B3E on sky   #9CCEDB = 2.33:1  (FAILS WCAG AA)
 *   coral #FF4B3E on sky   #a3cde2 = 2.57:1  (FAILS WCAG AA)
 *
 * Ink on sky is AAA, so we flip links to ink inside any element
 * that paints itself with the primary sky surface, and use coral
 * as the hover accent instead (ink → coral transition).
 *
 * This catches all of these common authoring patterns:
 *   1. Inline style: <div style="background: var(--color-primary)">
 *   2. Semantic class: <div class="cf-brand-callout">
 *   3. Built-in container slots: container-top-b / container-bottom-a
 *   4. Block modules assigned block-color-1
 *   5. Hero primary variant
 *   6. .custom.sky card wrapper (uses var(--sky))
 *
 * Extend the selector list if additional blue surfaces are added.
 * ============================================================ */

[style*="var(--color-primary)"],
[style*="var(--sky)"],
.cf-brand-callout,
.container-top-b,
.container-bottom-a,
.hero-primary,
.block-color-1,
.custom.sky .card,
.custom.sky .card-body,
.custom.yellow .card,
.custom.yellow .card-body,
.custom.red .card,
.custom.red .card-body {
	--link-color: #1E1E1E;
	--link-hover-color: #FF4B3E;
	--muted-color: #5b6672;
}

[style*="var(--color-primary)"] a:not(.btn),
[style*="var(--sky)"] a:not(.btn),
.cf-brand-callout a:not(.btn),
.container-top-b a:not(.btn):not(.nav-link),
.container-bottom-a a:not(.btn):not(.nav-link),
.hero-primary a:not(.btn),
.block-color-1 a:not(.btn),
.custom.sky .card a:not(.btn),
.custom.yellow .card a:not(.btn),
.custom.red .card a:not(.btn) {
	color: #1E1E1E;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	text-decoration-color: rgba(30, 30, 30, 0.55);
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

[style*="var(--color-primary)"] a:not(.btn):hover,
[style*="var(--color-primary)"] a:not(.btn):focus,
[style*="var(--sky)"] a:not(.btn):hover,
[style*="var(--sky)"] a:not(.btn):focus,
.cf-brand-callout a:not(.btn):hover,
.cf-brand-callout a:not(.btn):focus,
.container-top-b a:not(.btn):not(.nav-link):hover,
.container-top-b a:not(.btn):not(.nav-link):focus,
.container-bottom-a a:not(.btn):not(.nav-link):hover,
.container-bottom-a a:not(.btn):not(.nav-link):focus,
.hero-primary a:not(.btn):hover,
.hero-primary a:not(.btn):focus,
.block-color-1 a:not(.btn):hover,
.block-color-1 a:not(.btn):focus,
.custom.sky .card a:not(.btn):hover,
.custom.sky .card a:not(.btn):focus,
.custom.yellow .card a:not(.btn):hover,
.custom.yellow .card a:not(.btn):focus,
.custom.red .card a:not(.btn):hover,
.custom.red .card a:not(.btn):focus {
	color: #FF4B3E;
	text-decoration-color: #FF4B3E;
}

/* Muted/small helper text inside blue surfaces needs a darker grey too */
[style*="var(--color-primary)"] .text-muted,
[style*="var(--color-primary)"] small,
[style*="var(--sky)"] .text-muted,
[style*="var(--sky)"] small,
.cf-brand-callout .text-muted,
.cf-brand-callout small,
.container-top-b .text-muted,
.container-top-b small,
.hero-primary .text-muted,
.hero-primary small,
.block-color-1 .text-muted,
.block-color-1 small,
.custom.sky .card .text-muted,
.custom.sky .card small,
.custom.yellow .card .text-muted,
.custom.yellow .card small,
.custom.red .card .text-muted,
.custom.red .card small {
	color: #3a3a3a !important;
}

/* ============================================================
 * DARK-TINT CARD LINK OVERRIDES — .custom.green only
 *
 * .custom.green has white body text set elsewhere, so links need
 * to match (white default) with coral hover.
 *
 * Contrast note:
 *   White on #448344 (green) = 4.61:1   (passes AA ✓)
 *   Coral on #448344 (hover) = 1.39:1   (essentially invisible)
 *
 * Previously .custom.red was also in this group, but white-on-red
 * (2.53:1) fails AA, so .custom.red was reassigned to the ink-text
 * group above. If hover legibility on green matters more than brand
 * consistency, swap hover color to #1E1E1E (ink) → 11.4:1 AAA.
 * ============================================================ */
.custom.green .card,
.custom.green .card-body {
	--link-color: #FFFFFF;
	--link-hover-color: #FF4B3E;
}

.custom.green .card a:not(.btn) {
	color: #FFFFFF;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	text-decoration-color: rgba(255, 255, 255, 0.6);
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.custom.green .card a:not(.btn):hover,
.custom.green .card a:not(.btn):focus {
	color: #FF4B3E;
	text-decoration-color: #FF4B3E;
}

/* ============================================================
 * .cf-brand-callout — welcome/community box utility
 *
 * Drop-in replacement for the inline
 * `style="background: var(--color-primary)"` pattern used on /faq.
 * Sets sky background, ink type, flex layout, readable link colors.
 *
 * Example:
 *   <div class="cf-brand-callout">
 *     <span class="fs-5">💙</span>
 *     <p class="mb-0"><strong>Clarksville Furs is…</strong> Find us on
 *       <a href="/discord">Discord</a>, <a href="/telegram">Telegram</a>.
 *     </p>
 *   </div>
 * ============================================================ */
.cf-brand-callout {
	background: var(--color-primary);
	color: #1E1E1E;
	padding: 1rem 1.25rem;
	border-radius: var(--border-radius, 0.875rem);
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}

.cf-brand-callout > :first-child {
	flex-shrink: 0;
}

.cf-brand-callout p:last-child {
	margin-bottom: 0;
}

/* ============================================================
 * BRAND ACCENT TEXT — .cf-brand-accent + .text-danger on headings
 *
 * The site author historically uses `.text-danger` on the hero
 * headline and CTA headings to get a coral brand-accent punch:
 *     <h1><span class="text-danger">Your place.</span> Your pack.</h1>
 *     <h2 class="text-danger">Join the Pack!</h2>
 *
 * Since --danger is now a softer red (#ff7a73 — passes AA-large only),
 * applying it literally to display headings washes out the brand
 * and lands at 3.1:1 on white.
 *
 * Two things here:
 *  1. `.cf-brand-accent` — the preferred utility going forward.
 *     Use on any element (heading OR body) that wants coral brand pop.
 *  2. Compatibility rule: `.text-danger` used on a heading element
 *     (h1–h6, .display-*) keeps rendering as coral so existing
 *     content doesn't break. Use `.cf-brand-accent` instead for
 *     new content so the semantic distinction is clean.
 *
 * Contrast:  coral #FF4B3E on white = 3.63:1 (AA-large ✓, AAA-large ✗)
 * ============================================================ */
.cf-brand-accent {
	color: #FF4B3E;
}

h1 .text-danger, h1.text-danger,
h2 .text-danger, h2.text-danger,
h3 .text-danger, h3.text-danger,
h4 .text-danger, h4.text-danger,
h5 .text-danger, h5.text-danger,
h6 .text-danger, h6.text-danger,
.display-1 .text-danger, .display-1.text-danger,
.display-2 .text-danger, .display-2.text-danger,
.display-3 .text-danger, .display-3.text-danger,
.display-4 .text-danger, .display-4.text-danger,
.display-5 .text-danger, .display-5.text-danger,
.display-6 .text-danger, .display-6.text-danger {
	color: #FF4B3E !important;
}

/* ----- REDUCED MOTION — accessibility -----
   Disable hover animations and transitions for users who prefer
   reduced motion. Focus outlines and color changes are preserved. */
@media (prefers-reduced-motion: reduce) {
	.cf-sticker,
	.cf-sticker:hover,
	a:not(.btn):not(.nav-link):not(.dropdown-item) {
		transition: none;
	}
	.cf-sticker:hover {
		transform: none;
	}
}

.container-header .navbar-brand {
	padding-bottom: 0;
}

/* ===== ADMIN CARDS ===== */
.cf-admin-card {
  background: var(--color-primary);
  color: black;
}

.cf-admin-avatar-wrap {
  position: relative;
  width: 150px;
  margin: 0 auto 1rem;
}

.cf-admin-avatar {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 3px solid #112855;
  display: block;
  border-radius: 50% !important;
}

.cf-admin-role {
  color: black;
  font-weight: bold;
}

/* ============================================================
 * SOCIAL BRAND BUTTONS — Discord & Telegram
 *
 * Usage:
 *   <a href="/discord" class="btn btn-discord">
 *     <i class="fa-brands fa-discord me-2"></i>Discord
 *   </a>
 *   <a href="/telegram" class="btn btn-telegram">
 *     <i class="fa-brands fa-telegram me-2"></i>Telegram
 *   </a>
 *
 * Brand colors:
 *   Discord Blurple: #5865F2
 *   Telegram Blue:   #26A5E4
 * ============================================================ */
.btn-discord {
	--btn-color: #000;
	--btn-bg: #5865F2;
	--btn-border-color: #5865F2;
	--btn-hover-color: #000;
	--btn-hover-bg: #4752C4;
	--btn-hover-border-color: #4752C4;
	--btn-active-color: #000;
	--btn-active-bg: #3C45A5;
	--btn-active-border-color: #3C45A5;
	--btn-focus-shadow-rgb: 88, 101, 242;
	font-weight: 600;
	border-radius: 50rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.btn-telegram {
	--btn-color: #000;
	--btn-bg: #26A5E4;
	--btn-border-color: #26A5E4;
	--btn-hover-color: #000;
	--btn-hover-bg: #1E8BC3;
	--btn-hover-border-color: #1E8BC3;
	--btn-active-color: #000;
	--btn-active-bg: #1A77A8;
	--btn-active-border-color: #1A77A8;
	--btn-focus-shadow-rgb: 38, 165, 228;
	font-weight: 600;
	border-radius: 50rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}