/* Columbia Gorge Gutters — site-specific additions only.
   The template's own stylesheets are untouched. */

/* image logo in the template's logo slot */
.header .logo a { display: block; }
.header .logo img { height: 84px; width: auto; display: block; }

/* screen-reader-only text (homepage H1 lives here; the hero has no text box) */
.cgg-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* page H1 inside the slider box, styled exactly like the template's slide h2 */
.slider-content-box h1
{
	color: #FFF;
	border-bottom: 1px solid #F4BC16;
	padding: 21px 30px 20px;
	background: rgba(38, 38, 40, 0.68);
	font-size: 29px;
	line-height: 40px;
}
.slider-content-box .more + .more { margin-left: 10px; }

/* sticky mobile bottom bar: Call + Book */
.cgg-mobile-bar { display: none; }

@media screen and (max-width:767px)
{
	.slider-content-box h1 { font-size: 21px; line-height: 32px; padding: 16px 25px 17px; }
	.cgg-mobile-bar
	{
		display: flex;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 100;
		background: #F5F5F5;
		border-top: 1px solid #E2E6E7;
		padding: 10px;
		gap: 10px;
	}
	.cgg-mobile-bar a.more { flex: 1; display: block; }
	.site-container { padding-bottom: 72px; }
	.scroll-top.animated-element { bottom: 90px; }
}
@media screen and (max-width:479px)
{
	.slider-content-box h1 { font-size: 16px; font-weight: 500; line-height: 26px; padding: 11px 18px 11px; }
	.header .logo img { height: 64px; }
}

/* single-slide hero: no arrows or bullets to page through */
.revolution-slider .tparrows,
.revolution-slider .tp-bullets { display: none !important; }

/* quote button as the last nav item: restore the gap the .more class removes */
.sf-menu > li > a.more.small { margin-left: 27px; }

/* sidebar "Call or text" buttons: keep the email address on one line beside its icon */
.buttons li.template-mail a { white-space: nowrap; padding-left: 0; padding-right: 6px; font-size: 12px; letter-spacing: 0; }

/* announcement bar without the icon */
.announcement.cgg-noicon h3, .announcement.cgg-noicon p.description { margin-left: 0; }

/* desktop: room for a long page-header H1 on one line */
@media screen and (min-width:1190px) { .page-header-left { width: 760px; } .page-header-right { width: 340px; } }

/* footer "Latest Posts" thumbnails */
.row-4-4 .blog.small .post-image img { width: 70px; height: 70px; object-fit: cover; display: block; }

/* How it works cards: equal height on desktop and tablet */
@media screen and (min-width:768px) { .services-list { display: flex; align-items: stretch; } .services-list li { float: none; } }

/* keyboard focus */
:focus-visible { outline: 2px solid #262628; outline-offset: 2px; }
.ui-accordion-header.ui-state-focus { outline: 2px solid #262628; outline-offset: 2px; }

/* shorter desktop hero, matching the slider gridheight set in js/main.js */
@media screen and (min-width:1024px) { .revolution-slider { height: 400px; } }

/* images inside the template's image-wrapper fit their column (the template only does this for .radius images) */
.image-wrapper > img { max-width: 100%; height: auto; }

/* =====================================================================
   Mobile and tablet patch, 2026-09-16 (verified audit findings M01-M27)
   ===================================================================== */

/* M09: photos paint immediately at their real size instead of behind a
   fixed-height spinner that made the page jump. width/height attributes
   on each <img> reserve the space. */
.re-preload > img,
.re-preload > .image-wrapper > img,
.services-list a > img { display: block !important; }
.re-preloader { display: none !important; }
.services-list li > a,
.re-preload,
.re-preload > .image-wrapper { opacity: 1 !important; }
.site-container img[width][height] { max-width: 100%; height: auto; }

/* M21: town tags readable at every width (#999 on grey was about 2.7:1) */
.taxonomies a { color: #6B6B6B; }

/* M01: tap-sized top-bar links on tablets */
@media screen and (max-width:1189px)
{
	.header-top-bar .contact-details li a { display: inline-block; padding: 12px 0; margin: -12px 0; color: #444; }
}

/* M05 + M13: tablet footer grid and a compact sticky header */
@media screen and (min-width:768px) and (max-width:1189px)
{
	.row-4-4 .column-1-4:nth-child(odd) { clear: left; }
	.header-container.sticky.move { padding: 8px 0 4px; }
	.header-container.sticky.move .logo img { height: 56px; }
	.header-container.sticky.move .menu-container { margin-top: 2px; }
}

@media screen and (max-width:767px)
{
	/* M03: 16px body copy on phones (template sets 14px) */
	.theme-page p.description,
	.theme-page p.description.t1,
	.theme-page .list li.template-bullet,
	.theme-page .services-list li p,
	.theme-page .accordion .ui-accordion-header h5 { font-size: 16px; line-height: 26px; }

	/* M11: 44px hamburger; the space beside the logo no longer links home */
	.header .mobile-menu-switch { padding-left: 14px; }
	.header .logo { width: 418px; }
	.header .logo a { display: inline-block; }

	/* M14: the template's own phone value for the subpage content gap
	   (style.css marks the 70px desktop value !important) */
	.row.margin-top-70 { margin-top: 55px !important; }

	/* M15: before/after pairs stay side by side on phones */
	.row.cgg-pair > .column-1-2 { width: calc(50% - 5px); margin-top: 0; }
	.row.cgg-pair > .column-1-2 + .column-1-2 { margin-left: 10px; }

	/* M18: the scroll-to-top arrow sat on text and on the GET A QUOTE bar */
	.scroll-top.animated-element { display: none !important; }

	/* M21: 44px town tags with 8px spacing */
	.taxonomies li { margin-right: 8px; margin-bottom: 8px; }
	.taxonomies a { padding: 14px 12px; font-size: 12px; }
}

@media screen and (max-width:479px)
{
	/* M01: phone number and hours visible in the top bar, no empty strip or arrow */
	.header-top-bar { display: block; padding: 6px 0; }
	.header-top-bar-container .header-toggle { display: none; }
	.header-top-bar .search-container { display: none; }
	.header-top-bar .contact-details { display: block; overflow: hidden; }
	.header-top-bar .contact-details li { clear: none; float: left; padding: 10px 12px 10px 0; font-size: 14px; line-height: 24px; color: #666; }
	.header-top-bar .contact-details li.template-mail { display: none; }
	.header-top-bar .contact-details li a { padding: 10px 0; margin: -10px 0; }

	/* M11 */
	.header .logo { width: 256px; }

	/* M14 */
	.row.margin-top-70 { margin-top: 35px !important; }
}

/* M38: blog byline reads as metadata, not as the first sentence */
p.description.cgg-byline { font-size: 13px; line-height: 20px; color: #999; }
@media screen and (max-width:767px) { .theme-page p.description.cgg-byline { font-size: 13px; line-height: 20px; } }

/* =====================================================================
   Regression fixes, 2026-09-16 (sweep after the mobile patch)
   ===================================================================== */

/* R1: logo back to its set height. The img[width][height] rule above
   outranked .header .logo img once the logo got width/height attributes.
   Same specificity, later in the file, so this wins; the tablet sticky
   rule (.header-container.sticky.move .logo img, 56px) still outranks it. */
.site-container .header .logo img { height: 84px; width: auto; max-width: none; }

/* R5c: byline contrast (#999 on white was about 2.8:1) */
p.description.cgg-byline { color: #6B6B6B; }

/* R3d: phone numbers in running text never break across lines */
.theme-page p a[href^="tel:"] { white-space: nowrap; }

/* R3e: inline buttons take their real height so the margin below them is kept */
.theme-page .margin-top-40 > a.more,
.theme-page .margin-top-30 > a.more,
.theme-page .column-1-1 > a.more { display: inline-block; }

/* R3h: readable line length for full-width paragraphs on desktop */
@media screen and (min-width:1190px)
{
	.theme-page .column-1-1 > p.description,
	.theme-page .column-1-1 > .list { max-width: 780px; }
}

@media screen and (max-width:767px)
{
	/* R3c: contact page icon rows match the 16px body copy */
	.theme-page .features-list li p { font-size: 16px; line-height: 26px; }

	/* R3f + R4c: photo stacked above text (about, town pages): one 30px gap instead of 64-70px */
	.theme-page .row > .column-1-2.re-preload + .column-1-2 { margin-top: 30px; }
	.theme-page .row > .column-1-2 + .column-1-2 > p.description:first-child { margin-top: 0; }
	.theme-page .re-preload .image-wrapper { vertical-align: top; }
}

@media screen and (max-width:479px)
{
	/* R1: phone logo height */
	.site-container .header .logo img { height: 64px; }
}

/* R1b/R2b/R4b: on 400-479px phones use the screen width with 16px gutters
   instead of the template's fixed 300px column (375 and narrower unchanged) */
@media screen and (min-width:400px) and (max-width:479px)
{
	.site-container .header-top-bar,
	.site-container .header,
	.site-container .announcement,
	.site-container .row:not(.full-width) { width: auto; margin-left: 16px; margin-right: 16px; }
	.site-container .row .row:not(.full-width) { margin-left: 0; margin-right: 0; }
	.site-container .row.full-width > .row { width: auto; margin-left: 16px; margin-right: 16px; }
	.site-container .header .logo { width: calc(100vw - 76px); }
	.site-container .blog .post-details,
	.site-container .row .blog .post-content,
	.site-container .services-list li { width: auto; }
	.site-container .menu-container,
	.site-container .row .column,
	.site-container .row .column-1-1 { width: 100%; }
	.site-container .row.cgg-pair > .column-1-2 { width: calc(50% - 5px); }
}

/* =====================================================================
   Copy pass layout, 2026-09-17
   ===================================================================== */
/* no one-word last lines in body copy and small headings */
.theme-page p.description, .theme-page h4.box-header { text-wrap: pretty; }
/* town lists: never split a town name across lines */
.cgg-towns a { white-space: nowrap; }
/* homepage About teaser: readable line length */
.cgg-teaser { max-width: 760px; margin-left: auto; margin-right: auto; }
/* About page: text sits centered beside the round photo on tablet and desktop */
@media screen and (min-width:768px)
{
	.row.cgg-about-intro { display: flex; align-items: center; }
	.row.cgg-about-intro > .column { float: none; }
}

/* =====================================================================
   Single-row desktop header, 2026-09-17 (1190px and up)
   Logo | nav | phone, email, hours, search, GET A QUOTE on one line,
   inside the template's 1170px column. The grey top bar stays in the
   page but is collapsed (not display:none, so js/main.js still sees it
   as visible) and returns unchanged below 1190px, as does the nav pill.
   ===================================================================== */
.cgg-hc { display: none; }

@media screen and (min-width:1190px)
{
	/* old top bar: no height, and out of the tab order */
	.header-top-bar-container { height: 0; overflow: hidden; visibility: hidden; }

	/* the row: 1170px, with at least 20px either side on narrow desktops */
	.site-container .header
	{
		display: flex;
		align-items: center;
		width: calc(100% - 40px);
		max-width: 1170px;
	}
	.header::before, .header::after { display: none; }
	.header .logo { display: block; width: auto; flex: none; margin-right: auto; }
	.header .menu-container { display: block; width: auto; flex: none; }
	.header .sf-menu > li.cgg-nav-quote { display: none; }

	/* contact group: one thin divider, phone as text, quiet icons, the pill */
	.cgg-hc
	{
		display: flex;
		align-items: center;
		flex: none;
		margin-left: 28px;
		padding-left: 18px;
		border-left: 1px solid #E2E6E7;
	}
	.cgg-hc-phone,
	.cgg-hc-phone:visited
	{
		display: block;
		padding: 8px 0;
		font-family: 'Raleway';
		font-size: 15px;
		font-weight: 700;
		line-height: 24px;
		color: #000;
		white-space: nowrap;
	}
	.cgg-hc-phone::before { color: #F4BC16; font-size: 15px; margin-right: 9px; }
	.cgg-hc-phone:hover { color: #F4BC16; opacity: 1; }

	.cgg-hc-icons { display: flex; align-items: center; margin: 0 0 0 10px; padding: 0; list-style: none; }
	.cgg-hc-icons > li { position: relative; float: none; }
	.cgg-hc .cgg-hc-icon
	{
		display: block;
		min-width: 40px;
		height: 40px;
		padding: 0;
		border: none;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		color: #6B6B6B;
		cursor: pointer;
	}
	.cgg-hc span.cgg-hc-icon { cursor: default; }
	.cgg-hc .cgg-hc-icon:hover,
	.cgg-hc li:focus-within .cgg-hc-icon { color: #000; opacity: 1; }
	.cgg-hc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

	/* email address and hours open on hover or keyboard focus, styled like the search dropdown */
	.cgg-hc-tip
	{
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		margin-top: 5px;
		padding: 13px 16px;
		background: #F5F5F5;
		font-family: 'Raleway';
		font-size: 13px;
		font-weight: 500;
		line-height: 20px;
		color: #444;
		white-space: nowrap;
		z-index: 99;
	}
	/* invisible bridge over the 5px gap so the panel stays open while the pointer moves onto it */
	.cgg-hc-tip::before,
	.header-container.sticky.move .cgg-hc .search::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 5px; }
	.cgg-hc-icons > li:hover .cgg-hc-tip,
	.cgg-hc-icons > li:focus-within .cgg-hc-tip { display: block; }

	.cgg-hc .search { right: 0; }
	.cgg-hc .search .template-search { display: block; padding: 18px 18px 17px 18px; color: #AAA; }

	/* the same pill as at the end of the tablet menu */
	.cgg-hc a.more.small.cgg-hc-quote
	{
		margin-left: 16px;
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		color: #444;
		white-space: nowrap;
	}
	.cgg-hc a.more.small.cgg-hc-quote:hover { color: #F4BC16; }

	/* sticky copy of the row: 80px tall. main.js binds the search click only
	   on the original, so in the copy search opens on hover and focus */
	.header-container.sticky.move { padding: 10px 0; }
	.site-container .header-container.sticky.move .logo img { height: 60px; }
	.header-container.sticky.move .cgg-hc .search-container > .template-search { pointer-events: none; }
	.header-container.sticky.move .cgg-hc .search-container:hover .search,
	.header-container.sticky.move .cgg-hc .search-container:focus-within .search { display: block; }
}

/* large monitors: a slightly wider row, and the hours read as text beside the clock */
@media screen and (min-width:1600px)
{
	.site-container .header { max-width: 1290px; }
	.cgg-hc .cgg-hc-icons li.cgg-hc-hours .cgg-hc-icon
	{
		padding: 0 10px;
		font-family: 'Raleway';
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
		color: #6B6B6B;
	}
	.cgg-hc-hours .cgg-hc-icon::before { font-size: 14px; margin-right: 8px; }
	.cgg-hc-hours .cgg-hc-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
	.cgg-hc-icons > li.cgg-hc-hours .cgg-hc-tip { display: none; }
}