/*
Theme Name:   Twenty Thirteen Child - Sampley Construction
Theme URI:    http://localhost/sampley-construction
Description:  Child theme of Twenty Thirteen carrying the Sampley Construction design. All layout, styling and scripts load from assets/ so the original template renders unchanged.
Author:       Sampley Construction
Author URI:   http://localhost/sampley-construction
Template:     twentythirteen
Version:      1.0.6
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentythirteen-child
Tags:         construction, business, one-column, custom-menu, featured-images
*/

/*
 * The design itself lives in assets/css/style.css, loaded from functions.php exactly as
 * it shipped in the static template. That file is the one to edit for design changes.
 *
 * This file holds styling only for elements the theme adds that the static HTML never
 * had. It is loaded after assets/css/style.css.
 */

/* ------------------------------------------------ Dropdown indicator icon ---- */

/*
 * The nav link is set to line-height:10px !important while its .rolling-text child sits
 * in its own 30px-tall inline-block. An inline <i> therefore lines up against the link's
 * 10px line box and drops below the text. Giving the icon the same 30px band as the
 * label, and aligning the two boxes by their tops, centres the glyph on the text.
 */
.navbar .navbar-nav .nav-link > .ti-angle-down {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	vertical-align: top;
}

.navbar .navbar-nav .nav-link > .rolling-text {
	vertical-align: top;
}

/* The caret turns with the menu, matching the transition already on .dropdown .nav-link i. */
.navbar .navbar-nav .nav-link.show > .ti-angle-down {
	transform: rotate(180deg);
}

/* --------------------------------------- Service section sub-headings ---- */

/*
 * "Fence Development" and "Deck Development" are plain <h4>s sitting between the body
 * copy and the feature grid, and they read as too faint to register as headings against
 * the light section background. Giving them the brand blue, more weight and letter
 * spacing separates them from the paragraph text above and the list below.
 */
.about2 h4 {
	color: var(--clr-primary);
	font-weight: var(--fw-semi-bold);
	font-size: 23px;
	letter-spacing: 0.4px;
	margin-bottom: 16px;
}

/* ------------------------------------------------ Pinned service media ---- */

/*
 * The images in the two service sections are pinned by assets/js/sampley-enhancements.js
 * while the long text column scrolls.
 *
 * Deliberately no width rules here. .sampley-sticky-media sits on the col-lg-3 columns,
 * and a `width: 100%` on that selector beats Bootstrap's own .col-lg-3 (same specificity,
 * this file loads later), which blows the columns out to full width and drops the images
 * below the text. The grid sizes the columns; JavaScript only pins their contents.
 */