/*
 Theme Name:   Minitel
 Description:  Thème twentytwentyfive modifié pour 3615 Lolcat
 Author:       Guillaume
 Author URI:   
 Template:     twentytwentyfive
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, responsive-layout, accessibility-ready
 Text Domain:  minitel
*/

/*
                3615
╔══╕
║  │         ╔══╕                ╔══╕
║  │  ╔═════╕║  │  ╔════╕╔═════╕╔╝  ╘╕
║  │  ║ ┌─╖ │║  │  ║ ┌──┘║ ┌─╖ │╙╖  ┌┘
║  ╘═╕║ ╘═╝ │║  ╘═╕║ ╘══╕║ ╘═╝ ╘╕║  ╘╕
╙────┘╙─────┘╙────┘╙────┘╙──────┘╙───┘
*/

/*
      ░╓
     ╙╒╙░║╓       ╓░░╓
     ╓╓░░▒▒▒▒▒▒▒▒░░░░░╓
    ╓░░┐║░▒░║░░░░░░▒░╖░
   ║░░▒▓░░░░▒██╣░░░░╚╢▒░
  ╙╙╙╙╙╙░▄░░░▒░░░▒▒░░░░░
  ╛╘── ┌░─└░╙╘░░░░░▒░░░░
  └─ └╙╒┌╘░░░░║░░░░░░░▒▒
   ░╓─ ─╘╙╙┘ ─┘┌╙░░░▒▒▒▒
  └╘┘╘╚░╥╫░╥╥╥╥╥╫░▒▒░░░░
*/


:root {
    --mntl-bg: white;
    --mntl-base: black;
    --mntl-1: yellow;
    --mntl-2: red;
    --mntl-3: blue;
    --mntl-4: turquoise;
    --mntl-5: pink;
}
/*@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');*/
*:not(pre) { font-family: "Press Start 2P"; }

header { position: sticky;top:0;z-index:10; }
header .wp-block-group.is-style-custom {padding:0;padding-bottom:.5em}
.animated-pixel {
    animation: pulse;
    animation-duration: 1s;
    animation-iteration-count:infinite;
}
@keyframes pulse {
    0% {background-color:var(--mntl-base);}
    75% {background-color:var(--mntl-base);}
    76% {background-color: transparent;}
    100% {background-color: transparent;}
}
.wp-block-breadcrumbs a {text-decoration: none;}
.mnt-header> a:hover,
.wp-block-breadcrumbs li:hover a { 
    background-color: var(--mntl-base); 
    color: var(--mntl-bg);
}


 /* Display style : Minitel */
.wp-block-group.is-style-custom {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    color: var(--mntl-base);
    background-color: var(--mntl-bg);
    padding:0;
}

/* Liens style minitel */
.mnt-link a {text-decoration: none;}
.mnt-link:hover,
.home-container .wp-block-post-excerpt__more-link:hover,
.error404 .columns-root> div:last-child p:first-of-type a:hover {
    padding: 0 .75em;
    color: var(--mntl-bg);
    background-color: var(--mntl-base);
}
.error404 .columns-root> div:last-child p:first-of-type a:hover {
    padding: 0; padding-right: .75em
}

/* Masonry *****/
.wp-block-query.is-style-masonry .wp-block-post-template {display: block;}
.wp-block-query.is-style-masonry .wp-block-post {width: 49%;}
.wp-block-query.masonry-3-col .wp-block-post {
    width: calc( (100% - 2rem ) / 3);
    margin-top:0;}

.wp-block-query.is-style-masonry .wp-block-post:hover,
.wp-block-query-pagination a:hover,
.post-navigation-link-previous:hover,
.post-navigation-link-next:hover { color:var(--mntl-bg); background-color: var(--mntl-base); } 
.wp-block-query.is-style-masonry .wp-block-post:hover h2 {padding-left: .25em; padding-right: .35em;}
/*Page */

/* Article*/

/*Accueil */
.mnt-feature> h2,
.mnt-home-list> h2,
.mnt-a-propos h2 { text-transform: uppercase;}

.home-container .wp-block-post-excerpt__more-text { text-align: right;}

.mnt-feature figure {float:left; margin-right: .7em; margin-bottom: .7em;}
.mnt-feature img {max-width: 30vw;max-height:30vh;} 
.mnt-feature .wp-block-post-excerpt {display:inline;}

.mnt-home-list {
    overflow-y: scroll; 
    margin: 0 !important; padding: 0 !important;}
.mnt-home-list li:hover { background-color: var(--mntl-base);}
.mnt-home-list li:hover h2 { color: var(--mntl-bg); padding: 0 .75em; }
.mnt-home-list figure { width: fit-content;}
.mnt-home-list img { max-width: 19vh;}

.mnt-a-propos h2 {
    font-size:var(--wp--preset--font-size--smaller); 
    float:left;
    margin-top: 0;
    margin-right: .7em
}
.mnt-a-propos p {
    font-size:var(--wp--preset--font-size--small); 
    margin:0;}
.page-highlight p:last-child {text-align:right;}

@media screen and (max-width:768px) { .mnt-header pre:first-child { font-size: 0.65rem !important;} }
@media screen and (min-width: 769px) and  (orientation: landscape) {
    .header> a {width: 120vh;}

    .wp-block-group.is-style-custom {
        width: 120vh;
        max-width: 120vh;
    }

    .page-template-default .wp-block-post-title{
        float:left; text-align: left;
        max-width: 50vh;
        margin: var(--wp--preset--spacing--60) !important;
        margin-left: 0 !important;
    }
    .page .entry-content {display: inline;}


    .home-container { 
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 10vh);
        gap:1em;
    }
    .mnt-feature, .mnt-a-propos { grid-column: 1 / span 2; }
    .mnt-feature { grid-row: 1 /span 3; }
    .mnt-a-propos { grid-row: 4 /span 2; }
    .mnt-home-list { grid-column: 3; grid-row: 1 /span 5; }
    
    .mnt-feature img { max-width:19vh; max-height: 19vh;}
    .mnt-home-list> h2 {
        position: sticky;
        top: 0;
        background-color: var(--wp--preset--color--base);
        z-index: 10;}
    .mnt-home-list .wp-block-query .wp-block-post { width: 46%; }

    .wp-block-query-pagination { 
        margin: var(--wp--preset--spacing--40) auto !important;
        display:grid !important; gap: .5em; align-items: top;
        grid-template-columns: 1fr auto 1fr;
    }   
    .wp-block-query-pagination-previous { grid-column:1; justify-self: left;}
    .wp-block-query-pagination-numbers { grid-column: 2;justify-self: center;}
    .wp-block-query-pagination-next { grid-column:3;justify-self: right;}

    .single-post .wp-block-post-featured-image {
        float:left;
        margin-bottom: var(--wp--preset--spacing--40) !important;
        margin-right: var(--wp--preset--spacing--60) !important;
    }
    .single-post .wp-block-post-featured-image img { max-width:50vh; max-height:70vh; }
    .single-post .entry-content {display: inline;}
    .single-post main nav {align-items:start;border-top:none !important;}
    .post-navigation-link-previous, 
    .post-navigation-link-next {flex:1; display:flex;align-items:top;}
    .post-navigation-link-next {justify-content:right;}
    .post-navigation-link-previous a::before { content: "←"; margin-right:.8em;}
    .post-navigation-link-next a::after { content: "→"; margin-left:.8em;}
    .post-navigation-link-previous span,
    .post-navigation-link-next span {display:none !important;}

    .error404 main figure {max-width:50vh;}
    .error404 .columns-root> div:first-child { max-width:fit-content;}
}