/**
 * SVG Line Draw Component Styles
 *
 * Uses @keyframes animation for reliable timing.
 * No transitions - a transition would fire whenever JS writes the
 * stroke-dashoffset, which causes a visible flash on page load.
 *
 * @package Applari
 * @version 3.14.0
 */

/* ===========================================
   CONTAINER
   =========================================== */
/**
 * Project defaults for the line itself. Timing is deliberately not here:
 * JS writes --draw-duration, --draw-easing and --draw-delay as inline styles on each path
 * on each SVG, so anything set at :root under those names would be overridden
 * and anything set under other names would never be read. Change the timing in
 * CONFIG, per instance via the constructor, or per container with
 * data-duration.
 */
:root {
    --svg-line-color: #000000;
    --svg-line-opacity: 1;
}

/**
 * No overflow: hidden - shapes are meant to spill past the container's edges.
 * Add it on a specific container if you want them clipped there.
 */
.svg-line-draw-container {
    position: relative;

    /**
     * Smallest a scattered shape may be drawn. Set it per container or per
     * section to override. Use px: JS reads this value so that placement -
     * spacing between shapes and the protected middle - is worked out at the
     * size the shape will actually be drawn at.
     */
    --svg-line-scatter-min: 80px;

    /*
     * Stroke width in CSS px is also a variable, --svg-line-stroke-width,
     * but it is deliberately NOT given a default here: with no value JS
     * falls back to CONFIG.strokeWidth, so the config stays the single
     * default. Set it per container or per section to draw thicker:
     *   .sub-heading-line-draw { --svg-line-stroke-width: 1.6px; }
     * Do not set stroke-width on .svg-line-draw-path directly - JS writes
     * that attribute in viewBox units and rescales it on resize.
     */
}

/* Block editor: the PHP filters do not run there, so stand in with a still */
.editor-styles-wrapper .svg-line-draw-container {
    background: url('tomaatti-placeholder.png') repeat-x center center;
}
/* A scene shows its own still (scenes/<name>.svg, written by scene-generator.js) */
.editor-styles-wrapper .svg-line-draw-container[data-scene] {
    background: none no-repeat center center / contain;
}
.editor-styles-wrapper .svg-line-draw-container[data-scene="tomaatti"] { background-image: url('scenes/tomaatti.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="kurkku"] { background-image: url('scenes/kurkku.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="paprika"] { background-image: url('scenes/paprika.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="salaatti"] { background-image: url('scenes/salaatti.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="chili"] { background-image: url('scenes/chili.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="yrtit"] { background-image: url('scenes/yrtit.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="idut"] { background-image: url('scenes/idut.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="sienet"] { background-image: url('scenes/sienet.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="basilika"] { background-image: url('scenes/basilika.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="tilli"] { background-image: url('scenes/tilli.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="korianteri"] { background-image: url('scenes/korianteri.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="persilja"] { background-image: url('scenes/persilja.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="minttu"] { background-image: url('scenes/minttu.svg'); }
.editor-styles-wrapper .svg-line-draw-container[data-scene="rosmariini"] { background-image: url('scenes/rosmariini.svg'); }
/* GenerateBlocks: keep block content above the decorative line */
.svg-line-draw-container > * {
    position: relative;
    z-index: 1;
}

/* ===========================================
   SVG ELEMENT
   =========================================== */
.svg-line-draw {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    /* Size is variable-driven so a single container can override it inline
       without needing a new size class. Defaults match .svg-line-size-medium. */
    width: var(--svg-line-width, 65%);
    height: var(--svg-line-height, 100%);
    max-width: var(--svg-line-max-width, 560px);
    pointer-events: none;
    z-index: 0;
    /* Let the path run past the viewBox - the container does the clipping */
    overflow: visible;
    /* Hidden until JS has written the initial stroke-dashoffset */
    opacity: 0;
}

/* JS adds this once the path is in its hidden start state */
.svg-line-draw.is-ready {
    opacity: 1;
}

/* ===========================================
   PATH STYLES
   =========================================== */
.svg-line-draw-path {
    stroke: var(--svg-line-color, rgba(0, 114, 84, 0.3));
    opacity: var(--svg-line-opacity, 1);
    /* NO transition here - only the @keyframes animation below */
}

/* ===========================================
   DRAWING ANIMATION
   =========================================== */
@keyframes svgLineDraw {
    from {
        stroke-dashoffset: var(--path-length);
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* JS adds .is-animating when the container enters the viewport */
.svg-line-draw.is-animating .svg-line-draw-path {
    animation: svgLineDraw var(--draw-duration, 2s) var(--draw-easing, linear) var(--draw-delay, 0.2s) forwards;
}

/* ===========================================
   COLOR VARIATIONS
   =========================================== */
.svg-line-terracotta { --svg-line-color: #B85C38; }
.svg-line-brown { --svg-line-color: #8B5A2B; }
.svg-line-black { --svg-line-color: #000000; }
.svg-line-green { --svg-line-color: var(--green); }
.svg-line-blue { --svg-line-color: var(--blue); }
.svg-line-gold { --svg-line-color: #C9A227; }
.svg-line-burgundy { --svg-line-color: #722F37; }
.svg-line-gray { --svg-line-color: #708090; }
.svg-line-coral { --svg-line-color: #E07A5F; }
.svg-line-olive { --svg-line-color: #808000; }
.svg-line-navy { --svg-line-color: #1B3A57; }

/* ===========================================
   OPACITY VARIATIONS
   =========================================== */
.svg-line-opacity-light { --svg-line-opacity: 0.3; }
.svg-line-opacity-medium { --svg-line-opacity: 0.5; }
.svg-line-opacity-heavy { --svg-line-opacity: 0.7; }

/* ===========================================
   HORIZONTAL POSITION
   =========================================== */
.svg-line-position-left .svg-line-draw {
    left: 0;
    right: auto;
}

.svg-line-position-right .svg-line-draw {
    left: auto;
    right: 0;
}

.svg-line-position-center .svg-line-draw {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/**
 * Edge offsets. margin-inline is used instead of left/right so the same
 * class works whether the SVG is anchored to the left or the right edge.
 */
.svg-line-offset-inside .svg-line-draw {
    margin-inline: 5%;
}

.svg-line-offset-outside .svg-line-draw {
    margin-inline: -10%;
}

/* ===========================================
   VERTICAL POSITION
   =========================================== */
.svg-line-top .svg-line-draw {
    top: -15%;
}

.svg-line-middle .svg-line-draw {
    top: 50%;
    transform: translateY(-50%);
}

.svg-line-bottom .svg-line-draw {
    top: auto;
    bottom: -15%;
}

.svg-line-offset-up .svg-line-draw {
    top: -25%;
}

.svg-line-offset-down .svg-line-draw {
    top: 15%;
}

/**
 * The shape is fitted with xMidYMid meet, so in a container that is wider than
 * it is tall the height - not the width - caps how big the shape can get.
 * This lets the box grow past the container and bleed off the top and bottom.
 * Replaces the vertical position classes; do not combine with them.
 */
.svg-line-bleed .svg-line-draw {
    --svg-line-height: 150%;
    top: -25%;
    bottom: auto;
}

/* ===========================================
   SIZE VARIATIONS
   =========================================== */
.svg-line-size-tiny .svg-line-draw {
    --svg-line-width: 20%;
    --svg-line-max-width: 170px;
}   
.svg-line-size-small .svg-line-draw {
    --svg-line-width: 40%;
    --svg-line-max-width: 340px;
}

.svg-line-size-medium .svg-line-draw {
    --svg-line-width: 65%;
    --svg-line-max-width: 560px;
}

.svg-line-size-large .svg-line-draw {
    --svg-line-width: 85%;
    --svg-line-max-width: 760px;
}

.svg-line-size-xlarge .svg-line-draw {
    --svg-line-width: 100%;
    --svg-line-max-width: 1000px;
}

.svg-line-size-full .svg-line-draw {
    --svg-line-width: 100%;
    --svg-line-max-width: none;
}
/*Thickness*/
.svg-line-bold{
    --svg-line-stroke-width: 2px;
}
/* ===========================================
   SCATTER
   ===========================================
   data-scatter="5" places that many shapes around the container's edges.

   Position, size and rotation are written inline by JS, because they differ
   per shape and because the size classes (0,2,0) would out-specify anything
   this stylesheet could say about a single scattered shape (0,1,0).

   Each shape is centred ON an edge, so about half of it hangs over the
   container's edge. The container has no overflow: hidden, so that half
   stays visible - the shapes sit around the element, not inside it.
   =========================================== */
.svg-line-draw--scatter {
    right: auto;
    bottom: auto;
    z-index:0;
}

/* ===========================================
   SCENE
   ===========================================
   data-scene="tomaatti" draws a layered illustration. Unlike every other mode
   the container is the picture, not a backdrop: it takes the scene's own
   proportions (JS writes --svg-line-scene-ratio from the viewBox, which is
   cut tight around the drawing - about 11:8 for the shipped scenes) and the
   SVG fills it. Give the container a width like an image block; an explicit
   height overrides the ratio and leaves space on two sides.

   Colour still comes from --svg-line-color, so the colour classes apply.
   Layer widths and opacities are in the scene data; --svg-line-stroke-width
   (e.g. .svg-line-bold) scales all layers together.
   =========================================== */
.svg-line-draw-container[data-scene] {
    aspect-ratio: var(--svg-line-scene-ratio, 1 / 1);
}
.svg-line-draw--scene {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
}

/* ===========================================
   STEM
   ===========================================
   .svg-line-no-stem drops the off-frame stem so the shape draws on its own,
   and re-frames what is left so it still fills the container. Single shapes
   only - it has no effect on a chain.

   There is deliberately no rule here: the stem is part of the path data, not a
   separate element, so CSS cannot hide it. The class is read in JS
   (svg-line-draw.js, trimStem) and the path is cut before it is ever drawn.
   =========================================== */

/* ===========================================
   Z-INDEX CONTROL
   =========================================== */

/**
 * Note: z-index -1 only pushes the line behind the container background if
 * the container does not create its own stacking context (no transform,
 * filter or opacity < 1 on it).
 */
.svg-line-behind .svg-line-draw {
    z-index: -1;
}

.svg-line-front .svg-line-draw {
    z-index: 1;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 768px) {
    .svg-line-hide-mobile .svg-line-draw {
        display: none;
    }
}

/* ===========================================
   REDUCED MOTION
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    .svg-line-draw.is-animating .svg-line-draw-path {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* ===========================================
   PROJECT OVERRIDES
   ===========================================
   Site-specific styling. Remove or replace this block when porting the
   component to another project.
   =========================================== */
.green-section .svg-line-draw {
    --svg-line-color: #C3D6CE;
    --svg-line-opacity: 0.6;
}

.sub-heading-line-draw {
    height:80px;
    width:100%;
}
/*small single stem bg:s*/
.small-bg-line{
    height:80px;
    width:80px;
    position:absolute;
}
.small-bg-line-left-top{
    top:0;
    left:-5%;
}
.small-bg-line-right-top{
    top:10%;
    right:-5%;
}
.small-bg-line-left-bottom{
    bottom:0;
    left:-2%;
}
.small-bg-line-right-bottom{
    bottom:10%;
    right:-2%;
}
/**Custom scene settings**/
.hero-scene{
    width:100%;
    height:250px;
    margin-bottom:20px;
}
.big-content-lift .svg-line-draw-container{
    height:250px;
    width:100%;
}
@media (in-width: 768px) {
    .big-content-lift .svg-line-draw-container{
        margin-bottom:0;
    }
}
@media (min-width: 990px) {
    .small-bg-line{
        height:120px;
        width:120px;
    }
}