/*
Theme Name: MMA Uutislehti v2
Description: Kevyt, Iltalehti-tyylinen uutisteema MMA-sisällölle.
Author: Sinä
Version: 2.0
Tags: news, mma, bootstrap-5
*/

/* --- Perusmuuttujat & typografia --- */
:root {
    --clr-primary: #d40000;
    --clr-dark: #000;
    --clr-light: #fff;
    --clr-gray: #faf9f6;
    --content-max: 800px;
    --sidebar-w: 260px;
    --radius: 0;
    /* poistetaan bootstrapin border-radiukset */
}

/* 40/60 layout single-ottelijassa */
.fighter-top {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 1rem;
    align-items: start;
}

/* vasen palsta: kuva */
.fighter-left .ottelija-portrait {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: #111;
    padding: 6px;
    border-radius: 6px;
}

.fighter-left img {
    margin-bottom: 0;
}

/* ohittaa .article-card img marginaalin */
.portrait-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    background: #111;
    color: #999;
    display: grid;
    place-items: center;
    border-radius: 6px;
}

/* oikea palsta: metat */
.fighter-right {
    min-width: 0;
}

.fighter-header {
    margin-bottom: .5rem;
}

.fighter-name {
    margin: 0 0 .25rem 0;
}

.fighter-nick {
    color: #ccc;
    margin-bottom: .5rem;
}

/* taulukko täysleveydelle kortin sisällä ilman inline-tyylejä */
.fighter-table .table {
    width: 100%;
    background: #1b1b1b;
    border-color: #333;
}

/* mobiilissa pinotaan */
@media (max-width: 767.98px) {
    .fighter-top {
        grid-template-columns: 1fr;
    }
}

.linkki{
    color: rgb(134 173 231);
    text-decoration: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}


body {
    font-family: 'Open Sans', sans-serif;
    background: #222 !important;
    color: #f2f2f2 !important;
    line-height: 1.5;
}

a {
    color: var(--clr-primary);
    text-decoration: none;
    transition: color .2s;
}

a:hover {
    color: #ffce42;
    text-decoration: underline;
}

/* --- Navigaatio --- */
.mma-navbar {
    background: #1b1b1b;
    display: flex;
    align-items: center;
    padding: 0px;
    position: relative;
    z-index: 20;
}

.mma-logo {
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--clr-light);
    text-decoration: none;
    line-height: 50px;
    text-align: center;
    margin: auto;
    width: 100%;
}

.mma-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--clr-light);
    font-size: 1.6rem;
    margin-left: auto;
}

.mma-menu {
    list-style: none;
    display: flex;
    flex: 1;
    margin-bottom: 0px !important;
    padding:0px !important;
}

.mma-menu ul{
    list-style-type: none !important;
}

.mma-menu-wrapper{
    max-width:900px !important;
    margin: auto;
    text-align: center;
}

/* Dropdown (alavalikko) */
.mma-menu li {
    position: relative;
}

.mma-menu a{
    text-decoration: none !important;
}

.mma-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #222;
    padding: 0px;
    width: 100%;
    z-index: 99;
}

.mma-menu .menu-item-has-children>a::after {
    content: ' ▼';
    font-size: 0.7em;
    margin-left: 0.25rem;
}

.mma-menu .sub-menu li {
    width: 100%;
}

.mma-menu .sub-menu li a {
    padding: 0.5rem 1rem;
    color: #fff;
    font-weight: 400;
    display: block;
    white-space: nowrap;
    text-align: center;
    background: #1b1b1b;
}

.mma-menu .sub-menu li a:hover {
    background: var(--clr-primary);
}

/* Näytä dropdown desktopilla hoverilla */
@media (min-width: 768px) {
    .mma-menu li:hover>.sub-menu {
        display: block;
    }
}

/* Mobiilissa: näytetään klikattaessa JS:n avulla */
.mma-menu .submenu-open>.sub-menu {
    display: block;
}



.mma-menu li {
    flex: 1;
}

.mma-menu a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .9rem .9rem;
    height: 100%;
    font-weight: 600;
    color: var(--clr-light);
    text-transform: uppercase;
    border-left: 1px solid #222;
    font-size: 16px;
}

.mma-menu li:first-child a {
    border-left: none;
}

.mma-menu a:hover,
.mma-menu a:focus {
    background: var(--clr-primary);
    color: var(--clr-light);
}

/* Mobile — napit pinottuna & burgeri */
@media(max-width:767.98px) {
    .mma-nav-toggle {
        display: block;
        margin:auto;
        margin-bottom: 10px;
    }
    .mma-logo{
        line-height: 49px;
    }
    .mma-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        max-height: 0;
        overflow: hidden;
        background: #1b1b1b;
        transition: max-height .3s ease;
    }

    .mma-menu.open {
        max-height: 50vh;
    }

    .mma-menu a {
        border-top: 1px solid #222;
        border-left: none;
    }
}

/* --- Sivukehys --- */
.page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    gap: 1.5rem;
    max-width: calc(var(--content-max) + var(--sidebar-w) + 1.5rem);
    margin: 2rem auto;
    padding: 0 1rem;

align-items: start;

}

@media(max-width:991.98px) {
    .page-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 0 1rem;
        display: inline-block;
    }

        .article-card,
        .sidebar {
            width: 100%;
            box-sizing: border-box;
        }

}

/* Single-ottelija */





/* --- Artikkelikortit --- */
.article-card {
    background: #2b2b2b;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: box-shadow .2s;
    max-width: 100%;
        box-sizing: border-box;
}

.article-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.article-card a{
    color: #fff !important;
    text-decoration: none !important;
}

.article-card a:hover{
    text-decoration: none !important;
}

.article-card img {
    width: 100%;
    height: auto;
    margin-bottom: .75rem;
}

.article-card h2 {
    font-size: 2.15rem;
    margin-bottom: .5rem;
    color: #fff !important;

}

.article-meta {
    font-size: .85rem;
    color: #ececec;
    margin-bottom: .5rem;
}


/* --- Yksittäinen artikkeli --- */
.single-content {
    max-width: var(--content-max);
    margin: 0 auto 2rem;
    background-color: #2b2b2b !important;
    padding: 20px;
    
}

.single-content a{
    text-decoration: none !important;
    color: #788cfd !important;
}



.single-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.single-content .wp-post-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.5rem;
    /* valinnainen */
}

/* --- Sidebar --- */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-color: #2b2b2b;
    padding: 15px;
}

.sidebar-block h3 {
    font-size: 1rem;
    margin-bottom: .75rem;
    color: #fff;
    border-bottom: 2px solid var(--clr-primary);
    padding-bottom: .25rem;
}

.sidebar-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-block li+li {
    margin-top: .6rem;
    }

        .sidebar-block li{
            line-height: 20px;
        }

.sidebar-block a {
    color: #fff;
    font-weight: 600;
    text-decoration: none !important;
}

.sidebar-block a:hover {
    color: var(--clr-primary);
    text-decoration: none !important;
}

/* --- Footer --- */
footer {
    background: #1b1b1b;
    padding: 1rem;
    text-align: center;
    font-size: .85rem;
    color: #ccc;
}


@media (max-width: 767.98px) {
  .mma-menu .menu-item-has-children.submenu-open > .sub-menu {
    display: block;
    position: static;
  }

.page-grid {
    gap:0rem !important;
}

}
.mma-menu a {
    white-space: nowrap;
}
.mma-menu {
    margin: 0 !important;
}

.mma-logo:hover {
    color: var(--clr-primary);
    text-decoration: none;
}




@media (min-width: 992px) {
    .sidebar {
        position: relative;
        
        align-self: start;
    }
}


.pagination {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination a,
.pagination span {
    display: inline-block !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.25rem !important;
    background-color: #f0f0f0 !important;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease !important;
}

.pagination a:hover {
    background-color: #ddd !important;
}

.pagination .current {
    background-color: #333 !important;
    color: #fff !important;
    font-weight: bold !important;
    pointer-events: none !important;
}

.sticky-post {
    background-color: #000 !important;
    color: #fff !important;
}

.sticky-post a {
    color: #fff !important;
    text-decoration: underline;
}

.ai-disclaimer {
  margin-top: 1.5rem;
  padding: 12px 14px;
  background: #1b1b1b;
  border-left: 4px solid var(--clr-primary);
  border-radius: 6px;
  font-size: 13px;
  color: #f2f2f2;
  line-height: 1.5;
}
.dark-theme .ai-disclaimer {
  background: #1b1b1b;
  border-left-color: #4bc0ff;
  color: #ccc;
}
.gambling-disclaimer {
  background: #1b1b1b;
  color: #aaa;
  padding: 12px 16px;
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  line-height: 1.6;
  margin: auto;
  max-width: 800px !important;
}
.gambling-disclaimer a {
  color: #4bc0ff;
  text-decoration: none;
}
.gambling-disclaimer a:hover {
  text-decoration: underline;
}
.mma-banneri {
  width: 100%;
  max-width: 1200px; /* tai sivustosi container-leveys */
  margin: 0 auto;
  text-align: center;
  padding: 30px;
  padding-bottom:0px;
}

.mma-banneri img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  margin-top: 10px;
}