/*
 * Tauras Rod and Gun Club - Cassiopeia child template.
 * Recreates the former jp-blog "green" style (YOOtheme Warp 7 / UIkit 2) on Joomla 5:
 * mint page, 1200px layout with a 20% left sidebar of white panels, a white content
 * column holding the logo (top-a), the home-page boxes (top-b) and the component.
 * Values are taken from reference/jp-blog/styles/green (style.less, css/theme.css).
 */

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/oswald-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/oswald-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --tauras-page-bg: #b6e8de;
    --tauras-accent: #19ae8f;
    --tauras-text: #777;
    --tauras-heading: #000;
    --tauras-link: #000;
    --tauras-link-hover: #222;
    --tauras-border: #ddd;
    --tauras-box-primary: #f2f2f2;
    --tauras-gutter: 30px;
    --tauras-font: Verdana, Arial, sans-serif;
    --tauras-font-heading: "Oswald", Verdana, Arial, sans-serif;

    /* Cassiopeia / Bootstrap variables */
    --cassiopeia-color-primary: var(--tauras-accent);
    --cassiopeia-color-link: var(--tauras-link);
    --cassiopeia-color-hover: var(--tauras-link-hover);
    --cassiopeia-font-family-body: var(--tauras-font);
    --cassiopeia-font-family-headings: var(--tauras-font-heading);
    --cassiopeia-font-weight-headings: 400;
    --body-font-family: var(--tauras-font);
    --body-font-size: 13px;
    --body-line-height: 1.4;
    --body-color: var(--tauras-text);
    --body-bg: #fff; /* Bootstrap tables, inputs and list groups inherit this; the page itself is mint (below) */
    --body-bg-rgb: 255, 255, 255;
    --link-color: var(--tauras-link);
    --link-color-rgb: 0, 0, 0;
    --link-hover-color: var(--tauras-link-hover);
    --link-hover-color-rgb: 34, 34, 34;
}

html,
body.site {
    background: var(--tauras-page-bg);
}

body.site {
    color: var(--tauras-text);
    font: 13px/1.4 var(--tauras-font);
}

/* ---- Typography ---------------------------------------------------------- */

body.site h1, body.site h2, body.site h3, body.site h4, body.site h5, body.site h6 {
    margin: 0 0 30px;
    color: var(--tauras-heading);
    font-family: var(--tauras-font-heading);
    font-weight: 400;
    text-transform: uppercase;
}

body.site h1 { font-size: 34px; line-height: 43px; }
body.site h2 { font-size: 30px; line-height: 38px; }
body.site h3 { font-size: 22px; line-height: 28px; }
body.site h4 { font-size: 17px; line-height: 22px; }

body.site a {
    color: var(--tauras-link);
    text-decoration: none;
}

body.site a:hover,
body.site a:focus {
    color: var(--tauras-link-hover);
    text-decoration: underline;
}

/* UIkit spacing for flow content */
body.site p,
body.site ul,
body.site ol,
body.site dl,
body.site blockquote,
body.site pre,
body.site address,
body.site fieldset,
body.site figure {
    margin: 0 0 15px;
}

body.site ::selection {
    background: var(--tauras-accent);
    color: #fff;
}

/* Article and blog titles (uk-article-title: 34px, mixed case) */
/* (the article title is the last .page-header; a preceding one holds the uppercase page heading) */
body.site .com-content-article > .page-header:not(:has(+ .page-header)) > :is(h1, h2),
body.site .item-title {
    margin: 10px 0 4px;
    font-size: 34px;
    line-height: 39px;
    text-transform: none;
}

body.site .item-title a,
body.site .page-header a {
    color: inherit;
}

/* Page heading directly above an article title */
body.site .com-content-article > .page-header:has(+ .page-header) > h1 {
    margin-bottom: 0;
}

/* uk-article-meta: one compact line ("Written by ... Category ... Published ...") */
body.site .article-info {
    margin: 0 0 15px;
    color: #999;
    font-size: 11px;
    line-height: 16px;
}

body.site .article-info .article-info-term {
    display: none;
}

body.site .article-info dd {
    display: inline;
    margin: 0 10px 0 0;
}

body.site .article-info [class^="icon-"],
body.site .article-info [class*=" icon-"] {
    display: none;
}

/* ---- Header: jp-blog had none (the logo is the top-a module) ------------ */

body.site .container-header {
    display: none;
}

/* ---- Page grid ----------------------------------------------------------- */

body.site .site-grid {
    flex: 0 0 auto;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    grid-gap: 0;
    grid-template-columns: [full-start main-start] minmax(0, 1fr) [main-end full-end];
    grid-template-areas: "banner" "top-a" "top-b" "comp" "side-l" "side-r" "bot-a" "bot-b";
}

@media (min-width: 768px) {
    /* sidebar: 12/60 of the 1200px container with a 30px gutter; content: the rest */
    body.site .site-grid {
        column-gap: var(--tauras-gutter);
        grid-template-columns: [full-start main-start] calc((100% + var(--tauras-gutter)) * .2 - var(--tauras-gutter)) minmax(0, 1fr) [main-end full-end];
        grid-template-rows: auto auto auto auto 1fr auto auto;
        grid-template-areas:
            "banner banner"
            "side-l top-a"
            "side-l top-b"
            "side-l comp"
            "side-l ."
            "bot-a bot-a"
            "bot-b bot-b";
    }

    /* A right sidebar is not used; keep the component in the content column regardless */
    body.site .site-grid .container-component {
        grid-column: auto;
        grid-area: comp;
    }

    /* Pages without sidebar modules (e.g. the error page): content spans the full width */
    body.site:not(.has-sidebar-left) .site-grid > .container-top-a,
    body.site:not(.has-sidebar-left) .site-grid > .container-top-b,
    body.site:not(.has-sidebar-left) .site-grid > .container-component {
        grid-column: full-start / full-end;
    }
}

body.site .site-grid > .grid-child {
    max-width: none;
    margin: 0;
}

/* White content column (tm-content: white, 30px padding) */
body.site .container-top-a,
body.site .container-top-b,
body.site .container-component {
    background: #fff;
    padding: 0 var(--tauras-gutter);
}

body.site .container-top-a {
    padding-top: var(--tauras-gutter);
}

body.site .container-top-b {
    gap: var(--tauras-gutter);
    padding-top: var(--tauras-gutter);
}

body.site .container-top-a > *,
body.site .container-top-b > * {
    margin: 0;
}

body.site .container-component {
    padding-top: var(--tauras-gutter);
    padding-bottom: var(--tauras-gutter);
}

body.site .container-component > :first-child,
body.site .container-component > * + * {
    margin-top: 0;
}

@media (max-width: 767.98px) {
    body.site .container-top-b {
        flex-direction: column;
    }
}

/* ---- Module panels (uk-panel-box) ----------------------------------------- */

body.site .site-grid .card {
    --card-border-width: 0;
    --card-border-radius: 0;
    --card-bg: #fff;
    position: relative;
    margin: 0;
    padding: var(--tauras-gutter);
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    color: var(--tauras-text);
}

body.site .site-grid .card-header {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tauras-heading);
    font: 400 17px/22px var(--tauras-font-heading);
    text-transform: uppercase;
}

body.site .site-grid .card-body {
    padding: 0;
}

/* Logo module: plain image, no panel */
body.site .container-top-a .card {
    padding: 0;
    background: none;
}

body.site .container-top-a .mod-custom p {
    margin: 0;
}

/* Home page boxes (uk-panel-box-primary) */
body.site .container-top-b .card {
    background: var(--tauras-box-primary);
    color: #222;
}

/* Sidebar: panels stacked with a 30px gutter, sitting on the mint background */
body.site .container-sidebar-left {
    order: 0;
    gap: var(--tauras-gutter);
    width: auto;
    align-self: start;
}

body.site .container-sidebar-left > *,
body.site .container-sidebar-left > :first-child,
body.site .container-sidebar-left > * + *,
body.site .container-sidebar-left .sidebar-left:first-child,
body.site .container-sidebar-left .sidebar-left:last-child {
    margin: 0;
}

@media (max-width: 767.98px) {
    body.site .container-sidebar-left {
        margin-top: var(--tauras-gutter);
        padding-bottom: var(--tauras-gutter);
    }
}

/* Front-end editing button stays out of the panel title's way */
body.site .site-grid .card > .jmodedit {
    top: 5px;
    right: 5px;
}

/* ---- Sidebar menus (uk-nav-side, full panel width) ------------------------- */

body.site .container-sidebar-left .mod-menu {
    display: block;
    margin: 0 calc(-1 * var(--tauras-gutter));
    padding: 0;
    list-style: none;
}

body.site .container-sidebar-left .mod-menu li {
    margin: 0;
    padding: 0;
}

body.site .container-sidebar-left .mod-menu li > a,
body.site .container-sidebar-left .mod-menu li > span {
    display: block;
    padding: 3px 20px;
    color: var(--tauras-text);
    text-decoration: none;
}

body.site .container-sidebar-left .mod-menu li > a:hover,
body.site .container-sidebar-left .mod-menu li > a:focus {
    background: rgba(0, 0, 0, .14);
    color: var(--tauras-text);
    outline: none;
}

body.site .container-sidebar-left .mod-menu li.current > a,
body.site .container-sidebar-left .mod-menu li.active > a {
    background: var(--tauras-accent);
    color: #fff;
}

body.site .container-sidebar-left .mod-menu ul {
    padding-left: 20px;
    list-style: none;
}

/* ---- Module content -------------------------------------------------------- */

/* uk-list-line: 5px spacing with a 1px rule between items */
body.site .mod-articleslatest,
body.site .mod-articlespopular {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.site .mod-articleslatest > li + li,
body.site .mod-articlespopular > li + li {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--tauras-border);
}

/* ---- Buttons and forms (uk-button: 30px high, square, accent) -------------- */

body.site .btn {
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    line-height: 30px;
}

body.site .btn-primary,
body.site .btn-secondary,
body.site .mod-login .btn {
    background: var(--tauras-accent);
    color: #fff;
}

body.site .btn-primary:hover,
body.site .btn-primary:focus,
body.site .btn-secondary:hover,
body.site .btn-secondary:focus,
body.site .mod-login .btn:hover,
body.site .mod-login .btn:focus {
    background: #000;
    color: #fff;
}

body.site .btn-link {
    background: none;
    color: var(--tauras-link);
}

body.site .form-control,
body.site .form-select {
    border-color: var(--tauras-border);
    border-radius: 0;
    font-size: 13px;
}

/* ---- Content ------------------------------------------------------------- */

/* uk-article-divider between blog items */
body.site .blog-items > .blog-item + .blog-item,
body.site .blog-items + .blog-items {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--tauras-border);
}

/* Bootstrap 2 ".alert" without a variant, used directly in article HTML (e.g. the guest home page) */
body.site main .alert:not([class*="alert-"]) {
    margin-bottom: 18px;
    padding: 8px 35px 8px 14px;
    border: 1px solid rgba(226, 131, 39, .3);
    border-radius: 4px;
    background-color: #fffceb;
    color: #e28327;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

body.site .table {
    --table-border-color: var(--tauras-border);
    font-size: 13px;
}

body.site .pagination {
    --pagination-color: var(--tauras-link);
    --pagination-active-bg: var(--tauras-accent);
    --pagination-active-border-color: var(--tauras-accent);
    --pagination-border-radius: 0;
    --pagination-hover-color: var(--tauras-link-hover);
}

/* ---- Joomla 3 (IcoMoon) icon names still used by JEvents' Latest Events module ---- */

body.site .icon-time::before {
    content: "\f017"; /* clock */
}

body.site .icon-hand-right::before {
    content: "\f0a4"; /* hand-point-right */
}