/* 0. ATKINSON HYPERLEGIBLE INPORTATU */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* 1. BARRA ETA BOTOIAK */
.focus-mode-bar {
    display: flex;
    align-items: center;
    /* Botoia eskumara lerrokatu hasieran */
    justify-content: flex-start;
    gap: 10px;
    /*padding: 15px 0;*/
    /* Padding-a kendu dugu alboetatik hasieran hobeto geratzeko */
    position: relative;
    width: 873px;
    margin: 0 auto 25px auto;
    z-index: 9999;
}

/* Focus moduan, barra barruko elementuak hasieratik lerrokatu (botoia, kontrolak, denbora) */
.focus-mode-active .focus-mode-bar {
    justify-content: flex-start;
    padding: 15px 20px;
    background: #f9f9f9;
    border-radius: 6px;
    width: 100%;
    max-width: 800px;
}

.focus-mode-bar button {
    background: #2e89d3;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

/* HOVER EFEKTUA */
.focus-mode-bar button:hover {
    background-color: #2e89d3c9 !important;
}

/* HASIERAN EZKUTATU */
.focus-controls-extra,
.focus-mode-readtime,
.fm-progress-container {
    display: none;
}

/* AKTIBATZEAN ERAKUTSI */
.focus-mode-active .focus-controls-extra {
    display: flex;
    gap: 5px;
}

.focus-mode-active .focus-mode-readtime {
    display: inline;
    margin-left: auto;
    font-size: 1rem;
    color: #666;
}

.focus-controls-extra button {
    background: #eee;
    color: #333;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
}

/* 2. ZENTRATZEA (FLEXBOX) */
.focus-mode-active body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background-color: #fcfcfc !important;
    margin: 0 !important;
    padding: 20px !important;
    width: 100% !important;
}

.focus-mode-active .site-content,
.focus-mode-active .content-area,
.focus-mode-active .has-sidebar {
    display: block !important;
    width: 100% !important;
    /*max-width: 800px !important;*/
    margin: 0 auto !important;
    float: none !important;
}

/* LETRA-TIPOA HEMEN APLIKATZEN DA (Focus mode ON denean bakarrik) */
.focus-mode-active #focus-content-area {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 10px;
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
    color: #333;
}

.fm-focus-title {
    display: none;
}

.focus-mode-active .fm-focus-title {
    display: block !important;
    font-size: 2.8rem;
    margin: 20px 0 40px;
    font-weight: bold;
    line-height: 1.2;
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
}

/* 3. DARK MODE */
body.focus-dark-mode,
body.focus-dark-mode main,
body.focus-dark-mode #focus-content-area,
body.focus-dark-mode .post__lead{
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}
body.focus-dark-mode,
body.focus-dark-mode p,
body.focus-dark-mode h1, body.focus-dark-mode h2, body.focus-dark-mode h3, body.focus-dark-mode h4,
body.focus-dark-mode strong,
body.focus-dark-mode span,
body.focus-dark-mode figcaption,
body.focus-dark-mode .fm-focus-title {
    color: #e0e0e0 !important;
}

body.focus-dark-mode .focus-mode-bar {
    background: #2a2a2a;
}

body.focus-dark-mode .focus-mode-readtime {
    color: #aaa;
}

/* 4. EZKUTATU GAINERAKOAK */
.focus-mode-active header,
.focus-mode-active .site-header,
.focus-mode-active .sidebar,
.focus-mode-active footer,
.focus-mode-active aside,
.focus-mode-active .comments-area,
.focus-mode-active #comments {
    display: none !important;
}

.btn-active {
    background: #2e89d3 !important;
    color: #fff !important;
}

.focus-mode-active #focus-content-area p,
.focus-mode-active #focus-content-area ul{
    font-size: 1.25rem;
}

#focus-content-area.font-large figcaption{
    font-size:1.25rem;
}

#focus-content-area.font-xlarge figcaption{
    font-size:1.4rem;
}

#focus-content-area.font-large p,
#focus-content-area.font-large ul{
    font-size: 1.75rem !important;
}

#focus-content-area.font-xlarge p,
#focus-content-area.font-xlarge ul{
    font-size: 2rem !important;
}

/* Focus mode aktiboan, paragrafoei tartea gehitu */
.focus-mode-active #focus-content-area p {
    margin-bottom: 4em !important;
    /* Paragrafoen arteko tarte garbia */
    line-height: 1.8em !important;
    /* Lerro arteko espazio egokia */
}

/* Azken paragrafoak marjinik ez izateko amaieran */
.focus-mode-active #focus-content-area p:last-child {
    margin-bottom: 0 !important;
}

/* Esaldien estiloa Focus Mode barruan */
.focus-mode-active .fm-sentence {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 4px;
    padding: 2px 4px;
    margin: 0 -4px;
    cursor: pointer;
    outline: none !important;
    /* Kendu nabigatzailearen outline lehenetsia */
    display: inline;
    /* Garrantzitsua lerro-jauziak ondo egiteko */
}

/* Xagua gainetik pasatzean EDO Teklatuarekin fokatzean (TAB) */
.focus-mode-active .fm-sentence:hover,
.focus-mode-active .fm-sentence:focus {
    background-color: #82c0fe !important;
    color: #000 !important;
}

/* Dark Mode fokuarentzat */
body.focus-dark-mode .fm-sentence:hover,
body.focus-dark-mode .fm-sentence:focus {
    background-color: #00b1d9 !important;
    color: #fff !important;
}