@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

/**
 * Saunalist Directory — Stylesheet
 *
 * Uses CSS custom properties (variables) so you can easily retheme
 * the plugin by editing just the :root block at the top.
 *
 * Structure:
 *   1. Custom properties (theme tokens)
 *   2. Reset & base
 *   3. Container
 *   4. Search form
 *   5. Results / cards grid
 *   6. Individual card
 *   7. Facility badges
 *   8. Single sauna page
 *   9. Opening hours table
 *  10. Map embed
 *  11. Contact section
 *  12. Breadcrumbs
 *  13. Internal links / related saunas
 *  14. Pagination
 *  15. Utility / misc
 *  16. Responsive (mobile)
 */


/* ============================================================
   1. CUSTOM PROPERTIES (theme tokens)
   Change these to restyle the whole plugin in one go.
   ============================================================ */
:root {
  /* Matched to saunalist.co.uk Elementor design tokens */
  --sl-primary:       #2D6A6F;       /* teal — site's main brand colour */
  --sl-primary-dark:  #1F4F54;       /* darker teal for hover states     */
  --sl-primary-light: #E8F2F2;       /* very light teal for backgrounds  */
  --sl-accent:        #E8835A;       /* warm sauna orange accent         */
  --sl-accent-dark:   #D06840;       /* darker orange for hover          */
  --sl-bg:            #FFFFFF;       /* clean white page background      */
  --sl-card-bg:       #FFFFFF;       /* white card backgrounds           */
  --sl-text:          #433021;       /* dark brown — site's text colour  */
  --sl-text-muted:    #7A7A7A;       /* medium grey — site's muted text  */
  --sl-border:        #E8E8E8;       /* subtle grey borders              */
  --sl-radius:        8px;           /* border-radius for cards/inputs   */
  --sl-radius-pill:   100px;         /* pill shape for badges            */
  --sl-shadow:        0 2px 8px rgba(0,0,0,0.06);
  --sl-shadow-hover:  0 4px 16px rgba(0,0,0,0.10);
  --sl-font:          'Roboto', sans-serif;       /* site body font */
  --sl-font-heading:  'Poppins', sans-serif;      /* site heading font */
  --sl-max-width:     1140px;        /* max page content width           */
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
.saunalist-single h1,
.saunalist-archive h1,
.saunalist-single h2,
.saunalist-archive h2,
.saunalist-single h3,
.saunalist-archive h3 {
  font-family: var(--sl-font-heading);
}

.saunalist-single,
.saunalist-archive,
.saunalist-search-wrap,
.saunalist-results {
  font-family: var(--sl-font);
}

.saunalist-single *,
.saunalist-archive *,
.saunalist-search-wrap *,
.saunalist-results * {
  box-sizing: border-box;
}

.saunalist-single,
.saunalist-archive {
  background: var(--sl-bg);
  color: var(--sl-text);
  font-family: var(--sl-font);
  line-height: 1.6;
}


/* ============================================================
   3. CONTAINER
   Centres content with a max-width.
   ============================================================ */
.saunalist-container {
  max-width: var(--sl-max-width);
  margin: 0 auto;
  padding: 24px 20px 48px;
}


/* ============================================================
   4. SEARCH FORM
   ============================================================ */
.saunalist-search-wrap {
  margin-bottom: 32px;
}

.saunalist-search-form {
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: 20px 24px;
  box-shadow: var(--sl-shadow);
}

.saunalist-search-inner {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}

.saunalist-search-input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 12px 16px;
  font-size: 1rem;
  border: 2px solid var(--sl-border);
  border-radius: var(--sl-radius);
  background: var(--sl-bg);
  color: var(--sl-text);
  transition: border-color 0.2s;
  appearance: none;
}

.saunalist-search-input:focus {
  outline: none;
  border-color: var(--sl-primary);
}

.saunalist-search-input::placeholder {
  color: var(--sl-text-muted);
}

.saunalist-search-controls {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}

.saunalist-radius-select {
  padding: 12px 14px;
  font-size: 0.95rem;
  border: 2px solid var(--sl-border);
  border-radius: var(--sl-radius);
  background: var(--sl-bg);
  color: var(--sl-text);
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6358'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.saunalist-radius-select:focus {
  outline: none;
  border-color: var(--sl-primary);
}

/* Adjust-radius form (shown in results) */
.saunalist-adjust-radius {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--sl-primary-light);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.saunalist-adjust-radius p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sl-text-muted);
}

.saunalist-radius-form {
  display: flex;
  gap: 8px;
  align-items: center;
}


/* ============================================================
   5. BUTTONS
   ============================================================ */
.saunalist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--sl-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  white-space: nowrap;
  line-height: 1;
}

.saunalist-btn--primary {
  background: var(--sl-primary);
  color: #fff;
}

.saunalist-btn--primary:hover,
.saunalist-btn--primary:focus {
  background: var(--sl-primary-dark);
  color: #fff;
  box-shadow: 0 4px 12px rgba(196, 80, 46, 0.3);
}

.saunalist-btn--secondary {
  background: var(--sl-card-bg);
  color: var(--sl-primary);
  border: 2px solid var(--sl-primary);
  padding: 10px 18px;
}

.saunalist-btn--secondary:hover,
.saunalist-btn--secondary:focus {
  background: var(--sl-primary);
  color: #fff;
}


/* ============================================================
   6. RESULTS WRAPPER
   ============================================================ */
.saunalist-results {
  margin-top: 32px;
}

.saunalist-results-heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--sl-text);
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sl-border);
}

.saunalist-results-count {
  color: var(--sl-text-muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.saunalist-no-results,
.saunalist-error {
  padding: 24px;
  background: #fff8f6;
  border: 1px solid #f5c7b8;
  border-radius: var(--sl-radius);
  color: var(--sl-text-muted);
}


/* ============================================================
   7. CARDS GRID
   CSS Grid — auto-fills columns, minimum 300px wide.
   ============================================================ */
.saunalist-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 16px;
}


/* ============================================================
   8. INDIVIDUAL CARD
   ============================================================ */
.saunalist-card {
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  box-shadow: var(--sl-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}

.saunalist-card:hover {
  box-shadow: var(--sl-shadow-hover);
  transform: translateY(-2px);
}

/* Card image area */
.saunalist-card-image {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--sl-border);
}

.saunalist-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.saunalist-card:hover .saunalist-card-image img {
  transform: scale(1.03);
}

/* Placeholder icon when no image */
.saunalist-card-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.saunalist-card-image--placeholder svg {
  width: 60px;
  height: 60px;
}

/* Card body */
.saunalist-card-body {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.saunalist-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
}

.saunalist-card-title a {
  color: var(--sl-text);
  text-decoration: none;
}

.saunalist-card-title a:hover {
  color: var(--sl-primary);
}

.saunalist-card-location {
  font-size: 0.875rem;
  color: var(--sl-text-muted);
  margin: 0 0 6px;
}

.saunalist-card-distance {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sl-primary);
  margin: 0 0 8px;
}

.saunalist-card-excerpt {
  font-size: 0.875rem;
  color: var(--sl-text-muted);
  margin: 8px 0;
  flex: 1;
}

/* "View details →" link at card bottom */
.saunalist-card-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sl-primary);
  text-decoration: none;
  border-top: 1px solid var(--sl-border);
}

.saunalist-card-link:hover {
  color: var(--sl-primary-dark);
  text-decoration: underline;
}


/* ============================================================
   9. FACILITY BADGES
   Pill-shaped labels for facility types.
   ============================================================ */
.saunalist-facilities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.saunalist-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--sl-accent);
  color: #fff;
  border-radius: var(--sl-radius-pill);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* "+N more" badge — slightly different style */
.saunalist-badge--more {
  background: var(--sl-border);
  color: var(--sl-text-muted);
}


/* ============================================================
   10. SINGLE SAUNA PAGE
   ============================================================ */
.saunalist-single .saunalist-container {
  padding-top: 32px;
}

/* Two-column layout for single page */
.saunalist-single-content-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  margin-top: 28px;
  align-items: start;
}

.saunalist-single-header {
  margin-bottom: 20px;
}

.saunalist-single-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sl-primary);
  margin: 0 0 10px;
}

.saunalist-price-range {
  font-size: 1rem;
  color: var(--sl-text-muted);
  margin: 0;
}

/* Featured image */
.saunalist-featured-image {
  border-radius: var(--sl-radius);
  overflow: hidden;
  margin-bottom: 0;
}

.saunalist-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 460px;
  object-fit: cover;
}

/* Content sections — common styles */
.saunalist-section {
  margin-bottom: 32px;
}

.saunalist-section h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sl-primary);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sl-primary-light);
}

/* Description (editor content) */
.saunalist-description {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sl-text);
}

/* Sidebar sections */
.saunalist-sidebar-col .saunalist-section {
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: 20px;
  box-shadow: var(--sl-shadow);
}


/* ============================================================
   11. OPENING HOURS TABLE
   ============================================================ */
.saunalist-hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.saunalist-hours-table th,
.saunalist-hours-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--sl-border);
}

.saunalist-hours-table th {
  font-weight: 600;
  color: var(--sl-text);
  width: 120px;
}

.saunalist-hours-table td {
  color: var(--sl-text-muted);
}

/* Alternate row shading */
.saunalist-hours-table tr:nth-child(even) {
  background: var(--sl-bg);
}

.saunalist-hours-table tr:last-child th,
.saunalist-hours-table tr:last-child td {
  border-bottom: none;
}

/* Highlight today's row */
.saunalist-hours-table tr.saunalist-today {
  background: var(--sl-primary-light);
}

.saunalist-hours-table tr.saunalist-today th {
  color: var(--sl-primary);
}

.saunalist-today-label {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--sl-primary);
  margin-left: 4px;
}


/* ============================================================
   12. MAP EMBED
   ============================================================ */
.saunalist-map-wrap {
  border-radius: var(--sl-radius);
  overflow: hidden;
  margin: 16px 0 8px;
  border: 1px solid var(--sl-border);
}

.saunalist-map-wrap iframe {
  display: block;
  width: 100%;
  height: 260px;
}

.saunalist-map-link {
  font-size: 0.85rem;
  margin-top: 6px;
}

.saunalist-map-link a {
  color: var(--sl-primary);
}


/* ============================================================
   13. CONTACT SECTION
   ============================================================ */
.saunalist-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.saunalist-contact-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--sl-border);
  font-size: 0.9rem;
}

.saunalist-contact-list li:last-child {
  border-bottom: none;
}

.saunalist-contact-list a {
  color: var(--sl-primary);
  text-decoration: none;
}

.saunalist-contact-list a:hover {
  text-decoration: underline;
}

.saunalist-external-icon {
  font-size: 0.8em;
  margin-left: 2px;
}

/* Address block */
.saunalist-address {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--sl-text);
  padding: 12px 16px;
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  margin-bottom: 0;
}


/* ============================================================
   14. BREADCRUMBS
   ============================================================ */
.saunalist-breadcrumb {
  margin-bottom: 16px;
}

.saunalist-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 0.825rem;
  color: var(--sl-text-muted);
}

.saunalist-breadcrumb li + li::before {
  content: '›';
  margin-right: 4px;
  color: var(--sl-border);
}

.saunalist-breadcrumb a {
  color: var(--sl-text-muted);
  text-decoration: none;
}

.saunalist-breadcrumb a:hover {
  color: var(--sl-primary);
  text-decoration: underline;
}

.saunalist-breadcrumb li[aria-current="page"] {
  color: var(--sl-text);
  font-weight: 500;
}


/* ============================================================
   15. RELATED SAUNAS (internal linking section)
   ============================================================ */
.saunalist-related-section {
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: 24px 28px;
  box-shadow: var(--sl-shadow);
}

.saunalist-related-section > h2 {
  margin-bottom: 20px;
}

.saunalist-related-group {
  margin-bottom: 24px;
}

.saunalist-related-group:last-child {
  margin-bottom: 0;
}

.saunalist-related-group h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--sl-text-muted);
}

.saunalist-related-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.saunalist-related-list li {
  padding: 4px 0;
  border-bottom: 1px solid var(--sl-border);
}

.saunalist-related-list li:last-child {
  border-bottom: none;
}

.saunalist-related-list a {
  color: var(--sl-text);
  text-decoration: none;
  font-size: 0.9rem;
}

.saunalist-related-list a:hover {
  color: var(--sl-primary);
}

.saunalist-related-archive-link {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sl-primary);
  text-decoration: none;
  margin-top: 4px;
}

.saunalist-related-archive-link:hover {
  text-decoration: underline;
}


/* ============================================================
   16. ARCHIVE PAGE HEADER
   ============================================================ */
.saunalist-archive-header {
  margin-bottom: 24px;
}

.saunalist-archive-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sl-primary);
  margin: 0 0 8px;
}

.saunalist-archive-desc {
  color: var(--sl-text-muted);
  font-size: 1rem;
  margin: 0;
}

.saunalist-archive-search {
  margin-bottom: 32px;
}


/* ============================================================
   17. PAGINATION
   ============================================================ */
.saunalist-pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.saunalist-pagination .nav-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.saunalist-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  font-size: 0.9rem;
  color: var(--sl-text);
  text-decoration: none;
  background: var(--sl-card-bg);
  transition: background 0.2s, color 0.2s;
}

.saunalist-pagination .page-numbers.current,
.saunalist-pagination .page-numbers:hover {
  background: var(--sl-primary);
  color: #fff;
  border-color: var(--sl-primary);
}


/* ============================================================
   18. RESPONSIVE — MOBILE (max 768px)
   ============================================================ */
@media (max-width: 768px) {

  .saunalist-search-inner {
    flex-direction: column;
  }

  .saunalist-search-controls {
    width: 100%;
  }

  .saunalist-radius-select {
    flex: 1;
  }

  .saunalist-btn {
    width: 100%;
    justify-content: center;
  }

  /* Stack single-sauna to one column on mobile */
  .saunalist-single-content-grid {
    grid-template-columns: 1fr;
  }

  .saunalist-sidebar-col {
    order: -1; /* Move sidebar (map, contact) above description on mobile */
  }

  .saunalist-single-title {
    font-size: 1.5rem;
  }