/* Import a font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mansalva&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* --- General Product Page Layout --- */

body.product-page {
    background-color: #000;
    color: #FFF;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Specific override to make the header logo white on the dark background */
body.product-page .header .logo {
    filter: brightness(0) invert(1);
}

.product-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    padding-top: 80px;
    padding-bottom: 80px;
}

/* wrapper gives a shared positioning context */
.download-wrap {
    position:relative;
    display:inline-block;
}
.download-btn {
    font-weight:1000;
    font-size:2.2rem;
    padding:1.0rem 3.5rem;
    border-radius:999px;
    background:#fff;
    color:#000000;
    cursor:pointer;
    border:2px solid #bbbbbb;

  transition:transform .18s ease-in-out;
}

.download-wrap:hover .download-btn,
.download-wrap:focus-within .download-btn {
  transform:scale(1.07);
}

.space {
    padding-top: 15rem;
}

/* Lobster “for free” label */
.download-wrap > h1 {
    font-size:3rem;
    font-weight: 800;
    line-height:1;

    position:absolute;
    right:-5.3rem;
    bottom:-1.3rem;
    transform:rotate(-9.8deg);
    white-space:nowrap;
    pointer-events:none;
    transition:transform .18s ease-in-out;
}


.main-title h1{
    font-size: 3rem;
    font-weight: 800;
    text-align: left;
    margin: 0;
    line-height: 1.2;
}
.main-title .tagline-2{
    display:block;
    text-align:center;      /* centred inside the rotated box */
}
.product-ad-container {
    text-align: center;
    position:relative;           /* lets children position absolutely */
    width: 100%;
}

.product-ad-container .main-title{
    position:absolute;
    top:3rem;                    /* ↖︎ 16 px from top-left of the video */
    left:0rem;
    z-index:2;

    transform:rotate(-9.8deg);     /* slight Dutch angle */
    transform-origin:top left;   /* pivot around its corner */
}


/* --- Page Sections --- */
.product-ad-container > img,
.product-ad-container > video {
    width: 100%;
    max-width: 750px;
    height: auto;
    margin-bottom: 40px;
    border-radius: 30px;
    /* This ensures the video content fits the container correctly */
    object-fit: cover;
    box-shadow: 0 0 40px 40px rgba(18, 173, 200, 0.15);
}

.soundcloud-container{
    width:100%;
    max-width:100%;
    margin:1rem auto;
    padding-top:0;
    background:#111;
    border-radius:5px;
    overflow:hidden;
}
.soundcloud-container iframe{
    display:block;
    width:100%;
    height:324px;
    border:none;
}

.title-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.description-section {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
    margin-bottom: 50px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.description-column {
    width: 48%;
}

.media-section {
    margin-bottom: 50px;
}

.media-section img {
    max-width: 100%;
    height: auto;
}

.bottom-section {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
}

/* --- YouTube Video Container --- */

.video-container {
    position: relative;
    width: 48%;
    padding-top: calc(48% * 0.5625); /* 16:9 aspect ratio */
    background-color: #111;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.youtube-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #555;
    color: #777;
    font-weight: bold;
}

/* --- Interactive Changelog Box --- */

.changelog-box {
    width: 48%;
    background-color: #0C0C0C;
    border: 1px solid #444;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.changelog-box h3 {
    margin: 0;
    padding: 15px 20px;
    background-color: #1a1a1a;
    font-weight: 700;
    border-bottom: 1px solid #444;
}

.version-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-bottom: 1px solid #444;
    background-color: #111;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.version-tabs::-webkit-scrollbar {
    display: none;
}

.version-tab {
    background-color: transparent;
    border: none;
    border-right: 1px solid #444;
    color: #aaa;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.version-tab:hover {
    background-color: #2a2a2a;
    color: #fff;
}

.version-tab.active {
    background-color: #F8D458;
    color: #000;
}

.changelog-content {
    padding: 20px;
    flex-grow: 1;
    overflow-y: auto;
    height: 200px;
    /* Buttom fade out */
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* Using a more specific selector to prevent style conflicts */
.changelog-content .version-panel {
    display: none;
}

.changelog-content .version-panel.active {
    display: block;
}

.version-panel ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.version-panel li {
    margin-bottom: 10px;
    line-height: 1.5;
}

.mobile-title {
    display: none;
}

.font-sheepadoodle {
    font-family: 'Lobster', cursive;
    color:#214F52;
    -webkit-text-stroke:7px #FFF01F;  /* outline (Blink/WebKit) */
    paint-order: stroke fill;          /* put stroke underneath */
    /* Firefox / legacy fallback for the outline */
    text-shadow:
        -1px -1px 0 #FFF01F,
        1px -1px 0 #FFF01F,
        -1px  1px 0 #FFF01F,
        1px  1px 0 #FFF01F;

}

.font-vallhund {
    font-family: 'Mansalva', sans-serif;
    color:#DA3E3E;
    -webkit-text-stroke:7px #FFE91F;  /* outline (Blink/WebKit) */
    text-shadow:
        -1px -1px 0 #FFF01F,
        1px -1px 0 #FFF01F,
        -1px  1px 0 #FFF01F,
        1px  1px 0 #FFF01F;
    paint-order: stroke fill;          /* put stroke underneath */
    /* Firefox / legacy fallback for the outline */
    text-shadow: 0;
}

/* Sheepadoodle: A wobbly, fun rotation */
.download-wrap:hover > h1.transform-sheepadoodle-label,
.download-wrap:focus-within > h1.transform-sheepadoodle-label {
    transform:rotate(-369.8deg) scale(1.04);
}

@keyframes flipSnap {
  0%   { transform: perspective(400px) rotate(-9.8deg) rotateX(0)   scale(1);   }
  40%  { transform: perspective(400px) rotate(-9.8deg) rotateX(90deg) scale(.8); }
  60%  { transform: perspective(400px) rotate(-9.8deg) rotateX(180deg)scale(.8); }
  100% { transform: perspective(400px) rotate(-9.8deg) rotateX(360deg)scale(1.1);}
}

/* Vallhund: A sharper, more technical animation */
.download-wrap:hover > h1.transform-vallhund-label,
.download-wrap:focus-within > h1.transform-vallhund-label {
    /* transform: rotate(-18deg) scale(1.2); */
    /* animation: wiggleZoom .9s cubic-bezier(.36,.07,.19,.97) both infinite; */
    animation: flipSnap .4s cubic-bezier(.65,.0,.15,1) both;
}

/* ─── 1. Generic product-description shell ───────────────────────────── */
.product-description{
    /* tighten typography & provide breathing room */
    font-size:1.05rem;
    line-height:1.55;
    margin-bottom:3rem;
}

/* tweak the visual hierarchy of section titles */
.product-description > h2{
    font-size:2rem;
    font-weight:800;
    margin:0 0 0.5rem;
    letter-spacing:-.01em;
}

/* ensure SVG icons never push text to a second line on narrow screens */
@media(max-width:480px){
    .key-controls-list svg{ width:28px; height:28px; }
    .key-controls-list li{ gap:.75rem; }
}

/* ─── 3. Narrative description tweaks ────────────────────────────────── */
/* Intro paragraph */
.product-description .intro{
    margin:0 0 1.25rem;
}

/* Shared bullet styling for feature/parameter lists */
.product-description .feature-list,
.product-description .parameter-list{
    margin:0 0 1.5rem 1.25rem;   /* left indent only */
    padding:0;
    list-style:disc;
}
.product-description .feature-list li,
.product-description .parameter-list li{
    margin-bottom:.6rem;
}

/* “Under the Hood” sub-heading: keeps emoji baseline aligned */
.product-description h3{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-size:1.25rem;
    font-weight:700;
}
/* ── Minimal quote style ────────────────────────────── */
/* ── drop-in replacement ───────────────────────────── */
.product-description blockquote{
    margin:0 0 1.5rem;                 /* extra air below */
    padding:1.25rem 1.5rem;
    border-left:4px solid #F8D458;     /* brand yellow accent */
    background:rgba(255,255,255,.06);  /* faint glassy panel */
    border-radius:6px;                 /* soft edge */
    font-style:italic;
    color:#e2e2e2;
    position:relative;                 /* for the decorative mark */
}

.product-description blockquote footer{
    margin-top:.75rem;
    font-size:.9rem;
    font-style:normal;
    color:#FFFFFF;
    text-align:right;
}

.product-description blockquote footer cite{
    font-style:normal;                 /* keep cite upright */
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .title-section {
        flex-direction: column;
        gap: 20px;
    }

    .description-section, .bottom-section {
        flex-direction: column;
    }

    .description-column, .video-container, .changelog-box {
        width: 100%;
    }

    .video-container {
        padding-top: 56.25%; /* 16:9 for 100% width */
    }

    .product-ad-container {
        display: flex;
        flex-direction: column;
    }
    .product-ad-container .main-title {
        position: static;
        transform: none;
        text-align: center;
        margin-bottom: 5px; /* Adds space below the title */
    }
    .space {
        padding-top: 0.2rem;
    }
    .desktop-title {
        display: none; /* Hide the original desktop title */
    }

    .mobile-title {
        display: inline-block; /* Show the new mobile-specific title */
        line-height: 1.2;
        text-align: center;
    }

    .download-btn{
        font-weight:900;
        font-size:2.0rem;
        padding:0.8rem 2.5rem;
        border-radius:999px;
        background:#fff;
        color:#000000;
        cursor:pointer;
        border:2px solid #bbbbbb;

        transition:transform .18s ease-in-out;
    }
    .download-wrap > h1 {
        font-size:3rem;
        font-weight: 800;
        line-height:1;

        position:absolute;
        right:-4.3rem;
        bottom:-1.1rem;
        transform:rotate(-9.8deg);
        white-space:nowrap;
        pointer-events:none;
        transition:transform .18s ease-in-out;
    }


}