/** Jengo My own bootstrap minimal theme, opinonated and modern support only
/* https://codepen.io/enxaneta/pen/adLPwv */
* Norms used:
* - Hyphens, not underscore https://stackoverflow.com/questions/7560813/why-are-dashes-preferred-for-css-selectors-html-attributes#:~:text=Underscores%20require%20hitting%20the%20Shift,%2C%20background%2Dcolor%2C%20etc.

* DEFAULTS
* - section : center, margin 30

* LAYOUTS :
* - header nav
* - container : 1040px, customizable. 
* - container.full-width
* - elements (X arguments on a line, same height),using grid
* - spread (same than elements ?)
* - align-left-right : the 2 children well pushed left (aligned-left) and right (aligned-right) of the div, quite similar to float 
* - hug (compressed at center)
* - grid
* - grid-2, grid-3, grid-4
* - autolayout-vertical (idem figma)
*
* HEADER : 
* Sticky elements : .sticky

* MODIFICATORS for SELF:
* - left, center, right
* - top, middle, bottom
*
* MODIFICATORS for container CONTENT:
* - align-left
* - align-center (default)
* - align-right
* - align-top
* - align-middle
* - align-bottom
*
* WIDGETS
* <div class="swap"> <img> <img class="hover"></div>
* <input type="search"> has a "cancel" button
*
* MODULES
* - breadcrumbs
*
*
*
* DEFAULT STYLES
**/
/*stacking context, to allow header menu to be over (and sticky menus)*/
main{
    position: relative;
    z-index: 0;
    --max-width: 1040px;
}

section {
    margin-left:auto;
    margin-right:auto;
    padding: 30px;
}
section+section{margin-top:40px;}

section.full-width,
.container-full-width {
    width: 100%;
}

header{
    margin-bottom:10px;
}

footer{
    margin-top:50px;
}

/*Container*/
.container {
    max-width: var(--max-width,1040px);
    margin: auto;
}

.elements {
    /*display: flex;*/
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-content: center;
    justify-items: center;
    grid-gap: 1em;
}

.elements>* {
    min-width: 200px;
}

@media (max-width: 767px) {
    .elements {
        flex-direction: column;
        grid-auto-flow: row;
    }
}

.flex,
.spread,
.hug {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
}
.flex>*,
.spread>*,
.spread>ul>li {
    flex: 1;
    text-align: center;
}

.hug {
    flex-basis: auto;
}

:is(.flex,.spread,.elements) > *{
    width:100%;
}

/************************ Horizontal Alignment (align-left , align-center (default), align-right *************************/

/*  Align SELF center on non-flex elements */

:not(img).center{
    margin: auto;
}
img.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.right{text-align:right;}

/* ALIGN CONTENT  on non-flex elements */
:not(.flex,.elements, .hug,.spread).align-center,:is(p,section).align-center {
    text-align: center;
}

/* FLEX ROW elements, spread,hug : contents are centered horizontally by default */
:is(.elements, .spread,.hug,.flex):not(.align-left,.align-right){
    justify-content: center;
}

/*todo : restrict to text-content ? */
:is(.elements, .spread,.hug,.flex):not(.align-left,.align-right).text-content {
    justify-content: center;
}
/* CHILDREN ELEMENTS OF FLEX CENTERED BOX ARE centered  too by default */
:is(.elements, .spread,.hug):not(.align-left, .align-right) > *:not(.left,.right){
    text-align:center;
}

/* aligned left  (css default) */
.spread.align-left,.hug.align-left {}


/************************ Vertical Alignment align-top (default), align-middle, align-bottom *************************/
/* SELF : WE ARE NOT HANDLING SELF VETICAL ALIGNMENT for elements UNLESS in a flex box. USE .sticky top/bottom, or ...*/
:is(.elements, .spread,.hug,.flex:not(.vertical)) > :is(.left,.middle,.right){
/* doesn't make sense*/
}
:is(.elements, .spread,.hug,.flex:not(.vertical)) > :is(.middle){
    align-self:center;
}
:is(.elements, .spread,.hug,.flex:not(.vertical)) > :is(.top){
    align-self:flex-start;
}
:is(.elements, .spread,.hug,.flex:not(.vertical)) > :is(.bottom){
    align-self:flex-end;
}

/* CONTENT VERTICAL ALIGNMENT */
.elements:not(.align-middle,.align-bottom) {
    /*top by default */
}
/*default is top already
section.align-top .elements {
    align-items: flex-start;
}
*/

/*inside ME, handle vertival alignment my content using FLEX */
:not(.flex, .spread,.hug,.elements):is(.align-middle,.valign-center,.align-bottom) {
    display: flex;
}
:not(.flex.vertical, .flex-vertical,.autolayout-vertical):is(.align-middle,.valign-center,.align-bottom) {
    align-items:center;
    align-content:center;
}

/* push to bottom MY content*/
:is(div, .elements).align-bottom {
    justify-content: flex-end
}
/*same as figma */
/* Vertical layout */
.flex.vertical, .flex-vertical,.autolayout-vertical {
    display: flex;
    flex-direction:column;
  
}
/* not really sure about this one*/
.autolayout-vertical {
  gap: 10px;
    overflow-wrap: anywhere;
    flex-basis: min-content;
    flex-grow: 1;
}


/*Vertical layout has centered elements HORIZONTALLY by default*/
:is(.flex.vertical, .flex-vertical,.autolayout-vertical):not(.align-left, .align-right){
    align-items:center;
    align-content: center;/*not really usefull, we don't want multiple colums, which would mean fixed height*/
}


/************************ OTHER LAYOUTS  *************************/

/* For post list layout (or else)
* Image +text block: the text will fill space after image is set to its width
*/
.list-text-image{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    flex-direction: row;
    align-content: flex-start;
}
.list-text-image > img,.list-text-image > img-width,.list-text-image > .post-thumbail{
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 1;
}
.list-text-image > :not(img,.img-witdth,.post-thumbnail){
    flex-shrink: 1;
    flex-basis: 0;
    flex-grow: 1;
}

/* BTN  ;btn-list */

.btn{display:inline-block;}
.btn:not(:disabled,.disabled),input[type=search]:not(:disabled,.disabled) {
  cursor: pointer;
}


.btn-list{
    display: flex;
    margin-top: 20px;
    gap: 10px;
}
.btn-list.align-left{
    justify-content: flex-start;
}
.btn-list.align-right{
    justify-content: flex-end;
}
.btn-list.align-center,.btn-list:not(.align-left,.align-right){
    justify-content:center;
}



/* SWAP */
.swap {
    position: relative;
    display: inline-block;

}

.swap img.hover {
    opacity: 0;
    transition: opacity .2s;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 2;
    width: 100%;
}

.swap:hover {
    background-color: white;
}

.swap:hover img.hover {
    opacity: 1;
}

.swap:hover img:not(.hover) {
    opacity: 0;
}

/*
* LAYOUT : GRID : grid (automatic), grid-2, grid-3, grid-4
*
*/
.grid,
.grid-2,
.grid-3,
.grid-4 {
    display: grid;
    grid-gap: 2em;
    justify-items: center;
    justify-content: center;
}

.grid>*,
.grid-2>*,
.grid-3>*,
.grid-4>* {
    /* https: //css-tricks.com/preventing-a-grid-blowout/ */
    min-width: 0;
}

.grid:not(.align-left)>*,
.grid-2:not(.align-left)>*,
.grid-3:not(.align-left)>*,
.grid-4:not(.align-left)>* {
    text-align: center;
}

.grid {
    /*grid-auto-flow: column;*/
    grid-auto-columns: 1fr;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 767px) {

    .grid,
    .grid-2,
    .grid-3 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* 
* LAYOUT : Align-left-right 
* the 2 children( well, the first and the last if there more, but that's designed for 2) will be forded left and right of block
*/
.align-left-right {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.align-left-right > :first-child{
    text-align:left;
}
.align-left-right > :last-child{
    text-align:right;
}

/* HEADER : Sticky element in header, or whole header sticky
JS : will add a class 'stuck' when element is stuck on top
you can style a shadow :
.sticky.stuck .menu-main-menu-container {box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;}
*/

header .sticky,header.sticky{
    position: sticky;
    top:0;
    background: white;
    z-index: 1;
}
header:has(.sticky){
    display:contents;
}


/* title default style , to be overridden */
.title-box{
    text-align: center;
    margin-bottom: 50px;
    font-size: 2.8em;
}

/* Search form*/
input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    cursor: pointer;
}



/** MODULES 
WARNING : only a few lines of css, for site wide modules !! 
otherwise, stylesheets must be loaded individually. 
@todo future : setup a scss process to include dynamically sitewide module css ??
**/
.breadcrumb {
    padding: 25px 0px 20px;
    margin: 0
}

.breadcrumb li {
    display: inline
}

.breadcrumb li+li:before {
    content: ">";
    margin: 0 2px
}

.breadcrumb li a {
    font-size: 17px;
    letter-spacing: 0.35px
}


/* POST list */
.post-list{margin-bottom: 30px;}

/* defaulty typography style*/
small {font-size: 0.9em;}

.titlebox{margin-bottom:30px;}

b, strong {
    font-weight: 700;
}

.text-content li{
  list-style-type: disc;
  list-style-position: inside;
}

p, li {
    line-height: 1.3em;
}