/* Sidebar design (Arizona Academy of Defensive Driving): a fixed teal side menu, serif headline, two-column body. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Karla:wght@400;600;700&display=swap');

body.design {
    background: #F4F1EA;
    color: #1C2B30;
    font: normal 16px/1.5 Karla, Arial, sans-serif;
    padding: 0 0 0 280px;
}
.design #page { margin: 32px auto; border-radius: 6px; }
.design-home #page { width: auto; max-width: 1000px; padding: 0 56px; margin: 0; background: transparent; border-radius: 0; }
.design-home #affiliate-links { list-style: none; padding: 0; margin: 0 0 24px; }
.design-home #affiliate-links li:first-child { display: none; }

/* Side menu */
.sb-side { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; box-sizing: border-box; overflow-y: auto; display: flex; flex-direction: column; gap: 32px; padding: 32px 28px; background: #0F4C5C; color: #ffffff; z-index: 10; }
.sb-brand { display: block; background: #ffffff; border-radius: 6px; padding: 10px; }
.sb-brand img { display: block; max-width: 100%; max-height: 90px; margin: 0 auto; border: 0; }
.sb-nav { list-style: none; margin: 0; padding: 0; }
.sb-nav li { margin: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.sb-nav li:last-child { border-bottom: 0; }
.sb-nav a { display: block; padding: 10px 0; color: #ffffff; font-weight: 700; font-size: 16px; text-decoration: none; }
.sb-nav a:hover { color: #F4A259; }
.sb-contact { margin-top: auto; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.sb-phone strong { font-size: 18px; color: #F4A259; }

/* Home */
.sb-hero { padding: 72px 0 40px; }
.sb-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9A3D0C; }
.sb-hero h1 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 58px; line-height: 1.04; color: #0F4C5C; margin: 18px 0; text-shadow: none; }
p.sb-lead { font-family: inherit; font-size: 20px; line-height: 1.55; color: #1C2B30; margin: 0 0 26px; max-width: 620px; }
.sb-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.sb-btn { display: inline-block; padding: 16px 28px; border-radius: 6px; font-weight: 700; font-size: 17px; text-decoration: none; }
.sb-btn-main { background: #F4A259; color: #1C2B30 !important; }
.sb-btn-outline { border: 2px solid #0F4C5C; color: #0F4C5C !important; }
.sb-btn:hover { opacity: .9; }
.sb-columns { display: flex; flex-wrap: wrap; gap: 32px; padding-bottom: 48px; }
.sb-why { box-sizing: border-box; flex: 1 1 320px; border-top: 2px solid #0F4C5C; padding-top: 20px; }
.sb-why h2 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 26px; text-transform: none; color: #0F4C5C; margin: 0 0 12px; }
.sb-why p { font: normal 17px/1.5 Karla, Arial, sans-serif; color: #1C2B30; margin: 0 0 10px; }
.sb-price { box-sizing: border-box; flex: 1 1 320px; background: #ffffff; border-radius: 6px; padding: 24px 26px; }
.price-box-title { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 23px; text-transform: none; color: #0F4C5C; margin: 0 0 12px; }

/* Footer */
.sb-footer { padding: 20px 56px; font-size: 14px; color: #4A5A5F; border-top: 1px solid #D8D2C4; }
.sb-footer a { color: #0F4C5C; }
.sb-footer .footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0; margin: 0 0 8px; }
.sb-footer .footer-details { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; font: inherit; color: inherit; }

/* Top bar: the side menu moves above the page whenever it would leave too little room.
   Content pages keep the fixed 1024px #page, so they need 280px + 1024px plus a scrollbar;
   the home page stretches and only needs it on narrow screens. */
@media (max-width: 1339px) {
    body.design:not(.design-home) { padding-left: 0; }
    body.design:not(.design-home) .sb-side { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 14px 24px; }
    body.design:not(.design-home) .sb-brand { padding: 6px; }
    body.design:not(.design-home) .sb-brand img { max-height: 56px; }
    body.design:not(.design-home) .sb-nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
    body.design:not(.design-home) .sb-nav li { border-bottom: 0; }
    body.design:not(.design-home) .sb-nav a { padding: 6px 0; }
    body.design:not(.design-home) .sb-contact { margin: 0 0 0 auto; }
}
@media (max-width: 900px) {
    body.design { padding-left: 0; }
    .sb-side { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 14px 24px; }
    .sb-brand { padding: 6px; }
    .sb-brand img { max-height: 56px; }
    .sb-nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
    .sb-nav li { border-bottom: 0; }
    .sb-nav a { padding: 6px 0; }
    .sb-contact { margin: 0 0 0 auto; }
}