/* Stretchy Elephant Coloring — kid-friendly, big tap targets, colorful rainbow buttons (green retired Nov 8, 2026 per Desarae) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Nunito", "PT Sans", Arial, sans-serif;
  background: #f4faf4;
  color: #21381f;
  font-size: 20px;
  line-height: 1.45;
}
h1, h2, h3, h4, h5 { font-family: "Baloo 2", cursive; }
a { color: #1e8a49; }

/* ---------- header (ported from stretchyelephant.com theme v104b) ---------- */
.se-siteheader { background: #fdf6e9; display: flex; flex-direction: column; }
.se-topbar {
  order: 1; display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; padding: 4px 3%;
}
.se-brand { display: inline-flex; align-items: center; text-decoration: none; }
.se-brand img { height: 44px; max-height: 44px; width: auto; display: block; margin: 0 10px 0 0; }
.se-brand span { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 30px; line-height: 1.1; color: #0d2b26; white-space: nowrap; }
.se-topactions { display: flex; align-items: flex-start; gap: 4px; }
.se-iconbtn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: transparent; border: 0; padding: 2px 6px; margin: 0;
  font: inherit; color: #0d2b26; text-decoration: none; cursor: pointer;
}
.se-iconbtn i { font-size: 32px; color: #0d2b26; line-height: 1; }
.se-iconlabel {
  font-family: "Nunito", sans-serif; font-weight: 800; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: #22384a; line-height: 1;
}
.se-banner {
  order: 2; display: block; width: 100%;
  background: #fdf6e9;
}
.se-banner-img { display: block; width: 100%; height: auto; }
@media only screen and (max-width: 480px) {
  .se-brand span { font-size: 23px; }
  .se-brand img { height: 38px; max-height: 38px; }
}

/* ---------- MORE menu overlay (ported from theme #nav-mobile) ---------- */
.side-nav {
  list-style: none; margin: 0; padding: 0 0 30px;
  position: fixed; top: 0; right: 0; left: 0; bottom: 0;
  width: 100%; height: 100%; overflow-y: auto;
  background: #e0e0f8; border: 0; z-index: 300;
}
.side-nav[hidden] { display: none; }
.side-nav li { display: block; width: 100%; }
.side-nav li > a {
  display: block; font-size: 34px; font-weight: 700; font-family: "Baloo 2", cursive;
  color: #2b3168; padding: 15px 20px; line-height: 1.35;
  text-decoration: none; background: transparent; text-align: center;
}
.side-nav .closemenu {
  background: #41528a; color: #fff; font-family: "Nunito", sans-serif;
  font-size: 22px; font-weight: 800; padding: 16px 18px; margin: 0 0 6px;
  cursor: pointer; text-transform: uppercase; text-align: right;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.side-nav .closemenu i { font-size: 34px; line-height: 1; color: #fff; }
.side-nav li.se-menulogo { text-align: center; padding: 14px 0 0; }
.side-nav li.se-menulogo a { display: inline-block; padding: 0; }
.side-nav li.se-menulogo img { height: 104px; width: auto; }
.side-nav .se-soc-row { display: block; text-align: center; padding: 0 15px; }
.side-nav .se-soc {
  background: transparent; border: 2px solid #2b3168; border-radius: 50%;
  color: #2b3168; width: 46px; height: 46px; box-shadow: none; margin: 4px 3px;
}
.side-nav .se-soc i { font-size: 22px; color: #2b3168; }
.se-menusearch { display: flex; gap: 12px; width: 100%; box-sizing: border-box; margin: 0; padding: 18px 28px 26px; }
.se-menusearch input[type="text"] {
  flex: 1 1 auto; min-width: 0; height: 64px; font-size: 22px; padding: 16px 20px;
  border: 2px solid #41528a; border-radius: 10px; background: #ffffff; color: #0d2b26;
  box-sizing: border-box; outline: none; font-family: "Nunito", sans-serif;
}
.se-menusearch input[type="text"]::placeholder { color: #3d3d3d; opacity: 1; }
.se-menusearch input[type="submit"] {
  flex: 0 0 auto; height: 64px; font-size: 20px; font-weight: 800; padding: 16px 30px;
  border: 0; border-radius: 10px; background: #41528a; color: #ffffff;
  cursor: pointer; box-sizing: border-box; font-family: "Nunito", sans-serif;
}

/* ---------- gallery ---------- */
main { max-width: 1100px; margin: 0 auto; padding: 18px 14px 30px; }
.hero { text-align: center; padding: 10px 8px 4px; }
.hero h1 { font-size: 40px; margin: 6px 0 2px; color: #0a2248; }
.tagline { font-size: 23px; font-weight: 700; color: #f35a90; margin: 2px 0; }
.hero-sub { max-width: 640px; margin: 8px auto; font-size: 20px; }

.chips {
  display: flex; flex-wrap: nowrap; gap: 8px; justify-content: flex-start;
  margin: 16px 0 6px; overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 10px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #f5821f #fdf6e9;
}
.chips::-webkit-scrollbar { height: 8px; }
.chips::-webkit-scrollbar-thumb { background: #f5821f; border-radius: 99px; }
.chips::-webkit-scrollbar-track { background: #fdf6e9; border-radius: 99px; }
.chip {
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 18px; font-weight: 800; cursor: pointer;
  border: 3px solid #5b2a86; background: #fff; color: #0a2248;
  border-radius: 999px; padding: 6px 18px 6px 8px; min-height: 54px;
}
.chip-icon {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; display: block; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.85); background: #fdf6e9;
}
.chip-all { border-color: #e33e2b; color: #b02a1e; }
.chip-bible-stories { border-color: #f0a500; color: #8a5a00; }
.chip-yoga { border-color: #35a7e8; color: #14608f; }
.chip-princess-bean { border-color: #f35a90; color: #b02a5e; }
.chip-abcs { border-color: #7a4fd0; color: #4c2a9e; }
.chip-family { border-color: #2aa198; color: #14707a; }
.chip-abcs { border-color: #e07b39; color: #9a5410; }
.chip-abcs.active { background: linear-gradient(180deg, #ffb340, #f5821f); color: #fff; }
.chip-stretchy { border-color: #5b8c2a; color: #3f6219; }
.chip-family.active { background: linear-gradient(180deg, #4fd8c8, #149a8c); }
.chip-stretchy.active { background: linear-gradient(180deg, #a8d94e, #6aa519); }
.chip.active { color: #fff; box-shadow: 0 3px 0 rgba(10,34,72,.35); }
.chip-all.active { background: linear-gradient(180deg, #ff7a59, #e33e2b); }
.chip-bible-stories.active { background: linear-gradient(180deg, #ffcf4d, #f0a500); color: #4a3200; }
.chip-yoga.active { background: linear-gradient(180deg, #6ec3f5, #1f6fd1); }
.chip-princess-bean.active { background: linear-gradient(180deg, #ff9ec4, #e7549a); }
.chip-abcs.active { background: linear-gradient(180deg, #a678f0, #6d3fd4); }

.gallery-meta { text-align: center; color: #5b4a68; font-size: 17px; margin: 6px 0 4px; }

/* one horizontal scrolling row of pages per book */
.book-row { margin: 20px 0 6px; scroll-margin-top: 12px; }
.row-title { font-size: 29px; color: #0a2248; margin: 0 0 8px; }
.row-scroll {
  display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 12px; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: #f5821f #fdf6e9;
}
.row-scroll::-webkit-scrollbar { height: 8px; }
.row-scroll::-webkit-scrollbar-thumb { background: #f5821f; border-radius: 99px; }
.row-scroll::-webkit-scrollbar-track { background: #e9f5ec; border-radius: 99px; }
.card {
  flex: 0 0 168px; scroll-snap-align: start;
  background: #e9f5ec; border-radius: 18px; padding: 10px; cursor: pointer;
  border: 3px solid transparent; text-align: center;
}
.card:hover, .card:focus { border-color: #ecb93c; outline: none; }
.card img { width: 100%; height: auto; border-radius: 10px; background: #fff; display: block; }
.card .card-label { font-weight: 700; font-size: 16.5px; margin-top: 8px; color: #0a2248; line-height: 1.25; }
.card .card-sub { font-size: 15px; color: #5b4a68; }

/* ---------- buttons (colorful filled pills — never a blue text link, never underlined) ---------- */
.btn {
  font: inherit; font-weight: 800; cursor: pointer; border: none; text-decoration: none;
  border-radius: 999px; padding: 10px 20px; min-height: 52px; font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-action { color: #fff; }
#backBtn { background: linear-gradient(180deg, #8a63d2, #5b2a86); box-shadow: 0 3px 0 #3d1c5c; }
#printBtn { background: linear-gradient(180deg, #6ec3f5, #1f6fd1); box-shadow: 0 3px 0 #14508f; }
#saveBtn { background: linear-gradient(180deg, #ff9ec4, #e7549a); box-shadow: 0 3px 0 #b02a5e; }
#clearBtn { background: linear-gradient(180deg, #ffb35c, #f5821f); box-shadow: 0 3px 0 #b35c0d; }
.btn-action:hover { filter: brightness(1.07); }
.btn-action:active { transform: translateY(2px); box-shadow: none; }
.btn-tool { background: #fff4e0; color: #8a5a00; border: 3px solid #f0a500; box-shadow: none; padding: 8px 14px; font-size: 18px; }
.btn-tool.active { background: linear-gradient(180deg, #ffcf4d, #f0a500); color: #4a3200; }
.btn-size { background: #fff; color: #5b2a86; border: 3px solid #8a63d2; padding: 6px 16px; min-height: 48px; }
.btn-size.active { background: linear-gradient(180deg, #a678f0, #6d3fd4); color: #fff; }

/* ---------- coloring view ---------- */
.color-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.color-title { font-size: 26px; color: #0a2248; margin: 0; }

.color-layout { display: flex; flex-direction: column; gap: 14px; }
.stage-wrap {
  background: #fff; border-radius: 18px; padding: 10px; border: 3px solid #e9f5ec;
  display: flex; align-items: center; justify-content: center;
}
#stage { max-width: 100%; height: auto; border-radius: 8px; touch-action: none; cursor: crosshair; background:#fff; }

.palette-panel {
  background: #e9f5ec; border-radius: 18px; padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
/* brush picker: picture of each tool with its name underneath */
.tool-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-pick {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px;
  flex: 1 1 88px; max-width: 116px; min-height: 108px;
  background: #fff; border: 3px solid #35a7e8; border-radius: 16px;
  padding: 8px 4px 7px; cursor: pointer; font: inherit; color: #0a2248;
}
.tool-pick svg { width: 56px; height: 56px; display: block; }
.tool-pick span { font-size: 14px; font-weight: 800; line-height: 1.15; text-align: center; }
.tool-pick.active {
  background: linear-gradient(180deg, #ffcf4d, #f5821f); color: #fff;
  box-shadow: 0 3px 0 #b35c0d;
}
.tool-row, .size-row, .action-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.size-label { font-weight: 700; }
.crayons { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; padding-top: 14px; padding-bottom: 10px; }
.crayon {
  height: 52px; border-radius: 12px 12px 6px 6px; cursor: pointer; border: 3px solid rgba(0,0,0,.18);
  position: relative; padding: 0;
}
.crayon::before, .crayon::after { content: none; }
.crayon { overflow: visible; }
.sw-deco { position: absolute; pointer-events: none; }
.sw-tip { top: -14px; left: 50%; transform: translateX(-50%); width: 24px; height: 15px; z-index: 3; }
.sw-band { left: 0; right: 0; height: 5px; filter: brightness(.62) saturate(1.15); opacity: .85; z-index: 1; }
.sw-oval { left: 50%; top: 48%; transform: translate(-50%, -50%); width: 48%; height: 25%; border-radius: 50%; background: rgba(0,0,0,.34); box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); z-index: 1; }
.crayon.skin-marker { background: #fff; }
.sw-cap { top: -11px; left: 50%; transform: translateX(-50%); width: 58%; height: 13px; border-radius: 4px 4px 2px 2px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.35), 0 0 0 1.6px rgba(0,0,0,.35); z-index: 3; }
.sw-cap-clip { position: absolute; top: 2px; bottom: 2px; left: 50%; transform: translateX(-50%); width: 26%; border-radius: 3px; box-shadow: inset 0 0 0 1.6px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.3); }
.sw-waves { left: 6%; right: 6%; top: 24%; width: 88%; height: 46%; z-index: 1; }
.sw-nib { bottom: -9px; left: 50%; transform: translateX(-50%); width: 24px; height: 11px; z-index: 3; }
.sw-sparkles { inset: 0; z-index: 2; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95) 0 2px, transparent 3.5px), radial-gradient(circle at 66% 56%, rgba(255,255,255,.85) 0 1.6px, transparent 3px), radial-gradient(circle at 44% 76%, rgba(255,255,255,.9) 0 1.3px, transparent 2.6px), radial-gradient(circle at 78% 22%, rgba(255,255,255,.75) 0 1.2px, transparent 2.4px); }
.swatch-mode-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.crayon.active { border-color: #0a2248; box-shadow: 0 0 0 3px #ecb93c; }
.tip { font-size: 16px; margin: 0; color: #33502f; }

/* landscape / desktop: palette on the RIGHT */
@media (min-aspect-ratio: 1/1) and (min-width: 760px) {
  .color-layout { flex-direction: row; align-items: flex-start; }
  .stage-wrap { flex: 1 1 auto; }
  #stage { max-height: calc(100vh - 240px); width: auto; max-width: 100%; }
  .palette-panel { flex: 0 0 264px; position: sticky; top: 12px; }
  .crayons { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- footer (ported from stretchyelephant.com theme v104b) ---------- */
.se-footer {
  /* The theme footer itself is transparent; on the site it sits over the body
     pattern below, so the footer carries that same pattern backdrop here. */
  background: #F0F1F3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCOj9I2VekPd8ZeqVV1v72OvLtYcLtcBrMZmqRSZ7k3dlleHsBda-VFOwqb9jyHh5b1NQuAcfjrai1Ur57zbjMlpc9tKZ76J_Hw5j8v-7IsYOo2YcBSJ2z7UG86_OcRmVpOGA9juEjR0/s1600/pattern-stretchy.png');
  margin-top: 10px; padding: 6px 14px 26px;
}
.se-footer .se-container { max-width: 1100px; margin: 0 auto; }
.se-footer .center { text-align: center; }
.se-footer .light { font-weight: 400; }
.se-soc-center { text-align: center; margin: 6px 0 20px; }
.se-soc-row { display: inline-block; }
.se-soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 18px; margin: 0 3px;
  background: linear-gradient(160deg, #79c94e, #1e8a49);
  color: #fff !important; text-decoration: none !important; vertical-align: middle;
  box-shadow: 0 3px 8px rgba(20,60,30,.35);
}
.se-soc i { color: #fff !important; font-size: 26px; line-height: 1; }
.se-soc:hover { background: #4c8a50; }
.se-soc:focus { outline: 3px solid #b3001b; outline-offset: 2px; }
.se-reswrap { max-width: 760px; margin: 26px auto 4px; text-align: left; }
.se-resbtn {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: 0; border-bottom: 2px solid #3b7741; color: #1d9e4b;
  font-family: "Baloo 2", cursive; font-weight: 800; font-size: 24px;
  padding: 8px 2px; cursor: pointer;
}
.se-resplus { font-size: 28px; line-height: 1; transition: transform .25s; }
.se-resbtn[aria-expanded='true'] .se-resplus { transform: rotate(45deg); }
.se-reslist { display: none; list-style: none; margin: 10px 0 0; padding: 0; columns: 2; column-gap: 34px; }
.se-reslist.se-open { display: block; }
.se-reslist li { margin: 0 0 9px; break-inside: avoid; }
.se-reslist a { color: #fff !important; font-weight: 700; font-size: 17px; text-decoration: underline; }
@media (min-width: 821px) {
  .se-resbtn { pointer-events: none; cursor: default; }
  .se-resplus { display: none; }
  .se-reslist { display: block; columns: 3; }
}
.se-footlinks, .se-footlinks a { color: #fff !important; }
.se-footlinks a { font-weight: 700; text-decoration: underline; }
.se-acocredit { text-align: center; margin: 8px 0 2px; font-size: 16px; color: #41503f; }
.se-acocredit a { font-weight: 700; }
.se-copyline { text-align: center; margin: 2px 0 5px; font-size: 16px; color: #41503f; }
.aco-logo { vertical-align: -4px; margin-right: 4px; }

/* ---------- print: only the artwork ---------- */
#printArea { display: none; }
@media print {
  body * { visibility: hidden; }
  #printArea { display: block; position: absolute; inset: 0; visibility: visible; }
  #printArea img { visibility: visible; width: 100%; height: auto; }
  @page { margin: 10mm; }
}

/* ---------- Nov 8 final pass: painted heading, size dots, category grid ---------- */
.se-coloring-icon { display: block; }
.size-dot { display: inline-block; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.btn-size { gap: 8px; }
/* category view: selected row becomes a full grid so every page shows */
.row-scroll.row-grid { flex-wrap: wrap; overflow-x: visible; overflow-y: visible; scroll-snap-type: none; }
.book-row[hidden] { display: none; }
/* category header images: one fixed height for every category */
.cat-img { width: 100%; height: 150px; object-fit: cover; display: block; border-radius: 18px; margin: 0 0 8px; background: #fdf6e9; }
/* row titles: small round icon + label text (the nav look, at the row top too) */
.row-title { display: flex; align-items: center; gap: 10px; }
.row-icon {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; display: block; flex: 0 0 auto;
  border: 3px solid #5b2a86; background: #fdf6e9;
}
.row-title-bible-stories .row-icon { border-color: #f0a500; }
.row-title-yoga .row-icon { border-color: #35a7e8; }
.row-title-princess-bean .row-icon { border-color: #f35a90; }
.row-title-blank .row-icon { border-color: #e33e2b; }
.row-title-family .row-icon { border-color: #2aa198; }
.row-title-abcs .row-icon { border-color: #e07b39; }
.palette-label { font-weight: 800; margin: 14px 0 6px; color: #5b4a8a; font-size: 15px; }
.crayon.glitter { background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95) 0 2px, transparent 3.5px), radial-gradient(circle at 66% 56%, rgba(255,255,255,.85) 0 1.6px, transparent 3px), radial-gradient(circle at 44% 76%, rgba(255,255,255,.9) 0 1.3px, transparent 2.6px), radial-gradient(circle at 78% 22%, rgba(255,255,255,.75) 0 1.2px, transparent 2.4px); }
.row-title-stretchy .row-icon { border-color: #5b8c2a; }

/* --- Nov 8 fixes: tools on one scrollable line; footer socials one colorful row --- */
.tool-picker { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.tool-picker::-webkit-scrollbar { display: none; }
.tool-picker .tool-pick { flex: 0 0 auto; }
.tool-picker .btn-tool { flex: 0 0 auto; align-self: center; }
.se-footer .se-soc-row { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; }
.se-footer .se-soc { flex: 0 1 56px; margin: 0; }
.se-footer .se-soc:hover { filter: brightness(1.13); }
.se-footer .se-soc[href*="facebook.com"] { background: linear-gradient(160deg, #4e8ef7, #1663c7); }
.se-footer .se-soc[href*="instagram.com"] { background: linear-gradient(45deg, #f9a03f, #e1306c 55%, #833ab4); }
.se-footer .se-soc[href*="x.com"] { background: linear-gradient(160deg, #4a5568, #111827); }
.se-footer .se-soc[href*="tiktok.com"] { background: linear-gradient(160deg, #2dd4ee, #111827 48%, #fe2c55 135%); }
.se-footer .se-soc[href*="pinterest.com"] { background: linear-gradient(160deg, #f0524f, #bd081c); }
.se-footer .se-soc[href*="youtube.com"] { background: linear-gradient(160deg, #ff5a4e, #e62117); }
.se-footer .se-soc[href*="soundcloud.com"] { background: linear-gradient(160deg, #ffb03a, #ff5500); }
@media (max-width: 560px) {
  .se-footer .se-soc { width: 42px; height: 42px; border-radius: 13px; }
  .se-footer .se-soc i { font-size: 20px; }
}

.size-preview { display: inline-flex; align-items: center; justify-content: center; width: 38px; }
.btn-step { flex: 1 1 0; }

/* ---------- coloring view: edge-to-edge canvas on phones (Desarae, Nov 8) ---------- */
.se-topactions { align-items: center; }
#backBtn { min-height: 44px; padding: 8px 14px; font-size: 16px; margin-right: 4px; white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 759px) {
  body:has(#colorView:not([hidden])) main { padding: 0 0 18px; max-width: none; }
  body:has(#colorView:not([hidden])) .color-topbar { padding: 10px 12px 0; margin-bottom: 6px; }
  body:has(#colorView:not([hidden])) .stage-wrap { border: none; border-radius: 0; padding: 0; }
  body:has(#colorView:not([hidden])) #stage { border-radius: 0; width: 100%; }
  body:has(#colorView:not([hidden])) .palette-panel { border-radius: 0; margin-top: 10px; }
}