/* The o2creative.co.nz shop header and footer for the licence server's public pages (install, /check, release notes,
   trial). Values from o2creative-site theme/o2dark/stylesheet/o2dark.css, the same as the wiki's copy
   (o2creative-wiki lib/tpl/o2dark/css/o2shop.less): keep the three in step. Everything is under .o2-site-header /
   .o2-site-footer so the pages' own (light) styles are untouched. Glenn 2026-10-26. */

.o2-site-header, .o2-site-footer { font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.6; }
.o2-site-header *, .o2-site-footer * { box-sizing: border-box; }
.o2-site-header a, .o2-site-footer a { text-decoration: none; }
.o2-site-header ul, .o2-site-footer ul { list-style: none; margin: 0; padding: 0; }
.o2-site-header li, .o2-site-footer li { margin: 0; padding: 0; }
.o2-container { max-width: 1170px; margin: 0 auto; padding: 0 15px; }

/* strip */
.o2-strip { background: #104bcf; color: #fff; font-size: 14px; text-align: center; padding: 7px 12px; }
.o2-strip a, .o2-strip a:visited { color: #fff; font-weight: 700; text-decoration: underline; }
.o2-strip a:hover { color: #dfe8ff; }
.o2-strip-sep { opacity: .6; margin: 0 8px; }

/* account links */
.o2-top { background: #141619; border-bottom: 1px solid #3a3f49; font-size: 13px; }
.o2-top .o2-container { display: flex; justify-content: flex-end; align-items: center; min-height: 34px; }
.o2-top ul { display: flex; gap: 16px; }
.o2-top a, .o2-top a:visited { color: #a9b0bc; }
.o2-top a:hover { color: #fff; }

/* logo + search band */
.o2-band { background-color: #0d3a9f; background-image: linear-gradient(90deg, rgba(10, 20, 48, .25), rgba(10, 20, 48, 0)), url(/img/site/polyBlue.jpg);
    background-size: cover; background-position: center; padding: 22px 0 18px; }
.o2-band .o2-container { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.o2-logo img { display: block; width: 200px; height: auto; }
.o2-search { margin-left: auto; flex: 0 1 380px; display: flex; }
.o2-search input[type=search] { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; font: inherit; font-size: 15px; color: #e9ebef;
    background: rgba(12, 18, 34, .65); border: 1px solid rgba(255, 255, 255, .25); border-right: 0; border-radius: 6px 0 0 6px; }
.o2-search input[type=search]::placeholder { color: #a9b0bc; }
.o2-search input[type=search]:focus { outline: none; border-color: #7aa2ff; }
.o2-search button { flex: 0 0 52px; height: 40px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 0 6px 6px 0; cursor: pointer;
    background: rgba(12, 18, 34, .65) no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E"); }
.o2-search button:hover { background-color: #104bcf; }

/* menu */
.o2-menu { background: #23262d; border-bottom: 1px solid #3a3f49; }
.o2-menu ul { display: flex; flex-wrap: wrap; }
.o2-menu li a, .o2-menu li a:visited { display: block; padding: 12px 15px; color: #e9ebef; font-size: 15px; font-weight: 600; }
.o2-menu li a:hover { color: #fff; background: #2b2f37; }
.o2-menu li:first-child a { padding-left: 0; }
.o2-menu li:first-child a:hover { background: none; }
.o2-menu li.o2-menu-active a { color: #fff; box-shadow: inset 0 -3px 0 #104bcf; }
.o2-menu li.o2-menu-cta a { color: #7aa2ff; }
.o2-menu-toggle, .o2-menu-button { display: none; }

/* footer */
.o2-site-footer { background: #121418; border-top: 1px solid #3a3f49; color: #a9b0bc; margin-top: 40px; padding: 30px 0 0; font-size: 14px; }
.o2-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 30px; }
.o2-site-footer h5 { color: #fff; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; }
.o2-site-footer li { margin: 0 0 4px; }
.o2-site-footer a, .o2-site-footer a:visited { color: #a9b0bc; }
.o2-site-footer a:hover { color: #fff; }
.o2-site-footer hr { border: 0; border-top: 1px solid #3a3f49; margin: 24px 0 0; }
.o2-footer-line { font-size: 13px; padding: 10px 0 24px; margin: 0; }

/* tablet and phone */
@media (max-width: 800px) {
    .o2-strip-extra { display: none; }
    .o2-logo img { width: 150px; }
    .o2-search { flex: 1 1 100%; }
    .o2-top ul { display: none; }
    .o2-top .o2-container { min-height: 8px; }
    .o2-menu .o2-menu-button { display: block; padding: 10px 0; font-weight: 600; color: #e9ebef; cursor: pointer; }
    .o2-menu .o2-menu-button::before { content: "\2630\00a0\00a0"; }
    .o2-menu ul { display: none; flex-direction: column; padding-bottom: 8px; }
    .o2-menu .o2-menu-toggle:checked ~ ul { display: flex; }
    .o2-menu li a, .o2-menu li:first-child a { padding: 8px 0; }
    .o2-footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .o2-footer-cols { grid-template-columns: 1fr; }
}

/* the page title on white under the menu (bright and clean, Glenn 2026-10-26), for the pages that used the blue banner */
.o2-pagehead { padding-top: 34px; padding-bottom: 6px; margin-bottom: 26px; border-bottom: 1px solid rgba(128, 140, 160, .25); }
.o2-pagehead h1 { margin: 0; font-weight: 300; font-size: 40px; line-height: 1.15; color: inherit; }
.o2-pagehead p { margin: 8px 0 0; font-weight: 300; font-size: 18px; color: inherit; opacity: .75; }
@media (max-width: 600px) { .o2-pagehead h1 { font-size: 30px; } }