/*
Theme Name:   le Sourire au pied de l'échelle 2025
Theme URI:    http: //example.com/
Description:  Thème enfant du thème Twenty Twenty Five
Author:       Fred Rogé
Author URI:   http: //example.com/
Template:     twentytwentyfive
Version:      0.1.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
	1. 	Document Setup







*/

/* -------------------------------------------------------------------------- */
/*	1. Document Setup
/* -------------------------------------------------------------------------- */

html, button, input, select, textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* 
 * Layout setup 
 */
body {
  width: 100%;
}

header#site-header{
  display:none;
}

/* No site title nor decritpion */
/* duplicate with header#site-header
div.site-title {
  display: none;
}
*/

/* No mobile menu text */
/* duplicate with header#site-header
header span.toggle-text {
  display: none;
}
*/

/* No now empty title header */
/* TODO : delete and edit in admin TT5 */
header.entry-header {
  display: none;
}

/* No page title */
article.page .entry-title {
  display: none;
}

/* No widget title */
div.widget-content .widget-title {
  display: none;
}

/* Reduce Header bottom padding to raise content */
/* useless with header#site-header hidden */
div.header-inner {
  padding-bottom: 1.8rem;
}


p.powered-by-wordpress {
  display:none;
}

/* TODO  inutile ?
body.home main article .section-inner {
  display:none;
} */


/* Equivalent de 4 css twentytwenty :
#site-content .post-inner {
    padding-top: 0;
} 
#site-content { 
  overflow: hidden; 
} 
main { 
  display: block; 
}
svg, img, embed, object { 
  display: block; 
  height: auto; 
  max-width: 100%; 
}
*/
main.wp-block-group {
  padding-top: 0;
  overflow: hidden; 
  display: block; 
} 

#svg-container > svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------------------------- */
/*	1. Document Setup
/* -------------------------------------------------------------------------- */

/* Menu (selector to override 2020's) */
.modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a {
/*   text-shadow: black 0.1em 0.1em 0.1em; */
  // font-family: 'Chelsea Market', cursive;
  font-family: 'Verdana';
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.modal-menu > li:nth-child(odd) {
  background-color: #000000;
}

.modal-menu > li:nth-child(odd) > a, .modal-menu > li:nth-child(odd) > .ancestor-wrapper > a {
  color: #ffffff;
}

.modal-menu > li:nth-child(even) {
  background-color: #ffffff;
}

.modal-menu > li:nth-child(even) > a, .modal-menu > li:nth-child(even) > .ancestor-wrapper > a {
  color: #000000;
}

/* Hack for special case : Jus de box sticker */
.modal-menu > li:nth-child(4) {
  background-color: #619098;
  background-image: url("images/jusdebox-menu.jpg");
  background-position: 0px 0px;
  background-size: auto auto;
  background-repeat: no-repeat;
}
.modal-menu > li:nth-child(4) > a, .modal-menu > li:nth-child(4) > .ancestor-wrapper > a {
  color: #000000;
  opacity:0;
}


/* .menu-modal-inner {
  background-color: #619098;
}
 */
/* 
 * ladder custom templates  
 */
/* Important : svg-container sibling must not be static for z-index, float to expand container's height, full width*/
main div#content-ladder {
  position: relative; 
  float: left;
  width: 100%;
  z-index: 10;
}

div#svg-container {
  position: absolute;
  width: 100%;
  border-image-width: 0px;
}

div#svg-container > svg#svg-accueil-mobile {
  display:none;
}

div#svg-container svg{
  border-image-width: 0px;
}

/* global marging */
div#content-ladder>div#content-ladder-content {
  margin-left: 0;
  margin-right: 0;
  padding-left: 4vw;
  padding-right: 2vw;
}

div#content-ladder>div {
  /* override default 2020 settings of -4rem */
  width: 100%; 
}

div#content-ladder-sidebar {
  display: none;
}

/* Important : relative container for absolute content with hidden overflow */
/* body:not(.home):not(.modele-newsletter):not(.modele-histoire) div.page-ladder-container { (obsolett)*/
div.page-ladder-container:not(.home):not(.modele-newsletter):not(.modele-histoire){
  position: relative;
  overflow: hidden;
  background-image: url("images/papier.jpg");
  background-position: 0px 0px;
  background-size: auto auto;
  background-repeat: repeat-y;
}

div.page-ladder-container.modele-histoire {
  position: relative;
  overflow: hidden;
  background-image: url("images/echelle-miroir.png"), url("images/papier.jpg");
  background-position: 49.5% 208vw, 0px 0px;
  background-size: 6% auto, auto auto;
  background-repeat: repeat-y, repeat-y;
}


div.content-left-ladder {
  margin-top: 60%; /* important as padding would HIDE the svg container, making the bubbles unclickable */
  padding-left: 45%;
}

div.content-right-ladder {
  margin-top: 60%; /* important as padding would HIDE the svg container, making the bubbles unclickable */
  padding-right: 40%;
}

div.content-center-2vins-ladder,
div.content-center-histoire-ladder {
  /* height: 100%; */
  margin-top: 55%;  /* important as padding would HIDE the svg container, making the bubbles unclickable */
  padding-right: 0%;
}

div.content-no-ladder {
  margin-top: 35%; /* important as padding would HIDE the svg container, making the bubbles unclickable */
}

div#content-ladder-content .ladder-content-title {
  display: none;
}

page-ladder-container.home div.entry-content {
  display: none;
}

/* Newsletter page case : invert position attribute of svg and content*/
page-ladder-container.modele-newsletter div#svg-container {
  position: relative;
  width: 100%;
  border-image-width: 0px;
}

page-ladder-container.modele-newsletter main div#content-ladder {
  margin-top: 64.8%; /* important not to HIDE the svg container, making the main bubbles unclickable */
  position: absolute; 
  /* float: left; */
  width: 100%;
  /* z-index: 10; */
}

div#newsletter-wrapper {
  margin-left: 22%;
  margin-right: 31%;
}

div#newsletter-wrapper #newsletter-email {
  font-size: 1.3vw;
  border-style: none;
  border-color: #ffffff;
  padding: 0 1.8vw;
  /* background-color: #d9d9d9; */
  color: #d6510e
}

/* prevent outline box display on focus */
div#newsletter-wrapper #newsletter-email:focus {
  outline:none;
}

div#newsletter-wrapper #newsletter-button {
  display: block;
  float: right;
  border-style: none;
  border-radius: 20px;
  padding: 0.4vw 1.44vw;
  margin: 2vw 0 0 1vw;
  background-color: #000000;
  font-size: 1.0vw;
  font-weight: normal;
  letter-spacing: 0.15vw;
  text-transform: capitalize;
}

page-ladder-container.modele-newsletter div.content-no-ladder {
  margin-top: 0%; /* important as padding would HIDE the svg container, making the bubbles unclickable */
}

div.content-right-ladder p,
div.content-right-ladder .wp-block-image {
  text-align: right;
}

div.content-left-ladder p {
  text-align: left;
}

div.content-left-ladder .wp-block-image,
div.content-center-2vins-ladder .wp-block-image,
div.content-center-histoire-ladder .wp-block-image {
  text-align: center;
}

/* div.content-center-2vins-ladder div.wp-block-columns p:not(.woocommerce p),
div.content-center-histoire-ladder div.wp-block-columns p:not(.woocommerce p) {
 */
div.content-center-2vins-ladder div.wp-block-columns p,
div.content-center-histoire-ladder div.wp-block-columns p {
  text-align: left;
}

/* We want to keep the columns on each side together with the ladder ! */
div.content-center-2vins-ladder div.wp-block-columns,
div.content-center-histoire-ladder div.wp-block-columns {
 flex-wrap: nowrap;
}

/*
 * Checkout case
 */
/* override this 20-20 style
@media (min-width: 782px) {
  .wp-block-column:not(:first-child) {
      margin-left: 32px;
  }
}*/
div#content-ladder .wp-block-column {
  margin-left: 0;
}
/*
/* wp-block-columns no flex, to get rid of @media (max-width: 599px) .wp-block-column { flex-basis: 100%!important;} */
div#content-ladder.content-center-2vins-ladder .wp-block-columns,
div#content-ladder.content-center-histoire-ladder .wp-block-columns {
  /* display: block; */
  display: flex;
  overflow: auto; /* prevents collapsing */
}

/* strange selector... to override 20-20's @media (min-width: 782px)...  */
.woocommerce-checkout #site-content .woocommerce {
  max-width: 100%;
  padding: 0;
  margin: auto;
}
 
/* insufficient, overriden by twentytwenty selector accuracy 
TO WATCH AS 20-20 selector is entry-content > *.:not(.classes...) */ 
/*.entry-content p {...}
 */
div#content-ladder p, 
div#content-ladder div {
  // font-family: 'Chelsea Market', cursive;
  font-family: 'Verdana';
  line-height: 120%;
  /* override default 2020 settings of 50rem, see main comment above */
  max-width: 100%;
}

/* override miscellaneous text properties for inner elements*/
div#content-ladder label, 
div#content-ladder input {
  // font-family: 'Chelsea Market', cursive;
  font-family: 'Verdana';
  line-height: 120%;
}

/* 
 * miscellaneous  
 */

/* For SVG-support plugin : correct SVG scaling */
/*was for SVG support : to regression-test and erase
.style-svg {
       max-width: 100%;
       height: 100%;
}

/* SVG-support plugin : viewprt is full browser area * /
.svg-home {
  width: 100vw;
  height: 100hw; 
}
*/

/* **************************************
 * Checkout layout  
 * **************************************/
  /* global hidings (in appearance order)*/
  div.woocommerce-billing-fields>h3,
  /* div.woocommerce-shipping-fields, */
  div.woocommerce-additional-fields, /* watch this one */
  h3#order_review_heading,
  div.woocommerce-checkout-payment>ul.wc_payment_methods
  {
   display: none;
  }

 /* show only the shipping options */
 div.woocommerce-checkout-review-order>table.woocommerce-checkout-review-order-table>thead,
 div.woocommerce-checkout-review-order>table.woocommerce-checkout-review-order-table>tbody,
 div.woocommerce-checkout-review-order>table.woocommerce-checkout-review-order-table>tfoot>tr:not(.shipping)
  {
   display: none;
  }
 

 /* Billing area with 100% width, no flaot - NB there 2 float/50% defined by 20-20 ! */
  .woocommerce .woocommerce-checkout .col2-set { /* 20-20 overwrite */
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  /* div#content-ladder */
  div.woocommerce-billing-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
   .woocommerce .woocommerce-checkout .col2-set .form-left-col {
    flex: 0 0 100%;
  }
  .woocommerce .woocommerce-checkout .col2-set .form-right-col {
    flex: 0 0 100%;
  }
  


/* rendering of woocommerce two columns fields */
/* selector must override div.content-center-2vins-ladder div.wp-block-columns p */
div.content-center-2vins-ladder .woocommerce form p.form-row-first, 
div.content-center-2vins-ladder .woocommerce-page form p.form-row-first {
    width: calc(50% - 1vw); /* -1 for separation*/
    margin-right: 0vw;
}

div.content-center-2vins-ladder .woocommerce form p.form-row-last, 
div.content-center-2vins-ladder .woocommerce-page form p.form-row-last {
    width: calc(50% - 1vw); /* -1 for separation*/
    margin-left: 0vw;
}

/* order-review idem col2-set (ie #customer-detail), ie payment notice and button */
.woocommerce-checkout form #order_review, 
.woocommerce-checkout form #order_review_heading {
  float: none;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

@media screen and (max-width: 700px) {
  
  body {
    font-size: 1.5rem;
  }
  
  /* show menu */
  header#site-header{
    display:block;
  }

  
  /* show image with a title class set in wp-admin */
  div#content-ladder-content .ladder-content-title {
    display: block;
  }

  page-ladder-container:not(.home):not(.modele-newsletter) div#svg-container {
    display: none;
  }

  /*   body.home div.entry-content {
    display: block;
  }
 */
 
  div#svg-container > svg#svg-accueil-mobile {
    display:block;
  }

  div#svg-container > svg#svg-accueil {
    display:none;
  }
  div#content-ladder:not(.content-center-2vins-ladder) div#content-ladder-sidebar {
    display: none;
  }

  div.page-ladder-container:not(.home):not(.modele-newsletter):not(.modele-deux-vins) {
    position: relative;
    overflow: hidden;
    background-image: url("images/fond_echelles.jpg");
    background-position: -50px 0px;
    background-size: auto auto;
    background-repeat: repeat-y;
  }

  /* global marging */
  page-ladder-container:not(.modele-newsletter) div#content-ladder:not(.content-center-2vins-ladder) div#content-ladder-content {
    margin-left: 0;
    margin-right: 0;
    padding-left: 126px; /* left ladder ! */
    padding-right: 2vw;
  }

  /* jus de box case */ 
  div#content-ladder.content-center-2vins-ladder {
    display: flex;
    padding-left: 4vw;
    padding-right: 2vw;
  }
  
   div#content-ladder.content-center-2vins-ladder div#content-ladder-sidebar {
    display: block;
    padding-left: 2vw;
    padding-right: 2vw;
    margin-top: 1.5em;
    margin-bottom: 0em;
    flex: 1;
  }

  div#content-ladder.content-center-2vins-ladder div#content-ladder-content {
    flex: 3;
  }

  /* on smartphone, one column only */
  div.content-center-2vins-ladder .woocommerce form p.form-row-first, 
  div.content-center-2vins-ladder .woocommerce-page form p.form-row-first,
  div.content-center-2vins-ladder .woocommerce form p.form-row-last, 
  div.content-center-2vins-ladder .woocommerce-page form p.form-row-last {
    float: none;
    width: 100%;
  }


  /* Special case Jusdebox : no repeat, nop flex, floating ladder */
  div.content-center-2vins-ladder#content-ladder {
    display: block;
  }
  
  div.content-center-2vins-ladder#content-ladder #content-ladder-sidebar {
    float: right;
    background-image: none;
    width: 20%; /* override div#content-ladder>div */
  }

  div.content-center-2vins-ladder#content-ladder #content-ladder-content {
    display: block;
    width: 100%; /* override div#content-ladder>div#content-ladder-content */
  }

  div#content-ladder.content-center-2vins-ladder .wp-block-columns {
    display: block;
    overflow: initial; /* auto prevents collapsing AND flowing */
  }

  div#content-ladder.content-center-2vins-ladder .wp-block-image figure {
    clear: none; /* both killed any floating element */
  }



  div.content-left-ladder {
    margin-top: 0%; /* important as padding would HIDE the svg container, making the bubbles unclickable */
    padding-left: 0%;
  }

  div.content-right-ladder {
    margin-top: 0%; /* important as padding would HIDE the svg container, making the bubbles unclickable */
    padding-right: 0%;
  }

  div.content-right-ladder p,
  div.content-right-ladder .wp-block-image {
    text-align: left;
  }

  div.content-center-2vins-ladder,
  div.content-center-histoire-ladder {
      margin-top: 0%; /* important as padding would HIDE the svg container, making the bubbles unclickable */ 
      padding-right: 0%;
    }

  div.content-no-ladder {
    margin-top: 0px; /* important as padding would HIDE the svg container, making the bubbles unclickable */
  }

  div#content-ladder.content-center-2vins-ladder .wp-block-columns {
    flex-direction: column;
  }
  
  div#content-ladder.content-center-histoire-ladder .wp-block-columns:nth-child(odd) {
    flex-direction: column;
  }

  div#content-ladder.content-center-histoire-ladder .wp-block-columns:nth-child(even) {
    flex-direction: column-reverse;
  }
  
  /* minimal change 20-20 defaults for login link  */
  div#content-ladder.content-center-2vins-ladder div.woocommerce-info {
    padding: 1.5rem 0rem;
  }
  
  /* change 20-20 default for Shipping method : choices under title, all left aligned */
  div#content-ladder.content-center-2vins-ladder .wp-block-columns tr.woocommerce-shipping-totals, 
  div#content-ladder.content-center-2vins-ladder .wp-block-columns tr.woocommerce-shipping-totals > th, 
  div#content-ladder.content-center-2vins-ladder .wp-block-columns tr.woocommerce-shipping-totals > td {
    display:block;
    text-align: left;
  }

  div#content-ladder.content-center-2vins-ladder #shipping_method li {
    justify-content: flex-start;
  }
  
  /* smaller margins */
  div#content-ladder.content-center-2vins-ladder form.woocommerce-checkout #order_review .woocommerce-checkout-review-order-table {
    margin-top: 0em;
    margin-bottom: 0em;
  }

} /* @media */

/* POP IN */

a#popin{
  display: none;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}  

.smart-popin {
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    /* Scrollable */
    overflow: auto; 
    /* Invisible at first */
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -ms-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
}

.smart-popin .sp-body {
    background-color: #ffffff;
    padding: 2em;
    -webkit-box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25);
    box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25);

    width: 66.66%;
    min-width: 300px;

    margin: 0 auto;
}

/* inline-block to shrink popin to its content's size and center it*/
div.sp-body {
/*   display: inline-block; */
  text-align: center; 
}

/* OR auto size the picture */
div.sp-body>img {
max-width:100%;
max-height:100%
}

/* Ensure content will be clickable by putting this container above sp-close in this case */
.sp-body {
    position: relative;
    z-index: 1;
}

.smart-popin:target {
    opacity: 1;
    visibility: visible;
}

.smart-popin .sp-table {
    display: table;
    height: 100%;
    width: 100%;
}
.smart-popin .sp-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center; 
    padding: 10px;
}

.smart-popin .sp-back {
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    display: block;
}
.smart-popin .sp-close {
    position: absolute;
    top: 0;
    right: 0;

    width: 36px;
    height: 36px;

    text-align: center;
    line-height: 36px;
    font-size: 1.6em;
    color: #000000;
    font-weight: 900;
    text-decoration: none;
}
/* END POP IN */

/* -------------------------------------------------------------------------- */
/* x. page "reservations"
/* -------------------------------------------------------------------------- */

/* unavailaible as settings NB : several classes exist, may change */
.wc-block-product-description p.wp-block-paragraph {
  text-align: left;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-stock-indicator .jdb-stock{
  text-align: left;
}

/* disponibilities (places) */
.jdb-stock{
  font-weight:bold;
}

.jdb-stock-ok{
    color:#2b7a2b;
}

.jdb-stock-low{
    color:#d87b00;
}

.jdb-stock-soldout {
    display: none;
    // display: inline-block;
    padding: .35em 1.2em;
    background: #c40000;
    color: white;
    font-weight: bold;
    border-radius: .35em;
    text-transform: uppercase;
    margin-bottom: .75em;
}

/* badge / pill / chip for category */
.taxonomy-product_cat a[class*="product_cat-"] {

    display:inline-block;
    padding:.35em 1em;
    border-radius:999px;
    text-decoration:none;
    font-weight:600;

}

.taxonomy-product_cat a.product_cat-initiation {
    background:#4d9de0;
    color:#fff;
}

.taxonomy-product_cat a.product_cat-degustation {
    background:#5cb85c;
    color:#fff;
}

.taxonomy-product_cat a.product_cat-theme-fouille {
    background:#b85ca5;
    color:#fff;
}

/* badge soldout */
.wc-block-components-product-image__inner-container {

    position: absolute;
    inset: 0;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 0;

    pointer-events: none;
}

.wc-block-components-product-image__inner-container .wp-block-image {

    margin: 0;
}

.wc-block-components-product-image__inner-container .jdb-soldout-ribbon img {

    display: block;

    max-width: 100%;
    height: auto;

    opacity: 0;

    border: none;
}

/* conditionnal display */
.wc-block-components-product-image__inner-container .jdb-soldout-ribbon img {

    opacity: 0;
}

.wc-block-components-product-image__inner-container .jdb-soldout-ribbon.jdb-image-soldout-visible img {

    opacity: 1;
}



/* trash */

/* as wp-block-columns collapsed, clear next section (woocommerce) and add a replacement top-margin*/
/*div#content-ladder.content-center-2vins-ladder div.woocommerce {
  clear: both;
  margin-top: 4rem;
}
*/