/**
 * VOSKA — Layout
 * File: assets/css/layout.css
 *
 * Requires: assets/css/variables.css (loaded inline via wp_add_inline_style)
 *
 * All rules are scoped to .wp-child-theme-voska (body class) for specificity
 * over Elementor and third-party styles.
 *
 * ─── BREAKPOINTS ──────────────────────────────────────────────────────────
 *
 *   sm  →  min-width: 480px   (large phones, landscape)
 *   md  →  min-width: 768px   (tablet)
 *   lg  →  min-width: 1024px  (desktop)
 *
 *   Strategy: mobile-first — base styles target mobile,
 *   media queries add/override as viewport grows.
 *
 * ─── CLASS CONVENTION ─────────────────────────────────────────────────────
 *
 *   .vsk-{property}--{variant}             → applies at all breakpoints
 *   .vsk-{property}--{variant}-on-{bp}     → applies from {bp} upward
 *   .vsk-{property}--{variant}-until-{bp}  → applies below {bp} only
 *
 *   Examples:
 *     .vsk-px--section                → padding-inline always
 *     .vsk-px--section-on-lg          → padding-inline from lg upward
 *     .vsk-px--none-until-lg          → no padding-inline below lg
 *
 * ─── FILE SECTIONS ────────────────────────────────────────────────────────
 *
 *   1. Section
 *   2. Container
 *   3. Padding Inline Utilities
 *   4. Padding Block Utilities
 *   5. Visibility Helpers
 */


/* ─────────────────────────────────────────────────────────────────────────────
   1. SECTION
   Default styles for <section> elements and section-level variants.
   Use .no-padding to fully opt out of default padding.
───────────────────────────────────────────────────────────────────────────── */
body.wp-child-theme-voska{
	background: var(--vsk-clr--light);
	scroll-behavior: smooth;
	overflow-x: clip;
}


.wp-child-theme-voska section{
	scroll-margin-top: var(--vsk-sticky-top)!important;
}

/* Default section inline padding — applies to all sections without .no-padding */
.wp-child-theme-voska section:not(.no-padding) {
    padding-inline: var(--vsk-sec--padding-inline);
}

/* Default section block gap between sections */
.wp-child-theme-voska section:has(+ section) {
    margin-block-end: var(--vsk-sec--gap);
}

/* Section: no side padding (full bleed) */
.wp-child-theme-voska section.no-padding {
    padding-inline: 0;
}

/* Section: no top gap (attach to previous section) */
.wp-child-theme-voska section.no-margin {
    margin-block-end: 0;
}

/* Section: half gap */
.wp-child-theme-voska section.half-margin {
    margin-block-end: calc(var(--vsk-sec--gap) / 2);
}

.wp-child-theme-voska .vsk-use-margin {
    margin-block-end: var(--vsk-sec--gap);
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. CONTAINER
   Centered max-width wrapper. Place inside a <section> or as a standalone
   layout primitive.

   Variants:
     .vsk-container           →  standard width  (1200px)
     .vsk-container--wide     →  wide layout     (1440px)
     .vsk-container--narrow   →  text/prose      (720px)
     .vsk-container--full     →  no max-width, no padding
     .vsk-container--flush    →  no padding-inline, max-width stays
───────────────────────────────────────────────────────────────────────────── */

.wp-child-theme-voska .vsk-container,
.wp-child-theme-voska .vsk-container--wide,
.wp-child-theme-voska .vsk-container--narrow,
.wp-child-theme-voska .vsk-container--full,
.wp-child-theme-voska .vsk-container--flush {
    width:     100%;
    box-sizing: border-box;
    margin-inline: auto;
}

.wp-child-theme-voska .vsk-container {
    padding-inline: var(--vsk-sec--padding-inline);
}

.wp-child-theme-voska .vsk-container {
    max-width: var(--vsk-container--default);
}

.wp-child-theme-voska .vsk-container--wide,
.wp-child-theme-voska section.vsk-container--wide{
    max-width: var(--vsk-container--wide);
	width: calc(100vw - (2 * var(--vsk-sec--padding-inline)));
}

.wp-child-theme-voska section.vsk-container--wide{
	 padding-inline: 0;
}

.wp-child-theme-voska .vsk-container--narrow {
    max-width: var(--vsk-container--narrow);
}

/* Full bleed — no constraint, no padding */
.wp-child-theme-voska .vsk-container--full {
    max-width:      none;
    padding-inline: 0;
}

/* Flush — max-width stays, padding stripped */
.wp-child-theme-voska .vsk-container--flush {
    max-width:      var(--vsk-container--default);
    padding-inline: 0;
}

.wp-child-theme-voska .header-top-offset{
	padding-top: var(--vsk-top-offset)!important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. PADDING INLINE UTILITIES
   Control horizontal (left/right) padding per breakpoint.

   Always-on:
     .vsk-px--section     → apply --vsk-sec--padding-inline
     .vsk-px--none        → remove padding-inline entirely

───────────────────────────────────────────────────────────────────────────── */
.wp-child-theme-voska .vsk-sp--fluid{
	gap: var(--vsk-sp--fluid);
}

.wp-child-theme-voska .vsk-pad--fluid{
	padding: var(--vsk-sp--fluid);
}
.wp-child-theme-voska .vsk-pad-inline--fluid{
	padding-inline: var(--vsk-sp--fluid);
}
.wp-child-theme-voska .vsk-pad-block--fluid{
	padding-block: var(--vsk-sp--fluid);
}

.wp-child-theme-voska .vsk-pad--section{
	padding-inline: var(--vsk-sec--padding-inline);
}

.wp-child-theme-voska .vsk-pad--no{
	padding: 0;
}



/* ─────────────────────────────────────────────────────────────────────────────
   VISIBILITY HELPERS
   Show or hide elements per breakpoint.
   Uses display:none — does NOT affect accessibility (screen readers still
   read elements hidden this way unless aria-hidden is also set).

   Pattern:
     .vsk-hide-on-{bp}    → hidden from {bp} upward
     .vsk-hide-until-{bp} → hidden below {bp}
     .vsk-show-on-{bp}    → visible from {bp} upward (hidden on mobile base)
     .vsk-show-until-{bp} → visible below {bp} only (hidden from {bp} upward)
───────────────────────────────────────────────────────────────────────────── */

/* — hide-on-{bp}: visible on mobile, hidden from breakpoint up — */

@media (min-width: 480px) {
    .wp-child-theme-voska .vsk-hide-on-sm { display: none !important; }
}

@media (min-width: 768px) {
    .wp-child-theme-voska .vsk-hide-on-md { display: none !important; }
}

@media (min-width: 1024px) {
    .wp-child-theme-voska .vsk-hide-on-lg { display: none !important; }
}

/* — hide-until-{bp}: hidden on mobile, visible from breakpoint up — */

.wp-child-theme-voska .vsk-hide-until-sm { display: none !important; }
@media (min-width: 480px) {
    .wp-child-theme-voska .vsk-hide-until-sm { display: revert !important; }
}

.wp-child-theme-voska .vsk-hide-until-md { display: none !important; }
@media (min-width: 768px) {
    .wp-child-theme-voska .vsk-hide-until-md { display: revert !important; }
}

.wp-child-theme-voska .vsk-hide-until-lg { display: none !important; }
@media (min-width: 1024px) {
    .wp-child-theme-voska .vsk-hide-until-lg { display: revert !important; }
}

/* — show-on-{bp}: hidden by default, shown from breakpoint up — */
/*   (semantic alias for hide-until-*, more readable intent)      */

.wp-child-theme-voska .vsk-show-on-sm { display: none !important; }
@media (min-width: 480px) {
    .wp-child-theme-voska .vsk-show-on-sm { display: revert !important; }
}

.wp-child-theme-voska .vsk-show-on-md { display: none !important; }
@media (min-width: 768px) {
    .wp-child-theme-voska .vsk-show-on-md { display: revert !important; }
}

.wp-child-theme-voska .vsk-show-on-lg { display: none !important; }
@media (min-width: 1024px) {
    .wp-child-theme-voska .vsk-show-on-lg { display: revert !important; }
}

/* — show-until-{bp}: visible on mobile, hidden from breakpoint up — */
/*   (semantic alias for hide-on-*, more readable intent)            */

@media (min-width: 480px) {
    .wp-child-theme-voska .vsk-show-until-sm { display: none !important; }
}

@media (min-width: 768px) {
    .wp-child-theme-voska .vsk-show-until-md { display: none !important; }
}

@media (min-width: 1024px) {
    .wp-child-theme-voska .vsk-show-until-lg { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. SHADOWS
───────────────────────────────────────────────────────────────────────────── */
.wp-child-theme-voska .vsk-bs--s{
	box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 32px -16px;
}

.wp-child-theme-voska .vsk-bs--l{
	box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 29px 0px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. BORDERS
───────────────────────────────────────────────────────────────────────────── */
.wp-child-theme-voska .vsk-border{
	border: var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border);
}
.wp-child-theme-voska .vsk-border--soft{
	border: var(--vsk-bdr--wgt) var(--vsk-bdr--style) var(--vsk-clr--border-soft);
}

.wp-child-theme-voska .vsk-br--xs{
	border-radius: var(--vsk-bdr-rad--xs);
}
.wp-child-theme-voska .vsk-br--s{
	border-radius: var(--vsk-bdr-rad--s);
}
.wp-child-theme-voska .vsk-br--m{
	border-radius: var(--vsk-bdr-rad--m);
}
.wp-child-theme-voska .vsk-br--l{
	border-radius: var(--vsk-bdr-rad--l);
}
.wp-child-theme-voska .vsk-br--xl{
	border-radius: var(--vsk-bdr-rad--xl);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. BACKGROUNDS
───────────────────────────────────────────────────────────────────────────── */
.wp-child-theme-voska .vsk-bg--light{
	background: var(--vsk-clr--background);
}
.wp-child-theme-voska .vsk-bg--dark{
	background: var(--vsk-clr--dark);
}
.wp-child-theme-voska .vsk-bg--soft{
	background: var(--vsk-clr--soft);
}
.wp-child-theme-voska .vsk-bg--accent{
	background: var(--vsk-clr--accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. OTHER
───────────────────────────────────────────────────────────────────────────── */
#vsk-back-to-top{
	position: fixed;
	bottom: 24px;
	right: 24px;
	cursor: pointer;
	opacity: 0;
	scale: .5;
	pointer-events: none;
	z-index: 1000;
	transition: opacity var(--vsk-trns--duration) var(--vsk-trns--ease)
		, scale var(--vsk-trns--duration) var(--vsk-trns--ease);
}

#vsk-back-to-top.visible{
	opacity: 1;
	pointer-events: all;
	scale: 1;
}

.wp-child-theme-voska .vsk-trns{
	transition: all var(--vsk-trns--duration) var(--vsk-trns--ease);
}