/* =============================================================
   ImgLab Tools – Shared Stylesheet
   2016-era flat WordPress/Bootstrap aesthetic
   Open Sans + Lato, #1e73be primary, #ffb900 accent
   ============================================================= */

/* ── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body { font-family: 'Open Sans', Arial, sans-serif; background: #f1f1f1; color: #333; line-height: 1.65; }

/* Skip-to-content (accessibility) */
.skip-link { position: absolute; left: -9999px; top: 4px; background: #1e73be; color: #fff; padding: 8px 16px; border-radius: 3px; z-index: 9999; font-size: .85rem; }
.skip-link:focus { left: 16px; }

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar { background: #222; color: #aaa; font-size: .75rem; padding: 5px 0; border-bottom: 1px solid #111; }
.topbar-inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
.topbar a { color: #aaa; text-decoration: none; }
.topbar a:hover { color: #fff; }

/* ── HEADER ─────────────────────────────────────────────────── */
.site-header { background: #1e73be; padding: 0; border-bottom: 4px solid #145c99; }
.header-inner { max-width: 1100px; margin: 0 auto; padding: 18px 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-logo { text-decoration: none; display: flex; align-items: center; gap: 12px; }
.site-logo .logo-img { height: 48px; display: block; }
.site-logo h1 { font-family: 'Lato', sans-serif; font-size: 1.65rem; font-weight: 900; color: #fff; line-height: 1.2; margin: 0; }
.site-logo span { color: #ffdf00; font-size: 1rem; font-weight: 400; display: block; }
.header-tagline { color: #d0e8f8; font-size: .82rem; max-width: 340px; line-height: 1.5; }

/* ── MAIN NAV ───────────────────────────────────────────────── */
.main-nav { background: #145c99; border-bottom: 3px solid #0f4a80; }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; flex-wrap: wrap; }
.nav-inner a { display: inline-block; color: #d0e8f8; font-size: .84rem; font-weight: 600; padding: 10px 14px; text-decoration: none; border-right: 1px solid rgba(255,255,255,.1); transition: background .15s; }
.nav-inner a:hover, .nav-inner a.active { background: #0f4a80; color: #fff; }
.nav-inner a:first-child { border-left: 1px solid rgba(255,255,255,.1); }

/* ── HERO STRIP ─────────────────────────────────────────────── */
.hero-strip { background: linear-gradient(135deg, #1e73be 60%, #0f4a80 100%); padding: 32px 16px; color: #fff; text-align: center; }
.hero-strip h2 { font-family: 'Lato', sans-serif; font-size: 1.9rem; font-weight: 900; margin-bottom: 8px; }
.hero-strip p { font-size: .95rem; color: #d0e8f8; max-width: 600px; margin: 0 auto; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.site-body { max-width: 1100px; margin: 24px auto; padding: 0 16px; display: flex; gap: 24px; align-items: flex-start; }
.content-area { flex: 1; min-width: 0; }
.sidebar { width: 280px; flex-shrink: 0; }
@media (max-width: 780px) { .site-body { flex-direction: column; } .sidebar { width: 100%; } }

/* ── CARD / BOX ─────────────────────────────────────────────── */
.box { background: #fff; border: 1px solid #ddd; border-top: 4px solid #1e73be; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 22px; border-radius: 2px; }
.box-head { background: #f7f7f7; border-bottom: 1px solid #ddd; padding: 12px 18px; font-family: 'Lato', sans-serif; font-size: .95rem; font-weight: 700; color: #1e73be; text-transform: uppercase; letter-spacing: .04em; }
.box-body { padding: 18px; }

/* ── FORMS ──────────────────────────────────────────────────── */
label { display: block; font-size: .82rem; font-weight: 700; color: #555; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .03em; }
input[type=number], input[type=text], input[type=email], select, textarea {
  width: 100%; padding: 8px 11px; border: 1px solid #ccc; border-radius: 3px;
  font-family: 'Open Sans', sans-serif; font-size: .9rem; color: #333;
  background: #fafafa; outline: none; transition: border-color .2s;
}
input:focus, select:focus, textarea:focus { border-color: #1e73be; background: #fff; }
select option { background: #fff; }
textarea { min-height: 110px; resize: vertical; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-group { margin-bottom: 12px; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn { display: inline-block; padding: 10px 22px; border: none; border-radius: 3px; font-family: 'Open Sans', sans-serif; font-size: .88rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: all .15s; text-transform: uppercase; letter-spacing: .04em; }
.btn-primary { background: #1e73be; color: #fff; }
.btn-primary:hover { background: #145c99; }
.btn-success { background: #46b450; color: #fff; }
.btn-success:hover { background: #357e38; }
.btn-warning { background: #ffb900; color: #fff; }
.btn-warning:hover { background: #e0a000; }
.btn-danger { background: #dc3232; color: #fff; }
.btn-danger:hover { background: #b52828; }
.btn-sm { padding: 6px 14px; font-size: .78rem; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ── RESULT BOX ─────────────────────────────────────────────── */
.result-box { display: none; background: #f0f8e8; border: 1px solid #b6dfb0; border-left: 5px solid #46b450; padding: 16px 18px; border-radius: 2px; margin-top: 16px; }
.result-box.show { display: block; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.result-big { font-family: 'Lato', sans-serif; font-size: 2.2rem; font-weight: 900; color: #1e73be; }
.result-label { font-size: .78rem; color: #666; text-transform: uppercase; letter-spacing: .06em; }
.result-grid { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 10px; }
.result-item { text-align: center; }

/* ── SCALE TABS ─────────────────────────────────────────────── */
.scale-tabs { display: flex; border: 1px solid #ccc; border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.scale-tab { flex: 1; padding: 8px; background: #f7f7f7; border: none; border-right: 1px solid #ccc; font-family: 'Open Sans', sans-serif; font-size: .8rem; font-weight: 700; color: #555; cursor: pointer; text-align: center; text-transform: uppercase; letter-spacing: .04em; transition: all .15s; }
.scale-tab:last-child { border-right: none; }
.scale-tab.active { background: #1e73be; color: #fff; }
.scale-tab:hover:not(.active) { background: #e0e0e0; }

/* ── TABLE ──────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: .84rem; margin-top: 12px; }
.data-table th { background: #1e73be; color: #fff; padding: 9px 12px; text-align: left; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.data-table td { padding: 8px 12px; border-bottom: 1px solid #eee; color: #444; }
.data-table tr:nth-child(even) td { background: #f9f9f9; }
.data-table tr:hover td { background: #e8f3fc; }

/* ── SUBJECT ROWS ───────────────────────────────────────────── */
.subject-row { display: grid; grid-template-columns: 2fr 1fr 1fr 36px; gap: 8px; margin-bottom: 8px; align-items: center; }
.subject-row-head { display: grid; grid-template-columns: 2fr 1fr 1fr 36px; gap: 8px; margin-bottom: 6px; }
.subject-row-head span { font-size: .72rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .05em; }
.btn-del { width: 32px; height: 32px; background: #dc3232; border: none; border-radius: 3px; color: #fff; font-size: .95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-del:hover { background: #b52828; }

/* ── SIDEBAR WIDGETS ────────────────────────────────────────── */
.widget { background: #fff; border: 1px solid #ddd; border-top: 4px solid #ffb900; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 22px; border-radius: 2px; }
.widget-title { background: #f7f7f7; border-bottom: 1px solid #ddd; padding: 10px 16px; font-family: 'Lato', sans-serif; font-size: .88rem; font-weight: 700; color: #333; text-transform: uppercase; letter-spacing: .04em; }
.widget-body { padding: 14px 16px; }
.widget-links { list-style: none; padding: 0; }
.widget-links li { border-bottom: 1px solid #f0f0f0; padding: 7px 0; }
.widget-links li:last-child { border-bottom: none; }
.widget-links a { color: #1e73be; text-decoration: none; font-size: .87rem; font-weight: 600; }
.widget-links a:hover { color: #145c99; text-decoration: underline; }
.widget-links a::before { content: "» "; color: #ffb900; }

/* ── AD SLOTS ───────────────────────────────────────────────── */
.ad-slot { background: #fff; border: 1px dashed #ddd; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 22px; border-radius: 2px; overflow: hidden; }
.ad-banner { height: 90px; }
.ad-rect   { height: 250px; width: 100%; }
.ad-slot ins { display: block !important; }

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb { font-size: .78rem; color: #888; margin-bottom: 16px; }
.breadcrumb a { color: #1e73be; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; color: #bbb; }

/* ── PAGE HEADING ───────────────────────────────────────────── */
.page-title { font-family: 'Lato', sans-serif; font-size: 1.55rem; font-weight: 900; color: #222; margin-bottom: 6px; line-height: 1.3; }
.page-subtitle { font-size: .88rem; color: #777; margin-bottom: 18px; }

/* ── CONTENT PROSE ──────────────────────────────────────────── */
.prose h2 { font-family: 'Lato', sans-serif; font-size: 1.25rem; font-weight: 700; color: #222; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #e8e8e8; }
.prose h3 { font-family: 'Lato', sans-serif; font-size: 1.05rem; font-weight: 700; color: #1e73be; margin: 16px 0 8px; }
.prose p { color: #555; margin-bottom: 12px; line-height: 1.75; font-size: .9rem; }
.prose ul, .prose ol { color: #555; padding-left: 22px; margin-bottom: 12px; }
.prose li { margin-bottom: 6px; font-size: .9rem; line-height: 1.7; }
.prose strong { color: #333; }
.prose a { color: #1e73be; }

/* ── INFO BOXES ─────────────────────────────────────────────── */
.info-box { padding: 12px 16px; border-radius: 2px; margin: 14px 0; font-size: .87rem; }
.info-box.blue   { background: #e8f3fc; border-left: 4px solid #1e73be; color: #1a4a7a; }
.info-box.green  { background: #edf7ed; border-left: 4px solid #46b450; color: #2a5a2c; }
.info-box.yellow { background: #fffae0; border-left: 4px solid #ffb900; color: #6b5000; }

/* ── FEATURES GRID ──────────────────────────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 16px 0; }
.feature-card { background: #f7f7f7; border: 1px solid #e0e0e0; border-radius: 2px; padding: 16px; text-align: center; transition: box-shadow .15s; }
.feature-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.feature-icon { font-size: 2rem; margin-bottom: 8px; }
.feature-card h4 { font-size: .88rem; font-weight: 700; color: #222; margin-bottom: 5px; }
.feature-card p { font-size: .8rem; color: #777; margin: 0; }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-item { border-bottom: 1px solid #e8e8e8; }
.faq-q { padding: 13px 0; cursor: pointer; font-weight: 700; font-size: .9rem; color: #333; display: flex; justify-content: space-between; align-items: center; gap: 10px; user-select: none; }
.faq-q .tog { color: #1e73be; font-weight: 900; font-size: 1.1rem; flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-q .tog { transform: rotate(45deg); }
.faq-a { font-size: .87rem; color: #555; line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height .28s ease, padding .28s; }
.faq-item.open .faq-a { max-height: 400px; padding-bottom: 12px; }

/* ── PROGRESS BAR ───────────────────────────────────────────── */
.progress-wrap { margin-top: 12px; }
.progress-label { display: flex; justify-content: space-between; font-size: .75rem; color: #888; margin-bottom: 5px; }
.progress-track { height: 10px; background: #e0e0e0; border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: #1e73be; border-radius: 99px; transition: width .7s ease; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer { background: #222; color: #bbb; margin-top: 32px; }
.footer-top { max-width: 1100px; margin: 0 auto; padding: 28px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.footer-col h4 { font-family: 'Lato', sans-serif; font-size: .88rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid #ffb900; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 7px; }
.footer-col ul a { color: #aaa; text-decoration: none; font-size: .83rem; }
.footer-col ul a:hover { color: #fff; }
.footer-col p { font-size: .83rem; line-height: 1.65; color: #999; }
.footer-bottom { background: #111; text-align: center; padding: 12px 16px; font-size: .78rem; color: #777; }
.footer-bottom a { color: #999; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ── GRADE CALC 5-COL GRID ──────────────────────────────────── */
.grade-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 36px; gap: 8px; margin-bottom: 8px; align-items: center; }
.grade-row-head { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 36px; gap: 8px; margin-bottom: 6px; }
.grade-row-head span { font-size: .72rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .05em; }

/* ── BLOG CARDS ─────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.blog-card { display: flex; background: #fff; border: 1px solid #ddd; border-top: 4px solid #1e73be; border-radius: 2px; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .15s; overflow: hidden; }
.blog-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-2px); }
.blog-card-img { flex-shrink: 0; width: 100px; display: flex; align-items: center; justify-content: center; background: #f7f7f7; font-size: 2.5rem; border-right: 1px solid #eee; }
.blog-card-body { padding: 18px; flex: 1; }
.blog-card-body h2 { font-family: 'Lato', sans-serif; font-size: 1.1rem; font-weight: 700; color: #222; margin: 0 0 6px; line-height: 1.4; }
.blog-card-meta { font-size: .75rem; color: #999; margin-bottom: 8px; }
.blog-card-body p { font-size: .85rem; color: #555; line-height: 1.65; margin: 0 0 8px; }
.blog-card-link { font-size: .82rem; font-weight: 700; color: #1e73be; }
.blog-card:hover .blog-card-link { color: #145c99; text-decoration: underline; }
@media (max-width: 600px) { .blog-card { flex-direction: column; } .blog-card-img { width: 100%; height: 80px; border-right: none; border-bottom: 1px solid #eee; } }

/* ── BLOG ARTICLE ──────────────────────────────────────────── */
.blog-article-meta { font-size: .8rem; color: #888; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #eee; }

/* ── PRINT STYLES ───────────────────────────────────────────── */
@media print {
  .main-nav, .sidebar, .ad-slot, .topbar, .btn-row { display: none !important; }
  .site-body { display: block; }
  .box { border: 1px solid #ccc; box-shadow: none; }
}