/* -----------------------------------------------------------------
  "man" definition for this file.:
   This file consist of mainly two things: 
    - CSS definitions that are shared between FE / BE (custom fonts, sizes)
    - CSS helper - 3let-css mini library for rough positioning of elements
 ----------------------------------------------------------------- */


/* -----------------------------------------------------------------
  1) DEFINE custom font - shared with FE & BE
 ----------------------------------------------------------------- */



/* ----------------------------------------------
Inter variable font. Usage:

@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;900&display=swap');
---------------------------------------------- */

@font-face {
    font-family: 'hotsans';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('../fonts/hotsans/hotsans_test_bold-webfont.woff2') format('woff2');
  }
@font-face {
    font-family: 'hotsans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/hotsans/hotsans_test_regular-webfont.woff2') format('woff2');
  }
@font-face {
    font-family: 'hotsans';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/hotsans/hotsans_test_black-webfont.woff2') format('woff2');
  }
@font-face {
    font-family: 'hotsans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/hotsans/hotsans_regular-italic.woff2') format('woff2');
    src: url('../fonts/hotsans/hotsans_regular_italic.woff') format('woff');
  }
@font-face {
    font-family: 'punta';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/punta/Punta-Regular_Italic.woff2') format('woff2');
  }
  

/*
@font-face {
  font-family: "Roboto";
  font-stretch: normal;
  font-weight: 400;
  src: url('../fonts/roboto/roboto-regular-webfont.woff') format('woff2');
}*/

.dashicons, dashicons:before{ font-family: dashicons; display: inline-block;}

/* -----------------------------------------------------------------
  2) CUSTOM font - so editor and frontend can have same look & feel
 ----------------------------------------------------------------- */

body:not(.wp-admin), /* frontend */
.edit-post-visual-editor .editor-styles-wrapper /* backend - admin */
{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-family: "hotsans", sans;
  font-weight: 400;
  font-size: 18px; 
  line-height: 1.4;
}
h1, h2{ line-height: 1.2 }

/* custom - title in center? */
.editor-visual-editor__post-title-wrapper.edit-post-visual-editor__post-title-wrapper{
  text-align: center;
}

.edit-post-visual-editor .editor-styles-wrapper em,
main em{
	font-family: punta;
}


/* -----------------------------------------------------------------
  3) hamburger panel (modal overlay with mobile menu etc..)
 ----------------------------------------------------------------- */
.burger {
  display: block;
  position: fixed;
  z-index: 100;
  width: 100dvw;
  height: 100dvh;
  top: -100dvh;
  left: 50%;
  right: 50%;
  margin-left: -50dvw;
  margin-right: -50dvw;
  padding: 0 10px;
}
/** ( font white - background color - black.. :) )
  wob - white on black
  bow - black on white 
*/
.burger.wob{ background-color: black }
.burger.bow{ background-color: white }

/* TOGGLER NAV BUTTON */
.ham .menu-icon { cursor: pointer; position:relative; padding: 15px 10px; user-select: none; z-index: 101 }
.ham .menu-icon .navicon {display: block;height: 2px;position: relative;transition: background .2s ease-out;width: 18px }
.ham .menu-icon .navicon:before,
.ham .menu-icon .navicon:after { content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100% }
/* HELPER CLASSES 
-----------------------------------------------------------------
white / black theme navigation 
----------------------------------------------------------------- */
.ham.wob .menu-icon .navicon { background-color: white }
.ham.bow .menu-icon .navicon { background-color: black }

.ham.wob .menu-icon .navicon:before,
.ham.wob .menu-icon .navicon:after { background-color: white }
.ham.bow .menu-icon .navicon:before,
.ham.bow .menu-icon .navicon:after { background-color: black }

.ham .menu-icon .navicon:before { top: 5px }
.ham .menu-icon .navicon:after { top: -5px }
/* mobile menu btn (right with 3 bars) */
.ham .menu-btn {  display: none }
.ham .menu-btn:checked ~ .burger { top: 0 }
.ham .menu-btn:checked ~ .menu-icon{ position: inherit }
.ham .menu-btn:checked ~ .menu-icon .navicon { background: transparent }
.ham .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg) }
.ham .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg) }
.ham .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.ham .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0 }


/*  >>>>>>>>>>>>>>  */

/*     3LET CSS     */

/*  >>>>>>>>>>>>>>  */


/*
  "3let" CSS library.

  What this library do - and why this?
  Purpose of yet another library is:
    - I need something to sketch-up site quickly - not pixel perfect - but to "just work" (roughly 80-90+%)
    - I've writen CSS ~ 2 decades - and know most of props and values by heart
    - in that case - invest zero on learning curve - and start ASAP with what you know

  So as you may have got this already, 3let CSS is mainly for people that know pretty good CSS.
  Start simply by 3 letter rule for both props and values - and build shit with it!
  That's it! 

  TLRD:
    - prop | value has max 3 letters: 
        color => `col`
        white => `whi`
    - value is `underscore` separated from prop: 
        color: white => `col_whi`
        color: black => `col_bla`
    - if prop | value has less then 3 letters, use what we got:
        `background-repeat: no-repeat` > `bac-rep_no-rep`
    - multi word for either prop or value - is single dash separated: 
        `font-size` > `fon-siz_05`
        `list-item` > `lis-ite_non`
    - color & background color we only got 3: 
        - white 
        - black
        - inherit (to be able to revert to parent)
        - (plus transparent maybe?)
    - if value has unit: px, em etc, we ditch it
        column: 200px 2  > `col_200-2`
        font-size: 2em   > `fon-siz_20`
        font-weight: 400 > `fon-wei_400`


    NOTE: 
    - not all props or values for sure will be here,, to build this kind of library one needs to be pretty opinionated.
    To choose what should be putted as directive here, and what not.. that kind of desition was most hard to make.

    I've been mostly led by this notion - that helped me answer this hard questions ..: 
    - "What would be the most usefull things for building simple clean site"

    As example, I've putted only this next three font colors: 
      color: white, 
      color: black 
      color: inherit 

      col_whi, col_bla, col_inh


    so, basically by choosing only this 3 colors we've stripped the lib size, and know in advance that basically any 
    other specific color - we need to specify somewhere else in project.
    By doing that - we should get best in both cases - getting low cost (in lib size) - with great productivity.


    Layout defs
    We deffined most common weight / heights and they can be used for fast layout prototypes:

    - main layout (padding, margins etc..) units are in em (root font size) - use fnt siz to ch it
    - only most used props are layed out here, and not all!


    Some specific rules:

    - if val has some range like 1-100 we devide it to 10 peaces
        - .opa_1 { opacity: .10 } ==== 10, 20, 30,... _1, _2, _3, _4 ...
        - .z-ind_30 { z-index: 30 } ==== 10, 20, 30,... _1, _2, _3, _4 ...
    - when decimales are use like 0.6em use VAL as 2 dig rep 
        - fon-wei_400   /    font-weight: 400;
        - fon-siz_06    /    font-size: 0.6em;
        - fon-siz_15    /    font-size: 1.5em;
        - col_350-3     /    columns: 350px 3;

 */


/* bckg color */
.bac-col_whi{ background-color: white } 
.bac-col_bla{ background-color: black } 
.bac-col_tra{ background-color: transparent }
/* color: white | black */
.col_whi, .col_whi a{ color: white } 
.col_bla, .col_bla a{ color: black }
.col_inh, .col_inh a{ color: inherit }

/* LAYOUT 
  => COLUMNS */

.col_200-2{ columns: 200px 2 } .col_350-2{ columns: 350px 2 }
.col_200-3{ columns: 200px 3 } .col_350-3{ columns: 350px 3 }
.col_200-4{ columns: 200px 4 } .col_350-4{ columns: 350px 4 }
.col_200-5{ columns: 200px 5 } .col_350-5{ columns: 350px 5 }
.col_200-6{ columns: 200px 6 } .col_350-6{ columns: 350px 6 }
.col-gap_0{ column-gap: 0 }
.col-gap_1{ column-gap: 1em }
.col-gap_2{ column-gap: 2em }
[class*="col_2"]>*,
[class*="col_3"]>*{ break-inside: avoid; page-break-inside: avoid; margin-bottom: 1em }

/* LAYOUTS
  => GRIDS */
[class*=gri_]{ display: grid; grid-gap: 10px }
.gri_100{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) }
.gri_200{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) }
.gri_300{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) }
.gri_400{ grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) }
.gri_500{ grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)) }
/* grid gap */
.gri-gap_0{ grid-gap: 0 }
.gri-gap_1{ grid-gap: 1em }
.gri-gap_2{ grid-gap: 2em }
.gri-gap_3{ grid-gap: 3em }
.gri-gap_4{ grid-gap: 4em }
.gri-gap_5{ grid-gap: 5em }

/* LAYOUTS
  => flex positions */
.jus-con_cen{ justify-content: center }
.jus-con_end{ justify-content: end }
.jus-con_sta{ justify-content: start }
.fle-dir_row{ flex-direction: row }
.fle-dir_col{ flex-direction: column }
.fle-wra_wra{ flex-wrap: wrap }
.fle-wra_now{ flex-wrap: nowrap }
/* flex gap */
.gap_1{ gap:.1em } .gap_2{ gap:.2em } .gap_3{ gap:.3em }
.gap_4{ gap:.4em } .gap_5{ gap:.5em } .gap_6{ gap:.6em }
/* flex helpers!  */
/* position from parent */
.ali-ite_sta{ align-items: flex-start }
.ali-ite_cen{ align-items: center }
.ali-ite_end{ align-items: flex-end }
/* position from child */
.ali-sel_sta{ align-self: flex-start }
.ali-sel_cen{ align-self: center }
.ali-sel_end{ align-self: flex-end }

/* cursors */
.cur_poi{ cursor: pointer } 
/* displays */
.dis_non{ display: none }
.dis_blo{ display: block}
.dis_gri{ display: grid }
.dis_fle{ display: flex }
.dis_tab{ display: table}
.dis_inl-blo{ display: inline-block }
.dis_lis-ite{ display: list-item }
/* list settings */
.lis-sty_non{ list-style: none; }
/* floats */
.flo_rig{ float: right } 
.flo_lef{ float: left } 
.flo_non{ float: none }
/* font sizes 0.5rem - 2rem */
.fon-siz_05{ font-size: 0.5em } .fon-siz_06{ font-size: 0.6em }
.fon-siz_07{ font-size: 0.7em } .fon-siz_08{ font-size: 0.8em }
.fon-siz_09{ font-size: 0.9em } .fon-siz_10{ font-size: 1.0em }
.fon-siz_11{ font-size: 1.1em } .fon-siz_12{ font-size: 1.2em }
.fon-siz_13{ font-size: 1.3em } .fon-siz_14{ font-size: 1.4em }
.fon-siz_15{ font-size: 1.5em } .fon-siz_16{ font-size: 1.6em }
.fon-siz_17{ font-size: 1.7em } .fon-siz_18{ font-size: 1.8em }
.fon-siz_19{ font-size: 1.9em } .fon-siz_20{ font-size: 2.0em }

/* font weight */
.fon-wei_100{ font-weight: 100 } .fon-wei_200{ font-weight: 200 }
.fon-wei_300{ font-weight: 300 } .fon-wei_400{ font-weight: 400 }
.fon-wei_500{ font-weight: 500 } .fon-wei_600{ font-weight: 600 }
.fon-wei_700{ font-weight: 700 } .fon-wei_800{ font-weight: 800 }
.fon-wei_900{ font-weight: 900 }

/* font style */
.fon-sty_ita{ font-style: italic }
.fon-sty_nor{ font-style: normal }
.fon-sty_inh{ font-style: inherit }

/* line heights */
.lin-hei_10{ line-height: 1em } .lin-hei_11{ line-height: 1.1em }
.lin-hei_12{ line-height: 1.2em } .lin-hei_13{ line-height: 1.3em }
.lin-hei_14{ line-height: 1.4em } .lin-hei_15{ line-height: 1.5em }
.lin-hei_16{ line-height: 1.6em } .lin-hei_17{ line-height: 1.7em }
.lin-hei_18{ line-height: 1.8em } .lin-hei_19{ line-height: 1.9em }
.lin-hei_20{ line-height: 2em }

/* opacity */
.opa_0{ opacity: 0 }
.opa_1{ opacity:.1 } .opa_2{ opacity:.2 }
.opa_3{ opacity:.3 } .opa_4{ opacity:.4 }
.opa_5{ opacity:.5 } .opa_6{ opacity:.6 }
.opa_7{ opacity:.7 } .opa_8{ opacity:.8 }
.opa_9{ opacity:.9 }.opa_10{ opacity: 1 }

/* overflows */
.ove_hid{ overflow: hidden }
.ove-x_hid{ overflow: hidden }
.ove-y_hid{ overflow: hidden }
.ove_scr{ overflow: scroll }

/* positions */
.pos_fix{ position: fixed } 
.pos_rel{ position: relative } 
.pos_abs{ position: absolute } 
.pos_sti{ position: sticky } 
.pos_inh{ position: inherit }

/* text aligns */
.tex-ali_rig{ text-align: right } 
.tex-ali_lef{ text-align: left } 
.tex-ali_cen{ text-align: center }

/* text deco */
.tex-dec_und{ text-decoration: underline }
.tex-dec_non, .tex-dec_non a{ text-decoration: none }

/* animate all properties */
.tra_all { transition: all 0.25s ease-out }

/* visibility */
.vis_hid{ visibility: hidden }
.vis_vis{ visibility: visible }
.vis_des{ display: none } /* visible on desktop */
.vis_pho{ display: inline-block  } /* visible on phone */
@media (min-width: 786px){
  .vis_des{ display: inline-block }
  .vis_pho{ display: none }
}

/* z-index */
.z-ind_10{ z-index: 10 } .z-ind_60{ z-index: 60 }
.z-ind_20{ z-index: 20 } .z-ind_70{ z-index: 70 }
.z-ind_30{ z-index: 30 } .z-ind_80{ z-index: 80 }
.z-ind_40{ z-index: 40 } .z-ind_90{ z-index: 90 }
.z-ind_50{ z-index: 50 }.z-ind_100{ z-index: 100}

/* % % % % % % % %  paddings   % % % % % % % % %  */
/* - globals    1st
   - individual 2nd */

.pad_0{padding: 0}.pad_1{padding: 1em}.pad_2{padding: 2em}.pad_3{padding: 3em}.pad_4{padding: 4em}.pad_5{padding: 5em}
.pad-top_0{padding-top:0em}.pad-rig_0{padding-right:0em}.pad-bot_0{padding-bottom: 0em}.pad-lef_0{padding-left:0em}
.pad-top_1{padding-top:1em}.pad-rig_1{padding-right:1em}.pad-bot_1{padding-bottom: 1em}.pad-lef_1{padding-left:1em}
.pad-top_2{padding-top:2em}.pad-rig_2{padding-right:2em}.pad-bot_2{padding-bottom: 2em}.pad-lef_2{padding-left:2em}
.pad-top_3{padding-top:3em}.pad-rig_3{padding-right:3em}.pad-bot_3{padding-bottom: 3em}.pad-lef_3{padding-left:3em}
.pad-top_4{padding-top:4em}.pad-rig_4{padding-right:4em}.pad-bot_4{padding-bottom: 4em}.pad-lef_4{padding-left:4em}
.pad-top_5{padding-top:5em}.pad-rig_5{padding-right:5em}.pad-bot_5{padding-bottom: 5em}.pad-lef_5{padding-left:5em}
/* margins */
.mar_0{margin: 0}.mar_1{margin: 1em}.mar_2{margin: 2em}.mar_3{margin: 3em}.mar_4{margin: 4em}.mar_5{margin: 5em}
.mar_-1{margin: -1em}.mar_-2{margin: -2em}.mar_-3{margin: -3em}.mar_-4{margin: -4em}.mar_-5{margin: -5em}
.mar_aut{margin: 0 auto}
.mar-top_0{margin-top:0em}.mar-rig_0{margin-right:0em}.mar-bot_0{margin-bottom: 0em}.mar-lef_0{margin-left:0em}
.mar-top_1{margin-top:1em}.mar-rig_1{margin-right:1em}.mar-bot_1{margin-bottom: 1em}.mar-lef_1{margin-left:1em}
.mar-top_2{margin-top:2em}.mar-rig_2{margin-right:2em}.mar-bot_2{margin-bottom: 2em}.mar-lef_2{margin-left:2em}
.mar-top_3{margin-top:3em}.mar-rig_3{margin-right:3em}.mar-bot_3{margin-bottom: 3em}.mar-lef_3{margin-left:3em}
.mar-top_4{margin-top:4em}.mar-rig_4{margin-right:4em}.mar-bot_4{margin-bottom: 4em}.mar-lef_4{margin-left:4em}
.mar-top_5{margin-top:5em}.mar-rig_5{margin-right:5em}.mar-bot_5{margin-bottom: 5em}.mar-lef_5{margin-left:5em}
/* neg margins */
.mar-top_-1{margin-top:-1em}.mar-rig_-1{margin-right:-1em}.mar-bot_-1{margin-bottom: -1em}.mar-lef_-1{margin-left:-1em}
.mar-top_-2{margin-top:-2em}.mar-rig_-2{margin-right:-2em}.mar-bot_-2{margin-bottom: -2em}.mar-lef_-2{margin-left:-2em}
.mar-top_-3{margin-top:-3em}.mar-rig_-3{margin-right:-3em}.mar-bot_-3{margin-bottom: -3em}.mar-lef_-3{margin-left:-3em}
.mar-top_-4{margin-top:-4em}.mar-rig_-4{margin-right:-4em}.mar-bot_-4{margin-bottom: -4em}.mar-lef_-4{margin-left:-4em}
.mar-top_-5{margin-top:-5em}.mar-rig_-5{margin-right:-5em}.mar-bot_-5{margin-bottom: -5em}.mar-lef_-5{margin-left:-5em}

/* short position with absolute positioning  */
.abs_tr{ top:0; right:0 } .abs_tl{ top:0; left:0 }
.abs_br{ bottom:0; right:0 } .abs_bl{ bottom:0; left:0 }

/* clearfix */
.cf::after, .cle_bot { content: ""; clear: both; display: table }

/* responsive fluid font by screen width => with brake! */
.fon-fam_mon{ font-family: monospace }
.res-txt, p.res-txt, .res-txt>*{ font-size: calc(1.05rem + 3.4vw) !important }
.res-txt.small, p.res-txt.small, .res-txt.small>*{ font-size: calc(.9rem + 3vw) !important }
@media (min-width: 1300px){ 
  .res-txt, p.res-txt, .res-txt>*{ font-size: 70px !important }  
  .res-txt.small, .res-txt.small>*{ font-size: 60px !important }  
}


/* BETA?? LAYOUTS */

/* some weights - heights */
.max-wid_50 { max-width: 50vw }
.max-wid_100{ max-width:100vw }
.max-wid_500{ max-width:500px }
.max-hei_50 { max-height: 50vh }
.max-hei_100{ max-height:100vh }
.min-hei_50 { min-height: 50vh }
.min-hei_100{ min-height: 100vh }
.min-hei_500{ min-height: 500px }
.max-48em{ max-width: 48em; margin: auto }
.max-58em{ max-width: 58em; margin: auto }
.max-68em{ max-width: 68em; margin: auto }