/* ════════════════════════════════════════════════
   Summit Compliance & Training Solutions
   Custom stylesheet  —  loaded after Bootstrap
   ════════════════════════════════════════════════ */

/* ── Typography ─────────────────────────────── */
body, h1, h2, h3, h4, h5, h6, input, textarea {
    font-family: "Rubik", "Segoe UI", "Bitstream Vera Sans", Arial, sans-serif;
}
h5, h4, h3 { font-weight: normal; margin-bottom: 0; }
a, a:hover  { text-decoration: none; outline: none; color: #E79A47; }
dl, ol, ul  { margin-bottom: 0; }

/* ── Brand colours ──────────────────────────── */
.btn-primary             { background-color: #012563; border-color: #031D55; }
.btn-primary:hover       { background-color: #031D55; border-color: #000b2e; }
.text-primary            { color: #031D55 !important; }
.bg-dark-blue            { background-color: #012563; color: #fff; }

/* ── Background image sections ─────────────── */
.bg-training-dev { background-image: url("../images/bg-dot.jpg"); }
.bg-community    { background-image: url("../images/bg-dark.jpg");      color: #fff; }
.bg-square       { background-image: url("../images/bg-square.jpg"); }
.bg-partner      { background-image: url("../images/bg-dark-blue.png"); color: #fff; }

/* ════════════════════════════════════════════════
   HEADER & NAVIGATION
   Matches original HTML exactly:
     - Translucent white bar, position:absolute over hero
     - Desktop: ul.list-inline.top-nav with large spaced links
     - Mobile:  Bootstrap dropdown with dividers between items
   ════════════════════════════════════════════════ */
header {
    background-color: rgba(255, 255, 255, 0.50);
    width: 100%;
    z-index: 1000;                /* sit above the hero image */
}

/* Author thumbnail */
.wills-thomas { width: 50px; height: auto; }

/* ── Desktop nav links ───────────────────────── */
.top-nav                             { margin: 0; padding: 0; }
.top-nav .list-inline-item           { display: inline-block; }
.top-nav .list-inline-item a {
    display:     inline-block;
    color:       #031D55;
    font-size:   1.15rem;
    font-weight: 600;
    padding:     .5rem 2rem;
    transition:  color .15s;
}
.top-nav .list-inline-item a:hover   { color: #000; }

/* ── Mobile dropdown ─────────────────────────── */
header .dropdown-menu {
    min-width:  220px;
    right:      0;
    left:       auto;
    border:     1px solid rgba(1,37,99,.2);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
header .dropdown-item {
    color:       #031D55;
    font-weight: 600;
    padding:     .55rem 1.25rem;
}
header .dropdown-item:hover,
header .dropdown-item:focus {
    background-color: #eef2fb;
    color:            #000;
}

/* ── Carousel ───────────────────────────────── */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.custom-caption          { position: relative; bottom: 0; right: 0; left: 0; color: #000 !important; text-align: center; }
.custom-caption h5       { font-weight: 600; }
.custom-item img         { margin-left: auto; margin-right: auto; }

/* ── Footer ─────────────────────────────────── */
footer                   { background-color: #012563; }
.copyright-border-top    { border-top: 1px dashed #385485; }

/* ── WordPress alignment helpers ────────────── */
.alignleft   { float: left;  margin-right: 1.5em; }
.alignright  { float: right; margin-left:  1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* ════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
   ════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    footer h4                        { font-size: 105%; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .top-nav .list-inline-item a     { font-size: 1rem; padding: .5rem .5rem; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .top-nav .list-inline-item a     { font-size: .9rem; padding: .5rem .25rem; }
    .header-subheading h4            { font-size: 100%; }
}

@media (max-width: 575.98px) {
    .header-subheading h4            { font-size: 85%; }
}