/*
Theme Name: Dewdrop TL
Theme URI: https://dewdroptl.in
Description: Child theme for Fictioneer, styled after the Dewdrop logo (dew blue, clover green, bunny cream).
Author: Dewdrop TL
Template: fictioneer
Version: 1.0.0
License: GNU General Public License v3.0 or later
Text Domain: dewdrop
*/

/* ---------- Palette (sampled from the logo) ---------- */
:root {
  --dd-navy: #0f2a66;
  --dd-navy-deep: #091a42;
  --dd-dew: #6ec3f7;
  --dd-dew-light: #a9defc;
  --dd-sky: #2f93e3;
  --dd-clover: #4f9a3a;
  --dd-clover-dark: #2f6a27;
  --dd-clover-light: #8fcb74;
  --dd-cream: #fdebd8;
  --dd-blush: #f4909f;
  --dd-brown: #6b3f30;

  --ff-heading: "Fredoka", "Baloo 2", "Nunito", var(--ff-base);
  --ff-site-title: var(--ff-heading);
  --layout-border-radius-large: 14px;
  --layout-border-radius-small: 8px;
  --theme-color-base: 15 42 102;
  --green-400: #8fcb74;
  --green-500: #4f9a3a;
  --green-600: #2f6a27;
  --badge-author-background: var(--dd-clover);
  --badge-supporter-background: var(--dd-blush);
}

/* ---------- Dark mode: deep dew-navy ---------- */
:root[data-mode=dark] {
  --saturation-offset: .9;
  --lightness-offset: .02;
  --hue-offset: -4deg;
  --primary-400: #a9defc;
  --primary-500: #6ec3f7;
  --primary-600: #3fa3ec;
  --button-primary-background: #1c4a94;
  --button-primary-background-hover: #2766c0;
  --button-primary-color: #eaf6ff;
  --button-primary-color-hover: #fff;
  --tab-background-active: #2f93e3;
  --pagination-background-current: #2f93e3;
  --button-background-active: #2f93e3;
  --toggle-background-checked: #2f93e3;
  --toggle-border-checked: #2f93e3;
  --spoiler-background: #6ec3f7;
  --read-ribbon-background: var(--dd-dew);
  --bookmark-line: var(--dd-dew);
  --text-selection-background: #6ec3f755;
  --site-title-heading-color: #eaf6ff;
  --layout-lineart-color: #1e3f80;
}

/* ---------- Light mode: morning dew ---------- */
:root[data-mode=light] {
  --saturation-offset: 1.6;
  --hue-offset: -8deg;
  --primary-400: #3fa3ec;
  --primary-500: #1f7fd6;
  --primary-600: #0f2a66;
  --button-primary-background: #2f93e3;
  --button-primary-background-hover: #1f7fd6;
  --button-primary-color: #fff;
  --button-primary-color-hover: #fff;
  --tab-background-active: #2f93e3;
  --tab-color-active: #fff;
  --pagination-background-current: #2f93e3;
  --pagination-color-current: #fff;
  --button-background-active: #2f93e3;
  --button-color-active: #fff;
  --toggle-background-checked: #2f93e3;
  --toggle-border-checked: #2f93e3;
  --toggle-color-checked: #fff;
  --read-ribbon-background: var(--dd-sky);
  --read-ribbon-color: #fff;
  --bookmark-line: var(--dd-sky);
  --site-title-heading-color: var(--dd-navy);
  --site-title-text-shadow: none;
  --layout-lineart-color: #b9dcf3;
  --page-bg-color: #f6fbff;
}

/* ---------- Logo ---------- */
.header .custom-logo {
  height: var(--header-logo-height, 210px);
  filter: drop-shadow(0 2px 3px rgb(15 42 102 / 25%));
}
:root[data-mode=dark] .header .custom-logo {
  filter: drop-shadow(0 0 2px #fffc) drop-shadow(0 0 8px #6ec3f777);
}

/* ---------- Dew details ---------- */
:root :where(h1, h2, h3, h4, h5, h6),
.card__title, .story__identity h1, .chapter__title, .post__title {
  letter-spacing: .01em;
}
.card, .main__background, .modal__wrapper, .dialog-modal { border-radius: var(--layout-border-radius-large); }
.card__body { border-radius: var(--layout-border-radius-large); }
.button, .pagination .page-numbers, .tabs__item { border-radius: 999px; }
.tabs__item:first-of-type { border-radius: 999px 0 0 999px; }
.tabs__item:last-of-type { border-radius: 0 999px 999px 0; }
.card__label { background: var(--dd-clover); color: #fff; border-radius: 999px; }
.tag-pill:not(._inline) { border-radius: 999px; padding-left: .6rem; padding-right: .6rem; }
.main-navigation__background {
  background: linear-gradient(90deg, var(--dd-navy-deep), var(--dd-navy) 55%, #1b4f9e);
}
:root[data-mode=light] .main-navigation__background {
  background: linear-gradient(90deg, #cfeafc, #eaf6ff 55%, #cfeafc);
}
:root[data-mode=light] .main-navigation { --navigation-color: #0f2a66; --navigation-color-hover: #1f7fd6; }
.progress__bar { background: linear-gradient(90deg, var(--dd-dew), var(--dd-clover-light)); }
hr.wp-block-separator.is-style-dots { color: var(--dd-clover); }
.footer a:hover { color: var(--dd-dew); }


/* =====================================================================
   DEWDROP SIGNATURE LAYER
   Bubbly "water-sticker" look: glossy buttons, navy outlines, clover
   ornaments, a ribbon wave, and a drip from the clover.
   ===================================================================== */

:root {
  --dd-outline: 2px solid var(--dd-navy);
  --dd-gloss: linear-gradient(180deg, rgb(255 255 255 / 55%) 0%, rgb(255 255 255 / 12%) 46%, rgb(255 255 255 / 0%) 47%, rgb(15 42 102 / 12%) 100%);
  --dd-clover-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='translate(12 12)' fill='%234f9a3a' stroke='%232f6a27' stroke-width='.8' stroke-linejoin='round'%3E%3Cpath id='h' d='M0 -1 C-5 -4 -6.5 -9 -3.4 -10.6 C-1.4 -11.5 0 -9.8 0 -8.4 C0 -9.8 1.4 -11.5 3.4 -10.6 C6.5 -9 5 -4 0 -1Z'/%3E%3Cpath d='M0 -1 C-5 -4 -6.5 -9 -3.4 -10.6 C-1.4 -11.5 0 -9.8 0 -8.4 C0 -9.8 1.4 -11.5 3.4 -10.6 C6.5 -9 5 -4 0 -1Z' transform='rotate(90)'/%3E%3Cpath d='M0 -1 C-5 -4 -6.5 -9 -3.4 -10.6 C-1.4 -11.5 0 -9.8 0 -8.4 C0 -9.8 1.4 -11.5 3.4 -10.6 C6.5 -9 5 -4 0 -1Z' transform='rotate(180)'/%3E%3Cpath d='M0 -1 C-5 -4 -6.5 -9 -3.4 -10.6 C-1.4 -11.5 0 -9.8 0 -8.4 C0 -9.8 1.4 -11.5 3.4 -10.6 C6.5 -9 5 -4 0 -1Z' transform='rotate(270)'/%3E%3C/g%3E%3C/svg%3E");
  --dd-drop-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C12 2 5 10 5 15a7 7 0 0 0 14 0C19 10 12 2 12 2Z' fill='%236ec3f7' stroke='%230f2a66' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cellipse cx='9.5' cy='14' rx='1.6' ry='2.8' fill='white' opacity='.7' transform='rotate(18 9.5 14)'/%3E%3C/svg%3E");
  --dd-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2340a0e0'/%3E%3Cstop offset='.5' stop-color='%2390d0f8'/%3E%3Cstop offset='1' stop-color='%232f93e3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 22 C150 4 300 38 450 22 S750 4 900 22 S1100 36 1200 18 L1200 26 C1100 42 950 30 900 30 S750 12 450 30 S150 12 0 30Z' fill='url(%23g)' stroke='%230f2a66' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* -- Glossy bubble buttons (like the logo letters) -- */
.button:not(._secondary):not([disabled]),
.pagination .page-numbers:not(.current),
.wp-block-button__link,
button[type=submit]:not(._inline) {
  background-image: var(--dd-gloss);
  border: var(--dd-outline) !important;
  box-shadow: 0 2px 0 rgb(15 42 102 / 55%), inset 0 1px 0 rgb(255 255 255 / 50%);
  transition: transform .15s, box-shadow .15s, background-color .2s;
}
.button:not(._secondary):not([disabled]):hover,
.pagination .page-numbers:not(.current):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgb(15 42 102 / 55%), inset 0 1px 0 rgb(255 255 255 / 60%);
}
.button:not(._secondary):active { transform: translateY(1px); box-shadow: 0 0 0 rgb(0 0 0 / 0%); }
.button._secondary { border-width: 2px; border-color: var(--dd-sky); }
:root[data-mode=dark] .button:not(._secondary):not([disabled]),
:root[data-mode=dark] .pagination .page-numbers:not(.current),
:root[data-mode=dark] button[type=submit]:not(._inline) {
  border-color: #6ec3f7 !important;
  box-shadow: 0 2px 0 #091a42, inset 0 1px 0 rgb(255 255 255 / 30%);
}

/* -- Cards as stickers with a dew bead in the corner -- */
.card { transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px) rotate(-.2deg); }
.card__body { border: 2px solid var(--dd-navy); position: relative; }
:root[data-mode=dark] .card__body { border-color: #2a62b8; }
.card__body::after {
  content: ""; position: absolute; top: 7px; right: 8px; width: 11px; height: 14px;
  background: var(--dd-drop-svg) center / contain no-repeat; opacity: .55; pointer-events: none;
  transition: transform .3s, opacity .3s;
}
.card:hover .card__body::after { transform: translateY(5px) scale(1.15); opacity: 1; }
.card__info-toggle, .card__delete { z-index: 101; }

/* -- Page frame -- */
.main__background { border: 2px solid var(--dd-navy); }
:root[data-mode=dark] .main__background { border-color: #1e4a96; }

/* -- Ribbon wave under the header and above the footer -- */
.header::after, .footer::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: min(100%, 1400px); height: 34px; pointer-events: none;
  background: var(--dd-wave) center / 100% 100% no-repeat;
}
.header::after { bottom: -6px; }
.footer::before { top: -22px; }
.header-style-overlay .header::after { display: none; }

/* -- Clover ornaments -- */
.content-section h2:not(.no-theme-style)::before,
.singular__header h1::before, .archive__heading::before {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .4em;
  background: var(--dd-clover-svg) center / contain no-repeat; vertical-align: -.12em;
}
.content-section ul:not([class]) { list-style: none; padding-left: 1.6em; }
.content-section ul:not([class]) > li { position: relative; }
.content-section ul:not([class]) > li::before {
  content: ""; position: absolute; left: -1.5em; top: .35em; width: 1em; height: 1em;
  background: var(--dd-clover-svg) center / contain no-repeat;
}
hr:not(.wp-block-separator), .wp-block-separator.is-style-default, .wp-block-separator.is-style-wide {
  border: none; background: none; height: 22px; overflow: visible; position: relative; color: transparent;
}
hr:not(.wp-block-separator)::before, .wp-block-separator.is-style-default::before, .wp-block-separator.is-style-wide::before {
  content: ""; position: absolute; inset: 0;
  background:
    var(--dd-clover-svg) center / 22px 22px no-repeat,
    linear-gradient(90deg, transparent, var(--dd-dew) 20%, var(--dd-dew) 42%, transparent 42%, transparent 58%, var(--dd-dew) 58%, var(--dd-dew) 80%, transparent) center / 100% 3px no-repeat;
}

/* -- Tags: dew-drop pills with a sparkle on hover -- */
.tag-pill:not(._inline) { position: relative; border: 1.5px solid transparent; }
.tag-pill:not(._inline):hover { border-color: var(--dd-dew); }
.tag-pill:not(._inline)::after {
  content: "✦"; position: absolute; top: -6px; right: -3px; font-size: 10px; color: var(--dd-dew-light);
  opacity: 0; transform: scale(.2) rotate(-40deg); transition: all .25s; pointer-events: none;
}
.tag-pill:not(._inline):hover::after { opacity: 1; transform: scale(1) rotate(0); }

/* -- Navigation: ✦ marker on hover, droplet on current page -- */
.main-navigation__list > .menu-item > a { transition: letter-spacing .2s, color .2s; }
.main-navigation__list > .menu-item > a:hover { letter-spacing: .04em; }
.main-navigation__list > .current-menu-item > a::before {
  content: ""; width: .8em; height: 1em; margin-right: .45em;
  background: var(--dd-drop-svg) center / contain no-repeat; display: inline-block;
}

/* -- Reading ribbon & bookmark colour -- */
.ribbon { border-radius: 0; box-shadow: 0 1px 0 var(--dd-navy); }

/* -- Scrollbar + selection -- */
html { scrollbar-color: var(--dd-sky) transparent; }
::selection { background: #6ec3f77a; color: inherit; }

/* -- The drip: a dewdrop slides off the clover in the header logo -- */
.dewdrop-logo-link { position: relative; }
.dewdrop-logo-link::after {
  content: ""; position: absolute; left: 66.6%; top: 43%; width: 14px; height: 18px;
  background: var(--dd-drop-svg) center / contain no-repeat; opacity: 0;
  animation: dewdrop-drip 6s ease-in infinite; pointer-events: none;
}
@keyframes dewdrop-drip {
  0%, 62% { opacity: 0; transform: translateY(0) scale(.4); }
  70% { opacity: 1; transform: translateY(2px) scale(1); }
  92% { opacity: .9; transform: translateY(48px) scale(1); }
  100% { opacity: 0; transform: translateY(58px) scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .dewdrop-logo-link::after { animation: none; }
  .card, .button, .card__body::after { transition: none; }
  .card:hover { transform: none; }
}

/* -- Footer -- */
.footer { padding-top: 12px; }
.footer__copyright::after {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .4em; vertical-align: -.15em;
  background: var(--dd-clover-svg) center / contain no-repeat;
}

/* -- Print: keep it clean -- */
@media print { .header::after, .footer::before, .card__body::after { display: none !important; } }