/*
Theme Name: GIF Monster
Theme URI: https://gif-monster.com
Author: GIF Monster
Description: Lightweight dark theme for GIF Monster tools and blog.
Version: 1.0.1
Text Domain: gifmonster
*/

/* ================================
   0) CSS Variables
   ================================ */
:root {
  --bg: #ffffff;
  --text: #111;
  --muted: #666;
  --link: #df1010; /* brand red */
  --accent: #df1010;

  --bg-secondary: #f6f6f7;
  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,0.08);

  /* Pills (light mode) */
  --pill-bg: #f8f8f8;
  --pill-border: #e6e6e6;
  --pill-hover-bg: #f0f0f0;
  --pill-hover-border: #dcdcdc;
  --pill-active-bg: #fff;
  --pill-active-fg: #111;
  --pill-active-border: #fff;
}

html.dark {
  --bg: #0e0e0e;
  --text: #eee;
  --muted: #aaa;
  --link: #df1010; /* red stays consistent */
  --accent: #df1010;

  --bg-secondary: #1b1b1c;
  --card-bg: #1e1e1e;
  --card-border: rgba(255,255,255,0.08);

  --pill-bg: #111;
  --pill-border: #111;
  --pill-hover-bg: #222;
  --pill-hover-border: #222;
  --pill-active-bg: #fff;
  --pill-active-fg: #111;
  --pill-active-border: #fff;
}


/* Optional: smooth transitions after first render */
html.ready * { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }

/* Ensure header rows align left/right cleanly */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

/* Hamburger base (hidden on desktop) */
.mobile-toggle {
  display: none;
  border: 1px solid var(--pill-border, #e6e6e6);
  background: var(--pill-bg, #f8f8f8);
  color: var(--pill-fg, #111);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
html.dark .mobile-toggle {
  background: var(--pill-bg-dark, #121212);
  border-color: var(--pill-border-dark, #2a2a2a);
  color: var(--pill-fg-dark, #eee);
}

/* Keep the logo link from becoming a pill */
nav.tabs a:has(.logo) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Desktop: menu inline; hamburger hidden */
@media (min-width: 721px) {
  .mobile-toggle { display: none; }
  nav.tabs { display: flex; align-items: center; gap: 8px; }
  nav.tabs .menu { display: flex; gap: 8px; align-items: center; }
}

/* Mobile: top bar stays a row; menu stacks under logo */
@media (max-width: 720px) {
  .site-header { gap: 12px; }
  .header-left, .header-right { display: flex; align-items: center; }
  .header-right { gap: 8px; margin-left: auto; } /* push to the right */

  /* Show the hamburger on mobile */
  .mobile-toggle { display: inline-flex; }

  /* Make the nav columnar, but keep it in the left area under the logo */
  nav.tabs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  /* Hide menu by default; reveal when toggled */
  nav.tabs .menu {
    display: none;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 8px 0 0;
    list-style: none;
  }
  nav.tabs .menu.is-open { display: flex; }

  /* Full-width, easy-tap links */
  nav.tabs .menu > li { width: 100%; }
  nav.tabs .menu > li > a {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  nav.tabs .menu {
    display: flex;              /* always a flex container */
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;

    /* Animation properties */
    max-height: 0;              /* collapsed */
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  nav.tabs .menu.is-open {
    padding: 8px 0 0;
    max-height: 500px;          /* large enough to show all links */
  }

  /* Full-width, easy-tap links */
  nav.tabs .menu > li { width: 100%; }
  nav.tabs .menu > li > a {
    width: 100%;
    justify-content: flex-start;
  }
}




/* ================================
   1) Base & Typography
   ================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}
h1{
    font-size: 1.65em;
    margin: 0 0 1em 0em;
}
h2{
    font-size:1.2em;
    margin: 0 0 1em 0em;
}
h3{
    font-size: 1em;
    margin:0 0 1em 0em;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.screen-reader-text { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Aux text */
.text-xs { font-size: 12px; color: var(--muted); }

a,
.site-footer a,
.gm-footer-menu a {
  color: var(--link);
}
a:hover,
.site-footer a:hover,
.gm-footer-menu a:hover {
  color: #b90d0d; /* darker red on hover */
  text-decoration: underline;
}

.tool-main-col button,
.tool-main-col .btn,
.tool-article .tool-content button,
.tool-article .tool-content .btn {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.tool-main-col button:hover,
.tool-main-col .btn:hover,
.tool-article .tool-content button:hover,
.tool-article .tool-content .btn:hover {
  background: #b90d0d;
  border-color: #b90d0d;
}
.progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #b90d0d);
}

nav.tabs .current-menu-item > a,
nav.tabs .current_page_item > a,
nav.tabs a[aria-current="page"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
html.dark nav.tabs .current-menu-item > a,
html.dark nav.tabs .current_page_item > a,
html.dark nav.tabs a[aria-current="page"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Muted disclaimer note */
.qr-note {
  font-size: 0.85rem;
  color: var(--muted, #888);
  margin-top: 8px;
  padding-left: 4px;
  border-left: 3px solid var(--card-border, rgba(0,0,0,0.1));
}

/* Hide honeypot */
.gm-contact-form .hp { position: absolute; left: -9999px; }
/* Inputs/buttons inherit your theme styles already; tweak spacing if needed */
.gm-contact-form label { margin-bottom: 10px; }

/* ================================
   2) Layout Containers
   ================================ */
.container.vstack { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px 0; }
.main-content,
.sidebar { background: var(--bg-secondary); padding: 20px; border-radius: 8px; }
.main-content { flex: 2; min-width: 300px; }
.sidebar { flex: 1; min-width: 250px; }

/* Utilities */
.vstack { display: flex; flex-direction: column; gap: 12px; }
.hstack { display: flex; align-items: center; gap: 8px; }
.space-between { justify-content: space-between; }
.fullwidth { width: 100%; }
.rounded-12 { border-radius: 12px; }
.gap-6 { gap: 6px; } .gap-10 { gap: 10px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; }
.pad-8 { padding: 8px; }
.hidden { display: none !important; }

/* ================================
   3) Header / Navigation (pill tabs)
   ================================ */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--card-border);
}
.header-left { display: flex; flex-direction: column; gap: 6px; }
.icon-btn {
  background: transparent; border: 1px solid var(--card-border);
  color: var(--text); padding: 6px 10px; border-radius: 8px; cursor: pointer;
}

/* Tabs container can contain bare <li> items (WP) and a logo link */
nav.tabs, nav.tabs ul { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
nav.tabs > li, nav.tabs ul > li { margin: 0; padding: 0; display: inline-flex; }

/* Logo (never a pill) */
nav.tabs .logo { height: 28px; width: auto; margin-right: 8px; vertical-align: middle; }
nav.tabs a.logo-link,
nav.tabs a:has(> .logo) { /* :has fallback if you don't add .logo-link */
  background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important;
}

/* Default (inactive) tabs = dark pill in dark mode, light pill in light mode */
nav.tabs a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 9999px; font-weight: 600; line-height: 1;
  border: 1px solid var(--pill-border);
  background: var(--pill-bg); color: var(--pill-bg) == #111 ? #fff : var(--text); /* visual note */
  color: color-mix(in srgb, var(--pill-active-fg) 0%, var(--text) 100%); /* safe default */
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .04s;
}
nav.tabs a:hover, nav.tabs a:focus-visible {
  background: var(--pill-hover-bg); border-color: var(--pill-hover-border); text-decoration: none; outline: none;
}

/* Active = white pill with dark text (both light & dark modes) */
nav.tabs .current-menu-item > a,
nav.tabs .current_page_item > a,
nav.tabs a[aria-current="page"] {
  background: var(--pill-active-bg);
  color: var(--pill-active-fg);
  border-color: var(--pill-active-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
nav.tabs a:active { transform: translateY(1px); }

/* Small screens: allow horizontal scroll if many tabs */
@media (max-width: 640px) {
  nav.tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Footer nav reset (no bullets) */
.site-footer .menu, .site-footer nav ul { list-style: none; margin: 0; padding: 0; }
.site-footer .menu > li { margin: 0; padding: 0; }

/* ================================
   4) Cards & Footer
   ================================ */
.card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 10px; padding: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.card + .card { margin-top: 12px; }
.card-title { font-size: 1rem; font-weight: 600; margin: 0 0 6px; }
.card-body { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.card-meta { font-size: 0.85rem; color: var(--muted); margin-top: 8px; }
.card-news { background: var(--bg-secondary); border-color: var(--card-border); }

.site-footer {
  margin: 32px 0 24px; padding-top: 16px;
  border-top: 1px solid var(--card-border); color: var(--muted); font-size: 14px;
}
.site-footer a { color: var(--link); }

/* ================================
   5) Tool Pages (layout + controls)
   ================================ */

/* Grid wrapper: 66/33 columns on desktop */
.tool-layout {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 20px; align-items: start;
}
.tool-main-col, .tool-aside-col { min-width: 0; }
.tool-main-col .card { background: var(--bg-secondary); border-radius: 8px; padding: 20px; }
.tool-aside-col { background: transparent; }
@media (max-width: 900px) { .tool-layout { grid-template-columns: 1fr; } }

/* Sidebar-style preview card */
.preview-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 10px; padding: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.sticky { position: sticky; top: 16px; }

/* Normalize Gutenberg spacing inside tool content */
.tool-article .tool-content > *:first-child { margin-top: 0; }
.tool-article .tool-content .wp-block-group,
.tool-article .tool-content .wp-block-columns,
.tool-article .tool-content .wp-block-column { margin: 0; }

/* Form controls (tool main column) */
.tool-main-col input,
.tool-main-col select,
.tool-main-col textarea {
  width: 100%;
  background: var(--bg-secondary);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px 12px;
}
.tool-main-col button,
.tool-main-col .btn {
  background: color-mix(in srgb, var(--bg-secondary) 60%, #000 40%);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
}
.tool-main-col button:hover,
.tool-main-col .btn:hover { filter: brightness(1.06); }

/* Options grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* Progress bar */
.progress {
  width: 100%; height: 10px;
  background: var(--bg-secondary);
  border-radius: 999px; overflow: hidden;
  border: 1px solid var(--card-border);
}

/* Preview area */
.gm-preview-wrap {
  position: relative; min-height: 80px; display: block !important;
  overflow: visible !important;
  background-image: transparent;
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
.gm-preview-placeholder { margin: 0; opacity: 0.7; transition: opacity .2s ease; }
.gm-preview-wrap.has-gif .gm-preview-placeholder { display: none !important; }

#previewGif {
  display: block !important; visibility: visible !important; opacity: 1 !important;
  max-width: 100% !important; height: auto !important; pointer-events: auto !important;
  position: static !important; z-index: 2 !important;
}

/* Download link */
.gm-download { display: inline-block; margin-top: .5rem; text-decoration: none; }

/* ================================
   6) Responsive niceties
   ================================ */
@media (max-width: 720px) {
  .tabs { flex-wrap: wrap; } /* legacy selector (safe) */
}

/* Compact pagination in the right rail */
.tool-aside-col .page-numbers { 
  display:inline-block; padding:6px 10px; border-radius:9999px; 
  border:1px solid var(--card-border); text-decoration:none; margin-right:6px;
}
.tool-aside-col .page-numbers.current {
  background: var(--accent, #df1010); border-color: var(--accent, #df1010); color:#fff;
}
.tool-aside-col .page-numbers:hover { text-decoration:none; filter:brightness(0.95); }

.details {
    margin-top:2em;
}

/* Progress container */
.progress {
  width: 100%;
  height: 10px;
  background: #2a2a2a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

/* The fill */
#progressBar {
  display: block;           /* <- ensure it actually renders */
  height: 100%;             /* <- take the bar height */
  width: 0%;
  background: linear-gradient(90deg, #df1010, #f02424);
  transition: width .2s ease; /* smooth updates */
}

/* If builders add hidden classes, ignore them for the progress area */
#progressWrap { display: block !important; }

.gm-contact-form input,
.gm-contact-form textarea {
  width: 100%;
  background: #2a2a2a;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 10px 12px;
}

.gm-contact-form button.btn.primary {
  background: #df1010; /* your accent */
  border-color: #df1010;
  color: #fff;
}

.gm-contact-alert {
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.gm-contact-success { background: rgba(60, 179, 113, .15); border: 1px solid rgba(60,179,113,.3); }
.gm-contact-error   { background: rgba(223, 16, 16,  .12); border: 1px solid rgba(223,16,16,.35); }

.gm-honeypot { display: none !important; visibility: hidden !important; height: 0 !important; }

.gm-contact-form input,
    .gm-contact-form textarea {
      width: 100%;
      background: #2a2a2a;
      color: var(--text, #f0f0f0);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px;
      padding: 10px 12px;
    }
    .gm-contact-form button.btn.primary {
      background: #df1010;
      border: 1px solid #df1010;
      color: #fff;
      border-radius: 8px;
      padding: 10px 12px;
      cursor: pointer;
    }
    .gm-contact-alert {
      padding: 10px 12px;
      border-radius: 8px;
      margin-bottom: 12px;
      font-size: 0.95rem;
    }
    .gm-contact-success { background: rgba(60,179,113,.15); border:1px solid rgba(60,179,113,.3); }
    .gm-contact-error   { background: rgba(223,16,16,.12);  border:1px solid rgba(223,16,16,.35); }
    .gm-honeypot { display:none !important; visibility:hidden !important; height:0 !important; }
    
    .gm-contact-form select {
  width: 100%;
  background: #2a2a2a;
  color: var(--text, #f0f0f0);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 10px 12px;
}
#previewImg{
    max-width: 100%;
}
#stripMeta{ width:10%;}

/* ============ 404 CSS Monster ============ */
:root {
  --gm-monster-body: #df1010;         /* uses your accent red */
  --gm-monster-dark: #9f0c0c;
  --gm-monster-light: #ff3a3a;
  --gm-eye-white: #fff;
  --gm-pupil: #121212;
  --gm-mouth: #111;
  --gm-teeth: #fff;
  --gm-blush: rgba(255, 255, 255, 0.18);
  --gm-shadow: rgba(0, 0, 0, 0.35);
}

html.dark {
  --gm-pupil: #0a0a0a;
  --gm-mouth: #000;
}

/* Wrapper scales nicely on mobile/desktop */
.gm-monster {
  width: min(360px, 70vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto 24px;
  position: relative;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.25));
}

.gm-monster__body {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(120% 120% at 30% 25%, var(--gm-monster-light), var(--gm-monster-body) 45%, var(--gm-monster-dark) 100%);
  border-radius: 26% 26% 34% 34% / 30% 30% 40% 40%;
  border: 2px solid rgba(0,0,0,.08);
}

/* Horns */
.gm-monster__horn {
  --w: 22%;
  position: absolute;
  top: -6%;
  width: var(--w);
  height: calc(var(--w) * .9);
  background: linear-gradient(180deg, #ffd494, #e5a85b);
  border: 2px solid rgba(0,0,0,.05);
  border-radius: 12px 12px 0 0;
  clip-path: polygon(50% 0, 60% 25%, 70% 50%, 60% 100%, 40% 100%, 30% 50%, 40% 25%);
  transform-origin: bottom center;
}
.gm-monster__horn--left { left: 12%; rotate: -12deg; }
.gm-monster__horn--right { right: 12%; rotate: 12deg; }

/* Eyes */
.gm-monster__eyes {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 58%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}
.gm-eye {
  --size: 30%;
  width: var(--size);
  aspect-ratio: 1/1;
  background: var(--gm-eye-white);
  border-radius: 50%;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.08);
  display: grid;
  place-items: center;
}
.gm-eye__inner {
  width: 68%;
  aspect-ratio: 1/1;
  background: #eaeaea;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.gm-pupil {
  width: 42%;
  aspect-ratio: 1/1;
  background: var(--gm-pupil);
  border-radius: 50%;
  position: relative;
}
.gm-pupil::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 18%;
  width: 28%;
  aspect-ratio: 1/1;
  background: rgba(255,255,255,.8);
  border-radius: 50%;
}

/* Mouth + Teeth */
.gm-mouth {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  width: 44%;
  height: 16%;
  background: var(--gm-mouth);
  border-radius: 0 0 22px 22px;
  overflow: hidden;
  box-shadow: inset 0 -10px 16px rgba(0,0,0,.35);
}
.gm-teeth {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 84%;
  height: 10px;
  background:
    linear-gradient(90deg, transparent 10%, var(--gm-teeth) 10% 20%, transparent 20% 30%, var(--gm-teeth) 30% 40%, transparent 40% 50%, var(--gm-teeth) 50% 60%, transparent 60% 70%, var(--gm-teeth) 70% 80%, transparent 80% 90%, var(--gm-teeth) 90% 100%);
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  opacity: .95;
}
.gm-teeth--top { top: -2px; }
.gm-teeth--bottom {
  bottom: -2px;
  transform: translateX(-50%) rotate(180deg);
}

/* Blush */
.gm-blush {
  position: absolute;
  top: 58%;
  width: 16%;
  height: 10%;
  background: var(--gm-blush);
  border-radius: 50%;
  filter: blur(2px);
}
.gm-blush--left { left: 18%; }
.gm-blush--right { right: 18%; }

/* Feet */
.gm-feet {
  position: absolute;
  bottom: -3%;
  left: 50%;
  width: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}
.gm-foot {
  width: 28%;
  height: 14px;
  background: var(--gm-monster-dark);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

/* Shadow */
.gm-shadow {
  position: absolute;
  bottom: -2%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 12%;
  background: radial-gradient(60% 50% at 50% 50%, var(--gm-shadow), transparent 70%);
  filter: blur(4px);
  z-index: -1;
}

/* Subtle idle animation (reduced for prefers-reduced-motion) */
@keyframes gm-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}
@keyframes gm-blink {
  0%, 48%, 52%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
}
.gm-monster__body { animation: gm-breathe 3.6s ease-in-out infinite; }
.gm-eye { transform-origin: center; }
.gm-eye .gm-eye__inner { animation: gm-blink 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .gm-monster__body, .gm-eye .gm-eye__inner { animation: none; }
}
#log { min-height: 1.25em; }
.status-line { opacity: 1; transition: opacity .25s ease; }

/* optional colors by type */
.status-line.info    { color: var(--muted); }
.status-line.success { color: #2ecc71; }   /* or your accent */
.status-line.error   { color: #df1010; }   /* your brand red */