/* Cheers San Diego site base: page grid, header, slide-out menu, sections, footer, home photo viewer.
   Written for cheerssd.com on 2026-10-13. Only rules the pages use. */

/* ---------- base ---------- */
:root { font-size: 16px; }
html { width: 100%; height: 100%; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; font-size: .8333rem; }
a, input, button { touch-action: manipulation; background-color: inherit; margin: 0; padding: 0; outline: none; border: none; }
img { margin: 0; border: none; }

/* ---------- layout helpers ---------- */
.frame { float: left; width: 100%; box-sizing: border-box; }
.flex { display: flex; flex-flow: row nowrap; box-sizing: border-box; }
.flex > * { float: none !important; }
.flex > div { box-sizing: border-box; }
.flex.left { justify-content: flex-start; }
.flex.right { justify-content: flex-end; }
.flex.center { justify-content: center; }
.flex.top { align-items: flex-start; }
.flex.middle { align-items: center; }
.flex.bottom { align-items: flex-end; }
.flex.wrap { flex-flow: row wrap; }
.flex.wrap.divnowrap > div { white-space: nowrap; }
.flex.stack { flex-flow: column; }
.flex.stack > * { min-height: 0; }
.flex.stack.top { justify-content: flex-start; }
.flex.stack.bottom { justify-content: flex-end; }
.flex.stack.middle { justify-content: center; }
.flex.stack.left { align-items: flex-start; }
.flex.stack.right { align-items: flex-end; }
.flex.stack.center { align-items: center; }
.flex > .grow { flex: 1 0 0%; box-sizing: border-box; }
.flex.stack > .grow { min-height: 0; height: 0; }

/* ---------- type sizes ---------- */
.font10pt { font-size: .8332rem; }
.font11pt { font-size: .9165rem; }
.font12pt { font-size: .9998rem; }
.font14pt { font-size: 1.1664rem; }
.font40pt { font-size: 3.3322rem; }

/* ---------- header bar ---------- */
#banner { position: fixed; z-index: 10; height: 64px; padding: 0; color: #fff; transition: background-color .3s; }
.wrapper { max-width: 1800px; }
@media screen and (max-width: 2100px) { .wrapper { max-width: 1500px; } }

/* ---------- menu button (three lines that fold into an X) ---------- */
.menu { display: flex; padding: 0; border: none; background-color: transparent; cursor: pointer; }
#MenuButton { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.line { fill: none; stroke: #fff; stroke-width: 6; transition: stroke-dasharray .3s cubic-bezier(.4, 0, .2, 1), stroke-dashoffset .3s cubic-bezier(.4, 0, .2, 1); }
.line1, .line3 { stroke-dasharray: 60 207; }
.line2 { stroke-dasharray: 60 60; }
.opened .line1, .opened .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; }
.opened .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; }

/* ---------- slide-out menu ---------- */
#Menu { top: 0; left: 0; }
.menuItem { box-sizing: border-box; width: 100%; margin-bottom: 5px; padding: 8px; border-radius: 5px; color: #fff; font-size: 1.2rem; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .7s; }
.menuItem:hover { background-color: rgb(150, 150, 150); }
@media screen and (max-width: 700px) { .menuItem { font-size: 1rem; } }

/* ---------- buttons ---------- */
.button1, .button2 { padding: 12px 20px 7px; border-radius: 4px; font-family: serif; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: .3s; }
.button1 { color: rgba(255, 255, 255, .9); border: solid 3px rgba(255, 255, 255, .9); background-color: rgba(50, 50, 50, .2); }
.button1:hover { background-color: rgba(255, 255, 255, .9); color: rgb(50, 50, 50); }
.button2 { color: rgba(50, 50, 50, .9); border: solid 3px rgb(50, 50, 50); }
.button2:hover { background-color: rgb(50, 50, 50); color: rgba(255, 255, 255, .9); }

/* ---------- sections ---------- */
.fixed-banner { margin-top: 64px; }
.section_wrapper { background-color: #fff; }
.section_header { margin-block: 0; font-family: serif; font-size: 22pt; text-transform: uppercase; }
.section_header.small { font-size: 18pt; }
@media screen and (max-width: 500px) { .section_header { font-size: 20pt; } }
.section_text { margin-top: 20px; font-family: serif; letter-spacing: 1.5px; line-height: 25px; }
.section_text ul > li { margin-top: 5px; margin-left: -25px; }
.section_content { padding: 80px; }
@media screen and (max-width: 860px) {
	.section_content { padding: 30px; }
	.section_text { letter-spacing: 1.1px; line-height: 20px; }
}

/* ---------- two- and three-up rows ---------- */
.showMobile { display: none; }
.order_1 { order: 1; }
.order_2 { order: 2; }
.split2 { min-width: 50%; max-width: 50%; }
.split3 { min-width: 33%; max-width: 33%; }
@media screen and (max-width: 1300px) {
	.imageHideMobile { display: none; }
	.showMobile { display: block; }
	.order_1 { order: 2; }
	.order_2 { order: 1; }
	.split2 { min-width: 100%; max-width: 100%; }
	.split3 { min-width: 50%; max-width: 50%; }
}
@media screen and (max-width: 920px) { .split3 { min-width: 100%; max-width: 100%; } }

/* ---------- photos ---------- */
.imageWrapperMain { padding: 10px; }
.imageWrapperMain img { border-radius: 10px; }
.imageWrapper { padding: 10px 10px 0; }
.imageWrapper img { border-radius: 10px; cursor: pointer; }
@media screen and (max-width: 1300px) {
	.imageWrapperMain { padding: 0; }
	.imageWrapperMain img { border-radius: 0; }
}
@media screen and (max-width: 940px) {
	.imageWrapper { padding: 5px 5px 0; }
	.imageWrapper img { border-radius: 0; }
}

/* ---------- home: review badge under the hero ---------- */
#award_callout img { height: 130px; border-radius: 8px; }
@media screen and (max-width: 1100px) { #award_callout img { height: 95px; } }
@media screen and (max-width: 800px) {
	#award_callout { gap: 10px !important; padding: 5px 10px !important; }
	#award_callout img { height: 75px; }
	#award_callout > div > div:first-child { font-size: 12pt !important; }
	#award_callout > div > div:last-child { font-size: 11pt !important; }
}

/* ---------- footer ---------- */
.service_areas { margin-top: 20px; }
@media screen and (max-width: 940px) { .service_areas { margin-top: 0; } }

/* ---------- home: full-size photo viewer ---------- */
.modal { display: none; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .9); animation: cx-viewer-in .3s ease-in-out; }
.modal-content { position: absolute; top: 50%; left: 50%; display: block; width: 80%; max-width: 90%; max-height: 90%; margin: auto; object-fit: contain; transform: translate(-50%, -50%); animation: cx-viewer-grow .3s ease-in-out; }
.close { position: absolute; z-index: 1001; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; }
.close:hover, .close:focus { color: #bbb; text-decoration: none; }
@keyframes cx-viewer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cx-viewer-grow { from { transform: translate(-50%, -50%) scale(.5); } to { transform: translate(-50%, -50%) scale(1); } }
@media screen and (max-width: 768px) {
	.modal-content { width: 95%; max-width: 95%; }
	.close { top: 10px; right: 20px; font-size: 30px; }
}