/* @override 
	http://www.openstudiowestminster.org/wp-content/themes/openstudio/style-more.css?* */

/*!
Theme Name: Open Studio Westminster V2 2024 — MORE overrides
Description: Loaded on top of style.css for the MORE exhibition page templates
             (front_MORE.php, studio_MORE.php, student_MORE.php). Only the
             values that differ from the main site belong here.
*/

/*--------------------------------------------------------------
# Palette
#
# style.css already wires these three variables up:
#   --background  -> body background
#   --bodycol     -> body / form text colour
#   --featuredcol -> link colour + button/menu-item background
#   --hovercol    -> link hover/focus/active colour
# so redefining them here is all that's needed to re-skin MORE.
--------------------------------------------------------------*/
:root {
	--featuredcol: #C1C1C1;
	--background: #E8E8E8;
	--bodycol: #545454;
	--hovercol: #000000;
}

/*--------------------------------------------------------------
# Typography
#
# MORE only. Fonts are loaded in header-more.php.
# Body -> Source Serif 4, headings -> Overpass.
# Loads after style.css, so equal-specificity selectors win.
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Overpass', sans-serif;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
	font-family: 'Overpass', sans-serif;
}

/*--------------------------------------------------------------
# Layout
#
# Centre the 1200px #page box instead of left-aligning it. The 1em
# side padding replaces #page's old 1em side margins; the full-bleed
# media (thumbnails, galleries) is re-flushed to the viewport edges
# with symmetric calc(50% - 50vw) margins, which stay correct in a
# centred container at any width.
--------------------------------------------------------------*/
#page {
	margin-left: auto;
	margin-right: auto;
	padding-left: 1em;
	padding-right: 1em;
}

.post-thumbnail {
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Galleries: near-full-bleed but held 1.5em off the viewport edges,
   with rounded corners (overflow clips the images to the radius). */
main#primary.site-main.studiowide .wp-block-gallery,
#studiopage_open .wp-block-gallery {
	width: auto;
	margin: 1.5em calc(50% - 50vw + 1.5em);
	border-radius: 1.5em;
	overflow: hidden;
}

/* Site header and entry header stay full-bleed, contents inset 1em as before. */
#masthead,
.entry-header {
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 1em;
	padding-right: 1em;
}

/*--------------------------------------------------------------
# Bits
--------------------------------------------------------------*/
span#parent {
	opacity: 0.4;
}

/*--------------------------------------------------------------
# SECTION palettes
#
# Driven by the page "SECTION" custom field, which functions.php
# turns into a body class. body.section-* outspecifies :root, so
# a page's section palette overrides the MORE palette above.
--------------------------------------------------------------*/
body.section-masters {
	--featuredcol: #7BC8CD;
	--background: #E8E8E8;
	--bodycol: #545454;
	--hovercol: #000000;
}

body.section-engagementpractice {
	--featuredcol: #ECD863;
	--background: #E8E8E8;
	--bodycol: #545454;
	--hovercol: #000000;
}

body.section-research {
	--featuredcol: #8C7AB7;
	--background: #E8E8E8;
	--bodycol: #545454;
	--hovercol: #000000;
}

body.section-phd {
	--featuredcol: #F4A874;
	--background: #E8E8E8;
	--bodycol: #545454;
	--hovercol: #000000;
}

/*--------------------------------------------------------------
# SECTION menu capsules
#
# functions.php adds section-<value> to each MORE menu item based
# on the SECTION of the page it links to. Re-setting --featuredcol
# on the item makes its capsule background
# (.mastermenu .menu-item-object-page) take that section's colour.
--------------------------------------------------------------*/
.mastermenu .menu-item.section-masters           { --featuredcol: #7BC8CD; }
.mastermenu .menu-item.section-engagementpractice { --featuredcol: #ECD863; }
.mastermenu .menu-item.section-research           { --featuredcol: #8C7AB7; }
.mastermenu .menu-item.section-phd                { --featuredcol: #F4A874; }

/* Soft glow in the item's own section colour. */
.mastermenu .menu-item-object-page,
.mastermenu .menu-item-object-custom {
	box-shadow: 0 0 14px 1px color-mix( in srgb, var(--featuredcol) 55%, transparent );
}

/* Capsule label colour (style.css paints it with --background). */
#menu .mastermenu .menu-item-object-page a,
#menu .mastermenu .menu-item-object-custom a {
	color: var(--bodycol) !important;
}

/*--------------------------------------------------------------
# Site title capsule
#
# Render the MORE site title as a capsule like the menu items,
# filled with a gradient of the four SECTION featured colours.
--------------------------------------------------------------*/
#masthead .site-title {
	width: auto;
	height: auto;
	margin-right: 20px;
	margin-bottom: 1.5em;
	text-transform: none;
}

/* Line the fixed menu/close button up with the top of the site-title capsule
   (#page margin-top 1em + .site-title margin-top 0.5em). The close button must
   land in the same spot the menu button was in. */
.menubutton,
.closebutton {
	top: 1.5em;
	right: 1em;
}

#masthead .site-title a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 10px 18px 6px;
	border-radius: 1.5em;
	font-family: 'Overpass', sans-serif;
	text-transform: none;
	background-color: var(--featuredcol); /* fallback */
/*	background-image: linear-gradient( 90deg, #7BC8CD 0%, #ECD863 33%, #8C7AB7 66%, #F4A874 100% );*/
	color: var(--bodycol) !important;
	box-shadow: 0 0 14px 1px color-mix( in srgb, var(--featuredcol) 55%, transparent );
}

/* Overpass rides high in a padded pill — flex-centre every capsule. */
.mastermenu .menu-item-object-page,
.mastermenu .menu-item-object-custom,
.navigation .button,
.previousstudio .button,
.nextstudio .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/*--------------------------------------------------------------
# Full-page menu overlay
#
# Drop the logo, let #menu size to its content instead of filling
# the viewport, and fade the background out over the bottom 200px
# so it dissolves into the page rather than ending on a hard edge.
--------------------------------------------------------------*/
#menu,
#menu a {
	font-family: 'Overpass', sans-serif;
}

#menulogo {
	display: none;
}

#menu {
	height: auto;
	max-height: 100vh;
	overflow-y: auto;
	/* Extra room below the last row of buttons for the fade to happen in. */
	padding-bottom: 280px;
	background: linear-gradient(
		to bottom,
		var(--background) 0%,
		var(--background) calc(100% - 260px),
		transparent 100%
	);
}

/*--------------------------------------------------------------
# Footer logo
#
# functions.php swaps the IOW logo src for archcities.png. The block
# markup carries an inline aspect-ratio + object-fit:cover sized for
# the old logo, so undo those and let the new wordmark scale freely.
--------------------------------------------------------------*/
.site-info .wp-block-image img {
	aspect-ratio: auto !important;
	object-fit: contain !important;
	height: auto !important;
}

/* Soft section-colour glow on the prev/next pills. */
.navigation .button,
.previousstudio .button,
.nextstudio .button {
	box-shadow: 0 0 14px 1px color-mix( in srgb, var(--featuredcol) 55%, transparent );
}

/* Menu toggle: solid --bodycol pill + --bodycol glow (same in every section). */
.menubutton button,
.closebutton button {
	background-color: var(--featuredcol);
	color: var(--bodycol);
	box-shadow: 0 0 14px 1px color-mix( in srgb, var(--featuredcol) 55%, transparent );
}

/* Prev/next label in body colour. */
.navigation .button,
.previousstudio .button,
.nextstudio .button {
	color: var(--bodycol);
}

/*--------------------------------------------------------------
# Overrides
# Add any further MORE-specific rules below.
--------------------------------------------------------------*/