/* Koliber website - branding overlay on top of the MorphOS Team theme
   (morphos-theme.css). Keeps the MorphOS look (white wrapper, grey gradient
   backdrop, blue links) and adds Koliber's hummingbird-coloured accents:
   an iridescent teal -> blue -> violet, taken from the app logo. */

:root{
    --kol-teal:#10b5a4;
    --kol-green:#2fbf71;
    --kol-blue:#3b82f6;
    --kol-violet:#8b5cf6;
    --kol-ink:#242424;
    --kol-accent:#0e8f83;
}

/* The MorphOS theme forces `#content div { text-align:left }` (0,1,0,1),
   which out-specifies our class rules. Re-centre the pieces that must be
   centred with a matching #content prefix. */
#content #kol-hero,
#content #kol-hero p,
#content .kol-h2,
#content .lede,
#content .kol-shot figcaption,
#content .kol-dl .center{ text-align:center; }

/* --- navigation: logo + language switcher --------------------------------- */
#navigation .kol-brand{
    float:left; display:flex; align-items:center; gap:10px;
    height:60px; padding-left:24px; font-weight:bolder; font-size:20px;
    color:var(--kol-accent);
}
#navigation .kol-brand img{ height:40px; width:auto; border-radius:9px; }
#navigation .kol-lang{ float:right; padding-right:16px; line-height:60px; }
#navigation .kol-lang a{
    display:inline-block; padding:2px 7px; margin:0 1px; border-radius:3px;
    font-size:13px; font-weight:bold; color:#666;
}
#navigation .kol-lang a.active{ background:var(--kol-accent); color:#fff; }
#navigation .kol-lang a:hover{ background:rgba(0,0,0,0.06); }

/* --- hero ----------------------------------------------------------------- */
#kol-hero{ text-align:center; margin:26px 0 10px; }
/* The logo is a designed app icon (rounded, on its own light ground), so show
   it as an icon rather than dissolving it into the page. */
#kol-hero img.kol-logo{
    width:150px; max-width:44%; height:auto; margin:0 auto 6px; display:block;
    border-radius:26px; box-shadow:0 10px 26px rgba(20,30,60,0.22);
}
#kol-hero h1{
    display:inline-block;  /* hug the text so the gradient spans it, not the whole row */
    font-size:58px; line-height:1.05; margin:6px 0 0; font-weight:bolder;
    text-transform:none;   /* brand is "Koliber", not the theme's uppercase */
    background:linear-gradient(90deg,var(--kol-teal) 0%,var(--kol-blue) 55%,var(--kol-violet) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:var(--kol-teal);
}
#kol-hero .tagline{ font-size:21px; color:#333; margin:10px 0 4px; font-weight:bold; }
#kol-hero .lede{ max-width:700px; margin:6px auto 20px; color:#555; font-size:16px; line-height:1.6; }
#kol-hero .ver{ display:inline-block; margin-top:16px; color:#777; font-size:13px; letter-spacing:.5px; }

/* the framed "screenshot under the hero" */
#content img.framed{
    display:block; margin:26px auto 0; max-width:100%; height:auto; border-radius:6px;
    border:1px solid rgba(0,0,0,0.35); box-shadow:0 12px 34px rgba(0,0,0,0.22);
}

/* buttons */
.kol-btn{
    display:inline-block; margin:6px 6px 0; padding:12px 26px; border-radius:5px;
    font-weight:bold; font-size:15px; color:#fff !important; text-decoration:none;
    background:linear-gradient(180deg,var(--kol-teal),var(--kol-accent));
    box-shadow:0 2px 5px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
    transition:transform .08s ease, box-shadow .1s ease;
}
.kol-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,0.22); text-decoration:none; }
.kol-btn.ghost{ background:#fff; color:var(--kol-accent) !important;
    box-shadow:inset 0 0 0 1px rgba(14,143,131,0.5); }

/* --- section headings ----------------------------------------------------- */
.kol-h2{ text-align:center; font-size:30px; color:var(--kol-ink); margin:52px 0 6px; }
.kol-h2 small{ display:block; font-size:15px; color:#888; font-weight:normal; margin-top:6px; }
.kol-sep{ width:64px; height:4px; margin:12px auto 30px; border-radius:2px;
    background:linear-gradient(90deg,var(--kol-teal),var(--kol-green),var(--kol-blue),var(--kol-violet)); }

/* --- feature grid --------------------------------------------------------- */
.kol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:10px 0 20px; }
.kol-card{
    background:#fff; border:1px solid rgba(0,0,0,0.09); border-radius:7px; padding:22px 20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.05); transition:box-shadow .12s ease, transform .12s ease;
}
.kol-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,0.10); transform:translateY(-2px); }
.kol-card .ico{ font-size:30px; line-height:1; display:block; margin-bottom:12px; }
.kol-card h3{ margin:0 0 8px; font-size:18px; color:var(--kol-accent); }
.kol-card p{ margin:0; color:#555; font-size:14.5px; line-height:1.55; }

/* --- screenshots ---------------------------------------------------------- */
.kol-shots{ display:flex; flex-direction:column; gap:34px; margin:14px 0 10px; }
.kol-shot figure{ margin:0; }
.kol-shot img{
    width:100%; height:auto; display:block; border-radius:5px;
    border:1px solid rgba(0,0,0,0.35); box-shadow:0 8px 26px rgba(0,0,0,0.18);
}
.kol-shot figcaption{ text-align:center; color:#777; font-size:14px; margin-top:12px; font-style:italic; }

/* --- manual --------------------------------------------------------------- */
.kol-manual{ text-align:left; max-width:900px; margin:6px auto 0; }
.kol-manual .sec{
    background:#fff; border:1px solid rgba(0,0,0,0.08); border-left:4px solid var(--kol-teal);
    border-radius:5px; padding:16px 22px; margin:14px 0;
}
.kol-manual .sec h3{ margin:2px 0 8px; color:var(--kol-accent); font-size:19px; }
.kol-manual .sec p{ margin:6px 0; color:#444; line-height:1.6; font-size:15px; }
.kol-manual .sec ul{ margin:8px 0 4px; padding-left:22px; color:#444; line-height:1.55; }
.kol-manual .sec li{ margin:4px 0; }
.kol-manual .sec b{ color:var(--kol-ink); }

/* --- download ------------------------------------------------------------- */
.kol-dl{ max-width:760px; margin:8px auto 0; text-align:left; }
.kol-dl .panel{ background:#fff; border:1px solid rgba(0,0,0,0.09); border-radius:7px;
    padding:22px 26px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.kol-dl h3{ color:var(--kol-accent); margin:0 0 10px; }
.kol-dl ul{ padding-left:20px; line-height:1.7; color:#444; }
.kol-dl .note{ color:#777; font-size:13.5px; margin-top:14px; }
.kol-dl .center{ text-align:center; margin-top:22px; }

/* --- footer --------------------------------------------------------------- */
#kol-footer{ text-align:center; color:#666; font-size:14px; line-height:1.7; padding:30px 20px 10px; }
#kol-footer .ded{ font-style:italic; color:#888; margin-top:10px; }
#kol-footer .brand{ font-weight:bold; color:var(--kol-accent); }

/* --- live demo embed (self-contained HTML5 player + MorphOS video, 16:9) ---
   Centred in the content column (like every other section) and up to 1440px
   wide - half again the old 960 - so it reads as the centrepiece of the page. */
.kol-demo{
    --w:min(1440px, 94vw);           /* half again the old 960 cap */
    position:relative; aspect-ratio:16 / 9;
    width:var(--w);
    /* the content column is centred on the page, so pulling left by half the
       amount we overrun it keeps the (wider) box centred, with no breakout math
       that could drift or force a horizontal scrollbar. */
    margin:8px 0 0;
    margin-left:calc((100% - var(--w)) / 2);
    border-radius:6px; overflow:hidden; background:#171a24;
    border:1px solid rgba(0,0,0,0.35); box-shadow:0 12px 34px rgba(0,0,0,0.22);
}
.kol-demo iframe,
.kol-demo video{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width:900px){
    .kol-grid{ grid-template-columns:repeat(2,1fr); }
    #kol-hero h1{ font-size:46px; }
}
@media (max-width:600px){
    .kol-grid{ grid-template-columns:1fr; }
    #kol-hero h1{ font-size:38px; }
    #navigation .kol-brand span{ display:none; }
    #navigation .kol-lang{ float:none; display:block; text-align:center; line-height:2; }
}

/* language visibility helper (JS toggles [lang] on <html>) */
[data-i18n]{}