/*
 Theme Name:   Roof Child
 Theme URI:    http://themeforest.net/user/VictorThemes
 Description:  Roof Child Theme
 Author:       VictorThemes
 Author URI:   http://themeforest.net/user/VictorThemes/portfolio
 Template:     roof
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         one-column, two-columns, left-sidebar, right-sidebar, custom-menu, featured-images, post-formats, theme-options, translation-ready
 Text Domain:  roof-child
*/

/* Write Custom CSS */

/* ==========================================================================
   SITE-WIDE: header only (scoped to header.roof-header)
   ========================================================================== */

/* Header: phone number uses the same font as the other contact details */
header.roof-header .contact-item .contact-info > a {
	display: block;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	letter-spacing: 0.2px;
	color: #888888;
}
@media screen and (max-width: 1199px) {
	header.roof-header .contact-item .contact-info > a {
		font-size: 13px;
	}
}

/* Mobile header (≤992px, when the mobile menu is active):
   logo left, black hamburger top-right on the same row, no dark bar, no gap */
@media (max-width: 992px) {
	header.roof-header {
		position: relative;
		vertical-align: top; /* header is inline-block: removes the white gap under it */
	}
	header.roof-header .sticky-wrapper {
		height: 0 !important;
	}
	header.roof-header .roof-navigation.mean-container {
		position: static !important;
		width: auto !important;
	}
	header.roof-header .mean-container .mean-bar {
		position: static;
		min-height: 0;
		height: 0;
		padding: 0;
		background: transparent !important;
	}
	header.roof-header .mean-container a.meanmenu-reveal {
		top: 0 !important;
		bottom: 0;
		right: 10px !important;
		margin: auto 0;
		height: 44px;
		padding: 13px 12px !important;
		background: transparent !important;
		z-index: 10;
	}
	header.roof-header .mean-container a.meanmenu-reveal span {
		background: #000 !important;
	}
	header.roof-header .mean-container .mean-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 0;
		z-index: 9999;
	}
}

/* ==========================================================================
   SITE-WIDE: footer only (widget classes .f-logo-cls / .quick-menu-links-cls)
   ========================================================================== */

/* Tablet/desktop: footer widgets were 3/12 + 3/12 + 6/12 with the logo flush
   left, so the block sat off to the left. Make three equal columns and centre
   each widget in its column: Quick Links lands on the page centre and the logo
   and garden photo sit evenly either side. */
@media (min-width: 768px) {
	footer .roof-footer .container > .row > [class*="col-md-"] {
		flex: 0 0 33.33333333%;
		max-width: 33.33333333%;
	}
	footer .roof-footer .roof-widget {
		text-align: center;
	}
	/* Garden photo: WP caption box has an inline 425px width */
	footer .roof-footer .f-logo-cls-2 .wp-caption {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	/* Copyright bar: Netsplashing logo to the right edge (lines up with the
	   right edge of the garden photo above) */
	footer .roof-copyright .cprt-right {
		margin-left: auto;
	}
	/* Copyright text: the theme's column class is broken ("ddddcol-sm-6"), so it
	   had no 15px gutter and started left of everything else in the footer */
	footer .roof-copyright .cprt-left {
		padding-left: 15px;
		padding-right: 15px;
	}
	footer .roof-copyright .cprt-right .f-logo-clsd {
		text-align: right;
	}
}

/* Copyright bar, 768px-1199px: the container is narrower here, and the copyright
   text (~556px) + the logo column's fixed 50% didn't fit on one line, so the
   Netsplashing logo dropped below the text. Let the logo column take the space
   left over instead, so it stays on the same line, on the right. */
@media (min-width: 768px) and (max-width: 1199px) {
	footer .roof-copyright .row {
		flex-wrap: nowrap;
	}
	footer .roof-copyright .cprt-right {
		flex: 1 1 auto;
		max-width: none;
		width: auto;
	}
}
/* Additional CSS (Customizer) pushes the logo down 10px up to 1200px, for when it
   sat under the text. On the same line that offset puts it 5px below the text's
   middle, so drop it here; phones keep it (logo still sits under the text). */
@media (min-width: 768px) and (max-width: 1200px) {
	footer .roof-copyright .f-logo-clsd img {
		margin-top: 0;
	}
}

/* Copyright bar, phones (below 768px): text and Netsplashing logo stacked and
   centred. From 576px Bootstrap's col-sm-6 made the logo column half the width,
   starting on the left, so the logo sat centred in the left half, off-centre
   under the text. Give both parts the full width. */
@media (max-width: 767px) {
	footer .roof-copyright .cprt-left,
	footer .roof-copyright .cprt-right {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Phones: footer logo and "Quick Links" menu centred.
   Same 768px breakpoint as the old Additional CSS rule that set Quick Links
   to text-align:left; the extra "footer" in the selector makes this one win. */
@media (max-width: 768px) {
	footer .f-logo-cls.roof-widget {
		text-align: center;
	}
	footer .quick-menu-links-cls.roof-widget.widget_text {
		text-align: center;
	}
}

/* ==========================================================================
   SITE-WIDE: green-line section headings (WPBakery "Separator with Text")
   ========================================================================== */

/* One design for every heading: brand green #2a8e25, 4px line, capitals.
   The home headings got their 4px line by accident (WP core gives any inline
   border-color a solid border on all sides, so the 3px default bottom border
   appeared); the About heading used the lighter preset green at 1px.
   Set it explicitly so all match and a WP/WPBakery update can't change it. */
.vc_separator.vc_separator-has-text .vc_sep_holder .vc_sep_line {
	height: 4px;
	border-style: solid;
	border-width: 1px 0 3px;
	border-color: #2a8e25 !important;
}
.vc_separator.vc_separator-has-text .vc_icon_element-inner {
	border-color: #2a8e25 !important;
}
.vc_separator.vc_separator-has-text .vc_icon_element-inner .vc_icon_element-icon {
	color: #2a8e25 !important;
}
.vc_separator.vc_separator-has-text h4 {
	text-transform: uppercase;
}

/* ==========================================================================
   PAGE SECTIONS: custom classes set in WPBakery (Row/Element > Extra class name)
   HOME PAGE:
   .gc-mobile-slider   - row with Smart Slider (phones)
   .gc-desktop-slider  - row with Rev Slider (PC / iPad)
   .gc-cta-row         - brown "Call Rob & Seb" row
   .gc-tiler-image     - tiler image (single image element)
   .gc-garden-image    - garden image above the white fence (single image element)
   ABOUT PAGE:
   .gc-about-intro     - first row (green tools image + "No Job Too Small")
   .gc-services-boxes  - "Rob & Son Services" hover-box row
   ========================================================================== */

/* Slider: Rev Slider on PC/iPad, simple Smart Slider on phones */
.gc-mobile-slider {
	display: none !important;
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
	.gc-desktop-slider {
		display: none !important;
	}
	.gc-mobile-slider {
		display: block !important;
	}
}

/* Hover (flip) boxes: stop the front title showing mirrored on the back
   (iPhone Safari ignores WPBakery's unprefixed backface-visibility) */
.gc-services-boxes .vc-hoverbox-block {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: flat;
	transform-style: flat;
}
.gc-services-boxes .vc-hoverbox-block * {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
/* Fallback: swap the faces' content halfway through the 0.5s flip */
.gc-services-boxes .vc-hoverbox-front-inner {
	transition: opacity 0s 0.25s;
}
.gc-services-boxes .vc-hoverbox:hover .vc-hoverbox-front-inner {
	opacity: 0;
}
.gc-services-boxes .vc-hoverbox-back-inner {
	opacity: 0;
	transition: opacity 0s 0.25s;
}
.gc-services-boxes .vc-hoverbox:hover .vc-hoverbox-back-inner {
	opacity: 1;
}
/* Size each box from its content instead of WPBakery's one-time JS height
   (measured before the heading font loads, so text/button spilled out).
   Front and back share one grid cell, so the box is as tall as the taller face. */
.gc-services-boxes .vc-hoverbox-inner {
	display: grid !important;
	min-height: 250px !important;
}
.gc-services-boxes .vc-hoverbox-block {
	position: relative !important;
	grid-area: 1 / 1;
	height: auto !important;
}

/* Services boxes: 3 + 3 columns from 768px to 1024px, equal heights, 35px gaps */
@media (min-width: 768px) and (max-width: 1024px) {
	.vc_row.gc-services-boxes {
		display: flex !important;
		flex-wrap: wrap;
		padding-top: 115px !important; /* row 80px + the 35px column padding removed below */
	}
	.gc-services-boxes > .wpb_column.vc_col-sm-2 {
		width: 33.3333% !important;
		display: flex;
	}
	.gc-services-boxes > .wpb_column > .vc_column-inner {
		width: 100%;
		padding-top: 0 !important;
		display: flex;
	}
	.gc-services-boxes > .wpb_column > .vc_column-inner > .wpb_wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.gc-services-boxes .vc-hoverbox-wrapper,
	.gc-services-boxes .vc-hoverbox {
		flex: 1;
		display: flex;
	}
	.gc-services-boxes .vc-hoverbox-inner {
		flex: 1;
	}
}

/* Brown "Call Rob & Seb" row: green arrow tip met the button edge-to-edge
   (theme: left -28px, 27px wide, button has a 1px border), leaving a thin
   tan seam between them. Overlap the tip by 1px so no gap shows. */
.gc-cta-row .roof-consult .roof-btn:before {
	left: -27px;
}

/* Brown "Call Rob & Seb" row, tablet/desktop: the column has offset-1 on the left
   (8.33%) pulled back 50px by WPBakery's inner margin, but nothing on the right,
   so the brown box, the "ROB & SON SERVICES" lines and the right image ran into
   the right screen edge. Mirror the same gap on the right so it is centred. */
@media (min-width: 768px) {
	.gc-cta-row > .wpb_column.vc_col-xs-offset-1 {
		width: 83.33333333%;
		margin-right: 8.33333333%;
	}
	.gc-cta-row > .wpb_column > .vc_column-inner {
		margin-right: -50px;
	}
}

/* "ROB & SON" heading, 768px-1199px: the left image is hidden here, so the
   middle column starts 15px left of the brown box. Stretch the green lines to
   the brown box edges, the same as the "ROB & SON SERVICES" lines below it.
   (Column content = half the brown box + 5px, so 200% - 10px = box width.) */
@media (min-width: 768px) and (max-width: 1199px) {
	.gc-cta-row .vc_inner .vc_col-sm-6 .vc_separator.vc_separator-has-text {
		width: calc(200% - 10px) !important;
		max-width: none;
		margin-left: 15px;
	}
}

/* "ROB & SON" heading (middle 6/12 column between the two images): stretch its
   green lines to the full width of the brown box above, like the other headings.
   Middle column content = half the brown box + 5px, so 200% - 10px = box width.
   Only from 1200px, where both side images show and the column is centred. */
@media (min-width: 1200px) {
	.gc-cta-row .vc_inner .vc_col-sm-6 .vc_separator.vc_separator-has-text {
		width: calc(200% - 10px) !important;
		max-width: none;
		margin-left: calc(-50% + 5px);
	}
	/* The stretched lines now run over the two side images. All three columns
	   were vertically centred, so depending on how much text is in the middle the
	   images and the heading slid into each other. Pin everything to the top:
	   heading first, both images 25px under it (heading = 40px top padding +
	   60px icon), whatever the length of the middle text.
	   The right image's own 50px top padding is dropped so both line up. */
	.gc-cta-row .vc_inner > .wpb_column > .vc_column-inner {
		justify-content: flex-start !important;
	}
	.gc-cta-row .vc_inner > .vc_col-sm-3 > .vc_column-inner {
		padding-top: 125px !important;
	}
	.gc-cta-row .vc_inner > .vc_col-sm-3 .wpb_single_image {
		padding-top: 0 !important;
	}
}

/* Home, below "ABOUT ROB & SON": the two image + bold heading rows. WPBakery gave
   the heading 30px top padding, so its text started ~34px below the photo top.
   Line the capital letters up with the photo top (-4px = Raleway 24px leading).
   Home only: the same row pattern on Gardening Services is left alone. */
@media (min-width: 768px) {
	.home .vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image:first-child) > .wpb_column > .vc_column-inner > .wpb_wrapper > .vc_custom_heading:first-child {
		padding-top: 0 !important;
		margin-top: -4px;
	}
}

/* Phones: brown box full width and centred, no white space above it;
   smaller white gap above the tiler image */
@media (max-width: 767px) {
	.gc-cta-row > .wpb_column {
		margin-left: 0 !important;
		width: 100% !important;
	}
	.gc-cta-row > .wpb_column > .vc_column-inner {
		margin-left: 0 !important;
		padding-top: 0 !important;
	}
	.gc-cta-row .roof-consult {
		display: block;
		width: 100%;
	}
	.gc-cta-row .roof-consult .container {
		padding: 0 15px;
	}
	.gc-cta-row .roof-consult .pull-left,
	.gc-cta-row .roof-consult .pull-right {
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		text-align: center;
	}
	.gc-cta-row .roof-consult .pull-left p {
		display: block;
	}
	.gc-cta-row .roof-consult .roof-btn {
		display: inline-block;
		max-width: 100%;
		white-space: normal;
		padding: 15px 18px;
		line-height: 1.4;
	}
	/* 108px -> ~58px */
	.wpb_single_image.gc-tiler-image {
		padding-top: 0 !important;
	}
	/* About page: no white gap between the title banner and the first image.
	   Theme content spacing is 160px; WPBakery already pulls this row up 100px. */
	.vc_row.gc-about-intro > .wpb_column > .vc_column-inner {
		margin-top: -160px !important;
	}
	/* Garden image: full column width like the white fence image below it */
	.wpb_single_image.gc-garden-image .vc_figure,
	.wpb_single_image.gc-garden-image .vc_single_image-wrapper {
		display: block;
		width: 100%;
	}
	.wpb_single_image.gc-garden-image img {
		width: 100%;
		height: auto;
	}
}

/* Space above the footer. The "XL" page spacing option (used by the About page)
   adds 160px under the content on every screen size, so About had a much bigger
   gap above the footer than the other pages. Keep the XL top spacing, but use the
   theme's normal bottom spacing: 100px, 40px from 850px down. */
.roof-main-wrap.padding-xl {
	padding-bottom: 100px !important;
}
@media screen and (max-width: 850px) {
	.roof-main-wrap.padding-xl {
		padding-bottom: 40px !important;
	}
}

/* Contact page, tablet/desktop: the form box is the last thing on the page and
   its 35px bottom margin added to the 100px page spacing above the footer. On
   phones that margin is the gap between the form and the "Contact Rob" box, so
   it stays there. */
@media (min-width: 768px) {
	.wpb_text_column.vc_custom_1784211577276 {
		margin-bottom: 0 !important;
	}
}

/* Contact page (all screen sizes): the beige form box ended flush with the
   bottom of the "Send Now" button. Give it the same 35px space as the FAQ form.
   (vc_custom_1784211577276 = the class WPBakery uses for this box's colour) */
.wpb_text_column.vc_custom_1784211577276 {
	padding-bottom: 35px !important;
}