/*
Theme Name:   Festivalmate (Astra Child)
Theme URI:    https://blogg.festivalmate.se/
Template:     astra
Author:       Festivalmate
Author URI:   https://festivalmate.se/
Description:  Festivalmate blog skin för Astra. Off-white surfaces, Bricolage Grotesque + DM Sans, gul accent, mjuka pill-knappar och kort med tunna hairlines. Aktivera tema och ladda om — inga Customizer-tweaks krävs.
Version:      1.0.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  festivalmate
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --bg: #F7F5F0;
  --bg-tint: #F1EEE6;
  --surface: #FFFFFF;
  --ink: #0F0E0C;
  --ink-2: #2A2825;
  --muted: #6B6760;
  --muted-2: #94908A;
  --hairline: #EAE6DC;
  --hairline-strong: #DCD7CB;

  --accent: #F5A524;
  --accent-ink: #1A1407;
  --accent-soft: #FBE7BE;
  --accent-faint: #FDF3DC;

  --danger: #E5484D;
  --success: #2F8A55;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}

/* ============================================================
   Body & base type
   ============================================================ */
body,
.ast-container,
.entry-content {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body) !important;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.widget-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

.entry-title { letter-spacing: -0.03em; }
h1.entry-title { font-size: clamp(32px, 4.5vw, 52px); line-height: 1.04; }
h2 { letter-spacing: -0.025em; }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header,
.ast-primary-header-bar {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--hairline) !important;
}

.main-header-menu > .menu-item > a {
  border-radius: var(--r-pill);
  padding: 8px 16px !important;
  line-height: 1.2 !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: background .15s, color .15s;
}
.main-header-menu > .menu-item {
  display: flex !important;
  align-items: center;
}
.main-header-menu > .menu-item:hover > a,
.main-header-menu > .current-menu-item > a,
.main-header-menu > .current_page_item > a {
  background: var(--ink);
  color: #fff !important;
}

/* Site title — F-mark + "Festivalmate / Blogg" feel */
.site-title a {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
}

/* ============================================================
   Buttons — pill, ink primary, accent secondary
   ============================================================ */
.ast-button,
button,
.button,
input[type="submit"],
.wp-block-button__link {
  border-radius: var(--r-pill) !important;
  padding: 12px 18px !important;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--ink) !important;
  background: var(--ink) !important;
  color: #fff !important;
  text-decoration: none;
  transition: transform .15s, background .15s;
}
.ast-button:hover,
button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  transform: translateY(-1px);
  background: var(--ink-2) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--hairline-strong) !important;
}
.wp-block-button.is-style-accent .wp-block-button__link,
.is-accent .wp-block-button__link {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}

/* ============================================================
   Inputs
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select {
  background: var(--bg-tint) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font: inherit;
  color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  background: var(--surface) !important;
  border-color: var(--ink) !important;
  outline: none;
}

/* ============================================================
   Blog archive
   We only style the individual post cards (typography, meta, chips).
   The grid/column count is left to Astra's Customizer ("Blog → Grid Columns").
   The override below just forces the archive's outer .ast-row to span
   the full content width when grid columns = 1, so a post fills the row
   instead of sitting in a 1/3-wide cell.
   ============================================================ */
.ast-archive-description { display: none; }

body.archive #main > .ast-row,
body.blog    #main > .ast-row,
body.search  #main > .ast-row {
  flex: 1 1 100% !important;
  max-width: 100% !important;
}

.post-thumb,
.post-thumb-img-content {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.post-thumb img,
.post-thumb-img-content img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.blog .entry-title,
.archive .entry-title {
  font-size: 20px !important;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.blog .entry-meta,
.archive .entry-meta {
  font-size: 12px;
  color: var(--muted);
}
.blog .entry-content p,
.archive .entry-content p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Kategori-chip ovanpå bilden */
.cat-links { margin-bottom: 0; }
.cat-links a {
  display: inline-block;
  background: var(--accent-faint);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  text-decoration: none;
}

/* ============================================================
   Single post
   ============================================================ */
.single-post .site-content > .ast-container {
  max-width: 740px !important;
}
.single-post .ast-single-post-banner,
.single-post .post-thumb img {
  border-radius: var(--r-xl);
  aspect-ratio: 16/9;
  object-fit: cover;
}

.single-post .entry-content {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}
.single-post .entry-content p { text-wrap: pretty; margin-bottom: 22px; }
.single-post .entry-content h2 { font-size: 30px; margin: 44px 0 16px; }
.single-post .entry-content h3 { font-size: 22px; margin: 32px 0 12px; }
.single-post .entry-content a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

blockquote,
.wp-block-quote {
  border: none !important;
  border-left: 4px solid var(--accent) !important;
  padding: 4px 0 4px 24px !important;
  margin: 32px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px !important;
  line-height: 1.35;
  letter-spacing: -0.018em;
  color: var(--ink);
  background: transparent !important;
}

/* Callout via "Group block" med klass "is-callout" */
.wp-block-group.is-callout {
  background: var(--accent-faint);
  border: 1px solid #F0CD7C;
  border-radius: var(--r-lg);
  padding: 22px 26px;
  margin: 36px 0;
  font-size: 16px;
  color: var(--accent-ink);
}

/* Author box */
.ast-author-box,
.entry-author {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  margin: 56px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.ast-author-box .ast-author-avatar img,
.entry-author .avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50%;
}
.ast-author-box .ast-author-name,
.entry-author-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.022em;
}

/* ============================================================
   Sidebar widgets
   ============================================================ */
.widget {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: none;
}
.widget .widget-title {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted) !important;
  margin-bottom: 14px;
  border: none;
  padding: 0;
}

/* Dark variant — lägg HTML-klass "is-dark" på ett Custom HTML widget */
.widget.is-dark {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.widget.is-dark .widget-title { color: rgba(255,255,255,.55) !important; }
.widget.is-dark input { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.widget.is-dark input::placeholder { color: rgba(255,255,255,.45); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 13px;
}
.site-footer h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }

/* ============================================================
   Misc cleanups
   ============================================================ */
hr, .wp-block-separator {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 32px 0;
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* Tags på posten */
.entry-meta .tags-links a,
.tagcloud a {
  display: inline-block;
  background: var(--bg-tint);
  color: var(--ink-2);
  font-size: 12px !important;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  text-decoration: none;
  margin-right: 4px;
}
.tagcloud a:hover {
  background: var(--accent-faint);
  color: var(--accent-ink);
}