/**
 * @brief Chestnut Modern, a theme for Dotclear 2
 *
 * "Web 2.0 (Glossy)" visual skin. Loaded only when that color scheme is
 * selected (see ColorSchemes::usesGlossyStyle() and publicHeadContent()
 * in _public.php). Adds the rounded corners, gradients, glass-style
 * shine highlights, and drop shadows characteristic of the mid-2000s
 * "Web 2.0" look, layered on top of the scheme's own --cm-* color
 * variables so it stays in sync with them rather than hardcoding colors
 * that could drift out of sync.
 *
 * @package Dotclear
 * @subpackage Theme
 *
 * @copyright GPL-2.0 https://www.gnu.org/licenses/gpl-2.0.html
 */

/* Header band: glossy gradient + glass shine
-------------------------------------------------------- */
#top {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cm-header-bg) 70%, #fff 30%) 0%, var(--cm-header-bg) 55%, color-mix(in srgb, var(--cm-header-bg) 80%, #000 20%) 100%) !important;
  background-size: cover;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
#top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* Nav toggle button (mobile): glossy pill */
.chestnutmodern-nav-toggle {
  border-radius: 8px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.1)) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Top navigation bar: glossy rounded bar.
   No overflow:hidden here -- .submenu (menucat's hover flyout) is an
   absolutely-positioned descendant that needs to pop outside this box;
   clipping it here was hiding part of the menu on hover/tap. Rounding
   is applied directly to #menu/#nav>ul/#navsm (the element that actually
   paints the gradient) instead of relying on the parent to clip it. */
#container_menu,
#nav,
#navsm {
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
#menu,
#nav > ul,
#navsm {
  border-radius: 10px;
  background: linear-gradient(to bottom, #ffffff 0%, var(--cm-header-grad-1) 100%) !important;
}
#menu li a:hover,
#nav li a:hover,
#navsm a:hover {
  background: color-mix(in srgb, var(--cm-soft-bg) 70%, #fff 30%);
}
#menu li.category-current > a,
#nav li.current_page_item > a,
#nav li.top_parent > a {
  background: linear-gradient(to bottom, var(--cm-accent-alt), var(--cm-accent-strong)) !important;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Glossy button treatment, shared by every button-like element in the
   theme: rounded corners, vertical gradient fill, glass shine on the
   top half, soft drop shadow, and a brighten-on-hover effect. */
.read-it a,
.pagination .prev,
.pagination .next,
#navlinks .prev,
#navlinks .next,
#topsearch .submit,
#comment-form input[type="submit"],
#comment-form input[type="button"] {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cm-text) 75%, #fff 25%), var(--cm-text)) !important;
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--cm-text) 75%, #fff 25%), var(--cm-text)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.read-it a {
  display: inline-block;
}
.read-it a::before,
.pagination .prev::after,
.pagination .next::before,
#navlinks .prev::after,
#navlinks .next::before,
#topsearch .submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.read-it a:hover,
.pagination .prev:hover,
.pagination .next:hover,
#navlinks .prev:hover,
#navlinks .next:hover,
#topsearch .submit:hover,
#comment-form input[type="submit"]:hover {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cm-accent) 80%, #fff 20%), var(--cm-accent)) !important;
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--cm-accent) 80%, #fff 20%), var(--cm-accent)) !important;
}

/* The featured slide's "Continue reading" button (#slider .featured-post
   .read-it a) is targeted by a more specific pre-existing rule in
   slide.css that still carries padding reserved for its old arrow-icon
   background image -- a background the glossy gradient above replaces.
   That leftover padding crowded the text against the edge. Overridden
   here at matching specificity with balanced padding and a slightly
   larger, nowrap-safe size. */
#slider .featured-post .read-it a:link,
#slider .featured-post .read-it a:visited {
  display: inline-block;
  padding: 8px 16px !important;
  font-size: 11px;
  white-space: nowrap;
  text-align: center;
}
.pagination span.prev,
.pagination span.next,
#navlinks span.prev,
#navlinks span.next {
  background: linear-gradient(to bottom, #f2f2f2, #ddd) !important;
  background-image: linear-gradient(to bottom, #f2f2f2, #ddd) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-shadow: none;
}

/* Numbered pagination pills: glossy */
.pagination p span {
  border-radius: 50%;
  background: linear-gradient(to bottom, #fff, var(--cm-soft-bg)) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.pagination .this {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cm-text) 75%, #fff 25%), var(--cm-text)) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Category badge: glossy pill instead of a square tag */
.post-info-category a:link,
.post-info-category a:visited,
.post-info-category a:hover,
#content-info h2,
.dc-category #content table caption .cat-title {
  border-radius: 999px !important;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cm-text) 75%, #fff 25%), var(--cm-text)) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  padding: 3px 12px !important;
}

/* Home page cards: rounded corners + lifted shadow instead of a flat box */
.dc-home #content .post {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  padding: 12px;
}
.dc-home .category-container img {
  border-radius: 6px 6px 0 0;
}

/* Sidebar and footer widget headers: glossy pill headers.
   .archive-bt is deliberately excluded -- it already has its own
   gradient background plus an absolutely-positioned nested "Archives"
   link in the base theme, and doubling up the pill treatment there
   clashes rather than looking glossy. */
#sidebar .trackbacks h2,
#custom h2 {
  border-radius: 999px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cm-text) 75%, #fff 25%), var(--cm-text));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  padding: 4px 14px;
  display: inline-block;
}