/**
 * VOSKA — Typography
 * File: assets/css/typography.css
 *
 * Specificity hierarchy:
 *   Tags   (h1, p …)   → 0,0,1  — default visual style
 *   Classes (.vsk-h1 …) → 0,1,0  — always overrides tags
 *
 * Usage:
 *   <h1>                 → styled as h1
 *   <h1 class="vsk-h3"> → styled as h3 (class wins)
 *   <div class="vsk-h2"> → styled as h2 regardless of tag
 *
 * Requires: assets/css/variables.css (loaded inline via wp_add_inline_style)
 */


/* ─────────────────────────────────────────────────────────────────────────────
   1. BASE
   Global rendering defaults applied once at the document level.
───────────────────────────────────────────────────────────────────────────── */

html {
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering:          optimizeLegibility;
}

body {
    font-family:  var(--vsk-font--family-text);
    font-size:    var(--vsk-font--size-text);
    font-weight:  var(--vsk-font--wgt-text);
    line-height:  var(--vsk-font--lh-text);
    color:        var(--vsk-clr--text);
}

/*
 * Preserve font inheritance inside form controls.
 * Browsers (especially Safari) reset font properties on inputs/buttons
 * to their UA defaults. This ensures our type system applies everywhere.
 */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size:   inherit;
    font-weight: inherit;
    line-height: inherit;
    color:       inherit;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. HEADING TAGS — h1, h2, h3  (specificity 0,0,1)
   These are defaults. Any .vsk-h* class will silently override them.
───────────────────────────────────────────────────────────────────────────── */

.wp-child-theme-voska h1,
.wp-child-theme-voska h2,
.wp-child-theme-voska h3 {
    font-family:   	var(--vsk-font--family-heading);
    font-weight:   	var(--vsk-font--wgt-heading);
	line-height:    var(--vsk-font--lh-heading);
	letter-spacing: var(--vsk-font--ls-heading);
	text-transform: none;
    text-wrap:     	balance;   /* prevents awkward single-word last lines */
    margin-top:    	0;
    padding:       	0;
}

.wp-child-theme-voska h1 {
    font-size:      var(--vsk-font--size-h1);
}

.wp-child-theme-voska h2 {
    font-size:      var(--vsk-font--size-h2);
}

.wp-child-theme-voska h3 {
    font-size:      var(--vsk-font--size-h3);
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. SUBHEADING TAGS — h4, h5, h6  (specificity 0,0,1)
───────────────────────────────────────────────────────────────────────────── */

.wp-child-theme-voska h4,
.wp-child-theme-voska h5,
.wp-child-theme-voska h6 {
    font-family:  		var(--vsk-font--family-subheading);
    font-weight:   		var(--vsk-font--wgt-subheading);
    line-height:   		var(--vsk-font--lh-subheading);
	letter-spacing: 	var(--vsk-font--ls-subheading);
	text-transform: 	none;
    text-wrap:     		balance;
    margin-top:    		0;
    padding:       		0;
}

.wp-child-theme-voska h4 {
    font-size:      var(--vsk-font--size-h4);
}

.wp-child-theme-voska h5 {
    font-size:      var(--vsk-font--size-h5);
}

.wp-child-theme-voska h6 {
    font-size:      var(--vsk-font--size-h6);
	text-transform: uppercase;
	font-weight:	600;
	letter-spacing:	0.02em;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. BODY TEXT TAGS — p, small  (specificity 0,0,1)
───────────────────────────────────────────────────────────────────────────── */

p {
    font-family:   var(--vsk-font--family-text);
    font-size:     var(--vsk-font--size-text);
    font-weight:   var(--vsk-font--wgt-text);
    line-height:   var(--vsk-font--lh-text);
    letter-spacing: var(--vsk-font--ls-text);
    margin-top:    0;
    margin-bottom: 1em;
    text-wrap:     pretty;    /* reduces orphans without hard orphan/widow rules */
    orphans:       3;
    widows:        3;
}

p:last-child {
    margin-bottom: 0;
}

small {
    font-family:   var(--vsk-font--family-text);
    font-size:     var(--vsk-font--size-text-s);
    font-weight:   var(--vsk-font--wgt-text);
    line-height:   var(--vsk-font--lh-text-s);
    letter-spacing: var(--vsk-font--ls-text);
    display:       inline-block;   /* needed so line-height applies correctly */
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. HEADING UTILITY CLASSES  (specificity 0,1,0)
   Each class consumes the same variables as its corresponding tag.
   Applied to any element to override its default tag style:
     <h1 class="vsk-h3">  → rendered as h3
     <div class="vsk-h2"> → rendered as h2
───────────────────────────────────────────────────────────────────────────── */

.wp-child-theme-voska .vsk-h1,
.wp-child-theme-voska .vsk-h2,
.wp-child-theme-voska .vsk-h3 {
    font-family: 	var(--vsk-font--family-heading);
    font-weight: 	var(--vsk-font--wgt-heading);
	line-height: 	var(--vsk-font--lh-heading);
	letter-spacing: var(--vsk-font--ls-heading);
	text-transform: none;
    text-wrap:   	balance;
    margin-top:  	0;
    padding:     	0;
}

.wp-child-theme-voska .vsk-h4,
.wp-child-theme-voska .vsk-h5,
.wp-child-theme-voska .vsk-h6 {
    font-family: 		var(--vsk-font--family-subheading);
    font-weight: 		var(--vsk-font--wgt-subheading);
	line-height: 		var(--vsk-font--lh-subheading);
	letter-spacing: 	var(--vsk-font--ls-subheading);
	text-transform: 	none;
    text-wrap:   		balance;
    margin-top:  		0;
    padding:     		0;
}

.wp-child-theme-voska .vsk-h1 {
    font-size:      var(--vsk-font--size-h1);
}

.wp-child-theme-voska .vsk-h2 {
    font-size:      var(--vsk-font--size-h2);
}

.wp-child-theme-voska .vsk-h3 {
    font-size:      var(--vsk-font--size-h3);
}

.wp-child-theme-voska .vsk-h4 {
    font-size:      var(--vsk-font--size-h4);
}

.wp-child-theme-voska .vsk-h5 {
    font-size:      var(--vsk-font--size-h5);
}

.wp-child-theme-voska .vsk-h6 {
    font-size:      	var(--vsk-font--size-h6);
	text-transform: 	uppercase;
	font-weight:		600;
	letter-spacing:		0.2em;
}

.wp-child-theme-voska .vsk-font-accent {
	font-family: 		var(--vsk-font--family-accent);
    font-size:      	var(--vsk-font--size-accent);
	font-weight: 		var(--vsk-font--wgt-accent);
	line-height: 		var(--vsk-font--lh-accent);
	letter-spacing: 	var(--vsk-font--ls-accent);
	text-transform: 	none;
	text-wrap:   		balance;
    margin-top:  		0;
    padding:     		0;
}

.wp-child-theme-voska .vsk-font-accent--s {
    font-size:      	calc(var(--vsk-font--size-accent) * .75);
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. TEXT SIZE VARIANT CLASSES  (specificity 0,1,0)
   Use on any element to apply body text sizing outside of <p> / <small>.
     .vsk-p  → standard body text
     .vsk-pl → large body text  (lead paragraphs, intros, pull quotes)
     .vsk-ps → small body text  (captions, meta, footnotes)
───────────────────────────────────────────────────────────────────────────── */

.wp-child-theme-voska .vsk-p,
.wp-child-theme-voska .vsk-p p{
    font-family:    var(--vsk-font--family-text);
    font-size:      var(--vsk-font--size-text);
    font-weight:    var(--vsk-font--wgt-text);
    line-height:    var(--vsk-font--lh-text);
    letter-spacing: var(--vsk-font--ls-text);
	text-transform: none;
}

.wp-child-theme-voska .vsk-pl,
.wp-child-theme-voska .vsk-pl p{
    font-family:    var(--vsk-font--family-text);
    font-size:      var(--vsk-font--size-text-l);
    font-weight:    var(--vsk-font--wgt-text);
    line-height:    var(--vsk-font--lh-text-l);
    letter-spacing: var(--vsk-font--ls-text);
	text-transform: none;
}

.wp-child-theme-voska .vsk-ps,
.wp-child-theme-voska .vsk-ps p{
    font-family:    var(--vsk-font--family-text);
    font-size:      var(--vsk-font--size-text-s);
    font-weight:    var(--vsk-font--wgt-text);
    line-height:    var(--vsk-font--lh-text-s);
    letter-spacing: var(--vsk-font--ls-text);
	text-transform: none;
}

.wp-child-theme-voska .vsk-pb,
.wp-child-theme-voska .vsk-pb p{
	 font-weight: var(--vsk-font--wgt-text-bold);
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. .vsk-content — CMS / rich-text container
   Wrap around the_content(), WYSIWYG output, or any block of editor-generated
   HTML where you need styled links, lists, blockquotes, etc.
   All rules are scoped to descendants — no global bleed.
───────────────────────────────────────────────────────────────────────────── */

.vsk-content {
    font-family: var(--vsk-font--family-text);
    font-size:   var(--vsk-font--size-text);
    font-weight: var(--vsk-font--wgt-text);
    line-height: var(--vsk-font--lh-text);
}

/* Inline text */
.vsk-content strong,
.vsk-content b {
    font-weight: var(--vsk-font--wgt-text-bold);
}

.vsk-content em,
.vsk-content i {
    font-style: italic;
}

/* Links */
.vsk-content a {
    color:                  var(--vsk-clr--accent);
    text-decoration:        underline;
    text-underline-offset:  0.2em;
    text-decoration-thickness: 1px;
    transition:             color var(--vsk-trns--duration) var(--vsk-trns--ease),
                            text-decoration-color var(--vsk-trns--duration) var(--vsk-trns--ease);
}

.vsk-content a:hover {
    text-decoration-color: transparent;
}

/* Lists */
.vsk-content ul,
.vsk-content ol {
    padding-left:  1.5em;
    margin-top:    0;
    margin-bottom: 1em;
}

.vsk-content ul:last-child,
.vsk-content ol:last-child {
    margin-bottom: 0;
}

.vsk-content ul {
    list-style-type: disc;
}

.vsk-content ol {
    list-style-type: decimal;
}

.vsk-content li {
    margin-bottom: 0.35em;
    line-height:   var(--vsk-font--lh-text);
}

.vsk-content li:last-child {
    margin-bottom: 0;
}

/* Nested lists */
.vsk-content li ul,
.vsk-content li ol {
    margin-top:    0.35em;
    margin-bottom: 0;
}

/* Blockquote */
.vsk-content blockquote {
    margin:          1.5em 0;
    padding:         0.75em 0 0.75em 1.5em;
    border-left:     var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--accent);
    font-size:       var(--vsk-font--size-text-l);
    font-weight:     var(--vsk-font--wgt-text);
    line-height:     var(--vsk-font--lh-text-l);
    color:           var(--vsk-clr--text-faded);
    font-style:      italic;
}

.vsk-content blockquote cite {
    display:     block;
    margin-top:  0.5em;
    font-size:   var(--vsk-font--size-text-s);
    font-style:  normal;
    font-weight: var(--vsk-font--wgt-text-bold);
    color:       var(--vsk-clr--text);
}

/* Inline code */
.vsk-content code {
    font-family:      monospace;
    font-size:        0.875em;
    background-color: rgba(from var(--vsk-clr--text) r g b / 0.06);
    padding:          0.15em 0.4em;
    border-radius:    3px;
}

/* Code block */
.vsk-content pre {
    font-family:    monospace;
    font-size:      var(--vsk-font--size-text-s);
    line-height:    1.6;
    background:     rgba(from var(--vsk-clr--text) r g b / 0.04);
    border:         var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border);
    border-radius:  4px;
    padding:        1em 1.25em;
    overflow-x:     auto;
    margin-bottom:  1em;
}

.vsk-content pre code {
    background:  none;
    padding:     0;
    font-size:   inherit;
    border-radius: 0;
}

/* Horizontal rule */
.vsk-content hr {
    border:         none;
    border-top:     var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border);
    margin:         2em 0;
    opacity:        0.4;
}

/* Images */
.vsk-content img {
    max-width:   100%;
    height:      auto;
    display:     block;
    margin-bottom: 1em;
}

.vsk-content figure {
    margin:      0 0 1.5em;
}

.vsk-content figcaption {
    font-size:   var(--vsk-font--size-text-s);
    line-height: var(--vsk-font--lh-text-s);
    color:       var(--vsk-clr--text-faded);
    margin-top:  0.5em;
}

.wp-child-theme-voska .vsk-text-left{
	text-align: left;
}
.wp-child-theme-voska .vsk-text-center{
	text-align: center;
}
.wp-child-theme-voska .vsk-text-right{
	text-align: right;
}
.wp-child-theme-voska .vsk-text-justify{
	text-align: justify;
}

.wp-child-theme-voska .vsk-text-upper{
	text-transform: uppercase!important;
}


/* Colors */
.wp-child-theme-voska .vsk-clr-light{
	color: var(--vsk-clr--light);
}

.wp-child-theme-voska .vsk-clr-fade{
	color: var(--vsk-clr--text-faded);
}

.wp-child-theme-voska .vsk-clr-text{
	color: var(--vsk-clr--text);
}

.wp-child-theme-voska .vsk-clr-accent{
	color: var(--vsk-clr--accent);
}

.wp-child-theme-voska .vsk-clr-danger{
	color: var(--vsk-clr--danger);
}
.wp-child-theme-voska .vsk-clr-warning{
	color: var(--vsk-clr--warning);
}
.wp-child-theme-voska .vsk-clr-success{
	color: var(--vsk-clr--success);
}
.wp-child-theme-voska .vsk-clr-info{
	color: var(--vsk-clr--info);
}

.wp-child-theme-voska .vsk-clr-border{
	color: var(--vsk-clr--border);
}
.wp-child-theme-voska .vsk-clr-border-soft{
	color: var(--vsk-clr--border-soft);
}

/* Custom two-fonts heading */
.vsk-two-font-heading *{
	color: var( --jet-component-color, var(--vsk-clr--text, #000) )!important;
}

.vsk-two-font-heading span{
	vertical-align:middle;
}

.vsk-two-font-heading .vsk-two-font-heading__first{
    font-size: calc(1em + 56px);
	margin-right: -.2em;
}

@media(max-width: 767px){
	.vsk-two-font-heading .vsk-two-font-heading__first{
		font-size: calc(1em + 28px);
		margin-right: -.2em;
	}
}