/*
Theme Name: Twenty Fourteen - Maine Child
Theme URI: https://mainehealthinsurancebrokers.com/
Description: Child theme of Twenty Fourteen for Maine Health Insurance Brokers. Centers the site at 1280px, widens the right Content Sidebar to 300px, removes the black left rail, and replaces Twenty Fourteen's green accent with the #002664 brand navy across the header bar, navigation, body links, buttons, footer, and footer widget area. The header image links to the home page using Twenty Fourteen's own default behavior.
Author: Maine Health Insurance Brokers
Author URI: https://mainehealthinsurancebrokers.com/
Template: twentyfourteen
Version: 1.8.0
Requires at least: 6.0
Text Domain: twentyfourteen-maine-child
*/


/* =============================================================================
   TABLE OF CONTENTS
   1.0   Brand colors
   2.0   Site width and centering
   3.0   Header image
   4.0   Header bar and navigation
   5.0   Links, buttons, and accent color
   6.0   Left rail removal (Primary Sidebar)
   7.0   Right Content Sidebar at 300px
   8.0   Reading column
   9.0   Footer and footer widget area
   10.0  Content Sidebar widget colors
   11.0  WordPress credit
   12.0  Optional blocks (commented out by default)
   ========================================================================== */


/* =============================================================================
   1.0  BRAND COLORS
   Change these in one place and they update everywhere in this file.
   ========================================================================== */

:root {
	--mhib-navy: #002664;          /* Primary brand navy: header bar, footer */
	--mhib-navy-light: #1a3d78;    /* Dropdowns, search button              */
	--mhib-navy-lighter: #2a5296;  /* Hover states                          */
	--mhib-navy-text: rgba( 255, 255, 255, 0.85 );
}


/* =============================================================================
   2.0  SITE WIDTH AND CENTERING
   Twenty Fourteen caps .site and .site-header at 1260px. This raises both to
   1280px and centers the page on wider screens.
   ========================================================================== */

body {
	background-color: #fff;
}

.site,
.site-header {
	max-width: 1280px;
	width: 100%;
}

.site {
	margin-left: auto;
	margin-right: auto;
}


/* =============================================================================
   3.0  HEADER IMAGE
   No image map. Twenty Fourteen's parent header.php already wraps the header
   image in a link to the home page, so this child theme ships no header.php
   at all and inherits that behavior. The rules below just make the image fill
   the 1280px container and keep its aspect ratio.
   ========================================================================== */

#site-header {
	width: 100%;
}

#site-header a {
	display: block;
}

#site-header img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}


/* =============================================================================
   4.0  HEADER BAR AND NAVIGATION
   The bar directly beneath the header image. Twenty Fourteen paints it black
   and uses a green accent (#24890d / #41a62a / #55d737) for nav hover states,
   the current page, dropdown menus, and the search button. All of that is
   replaced with the brand navy here.
   ========================================================================== */

.site-header {
	background-color: var( --mhib-navy );
}

/* --- Site title -----------------------------------------------------------
   Hidden visually because the business name will live in the header image.
   It stays in the page source so screen readers and search engines still see
   the H1, which display:none would remove. Twenty Fourteen floats the title
   left, and on narrower screens that float is what pushed the menu onto a
   second row and made the bar taller. Taking it out of the flow keeps the bar
   at a single 48px row.

   TO SHOW THE SITE NAME AGAIN: delete this one rule.
   ------------------------------------------------------------------------ */
.site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* --- Header bar height ----------------------------------------------------
   Twenty Fourteen lays this bar out with floats and gives .header-main no
   clearfix, so its height depends on how the browser resolves the floated
   search button and navigation. Safari and Chrome resolved that differently
   and Safari dropped the menu onto a second row, making the bar twice as tall.

   Flexbox removes the ambiguity. A flex container defaults to nowrap, so the
   search button and the menu are physically incapable of landing on separate
   rows, and the bar is a fixed 48px in every browser.

   Below 783px Twenty Fourteen switches to the hamburger toggle and the menu
   expands vertically, so the float layout is left alone there on purpose.
   ------------------------------------------------------------------------ */
.header-main {
	min-height: 48px;
}

@media screen and (min-width: 783px) {

	.header-main {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		height: 48px;
	}

	/* Menu first, then the search button, matching the original order. */
	.primary-navigation {
		order: 1;
		float: none;
		margin: 0;
	}

	.search-toggle {
		order: 2;
		float: none;
		flex: 0 0 48px;
	}
}

/* Top level navigation links */
.site-navigation a {
	color: #fff;
}

.site-navigation a:hover,
.site-navigation a:focus {
	color: var( --mhib-navy-text );
}

/* Current page. Parent theme uses bright green (#55d737) here. */
.site-navigation .current_page_item > a,
.site-navigation .current_page_ancestor > a,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a {
	color: #fff;
	font-weight: 900;
}

/* Desktop hover highlight on a top level item. Parent uses green. */
.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
	background-color: var( --mhib-navy-lighter );
	color: #fff;
}

/* Dropdown submenus. Parent uses green. */
.primary-navigation ul ul {
	background-color: var( --mhib-navy-light );
}

.primary-navigation ul ul a:hover,
.primary-navigation ul ul li.focus > a {
	background-color: var( --mhib-navy-lighter );
}

/* Search button in the header bar. Kept one shade lighter than the bar so it
   still reads as a button rather than disappearing into the background. */
.search-toggle {
	background-color: var( --mhib-navy-light );
}

.search-toggle:hover,
.search-toggle.active {
	background-color: var( --mhib-navy-lighter );
}

/* The search field panel that slides open under the bar. */
.search-box {
	background-color: var( --mhib-navy-light );
}

/* Mobile menu button. */
.menu-toggle {
	background-color: var( --mhib-navy );
}

.menu-toggle:active,
.menu-toggle:focus,
.menu-toggle:hover {
	background-color: var( --mhib-navy-lighter );
}


/* =============================================================================
   5.0  LINKS, BUTTONS, AND ACCENT COLOR
   Twenty Fourteen uses green (#24890d, hover #41a62a) for every link and
   button on the site, including links inside page and post content. These
   rules move all of it to brand navy.
   ========================================================================== */

a {
	color: var( --mhib-navy );
}

a:hover,
a:focus {
	color: var( --mhib-navy-lighter );
}

/* Buttons and form submits */
button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: var( --mhib-navy );
}

button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: var( --mhib-navy-lighter );
}

/* Buttons inside any widget area */
.widget button,
.widget .button,
.widget input[type="button"],
.widget input[type="reset"],
.widget input[type="submit"] {
	background-color: var( --mhib-navy );
}

/* Post tag pills on hover */
.entry-meta .tag-links a:hover {
	background-color: var( --mhib-navy );
}

/* Calendar widget day links */
.widget_calendar tbody a {
	background-color: var( --mhib-navy );
}

/* Featured content slider dots and arrows, if the grid or slider front page
   layout is ever turned on. */
.slider-control-paging a:hover:before,
.slider-direction-nav a:hover {
	background-color: var( --mhib-navy-lighter );
}

.slider-control-paging .slider-active:before,
.slider-control-paging .slider-active:hover:before {
	background-color: var( --mhib-navy );
}


/* =============================================================================
   6.0  LEFT RAIL REMOVAL (PRIMARY SIDEBAR)
   Twenty Fourteen paints a black 182px rail down the left side and puts the
   Primary Sidebar widget area inside it. This site uses the right Content
   Sidebar instead, so the rail is removed at every screen size.

   TO PUT THE LEFT SIDEBAR BACK: delete this entire section 6.0.
   ========================================================================== */

.site:before {
	display: none;
}

#secondary {
	display: none;
}

@media screen and (min-width: 1008px) {

	/* Reclaim the 182px the rail used to occupy. */
	.site-content {
		margin-left: 0;
	}

	.search-box-wrapper {
		padding-left: 0;
	}
}


/* =============================================================================
   7.0  RIGHT CONTENT SIDEBAR AT 300px
   Twenty Fourteen sizes this column as a percentage (33.33% from 673px,
   29.05% from 1008px) using a float plus negative-margin pattern. The content
   column reserves space with margin-right and the sidebar pulls back into it
   with a matching negative margin-left. THE TWO VALUES MUST ALWAYS MATCH.
   Setting margin-right to 0 without also changing the sidebar is what caused
   the sidebar to be cut off previously.

   Below 1008px the parent's percentage widths are left alone so the layout
   still works on tablets. Below 673px the sidebar stacks under the content.
   ========================================================================== */

@media screen and (min-width: 1008px) {

	.site-content {
		margin-right: 300px;
	}

	.content-sidebar {
		margin-left: -300px;
		width: 300px;
	}
}

/* Full Width Page template has no sidebar, so give the content the room. */
@media screen and (min-width: 1008px) {

	.full-width .site-content {
		margin-right: 0;
		margin-left: 0;
	}
}


/* =============================================================================
   8.0  READING COLUMN
   Caps body text at a comfortable measure inside the content column so lines
   do not run the full width on a large monitor.
   ========================================================================== */

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content footer.entry-meta,
.page-content,
.archive-header,
.page-header,
.comments-area,
.post-navigation,
.image-navigation {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* Twenty Fourteen adds a 54px right margin at this width. Undo it so the
   reading column stays centered rather than drifting left. */
@media screen and (min-width: 1218px) {

	.site-content .entry-header,
	.site-content .entry-content,
	.site-content .entry-summary,
	.site-content footer.entry-meta,
	.page-content,
	.archive-header,
	.page-header,
	.comments-area,
	.post-navigation,
	.image-navigation {
		margin-left: auto;
		margin-right: auto;
	}
}


/* =============================================================================
   9.0  FOOTER AND FOOTER WIDGET AREA
   #supplementary (the footer widget area) sits inside .site-footer, so one
   background color covers both. Default is black; this makes it brand navy.
   ========================================================================== */

.site-footer {
	background-color: var( --mhib-navy );
}

.site-footer,
.footer-sidebar .widget,
.footer-sidebar .widget a {
	color: var( --mhib-navy-text );
}

.footer-sidebar .widget .widget-title,
.footer-sidebar .widget .widget-title a {
	color: #fff;
}

.footer-sidebar .widget a:hover,
.footer-sidebar .widget a:focus,
.footer-sidebar .widget .widget-title a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Separators inside footer widgets, lightened for the navy background. */
.footer-sidebar .widget li,
.footer-sidebar .widget_archive li,
.footer-sidebar .widget_categories li,
.footer-sidebar .widget_nav_menu li,
.footer-sidebar .widget_pages li,
.footer-sidebar .widget_recent_entries li,
.footer-sidebar .widget_recent_comments li {
	border-color: rgba( 255, 255, 255, 0.2 );
}

/* The WordPress credit bar is hidden (section 11.0), so the footer needs its
   own bottom padding or the widgets sit flush against the page edge. */
.footer-sidebar {
	padding-bottom: 36px;
}

/* --- Single full width, centered footer column ----------------------------
   From 1008px up, Twenty Fourteen floats every footer widget into a 25%
   column, which is why a lone widget sits in the left quarter of the bar.
   This site uses one wide centered block instead, so the float and the fixed
   width are removed and everything is centered.
   ------------------------------------------------------------------------ */
.footer-sidebar .widget {
	float: none;
	width: auto;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

.footer-sidebar .widget .widget-title {
	text-align: center;
}

/* If you use a Navigation Menu or Pages widget instead of typing the links by
   hand, these render it as one centered row rather than a stacked list. With a
   Text or Custom HTML widget they simply do nothing. */
.footer-sidebar .widget ul,
.footer-sidebar .widget ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-sidebar .widget li {
	border: 0;
	display: inline-block;
	padding: 0 12px;
}

/* --- Centering, anchored to a selector proven to match ---------------------
   Earlier versions targeted #supplementary .footer-sidebar .widget, which is
   the markup Twenty Fourteen's sidebar-footer.php is documented to produce.
   That never took effect on this site, even at ID specificity with
   !important, which means the footer content is not sitting in that
   structure.

   .site-footer is known to match, because it is what paints the navy
   background. Anchoring here catches the text wherever it actually lives in
   the footer, whatever wrapper markup WordPress generates around it.

   This centers every piece of text in the footer, which is the intent: a row
   of links, then the copyright line, all centered.
   ------------------------------------------------------------------------ */
.site-footer,
.site-footer * {
	text-align: center !important;
}

/* Full width single column.

   Masonry is switched off in functions.php, which is the real fix. These
   rules are a safety net: if masonry ever loads again, from a plugin or a
   future parent theme change, they neutralize the inline position, height and
   width it writes onto these elements.

   Note width is 100%, not auto. An absolutely positioned element with auto
   width shrink-wraps to its content, which is what pinned the footer text
   into a narrow box at the left edge. */
.site-footer .footer-sidebar {
	height: auto !important;
}

.site-footer .footer-sidebar .widget {
	position: static !important;
	top: auto !important;
	left: auto !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Search and buttons inside footer widgets. */
.footer-sidebar .widget input,
.footer-sidebar .widget textarea {
	background-color: rgba( 255, 255, 255, 0.1 );
	border-color: rgba( 255, 255, 255, 0.3 );
	color: #fff;
}

.footer-sidebar .widget input[type="button"],
.footer-sidebar .widget input[type="reset"],
.footer-sidebar .widget input[type="submit"] {
	background-color: #fff;
	color: var( --mhib-navy );
}


/* =============================================================================
   10.0  CONTENT SIDEBAR WIDGET COLORS
   Twenty Fourteen styles sidebar links in its default green (#24890d). These
   change them to brand navy so the sidebar matches the header and footer.
   ========================================================================== */

.content-sidebar .widget a {
	color: var( --mhib-navy );
}

.content-sidebar .widget a:hover,
.content-sidebar .widget a:focus {
	color: var( --mhib-navy-lighter );
	text-decoration: underline;
}

.content-sidebar .widget .widget-title {
	color: var( --mhib-navy );
}

.content-sidebar .widget_nav_menu li {
	border-color: rgba( 0, 0, 0, 0.1 );
}


/* =============================================================================
   11.0  WORDPRESS CREDIT
   ========================================================================== */

.site-info {
	display: none;
}


/* =============================================================================
   12.0  OPTIONAL BLOCKS
   ========================================================================== */

/* --- Change the right sidebar width ---------------------------------------
   Replace 300px in ALL THREE places below with your new width. The negative
   margin-left and the width must always be the same number, and the
   margin-right on .site-content must match it too.

@media screen and (min-width: 1008px) {

	.site-content {
		margin-right: 340px;
	}

	.content-sidebar {
		margin-left: -340px;
		width: 340px;
	}
}
--------------------------------------------------------------------------- */