/* Raymon Brothers - one shared stylesheet (replaces RaymonsCommon, twoColElsLtHdr, RoundedCorners, Spry*, bootstrap, form.css) */
:root {
    --navy: #001177;
    --blue: #003399;
    --link: #0000cc;
    --link-hover: #000066;
    --page: #ffffff;
    --backdrop: #e6eaf2;
    --panel: #ebebeb;
    --line: #c8cfdd;
    --banner: #abbedf;
    --danger: #c00000;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--backdrop);
    color: #000;
    font: 100%/1.55 Verdana, Geneva, Tahoma, sans-serif;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); }
a:hover, a:focus { color: var(--link-hover); }
:focus-visible { outline: 3px solid #0a6cce; outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 20; padding: .6rem 1rem; background: #fff; border: 2px solid var(--navy); }

/* ---- page frame ---- */
.page {
    max-width: 58rem;
    margin: 0 auto;
    background: var(--page);
    box-shadow: 0 0 0 1px #3a3a3a, 0 8px 28px rgba(0, 0, 0, .25);
}
.site-header { margin: 0; background: var(--banner); line-height: 0; }
.site-header img { display: block; width: 100%; height: auto; }
.callbar { display: none; margin: 0; text-align: center; background: var(--navy); }
.callbar a {
    display: block; padding: .8rem 1rem; color: #fff; font-weight: bold; text-decoration: none; font-size: 1.05rem;
}

.layout {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    grid-template-areas: "nav main" "side main";
    grid-template-rows: auto 1fr;
    background: linear-gradient(to right, var(--panel) 14rem, var(--page) 14rem);
}
.nav { grid-area: nav; padding: 1rem .75rem .75rem; }
.side { grid-area: side; padding: .5rem .75rem 1.5rem; text-align: center; font-size: .92rem; }
main { grid-area: main; min-width: 0; padding: 1rem 1.75rem 2rem; }

/* ---- navigation (plain CSS, no JavaScript menu) ---- */
.nav ul { margin: 0; padding: 0; list-style: none; border: 1px solid #ccc; }
.nav a {
    display: block; padding: .65rem .85rem; background: #eee; color: var(--link); font-weight: bold;
    text-decoration: none; border-bottom: 1px solid #ddd;
}
.nav li:last-child a { border-bottom: 0; }
.nav a:hover, .nav a:focus { background: #000066; color: #fff; }
.nav a[aria-current="page"] { background: var(--navy); color: #fff; }

/* ---- sidebar extras ---- */
.side img { display: block; margin: .6rem auto; }
.side .logos img { margin: .55rem auto; }
.side .blue { color: var(--blue); }

/* ---- type ---- */
main h1 { margin: .4rem 0 1rem; font-size: 1.35rem; line-height: 1.3; color: var(--navy); }
main h2 { margin: 1.5rem 0 .6rem; font-size: 1.15rem; line-height: 1.3; color: var(--navy); }
main h3 { margin: 1.1rem 0 .4rem; font-size: 1.02rem; color: var(--blue); }
main p { margin: 0 0 1rem; }
.tagline { margin: 0 0 .5rem; text-align: center; font-weight: bold; font-size: 1.15rem; color: var(--navy); }
.myparagraph:first-letter { float: left; margin-right: .06em; font-size: 3em; line-height: .9; color: var(--navy); }

/* utility classes kept from the old stylesheet so existing content still works */
.center { text-align: center; }
.bold { font-weight: bold; }
.underline { text-decoration: underline; }
.blue { color: var(--blue); }
.bluedarker { color: var(--navy); }
.largerbolder { font-weight: bold; font-size: 1.15rem; }
.smallerprint { font-size: .85rem; }
.floatright { float: right; margin: 0 0 .75rem 1rem; }
.floatleft { float: left; margin: 0 1rem .75rem 0; }
.clear { clear: both; }

/* ---- components ---- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; margin: 1.25rem 0; clear: both; }
.gallery img { display: block; width: 100%; border: 1px solid var(--line); }

.brandlist {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .45rem 1rem;
    margin: 0 0 1.25rem; padding: 0; list-style: none; clear: both;
}
.brandlist li { padding: .15rem 0; border-bottom: 1px solid #e4e8f0; }

.logogrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem;
    margin: 1rem 0; padding: 0; list-style: none;
}
.logogrid a {
    display: flex; align-items: center; justify-content: center; min-height: 5rem; padding: .6rem;
    border: 1px solid var(--line); background: #fff;
}
.logogrid a:hover, .logogrid a:focus { background: #f0f4fb; border-color: var(--navy); }
.logogrid img { display: block; max-height: 3.5rem; width: auto; }

.location { margin: 0 0 1.75rem; padding: 0 0 1.25rem; border-bottom: 1px solid var(--line); }
.location:last-of-type { border-bottom: 0; }
.location .hours { max-width: 24rem; margin: 0 auto 1rem; text-align: center; }
.photos { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1rem 0; }
.photos img { border: 1px solid var(--line); }
.note { padding: .85rem 1rem; background: #f3f6fb; border-left: 4px solid var(--navy); color: var(--navy); }

.linklist { margin: 0 0 1.25rem; padding-left: 1.2rem; }
.linklist li { margin: .35rem 0; }
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 1.5rem; }
.areas h3 { margin-top: 0; }
.areas ul { margin: 0; padding: 0; list-style: none; columns: 1; }
.areas li { margin: .2rem 0; font-weight: normal; }
.areas li a { font-weight: normal; font-size: .95rem; }

.ziplist { columns: 11rem auto; column-gap: 1.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .9rem; }
.ziplist li { break-inside: avoid; padding: .1rem 0; }
.ziplist b { font-weight: bold; color: var(--navy); }

.mapframe { display: block; width: 100%; max-width: 600px; height: min(70vh, 700px); min-height: 22rem; margin: 0 auto 1.25rem; border: 1px solid var(--line); }
.areamap { display: block; margin: 1rem auto; border: 1px solid var(--line); }

.formframe { display: block; width: 100%; max-width: 1000px; min-height: 300px; border: 0; }

.site-footer { padding: 1rem 1.25rem 1.25rem; background: #ddd; text-align: center; font-size: .9rem; }
.site-footer p { margin: .25rem 0; }
.site-footer .sitelock img { display: inline-block; max-width: 8rem; margin-top: .5rem; }
.trust-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; margin: 1.5rem 0 0; }
.trust-row img { display: block; }
.visitor-counter { justify-self: start; font-size: .9rem; color: #333; }
.copyright { margin: 0; padding: .9rem 1rem 1.5rem; text-align: center; font-size: .85rem; }

/* ---- phones and tablets ---- */
@media (max-width: 760px) {
    .callbar { display: block; }
    .layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "nav" "main" "side";
        grid-template-rows: auto;
        background: var(--page);
    }
    .nav { padding: 0; background: var(--panel); }
    .nav ul { display: flex; flex-wrap: wrap; border: 0; }
    .nav li { flex: 1 1 auto; }
    .nav a { padding: .8rem .6rem; min-height: 2.75rem; text-align: center; border: 1px solid #d5d5d5; margin: -1px 0 0 -1px; }
    .side { background: var(--panel); padding: 1rem; }
    main { padding: 1rem 1rem 1.5rem; }
    .brandlist { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
}
@media (max-width: 520px) {
    .floatright, .floatleft { float: none; display: block; margin: 0 auto 1rem; }
    .myparagraph:first-letter { font-size: 2.4em; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- printing ---- */
@media print {
    body { background: #fff; }
    .page { box-shadow: none; max-width: none; }
    .callbar, .nav, .side, .skip, .formframe { display: none !important; }
    .layout { display: block; background: none; }
    a { color: #000; }
}