/*
Theme Name: Encore Dancewear
Theme URI: https://dancewearshare.com
Author: DanceWearShare
Author URI: https://dancewearshare.com
Description: Standalone WordPress theme for DanceWearShare, a teen/girl-focused dancewear resale marketplace supporting Dancers Against Cancer. Handles all page templates, typography, and site-wide design. Header and footer are intentionally NOT built here — they are managed by Elementor Pro Theme Builder ("Entire Site" condition) so they stay visually editable in Elementor, as this site already relies on. All marketplace logic (listings, checkout, payouts, the shop grid, single-listing pages) lives in the separate "encore-marketplace" plugin, which this theme does not touch.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: encore-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =============================================================
   ENCORE DANCEWEAR — DESIGN SYSTEM
   All theme-owned custom properties are prefixed --et- (Encore
   Theme) specifically so they never collide with the plugin's
   own --encore-* variables from Encore \u2192 Design Settings.
   ============================================================= */

:root {
  /* --- Palette ---------------------------------------------- */
  --et-color-bg:            #FFF9F5; /* warm cream page background */
  --et-color-surface:       #FFFFFF; /* cards, forms, panels */
  --et-color-surface-alt:   #FBEFF1; /* soft blush panels / alt sections */

  --et-color-text:          #2B2230; /* near-black plum, body copy */
  --et-color-text-muted:    #6E6272; /* secondary text, meta, captions */
  --et-color-border:        #EBDDE1;

  --et-color-primary:       #D98CA0; /* blush rose \u2014 primary brand color */
  --et-color-primary-dark:  #B96A80; /* hover/active state */
  --et-color-primary-tint:  #F6E1E7; /* light rose backgrounds / badges */

  --et-color-accent:        #C9A15A; /* recital gold \u2014 CTAs, prices, highlights */
  --et-color-accent-dark:   #A9813F;

  --et-color-charity:       #4F8F86; /* teal \u2014 Dancers Against Cancer callouts */
  --et-color-charity-tint:  #E4F1EF;

  --et-color-success:       #4F8F58;
  --et-color-error:         #C1473F;

  /* --- Typography --------------------------------------------*/
  --et-font-heading: "Fraunces", "Playfair Display", Georgia, serif;
  --et-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --et-fs-base:  1rem;
  --et-fs-sm:    0.875rem;
  --et-fs-lg:    1.125rem;
  --et-fs-xl:    1.375rem;
  --et-fs-2xl:   1.75rem;
  --et-fs-3xl:   2.25rem;
  --et-fs-4xl:   2.875rem;
  --et-lh-base:  1.6;
  --et-lh-tight: 1.2;

  /* --- Layout --------------------------------------------------*/
  --et-container-width: 1180px;
  --et-container-pad:   1.25rem;
  --et-gap-sm:  0.5rem;
  --et-gap-md:  1rem;
  --et-gap-lg:  2rem;
  --et-gap-xl:  3.5rem;

  /* --- Misc ------------------------------------------------- */
  --et-radius-sm: 6px;
  --et-radius-md: 12px;
  --et-radius-lg: 20px;
  --et-shadow-sm: 0 1px 3px rgba(43, 34, 48, 0.08);
  --et-shadow-md: 0 8px 24px rgba(43, 34, 48, 0.10);
  --et-transition: 160ms ease;
}

/* =============================================================
   RESET / BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--et-color-bg);
  color: var(--et-color-text);
  font-family: var(--et-font-body);
  font-size: var(--et-fs-base);
  line-height: var(--et-lh-base);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--et-color-primary-dark);
  text-decoration-color: var(--et-color-primary-tint);
  text-underline-offset: 2px;
  transition: color var(--et-transition);
}
a:hover, a:focus { color: var(--et-color-accent-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--et-font-heading);
  font-weight: 600;
  line-height: var(--et-lh-tight);
  color: var(--et-color-text);
  margin: 0 0 0.6em;
}
h1 { font-size: var(--et-fs-4xl); }
h2 { font-size: var(--et-fs-3xl); }
h3 { font-size: var(--et-fs-2xl); }
h4 { font-size: var(--et-fs-xl); }
h5 { font-size: var(--et-fs-lg); }
h6 { font-size: var(--et-fs-base); text-transform: uppercase; letter-spacing: 0.05em; }

p { margin: 0 0 1.2em; }
ul, ol { padding-left: 1.4em; margin: 0 0 1.2em; }

hr {
  border: none;
  border-top: 1px solid var(--et-color-border);
  margin: var(--et-gap-lg) 0;
}

::selection { background: var(--et-color-primary-tint); color: var(--et-color-text); }

/* =============================================================
   ACCESSIBILITY
   ============================================================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: var(--et-color-text);
  color: #fff;
  padding: 0.75em 1.25em;
  border-radius: 0 0 var(--et-radius-sm) 0;
}
.skip-link:focus { left: 0; }

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; position: absolute !important;
  word-wrap: normal !important;
}

:focus-visible {
  outline: 2px solid var(--et-color-accent);
  outline-offset: 2px;
}

/* =============================================================
   LAYOUT
   ============================================================= */
.et-container {
  max-width: var(--et-container-width);
  margin-inline: auto;
  padding-inline: var(--et-container-pad);
}

.et-container--narrow { max-width: 760px; }

.et-site-main {
  padding-block: var(--et-gap-xl);
  min-height: 40vh;
}

.et-section--alt {
  background: var(--et-color-surface-alt);
}

/* =============================================================
   BUTTONS
   ============================================================= */
.et-btn,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--et-font-body);
  font-weight: 600;
  font-size: var(--et-fs-sm);
  letter-spacing: 0.02em;
  padding: 0.85em 1.6em;
  border-radius: var(--et-radius-md);
  border: 2px solid var(--et-color-primary);
  background: var(--et-color-primary);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--et-transition), border-color var(--et-transition), transform var(--et-transition);
}
.et-btn:hover, .wp-block-button__link:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
  background: var(--et-color-primary-dark);
  border-color: var(--et-color-primary-dark);
  color: #fff;
  transform: translateY(-1px);
}

.et-btn--outline {
  background: transparent;
  color: var(--et-color-primary-dark);
}
.et-btn--outline:hover { background: var(--et-color-primary-tint); color: var(--et-color-primary-dark); }

.et-btn--gold {
  background: var(--et-color-accent);
  border-color: var(--et-color-accent);
}
.et-btn--gold:hover { background: var(--et-color-accent-dark); border-color: var(--et-color-accent-dark); }

.et-btn--charity {
  background: var(--et-color-charity);
  border-color: var(--et-color-charity);
}
.et-btn--charity:hover { filter: brightness(0.92); }

/* =============================================================
   FORMS (used by wp-admin-facing front-end forms like the
   plugin's [encore_sell] submission form and any WP comment /
   search forms \u2014 kept generic and unopinionated on purpose)
   ============================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
  width: 100%;
  font-family: var(--et-font-body);
  font-size: var(--et-fs-base);
  padding: 0.75em 0.9em;
  border: 1px solid var(--et-color-border);
  border-radius: var(--et-radius-sm);
  background: var(--et-color-surface);
  color: var(--et-color-text);
  transition: border-color var(--et-transition);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--et-color-primary);
  outline: none;
}

label {
  display: block;
  font-weight: 600;
  font-size: var(--et-fs-sm);
  margin-bottom: 0.35em;
}

/* =============================================================
   BADGES / CALLOUTS
   ============================================================= */
.et-badge {
  display: inline-block;
  font-size: var(--et-fs-sm);
  font-weight: 600;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  background: var(--et-color-primary-tint);
  color: var(--et-color-primary-dark);
}

.et-badge--charity {
  background: var(--et-color-charity-tint);
  color: var(--et-color-charity);
}

.et-callout {
  border-radius: var(--et-radius-lg);
  padding: var(--et-gap-lg);
  background: var(--et-color-surface);
  box-shadow: var(--et-shadow-sm);
  border: 1px solid var(--et-color-border);
}

/* =============================================================
   404 / SEARCH / ARCHIVE PAGES
   ============================================================= */
.et-error-page {
  text-align: center;
  padding-block: var(--et-gap-xl);
}
.et-error-page .et-error-code {
  font-family: var(--et-font-heading);
  font-size: 5rem;
  color: var(--et-color-primary-tint);
  line-height: 1;
}

.search-form {
  display: flex;
  gap: var(--et-gap-sm);
}
.search-form input[type="search"] { flex: 1; }

.et-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--et-gap-lg);
}

/* =============================================================
   WORDPRESS CORE BLOCK / EDITOR DEFAULTS
   ============================================================= */
.wp-block-quote {
  border-left: 4px solid var(--et-color-primary);
  padding-left: var(--et-gap-md);
  font-style: italic;
  color: var(--et-color-text-muted);
}

.alignwide { max-width: calc(var(--et-container-width) + 4rem); margin-inline: auto; }
.alignfull { max-width: none; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 782px) {
  :root {
    --et-fs-4xl: 2.1rem;
    --et-fs-3xl: 1.7rem;
    --et-container-pad: 1rem;
  }
  .et-site-main { padding-block: var(--et-gap-lg); }
}

/* Respect WP admin bar so sticky Elementor headers don't sit under it */
@media screen and (min-width: 783px) {
  body.admin-bar .et-uses-sticky-header { top: 32px; }
}

/* =============================================================
   PAGE / ARTICLE / CARD PRIMITIVES
   (used by index.php, page.php, single.php, archive.php, search.php)
   ============================================================= */
.et-page-title {
  margin-bottom: var(--et-gap-lg);
}

.et-site-main--canvas {
  padding-block: 0;
}

.et-article__thumb {
  border-radius: var(--et-radius-lg);
  overflow: hidden;
  margin-bottom: var(--et-gap-lg);
}

.et-post-meta {
  display: block;
  font-size: var(--et-fs-sm);
  color: var(--et-color-text-muted);
  margin-bottom: var(--et-gap-md);
}

.et-card {
  background: var(--et-color-surface);
  border: 1px solid var(--et-color-border);
  border-radius: var(--et-radius-md);
  overflow: hidden;
  transition: box-shadow var(--et-transition), transform var(--et-transition);
}
.et-card:hover { box-shadow: var(--et-shadow-md); transform: translateY(-2px); }
.et-card__thumb img { aspect-ratio: 1 / 1; object-fit: cover; }
.et-card__body { padding: var(--et-gap-md); }
.et-card__title { font-size: var(--et-fs-lg); margin-bottom: 0.25em; }
.et-card__title a { color: var(--et-color-text); text-decoration: none; }
.et-card__excerpt { color: var(--et-color-text-muted); font-size: var(--et-fs-sm); }

.et-pagination {
  display: flex;
  justify-content: space-between;
  margin-top: var(--et-gap-xl);
  font-weight: 600;
}
.et-pagination a { text-decoration: none; }

.et-page-links { margin-top: var(--et-gap-lg); font-size: var(--et-fs-sm); }