@import url('reset.css');
@import url('fonts.css');

:root {
    --grey1: 0,0,0;
    --grey2: 51,51,51;
    --grey3: 102,102,102;
    --grey4: 178,178,178;
    --grey5: 229,229,229;
    --grey6: 255,255,255;

    --red0: 149, 0, 0;
    --red1: 194, 0, 0;
    --red2: 214, 85, 85;
    --red3: 224, 127, 127;
    --red4: 236, 178, 178;
    --red5: 248, 229, 229;
    --red6: 249, 235, 235;

    --yel1: 255,187,0;
    --yel2: 255,209,85;
    --yel3: 255,221,127;
    --yel4: 255,234,178;
    --yel5: 255,248,229;

    --maj1: 205,0,205;
    --maj2: 221,85,221;
    --maj3: 230,127,230;
    --maj4: 240,178,240;
    --maj5: 250,229,250;
    --maj6: 255,245,255;

    --gridgap: 12px;
    
    font-size: 19px;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
    -moz-font-feature-settings: "kern", "liga", "clig", "calt", "onum", "pnum";
    -ms-font-feature-settings: "kern", "liga", "clig", "calt", "onum", "pnum";
    -webkit-font-feature-settings: "kern", "liga", "clig", "calt", "onum", "pnum";
    font-feature-settings: "kern", "liga", "clig", "calt" ,"onum", "pnum";
    font-variant-numeric: oldstyle-nums proportional-nums;
    text-rendering: optimizeLegibility;

    scroll-behavior: smooth;
}

html {
    scroll-padding: 50px;
}

@media screen and (min-width: 992px) {
    html {
        scroll-padding: 150px;
    }

	:root {
		font-size: 16px;
	}
}

/* Maybe apply only to needed? 
* {
    transition: 0.2s;
} */

body {
    background: url('../img/bg/body_background_blurred.gif') no-repeat center center fixed !important;
    background-size: cover !important;
    overflow-x: hidden;
	font-size: 0.875rem;
}


/** Font definition **/

i:not(.mce-ico) {
    font-family: "pt_serifitalic", Helvetica, Arial, sans-serif!important;
}

i > b {
    font-family: "pt_serifitalic", Helvetica, Arial, sans-serif!important;
    font-weight: 700
}

b {
    font-family: "pt_serifbold", Helvetica, Arial, sans-serif!important;
    font-weight: 700;
}


/** Text elements **/

a, a:visited {
    text-decoration: none;
    color: rgb(var(--red2))
}
a:hover, a:focus, a:active {
    text-decoration: none;
    color: rgb(var(--red1))
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Fira Sans", Helvetica, Arial, sans-serif!important;
    font-weight: 600;
}

h1 {
    font-size: 2.0rem;
    line-height: 1.9rem;
    margin: 1rem 0;
    text-align: center;
    color: rgb(var(--red2));
}

h2 {
    font-size: 1.7rem;
    line-height: 1.5rem;
    margin: 0.8rem;
    padding: 0.3rem 0.5rem;
    font-weight: 600;
}

h3 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin: 0.7rem 0;
}

h4, h5, h6 {
    font-size: 1.3rem;
    line-height: 1.0em;
    margin: 0.4rem 0;
    font-weight: 500;
 }

h5 {
    font-size: 1.2rem;
}

h6 {
    font-size: 1.1rem;
	font-weight: 400;
}

small {
     font-size: 0.75em;
}

p {
    margin-top: 0.5rem;
	word-break: break-word;
}

@media (min-width: 992px){
    h1 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
    h2 {
        font-size: 2.0rem;
        line-height: 1.7rem; 
    }
    h3 {
        font-size: 1.6rem;
        line-height: 1.6rem;
    }
}

/** Layout **/

.skip-nav {
    position: absolute;
    left: 0.5rem;
    transform: translateY(-120%);
    background: rgb(var(--grey6));
    font-size: 1.5rem;
    padding: 0.2rem 0.5rem 0.1rem;
    border: 2px solid rgb(var(--yel1));
    border-radius: 0 0 0.5rem 0.5rem;
    border-top: none;
    box-shadow: 0 0 0.4rem rgb(var(--grey4));
}
.skip-nav:focus {
    transform: translateY(0);
}

/** Header **/

#banner img {
    width: 100%;
}

/** Navbar **/

#main-navbar {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 200;
    background: rgb(var(--grey1));
    font-weight: 500;
    font-family: "Fira Sans", Helvetica, Arial, sans-serif!important;
    position: sticky;
    top: 0px;
}

#main-navbar ul {
    margin: 0;
    list-style: none;
    padding: 0;
}

@media screen and (min-width: 992px)
{
    #main-navbar ul {
        padding-inline: 0.5rem;
    }    
}

#main-navbar li a {
    color: rgb(var(--grey6));
    display: block;
    padding: 10px 15px;
    line-height: 20px;
}
#main-navbar li a:visited {
    color: rgb(var(--grey6));
}
#main-navbar li:hover a,
#main-navbar li.current a,
#main-navbar li a:focus {
    color: rgb(var(--grey1));
}

@media (min-width: 768px){
    #main-navbar ul {
        display: flex;
    }
    #main-navbar li a {
        padding: 15px;
    }
}

.btn, #main-navbar .btn {
    color: rgb(var(--grey6));
    background-color: rgb(var(--red2));
    color: rgb(var(--grey6));
    background-color: rgb(var(--red2));
    display: inline-block;
    margin-bottom: 0;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    margin: 9px 0.2rem;
}
.btn:hover,
.btn:focus,
#main-navbar .btn:hover,
#main-navbar .btn:focus {
    color: rgb(var(--grey6));
    background: rgb(var(--red1));
}
#main-navbar #login-tab .btn {
    background: rgb(var(--grey6));
    color: rgb(var(--grey1));
}
#main-navbar #login-tab .btn:hover,
#main-navbar #login-tab .btn:focus {
    background: rgb(var(--grey5));
}
#publish-tab a {
    color: rgb(var(--grey6)) !important;
}

#main-navbar #indy-logo img {
    height: 34px;
    width: 34px;
    margin: 8px;
}
#main-navbar #menu-collapse ul:nth-child(2) {
    position: absolute;
    right: 0;
}
#main-navbar #menu-collapse ul:nth-child(2) li {
    margin-left: 0.5em;
}
#main-navbar #menu-collapse ul:nth-child(2) li a {
    padding: 0;
}
#main-navbar #menu-collapse ul:nth-child(2) li a button {
    font-weight: 700 !important;
}

#main-navbar #menu-collapse ul {
    padding-bottom: 50px;
}
@media (min-width: 768px){
    #main-navbar #menu-collapse ul {
        padding-bottom: 0px;
    }
}

/* Couleurs par tab */
#indy-logo:hover a img {
  filter: invert(1);
}
#main-navbar li:not(#publish-tab):not(#login-tab):hover,
#main-navbar li:not(#publish-tab):not(#login-tab):active,
#main-navbar li:not(#publish-tab):not(#login-tab).current {
    background: rgb(var(--grey6));
}
#main-navbar #local-tab:hover,
#main-navbar #local-tab:active,
#main-navbar #local-tab.current,
#main-navbar #tumble-tab:hover,
#main-navbar #tumble-tab:active,
#main-navbar #tumble-tab.current {
    background: rgb(var(--maj4)) !important;
}
#main-navbar #events-tab:hover,
#main-navbar #events-tab:active,
#main-navbar #events-tab.current,
#main-navbar #groups-tab:hover,
#main-navbar #groups-tab:active,
#main-navbar #groups-tab.current,
#main-navbar #tags-tab:hover,
#main-navbar #tags-tab:active,
#main-navbar #tags-tab.current,
#main-navbar #zines-tab:hover,
#main-navbar #zines-tab:active,
#main-navbar #zines-tab.current,
#main-navbar #places-tab:hover,
#main-navbar #places-tab:active,
#main-navbar #places-tab.current,
#main-navbar #elsewhere-tab:hover,
#main-navbar #elsewhere-tab:active,
#main-navbar #elsewhere-tab.current {
    background: rgb(var(--yel3)) !important;
}
#main-navbar #global-tab:hover,
#main-navbar #global-tab:active,
#main-navbar #global-tab.current {
    background: rgb(var(--red4)) !important;
}

/* Navbar header */
/* Boutons ronds visible que sur smartphone/tablet */

.navbar-header {
    padding: 2px 6px;
    display: flex;
}
@media (min-width: 992px) {
    .navbar-header {
        display: none;
        padding: 0px 0px;
    }
}

.navbar-header > * {
    display: flex;
    margin: 0.3em 0.2em;
    padding: 5px 5px;
    border-radius: 20px;
    background: black;
    width: 42px;
    height: 42px;
    border: none;
}

.navbar-header a:hover,
.navbar-header a:focus,
.navbar-header a:active {
    background: rgb(var(--grey6));
}

.navbar-header a img {
    width: 25px;
    height: 25px;
    margin: auto;
    filter: invert(100%);
    display: inline;
}
.navbar-header a:hover img,
.navbar-header a:focus img,
.navbar-header a:active img {
    filter: invert(0%);
    display: inline;
}

/* Publier */
.navbar-header .publish-btn {
    border: 2px solid white;
    background: rgb(var(--red2));
}

.navbar-header .publish-btn img {
    filter: invert(100%);
    padding: 1px;
}
.navbar-header .publish-btn:hover img,
.navbar-header .publish-btn:focus img,
.navbar-header .publish-btn:active img {
    filter: invert(0%);
}

/* Hamburger */
.navbar-header .hamburger {
    border-radius: 2px;
    display: inline-block;
}
.navbar-header .hamburger:hover,
.navbar-header .hamburger:active {
    background: rgb(var(--grey6));
}
.navbar-header .hamburger img {
    width: 100%;
    filter: brightness(1000%);
}
.navbar-header .hamburger:hover img,
.navbar-header .hamburger:active img {
    filter: brightness(1000%) invert(100%);
}

/** Foldable content **/

input[type=checkbox].toggle {
    display: none;
}    

.collapsible-content {
    max-height: 0px;
    overflow-x: scroll;
    visibility: hidden;
}    

.toggle:checked + div.collapsible-content,
.toggle:checked + h2 + div.collapsible-content {
    visibility: initial;
    max-height: unset;
    margin-bottom: 0px; /* 0px to disable animation/transition */
}    

.toggle:checked + #menu-collapse.collapsible-content,
.toggle:checked + h2 + #menu-collapse.collapsible-content{
    max-height: 50vh;
}    

/* Flèches de dépliage des blocks */

.toggle + h2 .toggler {
    transform: rotate(90deg);
}
.toggle:checked + h2 .toggler {
    transform: rotate(0deg) !important;
}

label {
    cursor: pointer;
    height: min-content;
}

nav .toggler:not(:active) {
    animation: rotate 0.3s;
}

.block .toggler:active {
    animation: open 0.5s;
}
.block .toggler:not(:active) {
    animation: close 0.5s;
}

/* Main nav bar */
@media (min-width: 768px){
    #main-navbar .collapsible-content {
        visibility: initial;
        max-height: unset;
        overflow: unset;
        margin-bottom: 0 !important;
    }
    
    .mask {
        display: none;
    }
    
    #main-navbar .toggler {
        display: none;
    }
}

/* Grid definition */

#body, #features, #locals .content, #groups .content, #globals .content, .row, .col {
    display: grid;
    grid-gap: var(--gridgap);
}

#body {
    min-height: 100vh;
	overflow-x: hidden;
}

@media (min-width: 992px){
    #body {
        margin: 0;   
    }
}

/* Content blocks */
@media (min-width: 992px){
    .block:not(#moderation):not(#awaiting) > .collapsible-content {
        visibility: initial;
        max-height: unset;
        overflow: unset;
        margin-bottom: 0 !important;
    }
 
    :not(#moderation):not(#awaiting) > h2 > .toggler {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    main.post #post > div {
        display: grid;
        grid-template-columns: 3fr 1fr;
    }
}

/* Regles generales des blocks auxiliaires */

.inner {
    overflow-y: auto;
    overflow-x: hidden;
}

.block {
    background-color: rgb(var(--grey6));
    border-radius: 2px;
    box-shadow: 0 0em 0.3em rgb(var(--grey4));
    /* margin-bottom: 0.5em; */
    height: max-content;
}

.block h2 {
    background-color: rgb(var(--red5));
    border-bottom: 1px solid rgb(var(--grey4));
    display: flex;
    justify-content: space-between;
	margin: 0;
}
.block:not(.aux-block) h2 a {
    color: rgb(var(--red2));
}
.block h2 a:hover {
    color: rgb(var(--red1));
}

.block .inner > .content {
    padding: 8px;
}

.block .date {
    color: rgb(var(--red2));
}

.block .plus {
    display: block;
    padding: 1rem;
    text-align: right;
}
.block .plus:hover {
    background: rgb(var(--grey6));
    color: rgb(var(--red2));
}

.block:not(.aux-block) .plus:hover {
    background: rgb(var(--maj5));
    color: rgb(var(--red2));
}

.list-el .plus {
    padding: 0;
    display: inline;
    color: rgb(var(--red2));
}

.feature .plus {
    height: 50px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient( #FFF0, #FFF8 20%, #FFFD 30%, #FFF 75%);
}

.feature .plus div {
    height: 32px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 6px;
}

.local .plus,
#page-container .plus {
    height: 32px;
    width: 100%;
    display: block;
    text-align: center;
    padding: 6px;
	margin-top: 6px;
	clear: both;
}

.feature .plus div:hover,
#page-container .plus:hover {
    background: rgb(var(--yel5));
}

.aux-block a p,
.aux-block a small {
    color: rgb(var(--grey1));
}

.aux-block h2 {
    color: rgb(var(--grey2));
    border-bottom: 1px solid rgb(var(--grey4));
    margin: 0;
}

.block h2 a,
.block h2 span {
    color: rgb(var(--grey2));
    position: relative;
    top: 0.2rem;
}

.block h2 a img,
.block h2 span img,
.block h2 label img {
	height: 2rem;
	margin: 0 0.3em 0 0;
    position: relative;
    top: -0.2rem;
}

.block h2 > a,
.block h2 > span {
	display: none;
}

.block h2 > label:first-of-type {
	display: flex;
	width: 100%;
}

@media (min-width: 992px){
	.block h2 > a,
	.block h2 > span {
        display: flex;
    }

    .block h2 > label:first-of-type {
        display: none;
    }
}

.aux-block .list-el {
    display: inline-flex;
    padding: 0 0.2em;
    width: 100%;
    padding: 6px;
}

.aux-block .list-el:hover {
    background: rgb(var(--grey6)) !important;
    color: rgb(var(--red1));
}

.aux-block .icon,
.date-card .icon {
    margin-right: 0.5em;
}

.aux-block .icon img {
    width: 2.6rem;
    height: 2.6rem;
    aspect-ratio: 1;
    border-radius: 25px;
}

/* Espacement des blocks */

.block {
	margin-top: 1em;
}

/* Couleurs de fonds des blocks auxiliaires */

.aux-block,
.yellow {
    background: rgb(var(--yel5));
}
.aux-block h2,
.yellow h2 {
    background: rgb(var(--yel4));
}
.aux-block h2:hover { /* On garde ça ? */
    background: rgb(var(--yel3));
}

.majenta {
    background: rgb(var(--maj6));
}
.majenta h2 {
    background: rgb(var(--maj5));
}

.block.majenta h2:hover {
    background: rgb(var(--maj5));
}

/* Footer */

body > footer {
    text-align: center;
    background: rgb(var(--grey1));
    min-height: 12rem;
    padding-bottom: 2rem;
    color: rgb(var(--grey4));
}

body > footer h3 {
    color: white;
}

footer ul {
    padding: 0;
}

footer ul li {
    display: inline;
    margin-inline: 0.4rem;
}

/** Blocks layout **/

/* Agenda */

.events {
    padding-bottom: 0;
}

.events h2 a {
	margin-bottom: 0;
}

.events small {
    font-size: 0.8em;
    color: rgb(var(--grey3));
}

.icon > .date {
    font-family: "Fira Sans", Helvetica, Arial, sans-serif!important;
	width: 50px;
	height: 50px;
	padding: 0.1em;
    overflow: hidden;
	font-size: 1em;
    font-style: normal;
	font-weight: bold;
	text-align: center;
	background: rgb(var(--red2));
	color: rgb(var(--grey6));
}
.date .jour {
    position: relative;
    top: -12px;
    font-size: 38px;
}
.date .mois {
    position: relative;
    top: -28px;
    font-size: 18px;
}


.events .list-el.today{
    background: rgb(var(--red4));
}
.events .list-el.tomorrow{
    background: rgb(var(--yel4));
}

.events .list-el.today .content,
.events .list-el.tomorrow .content {
    color: rgb(var(--red0));
}

.events .list-el:hover .date {
	/* background: rgb(var(--red1)); */
}

.date-card {
    display: flex;
    box-shadow: 0 0 0.4rem rgb(var(--grey4));
    background-color: rgb(var(--grey6));
    width: max-content;
    padding-right: 1rem;
    margin-block: 0.2rem;
    max-width: 100%;
	margin-inline: auto;
}

#features .date-card {
	margin-top: 0.3rem;
}

@media screen and (min-width: 768px) {
    .date-card {
		float: left;
		margin-right: 1rem;
    }
}
@media screen and (min-width: 992px) {
    .date-card {
        max-width: 15vw;
    }

	header .date-card {
		max-width: 100%;
	}
	
	#main-feature .date-card {
		max-width: 22vw;
	}
}

header .date-card {
	float: none;
	margin-inline: 0 1rem;
}

.date-card .icon {
    background: rgb(var(--red2));
}


/* Breves */

.tumbles .icon img {
    height: 40px;
    width: 40px;
    border-radius: 5px;
}

.tumbles .date {
    color: rgb(var(--maj1));
    font-size: 0.85rem;
}


/* groups */

.group {
    display: flex;
    line-height: 1.1em;
}

.avatar {
    border: solid 1px rgb(var(--grey4));
    margin: 0.4rem;
	height: fit-content;
}

.group ul {
    margin-top: 0.4em;
	padding-left: 1.2rem;
}

.group small {
    font-size: 0.8rem;
}

.groups h6 a {
    color: rgb(var(--grey1));
}

.group-container {
    display: flex;
    margin-top: 1rem;
    border: 1px solid rgb(var(--yel1));
    background: rgb(var(--yel5));
}

.group-container > div {
    padding-inline: 0.5rem;
}

.group-name {
    font-weight: bold;
    margin-block: 0.4rem;
}

@media (max-width: 768px) {
    .groups .content > div:nth-of-type(n+4) {
        display: none;
    }

    .group-container {
        display: block;
    }

    .group-container > img {
        display: block;
        margin-inline: auto;
    }

    .group-name, .group-description {
        text-align: center;
    }
}

/* Tags + pagination? */

.tag,
.tag-cloud-link,
.page-numbers,
.alert,
.submit {
    display: inline-block;
    font-size: 0.8rem;
    color: rgb(var(--red3)) !important;
    background: rgb(var(--yel5));
    padding: 0 0.3rem;
    border: 1px solid rgb(var(--yel1));
    border-radius: 3px;
    margin: 0.1rem;
}

a.tag:hover,
a.tag-cloud-link:hover {
    background: rgb(var(--yel4));
}

.alert {
    display: block;
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    margin-block: 0.5rem;
    background: rgb(var(--red5));
    border: 1px solid rgb(var(--red4));
}

.tag-icon, .type-icon, .meta-icon {
    height: 0.8rem;
    margin: auto;
    margin-right: 0.3rem;
    display: inline-block;
}

.type-icon {
    height: 2.4rem;
}

.local .tag,
.global .tag {
    background-color: rgb(var(--maj6));
	border-color: rgb(var(--maj4));
}

.local .tag:hover,
.global .tag:hover {
    background-color: rgb(var(--maj5));
}

.page-numbers {
    font-size: 1rem;
    margin: 0.05rem;
}

.page-numbers.current,
.page-numbers:hover,
.page-numbers:focus {
    background: rgb(var(--yel4));
}

#body nav {
    margin-block: 0.2rem;
}

@media screen and (min-width: 992px) {
    #body nav {
        margin-block: 0.6rem;
    }
}

#body nav,
#body nav .tag {
    font-size: 1rem;
}

#body nav .type-icon {
    height: 1.2rem;
    margin: 2px;
    margin-left: 0;
}

.pagination-container {
    text-align: center;
    margin: 1.5rem 0;
}

/* Zines */

#zines .content {
	padding: 0;
}

.carousel {
    max-width: 100vw
}

@media screen and (min-width: 992px) {
	.carousel {
		/* No-the-better-fix for zine column getting over-widhted with .carousel being flex
		25vw as col is around a quarter of viewport width, minus paddings/margins */
		max-width: calc(25vw - 13px);
	}
}

.slides-container {
  display: flex;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel-slide {
	display: inline-flex;
	flex: 0 0 100%;
	scroll-snap-align: center;
}

.slide-content {
	width: 100%;
	padding: 8px;
}

#zines .meta {
    margin-bottom: 0.4rem;
}

.carousel-image {
  margin: auto;
  display: block;
}

.carousel-nav {
	display: block;
	height: 100%;
	font-size: 1.2rem;
	padding: 6px;
}

.carousel-nav > *{
    position: relative;
    top: 50%;
}

.carousel-nav:hover {
	background: rgba(var(--grey6), 0.5);
}

/* Attente */

.awaiting .icon img,
.elsewhere .icon img,
.moderation .icon img {
    height: 1.6rem;
    width: 1.6rem;
    aspect-ratio: 1;
    border-radius: 3px;
}

.awaiting .content p,
.moderation .content p {
  margin: 0.2rem 0;
}


/* Local */

.local {
    margin: 0px;
}

.local:hover {
    /* transform: scale(1.01, 1.01); */
    color: rgb(var(--grey1));
}

.image-local {
    width: 32vw;
    max-width: 150px;
    max-height: 150px;
    aspect-ratio: 1;
    overflow: hidden;
    margin: 0 0.5rem 0.3em 0	;
	float: left;
}

.flex > div {
    width: 100%;
	margin-left: 8px;
}


/* Global */

.global {
    margin: 8px;    
}

.image-global {
    height: 55px;
    width: 50px;
    overflow: hidden;
    float: left;
    margin: 0;
    margin-right: 1em;
    margin-top: 1em;
}

@media screen and (min-width: 768px) {
    .image-global {
        margin-right: 10px;
        margin-top: 10px;
	}
}

/* */

.no-post {
    padding: 0.4rem 0.6rem;
    margin: 0;
    font-style: italic;
}

hr {
    padding: 0;
    margin-block: 0.6rem;
    border: none;
    border-top: 1px solid rgb(var(--grey4));
}

@media screen and (min-width: 992px) {
    hr {
        margin-block: 1.2rem;
    }
}


/* Article */
/* in archive pages */

@media (min-width: 992px) {
    .single {
        padding: 0 6vw;
    }
    .double {
        padding: 0 0.5rem;
        grid-template-columns: 3fr 1fr;
    }
}
@media (min-width: 1300px) {
    .single {
        padding: 0 12vw;
    }
    .double {
        padding: 0 7vw;
        grid-template-columns: 3fr 1fr;
    }
}

.double > div:nth-of-type(2) {
    margin-bottom: 1rem;
}

#page-container {
	padding: 0em 0;
    background-color: #fffb;
    height: unset;
	max-width: 100vw;
}

#page-container > * {
    margin: auto;
    padding: 0.6em;
}
.single #page-container > * {
    max-width: 800px;
}
.double #page-container > * {
    max-width: 600px;
}
@media (min-width: 992px) {
    #page-container > * {
        padding-bottom: 4rem;
    }
    .single #page-container > * {
        max-width: 1100px;
    }
    .double #page-container > * {
        max-width: 800px;
    }
}

main:not(.post) h1 {
    color: rgb(var(--grey1));
}

main:not(.post) > section > header,
main > section > footer {
    text-align: center;
} 

main article {
    border-bottom: 1px solid rgb(var(--grey4));
    margin-bottom: 0.4rem;
    padding-bottom: 0rem;
}

@media screen and (min-width: 992px) {
    main article {
        margin-bottom: 0.6rem;
        padding-bottom: 0.2rem;
    }
}

section img {
	max-width: 100%;
}

main article img,
img.thumbnail {
    display: block;
    margin: 1rem auto;
}

main article header img {
    display: inline-block;
    margin: 0;
}    

main article footer ul img {
    margin: 0;
    display: inline-block;
}

.gallery { 
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
 }
.gallery .gallery-item {
	flex: 164px;
	max-width: 164px;
	margin-top: 15px;
	text-align: center;
}
.gallery img {
	box-shadow: 0px 0px 4px #999;
	border: 1px solid white;
	padding: 8px;
	background: #f2f2f2;
}
.gallery figure.gallery-item img:hover {
	background: white;
}
.gallery-columns-2 .attachment-medium {
	max-width: 92%;
	height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
	max-width: 84%;
	height: auto;
}
.gallery .gallery-caption {
	color: #888;
	font-size: 12px;
	margin: 12px 0 12px;
}
.gallery dl, .gallery dt { margin: 0; }
.gallery br+br { display: none; }

/* Alternate colors for gallery cards */
.gallery figure:nth-child(3n) img {
  background: rgba(var(--yel4));
}
.gallery figure:nth-child(3n-1) img {
  background: rgba(var(--maj5));
}
.gallery figure:nth-child(3n-2) img {
  background: rgba(var(--red4), 0.6);
}

/* Post content */
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5 {
    text-indent: 1rem;
}

.post-content h5 {
  text-indent: 1.8rem;
}

.post-content h6 {
    text-indent: 2rem;
}

.post-content img {
	margin-block: 1em;
    margin-inline: auto;
    display: block;
	max-width: 95%;
}

blockquote {
    background-color: rgb(var(--grey5));
    font-style: italic;
    margin-inline: 0.3rem;
    padding: 0.2rem;
    padding-left: 0.5rem;
    border-left: 3px solid rgb(var(--grey4));
}

/*  Agenda */
#calendar {
    margin: 2rem 0;
}

#calendar .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#calendar .flex > div {
    background: rgba(var(--grey6), 0.5);
    margin: 2px;
    width: 100%;
    padding: 2px;
    flex: 80px;
}

.calendar-header {
    font-weight: bold;
    position: sticky;
    top: 0px;
    background: rgb(var(--yel4));
    padding-top: 3px;
}

.calendar-header div {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
}

.calendar-week {
    margin-block: 0.4rem;
}

@media screen and (min-width: 768px) {
    .calendar-week {
        margin-block: 0.1rem;
    }
}

.calendar-day {
    min-height: 50px;
    border: 1px solid rgb(var(--grey5));
}

.calendar-today {
    border: 1px solid rgb(var(--red4));
}

.calendar-hide {
    opacity: 0;
    min-height: 0;
}

ul.calendar-list {
    padding: 0;
    margin: 0;
}

ul.calendar-list li {
    list-style: none;
    line-height: 0.8rem;
    padding-inline: 0.2rem;
    margin-block: 0.4rem;
    text-indent: 0.4rem;
}

ul.calendar-list li::before {
    content: '•';
    margin-right: 0.3rem;
}


/* Form */

fieldset {
    border: 1px solid rgb(var(--grey4));
    padding: 1rem;
    border-radius: 4px;
}

legend {
    padding-inline: 0.5rem;
}

dt label {
    font-weight: 600;
    font-size: 1rem;
}

dd {
    margin: 0;
}

dd input {
    border: 1px solid rgb(var(--yel2));
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    background-color: rgb(var(--grey6));
    color: rgb(var(--grey1));
}
dd input:focus {
    border: 2px solid rgb(var(--yel1));
}

/* Publish */

.publish-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.publish-description {
    display: block;
    flex: 200px;
    background: rgba(var(--grey6), 0.5);
    border: 1px solid rgb(var(--grey4));
    margin: 0.3rem;
    padding: 0.5rem;
    text-indent: 1rem;
}

.publish-description:hover {
    background: rgba(var(--grey6), 1);
}

.publish-description img {
    display: block;
    margin-inline: auto;
}

.form-type-description img {
	display: none;
}

/* Comments */

ol.comment-list {
  padding-left: 0 !important;
}

.comments-area {
    border-top: 1px solid rgb(var(--grey3));
    margin-top: 4rem;
    padding-top: 1rem;
}

.comments-area li, .comment-details {
    border: 1px solid rgba(var(--grey2), 0.2);
    margin-block: 1em;
}

.comments-area ol {
    list-style: none;
    padding-left: 1rem;
    margin-block: 1rem;
}

.comments-area ol li {
    background: rgba(var(--yel1), 0.1);
    margin-right: 0.4rem;
}

.comment-list > li {
    margin-right: 0 !important;
}

.comment-body, .comment-details {
  padding: 0.4rem;
}

.comment-content {
  padding-left: 1rem;
}


.comment-form label,
.comment-form input {
  display: block;
}

.form-submit input {
    font-size: 1.2rem;
}

textarea, .comment-form input {
    max-width: calc(100vw - 2rem);
}

.comment-details summary {
	color: rgb(var(--red2));
}
.comment-details summary:hover {
	color: rgb(var(--red1));
}

.comment-details[open] summary {
	border-bottom: 1px solid rgba(var(--grey2), 0.2);
	padding-bottom: 0.4rem;
	margin-bottom: 0.4rem;
}

summary {
	cursor: pointer;
}

/* Utilities */

.hidden,
.hide-phone {
    display: none !important;
}

.show-phone {
    display: initial !important;
}

@media (min-width: 992px){
    .hide-phone {
        display: inherit !important;
    }
    .show-phone {
        display: none !important;
    }
}

.no-padding,
.no-padding > * {
    padding: 0 !important;
}

.center {
    text-align: center;
}

.icon {
    display: inline-block;
    margin: 0;
}

.meta.icon {
    height: 16px;
    margin-right: 2px;
}

small .meta.icon {
    height: 13px;
}

.grid {
    display: grid;
}

.flex {
    display: flex;
}

.wrap {
	flex-wrap: wrap;
}

.wrap-300 {
	flex: 300px;
}

.m-left-auto {
    margin-left: auto;
}

.no-margin {
	margin: 0 !important;
}

li, dd {
    margin-bottom: initial;
}

/* Animations */

@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

@keyframes open {
    from { transform: rotate(90deg); }
    to   { transform: rotate(-360deg); }
  }
@keyframes close {
    from { transform: rotate(-360deg); }
    to   { transform: rotate(90deg); }
  }