/* Platypus Default Theme
 *
 * Clean, modern design defaults. Use as-is or as a starting point for custom themes.
 */

/* ================================================================
   DESIGN TOKENS
   ================================================================ */

:root {
  /* Colors — Semantic */
  --plp-color-primary: #2563eb;
  --plp-color-primary-hover: #1d4ed8;
  --plp-color-secondary: #475569;
  --plp-color-secondary-hover: #334155;
  --plp-color-accent: #0891b2;
  --plp-color-accent-hover: #0e7490;
  --plp-color-info: #0284c7;
  --plp-color-warning: #d97706;
  --plp-color-danger: #dc2626;
  --plp-color-success: #16a34a;

  /* Colors — Neutrals */
  --plp-color-text: #1a1a2e;
  --plp-color-muted: #6b7280;
  --plp-color-bg: #ffffff;
  --plp-color-bg-alt: #f8fafc;
  --plp-color-border: #e5e7eb;

  /* Typography */
  --plp-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --plp-font-family-heading: inherit;
  --plp-font-size: 16px;
  --plp-line-height: 1.6;
  --plp-font-weight-normal: 400;
  --plp-font-weight-bold: 700;
  --plp-h1-size: 2.5rem;
  --plp-h2-size: 2rem;
  --plp-h3-size: 1.5rem;
  --plp-h4-size: 1.25rem;
  --plp-small-size: 0.875rem;
  --plp-letter-spacing: normal;
  --plp-heading-letter-spacing: normal;
  --plp-paragraph-spacing: 1em;

  /* Spacing */
  --plp-spacing: 1.5rem;

  /* Borders & Radius */
  --plp-border-radius: 4px;

  /* Links */
  --plp-link-color: var(--plp-color-primary);
  --plp-link-hover-color: var(--plp-color-primary-hover);
  --plp-link-decoration: underline;
  --plp-link-hover-decoration: underline;

  /* Buttons */
  --plp-btn-padding: 0.75rem 2rem;
  --plp-btn-radius: 6px;
  --plp-btn-font-weight: 600;

  /* Button Variants — Primary */
  --plp-btn-primary-bg: var(--plp-color-primary);
  --plp-btn-primary-text: #ffffff;
  --plp-btn-primary-hover-bg: var(--plp-color-primary-hover);
  --plp-btn-primary-hover-text: #ffffff;

  /* Button Variants — Secondary */
  --plp-btn-secondary-bg: var(--plp-color-secondary);
  --plp-btn-secondary-text: #ffffff;
  --plp-btn-secondary-hover-bg: var(--plp-color-secondary-hover);
  --plp-btn-secondary-hover-text: #ffffff;

  /* Button Variants — Outline */
  --plp-btn-outline-color: var(--plp-color-primary);
  --plp-btn-outline-hover-bg: var(--plp-color-primary);
  --plp-btn-outline-hover-text: #ffffff;

  /* Button Variants — Ghost */
  --plp-btn-ghost-text: var(--plp-color-primary);
  --plp-btn-ghost-hover-bg: color-mix(in srgb, var(--plp-color-primary) 8%, transparent);

  /* Forms */
  --plp-form-input-bg: #ffffff;
  --plp-form-input-text: var(--plp-color-text);
  --plp-form-input-border: var(--plp-color-border);
  --plp-form-input-radius: var(--plp-border-radius);
  --plp-form-input-padding: 0.5rem 0.75rem;
  --plp-form-focus-color: var(--plp-color-primary);
  --plp-form-placeholder-color: var(--plp-color-muted);
  --plp-form-label-color: var(--plp-color-text);
  --plp-form-label-weight: 500;
  --plp-form-required-color: var(--plp-color-danger);
  --plp-form-help-color: var(--plp-color-muted);
  --plp-form-error-color: var(--plp-color-danger);

  /* Shadows */
  --plp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --plp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);

  /* Overlay */
  --plp-overlay-bg: rgba(0, 0, 0, 0.4);

  /* Transitions */
  --plp-transition-speed: 0.2s;
}

/* ================================================================
   BASE TYPOGRAPHY
   ================================================================ */

html {
  font-size: var(--plp-font-size);
}

.plp-page {
  font-family: var(--plp-font-family);
  font-size: 1rem;
  line-height: var(--plp-line-height);
  font-weight: var(--plp-font-weight-normal);
  color: var(--plp-color-text);
  background-color: var(--plp-color-bg);
  background-image: var(--plp-bg-image, none);
  background-size: var(--plp-bg-size, cover);
  background-position: var(--plp-bg-position, center);
  background-repeat: var(--plp-bg-repeat, no-repeat);
  background-attachment: var(--plp-bg-attachment, scroll);
  letter-spacing: var(--plp-letter-spacing);
}

.plp-page a {
  color: var(--plp-link-color);
  transition: color var(--plp-transition-speed);
}

.plp-page a:hover {
  color: var(--plp-link-hover-color);
}

/* Headings */
.plp-page h1, .plp-page h2, .plp-page h3, .plp-page h4, .plp-page h5, .plp-page h6 {
  font-family: var(--plp-font-family-heading);
  font-weight: var(--plp-font-weight-bold);
  line-height: 1.2;
  letter-spacing: var(--plp-heading-letter-spacing);
  margin: 0 0 0.5em;
}

.plp-page h1 { font-size: var(--plp-h1-size); }
.plp-page h2 { font-size: var(--plp-h2-size); }
.plp-page h3 { font-size: var(--plp-h3-size); }
.plp-page h4 { font-size: var(--plp-h4-size); }

.plp-page small { font-size: var(--plp-small-size); }

/* ================================================================
   BLOCK: TEXT
   ================================================================ */

.plp-block-text {
  margin-bottom: var(--plp-spacing);
}

.plp-block-text p {
  margin: 0 0 var(--plp-paragraph-spacing);
}

.plp-block-text a {
  color: var(--plp-link-color);
  text-decoration: var(--plp-link-decoration);
}

.plp-block-text a:hover {
  color: var(--plp-link-hover-color);
  text-decoration: var(--plp-link-hover-decoration);
}

/* ================================================================
   BLOCK: HEADING
   ================================================================ */

.plp-block-heading {
  font-family: var(--plp-font-family-heading);
  margin: 1.5em 0 0.5em;
  line-height: 1.2;
}

/* ================================================================
   BLOCK: IMAGE
   ================================================================ */

.plp-block-image img {
  border-radius: var(--plp-border-radius);
}

.plp-block-image figcaption {
  font-size: var(--plp-small-size);
  color: var(--plp-color-muted);
  margin-top: 0.5rem;
}

/* ================================================================
   BLOCK: COVER
   ================================================================ */

.plp-block-cover {
  padding: 3rem 1.5rem;
}

/* ================================================================
   BLOCK: SECTION
   ================================================================ */

.plp-block-section {
  padding: var(--plp-spacing) 0;
  margin-bottom: var(--plp-spacing);
}

/* ================================================================
   BLOCK: COLUMNS
   ================================================================ */

.plp-block-columns {
  margin-bottom: var(--plp-spacing);
}

/* ================================================================
   BLOCK: CAROUSEL
   ================================================================ */

.plp-block-carousel {
  margin-bottom: var(--plp-spacing);
}

.plp-block-carousel .plp-carousel-caption {
  text-align: center;
  padding: 0.75rem;
  font-size: var(--plp-small-size);
  color: var(--plp-color-muted);
}

.plp-carousel-prev,
.plp-carousel-next {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--plp-transition-speed), opacity var(--plp-transition-speed);
  opacity: 0.7;
}

.plp-carousel-prev:hover,
.plp-carousel-next:hover {
  background: #fff;
  opacity: 1;
}

.plp-carousel-prev svg,
.plp-carousel-next svg {
  width: 20px;
  height: 20px;
  color: var(--plp-color-text);
}

.plp-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
  transition: background var(--plp-transition-speed);
}

.plp-carousel-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.plp-carousel-dot.plp-active {
  background: #fff;
}

/* ================================================================
   BLOCK: FORM
   ================================================================ */

.plp-block-form {
  margin-bottom: var(--plp-spacing);
}

.plp-block-form label {
  color: var(--plp-form-label-color, var(--plp-color-text));
  font-weight: var(--plp-form-label-weight, 500);
  margin-bottom: 0.25rem;
}

.plp-block-form input,
.plp-block-form textarea,
.plp-block-form select {
  padding: var(--plp-form-input-padding, 0.5rem 0.75rem);
  background-color: var(--plp-form-input-bg, #ffffff);
  color: var(--plp-form-input-text, var(--plp-color-text));
  border: 1px solid var(--plp-form-input-border, var(--plp-color-border));
  border-radius: var(--plp-form-input-radius, var(--plp-border-radius));
  font-size: 1rem;
  font-family: inherit;
}

.plp-block-form input:focus,
.plp-block-form textarea:focus,
.plp-block-form select:focus {
  outline: none;
  border-color: var(--plp-form-focus-color, var(--plp-color-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--plp-form-focus-color, var(--plp-color-primary)) 15%, transparent);
}

.plp-block-form input::placeholder,
.plp-block-form textarea::placeholder {
  color: var(--plp-form-placeholder-color, var(--plp-color-muted));
  opacity: 0.7;
}

.plp-block-form .plp-form-required {
  color: var(--plp-form-required-color, var(--plp-color-danger));
}

.plp-block-form .plp-form-help {
  color: var(--plp-form-help-color, var(--plp-color-muted));
}

.plp-block-form .plp-form-field-error {
  color: var(--plp-form-error-color, var(--plp-color-danger));
}

.plp-block-form button[type="submit"] {
  padding: var(--plp-btn-padding);
  background: var(--plp-color-primary);
  color: #fff;
  border: none;
  border-radius: var(--plp-btn-radius);
  font-size: 1rem;
  font-weight: var(--plp-btn-font-weight);
  cursor: pointer;
  transition: background var(--plp-transition-speed);
}

.plp-block-form button[type="submit"]:hover {
  background: var(--plp-color-primary-hover);
}

/* ================================================================
   BLOCK: HTML
   ================================================================ */

.plp-block-html {
  margin-bottom: var(--plp-spacing);
}

/* ================================================================
   BLOCK: VIDEO
   ================================================================ */

.plp-block-video {
  margin-bottom: var(--plp-spacing);
}

.plp-block-video iframe {
  border-radius: var(--plp-border-radius);
}

/* ================================================================
   BLOCK: DIVIDER
   ================================================================ */

.plp-block-divider {
  border-top: 1px solid var(--plp-color-border);
  margin: var(--plp-spacing) 0;
}

/* ================================================================
   BLOCK: NAV
   ================================================================ */

.plp-block-nav a {
  color: inherit;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
}

.plp-block-nav a:hover {
  color: var(--plp-link-hover-color);
}

.plp-block-nav .has-submenu > a::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.plp-block-nav .submenu {
  padding: 0.5rem 0;
  background: var(--plp-color-bg);
  border: 1px solid var(--plp-color-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.plp-block-nav .submenu a {
  display: flex;
  padding: 0.5rem 1rem;
  font-weight: 400;
}

.plp-block-nav .submenu a:hover {
  background: var(--plp-color-bg-alt);
}

.plp-block-nav .submenu .has-submenu > a::after {
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  border-right: none;
  margin-left: auto;
}

/* ================================================================
   NAV: MOBILE STYLING
   ================================================================ */

.plp-block-nav.plp-nav-mobile .plp-nav-menu {
  background: var(--plp-color-bg);
}

.plp-block-nav.plp-nav-mobile .plp-nav-menu a {
  padding: 0.75rem 1rem;
}

.plp-block-nav.plp-nav-mobile .plp-submenu-toggle {
  border-left: 1px solid var(--plp-color-border);
  color: inherit;
  transition: background 0.15s;
}

.plp-block-nav.plp-nav-mobile .plp-submenu-toggle:hover {
  background: var(--plp-color-bg-alt);
}

.plp-block-nav.plp-nav-mobile .submenu {
  background: var(--plp-color-bg-alt);
}

.plp-block-nav.plp-nav-mobile .submenu a {
  padding-left: 2rem;
}

.plp-block-nav.plp-nav-mobile .submenu .submenu a {
  padding-left: 3rem;
}

@media (max-width: 768px) {
  .plp-block-nav:not([data-hamburger]) .plp-nav-menu {
    background: var(--plp-color-bg);
  }

  .plp-block-nav:not([data-hamburger]) .plp-nav-menu a {
    padding: 0.75rem 1rem;
  }

  .plp-block-nav:not([data-hamburger]) .plp-submenu-toggle {
    border-left: 1px solid var(--plp-color-border);
    color: inherit;
    transition: background 0.15s;
  }

  .plp-block-nav:not([data-hamburger]) .plp-submenu-toggle:hover {
    background: var(--plp-color-bg-alt);
  }

  .plp-block-nav:not([data-hamburger]) .submenu {
    background: var(--plp-color-bg-alt);
  }

  .plp-block-nav:not([data-hamburger]) .submenu a {
    padding-left: 2rem;
  }

  .plp-block-nav:not([data-hamburger]) .submenu .submenu a {
    padding-left: 3rem;
  }
}

/* ================================================================
   BLOCK: ALERT
   ================================================================ */

.plp-alert-info {
  background: #eff6ff;
  border-color: var(--plp-color-info);
  color: #1e40af;
}

.plp-alert-info .plp-alert-icon { color: var(--plp-color-info); }

.plp-alert-success {
  background: #f0fdf4;
  border-color: var(--plp-color-success);
  color: #166534;
}

.plp-alert-success .plp-alert-icon { color: var(--plp-color-success); }

.plp-alert-warning {
  background: #fffbeb;
  border-color: var(--plp-color-warning);
  color: #92400e;
}

.plp-alert-warning .plp-alert-icon { color: var(--plp-color-warning); }

.plp-alert-danger {
  background: #fef2f2;
  border-color: var(--plp-color-danger);
  color: #991b1b;
}

.plp-alert-danger .plp-alert-icon { color: var(--plp-color-danger); }

/* ================================================================
   BLOCK: TESTIMONIAL
   ================================================================ */

.plp-testimonial-stars {
  color: var(--plp-color-warning);
}

.plp-testimonial-quote {
  font-size: 1.125rem;
}

.plp-testimonial-info span {
  font-size: var(--plp-small-size);
  opacity: 0.7;
}

.plp-testimonial-card {
  background: var(--plp-color-bg-alt);
  padding: 2rem;
  border-radius: var(--plp-border-radius);
  box-shadow: var(--plp-shadow-sm);
}

.plp-testimonial-large-quote {
  padding: 2rem;
}

.plp-testimonial-large-quote .plp-testimonial-quote {
  font-size: 1.5rem;
  font-style: italic;
}

.plp-testimonial-large-quote .plp-testimonial-quote::before {
  content: '\201C';
  display: block;
  font-size: 4rem;
  line-height: 1;
  color: var(--plp-color-primary);
  opacity: 0.3;
}

/* ================================================================
   BLOCK: FEATURE GRID
   ================================================================ */

.plp-fg-heading {
  font-size: 1.125rem;
}

.plp-fg-desc {
  opacity: 0.8;
  font-size: var(--plp-small-size);
}

.plp-fg-card .plp-fg-item {
  background: var(--plp-color-bg-alt);
  padding: var(--plp-spacing);
  border-radius: var(--plp-border-radius);
  box-shadow: var(--plp-shadow-sm);
}

/* ================================================================
   BLOCK: TABS
   ================================================================ */

.plp-tab {
  padding: 0.75rem var(--plp-spacing);
  font-weight: 500;
  color: var(--plp-color-muted);
}

.plp-tab:hover {
  color: var(--plp-color-primary);
}

.plp-tab.plp-active {
  color: var(--plp-color-primary);
}

.plp-tabs-underline .plp-tabs-nav {
  border-bottom: 2px solid var(--plp-color-border);
}

.plp-tabs-underline .plp-tab.plp-active {
  border-bottom-color: var(--plp-color-primary);
}

.plp-tabs-pills .plp-tab.plp-active {
  background: var(--plp-color-primary);
  color: #fff;
}

.plp-tabs-boxed .plp-tabs-nav {
  border: 1px solid var(--plp-color-border);
  border-radius: var(--plp-border-radius);
  background: var(--plp-color-bg-alt);
}

.plp-tabs-boxed .plp-tab.plp-active {
  background: var(--plp-color-bg);
  box-shadow: var(--plp-shadow-sm);
}

.plp-tab-panel {
  padding: var(--plp-spacing) 0;
}

/* ================================================================
   BLOCK: BLOG LIST
   ================================================================ */

.plp-blog-pagination {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--plp-color-border);
}

.plp-blog-pagination a,
.plp-blog-pagination-current {
  font-size: var(--plp-small-size);
  font-weight: 500;
  border-radius: var(--plp-border-radius);
}

.plp-blog-pagination a {
  color: var(--plp-color-text);
}

.plp-blog-pagination a:hover {
  background: var(--plp-color-bg-alt);
}

.plp-blog-pagination-current {
  background: var(--plp-color-primary);
  color: #fff;
}

.plp-blog-pagination-ellipsis {
  color: var(--plp-color-muted);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
  :root {
    --plp-h1-size: 2rem;
    --plp-h2-size: 1.75rem;
    --plp-h3-size: 1.25rem;
  }
}