/*
Theme Name: imagebin
Theme URI: https://imagebin.org/
Description: Custom, lightweight bilingual (EN/DE) theme for imagebin.org — an in-browser image tools and guides portal. Built for speed, Core Web Vitals and SEO.
Author: imagebin.org
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: imagebin
*/

:root{
  --ink:#0c0e12; --ink-2:#1b1f27; --muted:#5a6473; --line:#e7e4df;
  --paper:#fbfaf8; --paper-2:#f3f1ec; --card:#ffffff;
  --accent:#f0502e; --accent-ink:#ffffff; --accent-soft:#fdece6;
  --radius:16px; --radius-sm:10px; --maxw:1200px;
  --shadow:0 1px 2px rgba(20,16,12,.04), 0 12px 32px -12px rgba(20,16,12,.12);
  --font-d:"Outfit",system-ui,sans-serif; --font-b:"Inter",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f4f2ee; --ink-2:#cdd2da; --muted:#9aa3b2; --line:#272b33;
    --paper:#0c0e12; --paper-2:#14171d; --card:#161a21;
    --accent:#ff6a49; --accent-ink:#1a0b06; --accent-soft:#241511;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ink:#f4f2ee; --ink-2:#cdd2da; --muted:#9aa3b2; --line:#272b33;
  --paper:#0c0e12; --paper-2:#14171d; --card:#161a21;
  --accent:#ff6a49; --accent-ink:#1a0b06; --accent-soft:#241511;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-b); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}
h1,h2,h3{font-family:var(--font-d); letter-spacing:-.02em; line-height:1.05; margin:0}
p{margin:0}
.eyebrow{font-family:var(--font-d); font-weight:600; font-size:13px; letter-spacing:.02em; color:var(--accent)}
.skip-link{position:absolute; left:-999px}
.skip-link:focus{left:16px; top:10px; background:var(--card); padding:10px 16px; border-radius:8px; z-index:100}

/* NAV */
.site-nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line)}
.site-nav .wrap{display:flex; align-items:center; gap:28px; height:68px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:800; font-size:19px; letter-spacing:-.03em; color:var(--ink)}
.brand .mark{width:28px; height:28px; border-radius:8px; background:var(--accent); display:grid; place-items:center; color:var(--accent-ink); flex:0 0 auto}
.brand .mark svg{width:17px; height:17px}
.site-nav .menu{display:flex; gap:26px; margin-left:8px; list-style:none; padding:0; margin-top:0; margin-bottom:0}
.site-nav .menu a{font-weight:500; color:var(--ink-2); font-size:15px}
.site-nav .menu a:hover{color:var(--ink)}
.site-nav .spacer{flex:1}
.lang{display:flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:3px; font-size:13px; font-weight:600; list-style:none; margin:0}
.lang a{padding:3px 9px; border-radius:999px; color:var(--muted); display:block}
.lang .current-lang a, .lang a.on{background:var(--ink); color:var(--paper)}
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-d); font-weight:600; font-size:15px; padding:11px 18px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .12s ease, background .2s ease, border-color .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:color-mix(in srgb, var(--accent) 88%, #000)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-2)}
.icon-btn{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.navcta{display:flex; align-items:center; gap:12px}

/* HERO */
.hero{padding:76px 0 40px}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,66px); font-weight:800}
.hero h1 .hl{color:var(--accent)}
.hero .lead{margin-top:22px; font-size:19px; color:var(--ink-2); max-width:34ch}
.hero .cta{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap}
.hero .assure{margin-top:20px; display:flex; gap:18px; flex-wrap:wrap; color:var(--muted); font-size:14px}
.hero .assure span{display:inline-flex; align-items:center; gap:7px}
.hero .assure svg{width:16px;height:16px;color:var(--accent)}
.mosaic{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:70px; gap:12px}
.mosaic figure{margin:0; border-radius:14px; overflow:hidden; background:var(--paper-2); box-shadow:var(--shadow); position:relative}
.mosaic img{width:100%; height:100%; object-fit:cover; display:block}
.mosaic .a{grid-column:span 4; grid-row:span 3}
.mosaic .b{grid-column:span 2; grid-row:span 2}
.mosaic .c{grid-column:span 2; grid-row:span 2}
.mosaic .d{grid-column:span 3; grid-row:span 2}
.mosaic .e{grid-column:span 3; grid-row:span 2}
.mosaic .tag{position:absolute; left:10px; bottom:10px; background:color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter:blur(6px); border:1px solid var(--line); color:var(--ink); font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; font-family:var(--font-d)}

/* SECTIONS */
.section{padding:64px 0}
.sec-head{max-width:60ch}
.sec-head h2{font-size:clamp(28px,3.4vw,42px); font-weight:800}
.sec-head p{margin-top:14px; color:var(--ink-2); font-size:17px}

/* TOOLS */
.tools-grid{margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.tool{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:12px; transition:transform .15s ease, border-color .2s}
.tool:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}
.tool .ic{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.tool .ic svg{width:22px;height:22px}
.tool h3{font-size:18px; font-weight:700}
.tool p{color:var(--muted); font-size:14.5px}
.tool .go{margin-top:auto; font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--ink); display:inline-flex; align-items:center; gap:6px}
.tool:hover .go{color:var(--accent)}

/* WHY */
.why{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.why .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.why .points{display:flex; flex-direction:column; margin-top:22px}
.why .pt{padding:22px 0; border-top:1px solid var(--line); display:flex; gap:16px}
.why .pt:first-child{border-top:none}
.why .pt .n{font-family:var(--font-d); font-weight:800; color:var(--accent); font-size:15px; width:28px; flex:0 0 auto}
.why .pt h3{font-size:19px; font-weight:700; margin-bottom:5px}
.why .pt p{color:var(--ink-2); font-size:15px}
.why .figure{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; background:var(--card)}
.why .figure img{width:100%;height:100%;object-fit:cover;display:block}

/* GUIDES */
.guides-grid{margin-top:40px; display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:1fr; gap:16px}
.card{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--card); min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; transition:transform .15s ease}
.card:hover{transform:translateY(-3px)}
.card.big{grid-row:span 2}
.card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.card .scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,8,6,0) 30%, rgba(10,8,6,.78) 100%)}
.card .body{position:relative; z-index:2; padding:20px}
.card .k{font-family:var(--font-d); font-weight:600; font-size:12px; color:#ffd9ce}
.card h3{font-size:20px; font-weight:700; margin-top:6px; color:#fff}
.card.sm h3{font-size:17px}
.card p{position:relative; z-index:2; padding:0 20px 20px; color:rgba(255,255,255,.82); font-size:14px}

/* CTA BAND */
.band{padding:72px 0}
.band .box{background:var(--ink); color:var(--paper); border-radius:24px; padding:54px; display:grid; grid-template-columns:1.3fr .7fr; gap:30px; align-items:center}
.band h2{font-size:clamp(26px,3vw,38px); color:var(--paper); font-weight:800}
.band p{margin-top:12px; color:color-mix(in srgb, var(--paper) 72%, transparent); font-size:16px}
.band .act{display:flex; justify-content:flex-end}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .band .box{background:var(--card); border:1px solid var(--line)}}
:root[data-theme="dark"] .band .box{background:var(--card); border:1px solid var(--line)}

/* ARTICLE (single/page) */
.article{padding:56px 0; max-width:760px; margin:0 auto}
.article h1{font-size:clamp(30px,4vw,46px); font-weight:800; margin-bottom:16px}
.article .meta{color:var(--muted); font-size:14px; margin-bottom:28px}
.article .content{font-size:17px; color:var(--ink-2)}
.article .content h2{font-size:28px; margin:36px 0 12px; color:var(--ink)}
.article .content h3{font-size:21px; margin:28px 0 10px; color:var(--ink)}
.article .content p{margin:0 0 18px}
.article .content img{border-radius:12px; margin:18px 0}
.article .content a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.article .content ul,.article .content ol{padding-left:22px; margin:0 0 18px}
.article .content li{margin:6px 0}

/* FOOTER */
.site-footer{border-top:1px solid var(--line); padding:56px 0 40px; background:var(--paper)}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.foot h4{font-family:var(--font-d); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
.foot a{display:block; color:var(--ink-2); font-size:14.5px; padding:5px 0}
.foot a:hover{color:var(--accent)}
.foot .about{max-width:34ch; color:var(--muted); font-size:14px; margin-top:14px}
.foot-bottom{margin-top:40px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:13px; flex-wrap:wrap; gap:10px}

/* reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none}}

/* responsive */
@media (max-width:960px){
  .hero .wrap, .why .wrap, .band .box{grid-template-columns:1fr}
  .hero{padding:48px 0 20px}
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .guides-grid{grid-template-columns:1fr 1fr}
  .card.big{grid-row:span 1}
  .band .act{justify-content:flex-start}
  .foot{grid-template-columns:1fr 1fr}
  .site-nav .menu{display:none}
}
@media (max-width:560px){
  .tools-grid, .guides-grid, .foot{grid-template-columns:1fr}
  .hero h1{font-size:38px}
  .band .box{padding:32px}
}

/* ===== TOOL UI ===== */
.ib-tool{margin-top:32px}
.ib-drop{border:2px dashed var(--line); border-radius:var(--radius); background:var(--card); padding:46px 24px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s}
.ib-drop:hover,.ib-drop.is-over{border-color:var(--accent); background:var(--accent-soft)}
.ib-drop .ic{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin:0 auto 14px}
.ib-drop .ic svg{width:26px;height:26px}
.ib-drop h3{font-size:19px;font-weight:700;margin-bottom:6px}
.ib-drop p{color:var(--muted);font-size:14.5px}
.ib-drop input{display:none}
.ib-controls{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;margin-top:24px;padding:20px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius)}
.ib-field{display:flex;flex-direction:column;gap:6px;min-width:150px}
.ib-field label{font-family:var(--font-d);font-size:13px;font-weight:600;color:var(--ink-2)}
.ib-field select,.ib-field input[type=number]{padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-family:var(--font-b);font-size:14.5px}
.ib-field input[type=range]{accent-color:var(--accent);width:180px}
.ib-field .val{font-family:var(--font-d);font-weight:700;color:var(--accent)}
.ib-results{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.ib-row{display:flex;align-items:center;gap:16px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm)}
.ib-thumb{width:56px;height:56px;border-radius:9px;overflow:hidden;background:var(--paper-2);flex:0 0 auto}
.ib-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ib-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ib-info strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-meta{color:var(--muted);font-size:13.5px}
.ib-saved{font-family:var(--font-d);font-weight:800;color:var(--accent);font-size:16px;flex:0 0 auto}
.ib-dl{flex:0 0 auto;font-size:14px;padding:9px 16px}
.ib-empty{margin-top:24px;color:var(--muted);font-size:15px;text-align:center;padding:20px}
.ib-privacy{margin-top:18px;display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.ib-privacy svg{width:16px;height:16px;color:var(--accent)}
@media (max-width:560px){
  .ib-row{flex-wrap:wrap}
  .ib-dl{width:100%;justify-content:center}
  .ib-field input[type=range]{width:100%}
}

/* ===== TOOL: crop / picker / exif ===== */
.ib-check label{display:flex;align-items:center;gap:8px;font-family:var(--font-b);font-weight:400;font-size:14.5px;color:var(--ink-2)}
.ib-check input{accent-color:var(--accent);width:16px;height:16px}
.ib-readout{font-family:var(--font-d);font-weight:700;color:var(--ink);font-size:15px}
.ib-stage{margin-top:24px}
.ib-cropwrap{position:relative;display:inline-block;max-width:100%;border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-2);line-height:0}
.ib-cropwrap img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
.ib-cropsel{position:absolute;border:2px solid var(--accent);box-shadow:0 0 0 9999px rgba(10,8,6,.45);cursor:move;touch-action:none}
.ib-pickcanvas{max-width:100%;height:auto;border-radius:var(--radius-sm);cursor:crosshair;display:block;border:1px solid var(--line)}
.ib-swatch{display:block;width:54px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--paper-2)}
.ib-palette{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.ib-pal{width:46px;height:46px;border-radius:10px;border:1px solid var(--line);cursor:pointer;padding:0}
.ib-pal:hover{transform:translateY(-2px)}
.ib-exif{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ib-exif-row{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-top:1px solid var(--line);font-size:14.5px}
.ib-exif-row:first-child{border-top:none}
.ib-exif-row span{color:var(--muted)}
.ib-exif-row b{color:var(--ink);text-align:right;word-break:break-word}

/* ---- tool additions: presets, status, zip bar, error rows ---- */
.ib-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ib-presets button{padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink-2);font-family:var(--font-d);font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
.ib-presets button:hover{border-color:var(--accent)}
.ib-presets button.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ib-status{margin-top:18px;font-family:var(--font-d);font-size:13.5px;font-weight:600;color:var(--muted)}
.ib-zipbar{display:flex;justify-content:flex-end;padding-top:6px}
.ib-row-err{border-color:#e4a79b;background:var(--accent-soft)}
.ib-row-err .ib-meta{color:var(--ink-2)}