/*
Theme Name: Dragonchoice 2026
Theme URI: http://www.e-motivemedia.com
Author: e-Motive Media Ltd
Description: A refreshed look for Dragonchoice on the existing indigo and lilac palette. A classic PHP theme for the Classic Editor. It keeps every template, game page and function from Dragonchoice 2021; only the header, footer and visual layer are new. The 2021 rules live in legacy.css, and this file loads after them and overrides them. Layout (Grid and Flexbox) is in layout.css.
Version: 2.0
Text Domain: dragonchoice2026
*/

/* ------------------------------------------------------------------
   Design tokens. Change the palette here.
   ------------------------------------------------------------------ */
:root {
	--dc-page: #cecee6;        /* page behind everything */
	--dc-band: #e4e4f2;        /* pale lilac content bands */
	--dc-soft: #f4f4fa;        /* palest lilac: utility bar, news band */
	--dc-lilac: #9b9bc4;       /* mid lilac: nav rule, borders */
	--dc-indigo: #6c6bb1;      /* indigo: image borders, hover */
	--dc-indigo-deep: #575695; /* deep indigo: nav bar, links */
	--dc-indigo-ink: #3d3c78;  /* headings */
	--dc-magenta: #cc3399;     /* buttons and focus */
	--dc-ink: #2f2f45;         /* body text */
	--dc-gold: #daa520;        /* achievements and results (unchanged) */
	--dc-font: 'Literata', Georgia, 'Times New Roman', serif;
}

/* ------------------------------------------------------------------
   Base type and colour
   ------------------------------------------------------------------ */
body {
	font-family: var(--dc-font);
	background-color: var(--dc-page);
	color: var(--dc-ink);
}

h1, h2, h3, h4 {
	font-family: var(--dc-font);
	font-weight: 700;
	color: var(--dc-indigo-ink);
}

p { line-height: 1.75em; }

a:link, a:visited { color: var(--dc-indigo-deep); }
a:hover, a:active { color: var(--dc-indigo-ink); text-decoration: underline; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--dc-magenta);
	outline-offset: 2px;
}

hr { background-color: var(--dc-lilac); color: var(--dc-lilac); }

.skipLink {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000;
	background: #ffffff;
	color: var(--dc-indigo-ink);
	padding: 12px 18px;
	font-size: 1.6em;
	font-weight: 700;
}
.skipLink:focus { left: 8px; top: 8px; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
   Buttons. These selectors are deliberately specific so they beat both
   the legacy button rules and the link colours above.
   ------------------------------------------------------------------ */
a.button:link, a.button:visited,
#hero a.button:link, #hero a.button:visited,
.gameAspect a.button:link, .gameAspect a.button:visited,
p.buttonTeaser a.button:link, p.buttonTeaser a.button:visited {
	display: inline-block;
	background-color: var(--dc-magenta);
	color: #ffffff;
	padding: 13px 28px;
	line-height: 1.3;
	font-size: 1.05em;
	font-weight: 700;
	text-transform: none;
	text-align: center;
	text-decoration: none;
	border-radius: 2px;
}

a.button:hover, a.button:focus,
#hero a.button:hover, #hero a.button:focus,
.gameAspect a.button:hover, .gameAspect a.button:focus,
p.buttonTeaser a.button:hover, p.buttonTeaser a.button:focus {
	background-color: var(--dc-indigo-deep);
	color: #ffffff;
	text-decoration: none;
}

a.button:active,
#hero a.button:active,
.gameAspect a.button:active,
p.buttonTeaser a.button:active {
	background-color: var(--dc-indigo-ink);
	color: #ffffff;
}

/* The old buttons appended a ">" that slid on hover. */
#hero a.button::after,
.gameAspect a.button::after,
p.buttonTeaser a.button::after { content: none; }

/* ------------------------------------------------------------------
   Header. The 2021 header was fixed to the top and shrank on scroll
   (content was pushed down 297px to make room). This one is part of
   the page and needs no script.
   ------------------------------------------------------------------ */
#topContainer {
	position: static !important;
	background-color: #ffffff;
	border-bottom: 0;
	box-shadow: none !important;
	z-index: auto;
}

#contentContainer { padding-top: 0 !important; }

/* Old anchor offset that compensated for the fixed header. */
.jump { margin-top: 0; padding-top: 0; }

#login {
	max-width: none;
	background-color: var(--dc-soft);
	border-bottom: 1px solid #dcdcee;
}

#login p {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 28px;
	box-sizing: border-box;
	line-height: 42px;
	font-size: 1.5em;
	font-weight: 600;
}

#login p a:link, #login p a:visited { color: var(--dc-indigo-deep); }

#headerContainer { background-color: #ffffff; }

header#banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	box-sizing: border-box;
	padding: 18px 28px;
}

#mainLogo {
	width: 440px;
	max-width: 62%;
	margin: 0;
}

#headerRight {
	width: 280px;
	max-width: 34%;
}

#mainLogo img, #headerRight img { width: 100%; height: auto; }

#navContainer {
	background-color: var(--dc-indigo-deep);
	border-bottom: 4px solid var(--dc-lilac);
}

#nav { background-color: transparent; }

/*
 * UberMenu draws the menu itself, and its colours come from its own settings
 * (Appearance > UberMenu). These overrides make it match if the settings
 * still use the old lilac; they do nothing if the markup differs.
 */
/* Desktop menu bar only. UberMenu's responsive breakpoint is 959px by default
   (Appearance > UberMenu > General Settings > Responsive); keep this in step. */
@media screen and (min-width: 960px) {
	#navContainer #nav .ubermenu { background: transparent !important; border: 0 !important; }
	#navContainer #nav .ubermenu .ubermenu-item-level-0 > .ubermenu-target {
		color: #ffffff !important;
		font-family: var(--dc-font) !important;
		font-weight: 600;
	}
	#navContainer #nav .ubermenu .ubermenu-item-level-0:hover > .ubermenu-target,
	#navContainer #nav .ubermenu .ubermenu-item-level-0.ubermenu-active > .ubermenu-target {
		background: var(--dc-indigo) !important;
		color: #ffffff !important;
	}
}

/* Mobile menu: a deep indigo toggle bar, and dark text on the light dropdown. */
@media screen and (max-width: 959px) {
	#nav { height: auto; background-color: var(--dc-indigo-deep); }
	a.ubermenu-responsive-toggle {
		color: #ffffff;
		background: var(--dc-indigo-deep);
		text-transform: none;
		font-family: var(--dc-font);
	}
	#navContainer #nav .ubermenu .ubermenu-item .ubermenu-target,
	#navContainer #nav .ubermenu .ubermenu-item .ubermenu-target .ubermenu-target-text {
		color: var(--dc-indigo-ink) !important;
		font-family: var(--dc-font);
	}
	#navContainer #nav .ubermenu .ubermenu-item .ubermenu-target:hover,
	#navContainer #nav .ubermenu .ubermenu-item.ubermenu-active > .ubermenu-target {
		background: var(--dc-band) !important;
		color: var(--dc-indigo-ink) !important;
	}
}

@media screen and (max-width: 730px) {
	header#banner { justify-content: center; }
	#mainLogo { max-width: 100%; margin-top: 0; text-align: center; }
}

/* ------------------------------------------------------------------
   Page structure shared by every template
   ------------------------------------------------------------------ */
#contentContainer { background-color: #ffffff; }

#hero, #game, #dragonchoiceContent, #otherHome,
#prize, #fb, #register, div#recap, div#weyrling {
	box-sizing: border-box;
	padding-left: 28px;
	padding-right: 28px;
}

/* ------------------------------------------------------------------
   Home page: hero (home-hero.php)
   ------------------------------------------------------------------ */
#heroContainer { height: auto; background-size: cover; background-position: left top; }

#hero { max-width: 1100px; padding-top: 52px; padding-bottom: 56px; }

#heroTitle { text-align: left; }

.home h1, .page-template-page-teaser h1 { text-align: left; margin-top: 0; }

#heroTitle h1 {
	font-size: 5.2em;
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin-bottom: 0.35em;
}

#heroBlurb { max-width: 62ch; }
#heroBlurb p { font-size: 1.9em; line-height: 1.65em; margin-top: 0; }

#hero ul li {
	font-size: 1.7em;
	line-height: 1.55em;
	background-image: none;
	position: relative;
	padding-left: 1.2em;
}
#hero ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.5em;
	height: 0.5em;
	background-color: var(--dc-magenta);
}

#hero .gameInfo p { margin-top: 18px; }

/* ------------------------------------------------------------------
   Home page: Weyrling and Recap (home-hero.php)
   ------------------------------------------------------------------ */
div#recap { padding-top: 56px; padding-bottom: 56px; }

/* The two headings carry the same ids as their wrapper divs (id="weyrling", id="recap");
   undo the wrapper rules for them. */
h2#recap, h2#weyrling { width: auto; max-width: none; margin: 0 0 0.6em; padding: 0; }

div#recap h2 { font-size: 3em; line-height: 1.15em; margin-top: 0; }
div#recap h3 { font-size: 2.2em; }

.recapLeft img, .recapRight img,
.weyrlingLeft img, .weyrlingRight img {
	border: 2px solid var(--dc-indigo);
	box-sizing: border-box;
	height: auto;
}

/* ------------------------------------------------------------------
   Home page: trilogy and news (more-hero.php)
   ------------------------------------------------------------------ */
#dragonchoiceContainer { background-color: var(--dc-band); }

#dragonchoiceContent { padding-top: 56px; padding-bottom: 56px; }

#dragonchoiceContent > h2 {
	font-size: 3.8em;
	text-align: left !important; /* the template sets this inline */
	margin-top: 0;
}

#dragonchoiceContent > p { max-width: 62ch; }

.dragonchoice {
	border-top: 6px solid var(--dc-indigo);
	padding-top: 18px;
	margin-top: 12px;
}

.dragonchoice h3,
.dragonchoice p.button { text-align: left; }

.dragonchoice h3 { font-size: 2.4em; line-height: 1.2em; margin-top: 0; }
.dragonchoice h3 span { font-weight: 600; }

.dragonchoiceImage img { box-sizing: border-box; border-color: var(--dc-indigo); }

#otherHomeContainer { background-color: #ffffff; }

#otherHome { padding-top: 56px; padding-bottom: 56px; }

.otherHome h3 { font-size: 2.6em; line-height: 1.2em; margin-top: 0; }

.otherHome h3 a:link, .otherHome h3 a:visited { color: var(--dc-indigo-ink); }

#homeNews li { border-bottom: 1px solid var(--dc-page); }

#dc3art h3 { font-size: 2em; }

/* ------------------------------------------------------------------
   Pages and posts: sidebar, chapter lists, tables
   ------------------------------------------------------------------ */
#sidebar ul li { border-bottom-color: var(--dc-band); }

article.chapter, article.news { border-bottom-color: var(--dc-lilac); }

p#breadcrumbs { color: var(--dc-ink); }

#wp_page_numbers a { color: var(--dc-ink); background-color: var(--dc-lilac); }
#wp_page_numbers li a:hover,
#wp_page_numbers li.active_page a { background-color: var(--dc-indigo-deep); color: #ffffff; }

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
#footerContainer, footer { background-color: var(--dc-ink); }

footer p { font-size: 1.5em; line-height: 1.6em; }

footer a:link, footer a:visited, footer a:hover, footer a:active {
	color: #ffffff;
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------ */
@media screen and (max-width: 880px) {
	#hero { padding-top: 36px; padding-bottom: 40px; }
	#heroTitle h1 { font-size: 4em; }
	.dragonchoice { margin-bottom: 15px; }
}

@media screen and (max-width: 630px) {
	#heroTitle h1 { font-size: 3.4em; }
	div#recap, #otherHome, #dragonchoiceContent { padding-top: 36px; padding-bottom: 36px; }
}

/* Motion: the new layer adds none; quiet the legacy transitions and spinners. */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}