/* ==========================================================================
   HGF GeneratePress — profil mappad på GeneratePress-selektorer.
   Kräver tokens.css (CSS-variabler) + fonts.css (HyraSans). Ändrar bara
   presentation; ingen markup/funktionalitet. Selektorer verifierade mot
   lhhornsberg.se (GeneratePress + GenerateBlocks + shared-booking-plugin).
   ========================================================================== */

/* ---- Bas: typografi & färg ------------------------------------------------ */
body {
	font-family: var(--font-body);
	color: var(--color-ink);
	background-color: var(--color-surface);
}
.inside-article,
.one-container .site-content,
.separate-containers .inside-article {
	background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title, .site-title, .page-title {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	color: var(--color-primary);
	line-height: var(--lh-heading);
}
.entry-title { font-size: var(--fs-2xl); }
/* Enskild sida/inlägg: större displayrubrik. Flytande storlek (clamp) så långa
   svenska ord (t.ex. "Hyresgästföreningen") krymper och ryms på egen rad på små
   skärmar i st f att brytas mitt i ordet. Svensk avstavning bara som sista utväg. */
.single .entry-title,
.page .entry-header .entry-title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 6.8vw, var(--fs-3xl));
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: normal;
	word-break: normal;
	text-wrap: balance;
}

a { color: var(--color-link); text-underline-offset: 0.15em; }
a:hover, a:focus { color: var(--color-link-hover); }

/* ---- Header (två-nivå: djupblå brand-bar + full-bredds nav-bar under) -----
   Kräver GP-inställning nav_position_setting = nav-below-header (generate_settings).
   HGF-märket läggs in via .site-branding::before (temats egen asset); site-titeln
   "LH Hornsberg" står bredvid. Menyn hamnar på egen rad → alla poster ryms utan
   radbrytning på alla desktop-bredder. */
.site-header { background-color: var(--color-primary) !important; }
.site-branding { display: flex; align-items: center; gap: 11px; }
.site-branding::before {
	content: ""; display: block; flex: none;
	width: 40px; height: 40px; border-radius: 8px;
	background: url("../logo/hgf-mark-512.png") center / contain no-repeat;
}
.site-branding .main-title { margin: 0; white-space: nowrap; font-family: var(--font-heading); }
.site-branding .main-title a { color: var(--color-on-primary); font-weight: var(--fw-bold); font-size: 1.3rem; }
.site-header .site-description { color: rgba(255,255,255,0.8); }

/* ---- Navigation (full-bredds blå bar under brand-baren) ----------------- */
.main-navigation {
	background-color: var(--color-primary-bright) !important;
	border-bottom: 3px solid var(--color-cta);
}
/* Centrera menyn i nav-baren */
.main-navigation .inside-navigation { justify-content: center; }
.main-navigation .main-nav > ul { justify-content: center; }
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	color: var(--color-on-primary);
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li[class*="current-menu"] > a {
	color: var(--hgf-yellow);
}
/* Undermenyer (dropdown) */
.main-navigation ul ul {
	background-color: var(--color-primary-bright);
	box-shadow: var(--shadow-md);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.main-navigation .main-nav ul ul li a { color: var(--color-on-primary); }

/* ---- Knappar (GenerateBlocks, GP, Gutenberg, sök) ----------------------- */
/* !important + a.-prefix krävs: GP:s cachade dynamiska CSS använder
   a.wp-block-button__link:not(.has-background) / a.button (högre specificitet),
   och GenerateBlocks-CSS (style-global/style-*.css) laddas EFTER detta tema. */
.gbp-button--primary,
.gb-button,
a.wp-block-button__link,
.wp-block-button__link,
a.button, button.button, .button,
button, html input[type="button"], input[type="reset"],
input[type="submit"],
.wp-block-search__button,
.search-form .search-submit {
	font-family: var(--font-heading) !important;
	font-weight: var(--fw-bold);
	background-color: var(--color-cta) !important;
	color: var(--color-on-cta) !important;
	border: 2px solid transparent !important;
	border-radius: var(--radius-pill) !important;
	padding: 0.6em 1.4em;
	transition: background-color .15s ease;
}
.gbp-button--primary:hover, .gbp-button--primary:focus,
.gb-button:hover,
a.wp-block-button__link:hover, .wp-block-button__link:hover,
a.button:hover, button.button:hover, .button:hover,
button:hover, input[type="submit"]:hover,
.search-form .search-submit:hover {
	background-color: var(--color-cta-hover) !important;
	color: var(--color-on-cta) !important;
}
/* Sekundär variant: lägg klassen .is-style-outline → blå kontur */
.wp-block-button.is-style-outline .wp-block-button__link,
.gbp-button--secondary {
	background-color: transparent !important;
	color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.gbp-button--secondary:hover {
	background-color: var(--color-primary) !important;
	color: var(--color-on-primary) !important;
}
/* Sökknapp (ikon) blå istället för röd */
.wp-block-search__button, .search-form .search-submit {
	background-color: var(--color-primary) !important;
}

/* ---- Innehåll: meta, listor, citat -------------------------------------- */
.entry-meta, .posted-on, .byline {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--color-ink-muted);
}
.entry-meta a { color: var(--color-cta); }

blockquote {
	background: var(--color-surface-blue);
	border-left: 4px solid var(--color-primary);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: var(--space-4) var(--space-5);
	margin: var(--space-5) 0;
}

.read-more, .more-link {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	color: var(--color-link);
}

/* ---- Sidofält / widgets ------------------------------------------------- */
.widget-area .widget {
	background-color: var(--color-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-5);
}
.widget-title {
	font-size: var(--fs-lg);
	margin-bottom: var(--space-4);
}
.widget_recent_entries ul { list-style: none; margin: 0; padding: 0; }
.widget_recent_entries li {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
}
.widget_recent_entries li:last-child { border-bottom: 0; }
.widget_recent_entries a {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	color: var(--color-link);
	display: block;
}
.widget_recent_entries a:hover { color: var(--color-cta); }
.widget_recent_entries .post-date { font-size: var(--fs-sm); color: var(--color-ink-muted); }

/* Sökfält som piller */
.search-form, .wp-block-search__inside-wrapper { display: flex; gap: var(--space-2); }
.search-field, .wp-block-search__input {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: 0.55em 1em;
	font-family: var(--font-body);
}
.search-form .search-submit, .wp-block-search__button {
	background-color: var(--color-primary);
}
.search-form .search-submit:hover { background-color: var(--color-primary-bright); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer, .site-info {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}
.site-footer a, .site-info a { color: var(--color-on-primary); }
.site-footer a:hover, .site-info a:hover { color: var(--hgf-yellow); }

/* ==========================================================================
   Bokningskalender (shared-booking-plugin)
   Plugin skriver <table class="calendar"> med <caption>=månad, <th class="header">
   och <td class="day" style="background-color:#XXXXXX"> — färgen är INLINE, så
   remappa med attributselektor + !important (kan ej ändra pluginets output pga
   DISALLOW_FILE_EDIT). Original: #EEEEEE=ej valbar/upptagen, #FF9999=notis/bokad,
   #00FF00=ledig.
   ========================================================================== */
table.calendar {
	border-collapse: separate;
	border-spacing: 3px;
	width: 100%;
	background: var(--color-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-4);
	margin-bottom: var(--space-5);
	font-family: var(--font-heading);
}
table.calendar caption {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	color: var(--color-primary);
	font-size: var(--fs-lg);
	padding: var(--space-2) 0 var(--space-3);
	caption-side: top;
	text-align: center;
}
table.calendar th.header {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--color-ink-muted);
	font-weight: var(--fw-bold);
	padding: var(--space-2) 0;
}
/* "Dina bokningar"-panelens rubrikrad (ensam th.header, ingen caption) blir blå */
table.calendar tr:first-child th.header:only-child {
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-size: var(--fs-base);
	border-radius: var(--radius-md);
	padding: var(--space-3);
}
table.calendar td.day {
	text-align: center;
	padding: 0.5em 0;
	border-radius: var(--radius-sm);
	font-weight: var(--fw-bold);
	color: var(--color-ink);
}
/* Färgremap: inline-bakgrund → HGF-toner */
table.calendar td.day[style*="#EEEEEE"],
table.calendar td.day[style*="#eeeeee"] {
	background-color: var(--hgf-grey-15) !important;
	color: var(--color-ink-muted);
}
table.calendar td.day[style*="#FF9999"],
table.calendar td.day[style*="#ff9999"] {
	background-color: var(--color-surface-red) !important;
	color: var(--color-cta);
	text-align: left;
	padding: var(--space-3) var(--space-4);
	border-left: 4px solid var(--color-cta);
}
table.calendar td.day[style*="#00FF00"],
table.calendar td.day[style*="#00ff00"],
table.calendar td.day[style*="#CCFFCC"],
table.calendar td.day[style*="#ccffcc"] {
	background-color: #eaf6e0 !important;
	color: #3d6b1f;
	cursor: pointer;
}
table.calendar td.day[style*="#00FF00"]:hover,
table.calendar td.day[style*="#00ff00"]:hover,
table.calendar td.day[style*="#CCFFCC"]:hover {
	background-color: var(--hgf-success) !important;
	color: #fff;
}

/* ---- Notisrutor / alerts (t.ex. inloggningskrav) ------------------------- */
.hgf-notice, .booking-notice {
	background: var(--color-surface-blue);
	border-left: 4px solid var(--color-primary);
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-weight: 600;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-4);
}

/* ---- Fokus/tillgänglighet ------------------------------------------------ */
a:focus-visible, button:focus-visible, input:focus-visible, .button:focus-visible {
	outline: 3px solid var(--color-focus-ring);
	outline-offset: 2px;
}

/* ==========================================================================
   Bakgrundsplattor — startsidan (.home). Bryter upp det vita med sektionstoner
   ur profilen (varm bas + blå/vita plattor). Scoped till .home så inre sidor
   inte påverkas. Bygger på "sections"-komponenten i hgf-design/components.
   ========================================================================== */
.home .inside-article { background: var(--color-surface) !important; }

/* Sidhuvudets avdelare → röd markörlinje (från page-header-komponenten) i stället
   för den grå heltäckande hr:en, och stramare luft mellan H1 och innehållet. */
.home .entry-content { margin-top: var(--space-4); }
.home .entry-content > .wp-block-separator {
	border: 0 !important;
	height: 3px;
	background-color: var(--color-cta);
	width: 72px;
	max-width: 72px;
	margin: var(--space-2) 0 var(--space-5) 0;
	opacity: 1;
}

/* Lokaler-korten — eget custom-HTML-block .hgf-lokaler på startsidan: blå platta
   med tre vita kort (ikon, rubrik, text, CTA). Ersätter den gamla GenerateBlocks-
   sektionen. Bygger på lokal-cards-komponenten i hgf-design/components. */
.hgf-lokaler {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(3, 1fr);
	background: var(--color-surface-blue);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	margin: var(--space-6) 0;
}
.hgf-lokal {
	background: var(--hgf-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.hgf-lokal__icon { width: 48px; height: 48px; }
.hgf-lokal__title {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	color: var(--color-primary);
	margin: 0;
}
.hgf-lokal__text { font-family: var(--font-body); color: var(--color-ink); margin: 0; }
.hgf-lokal__cta {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	padding: 0.6em 1.4em;
	border-radius: var(--radius-pill);
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color .15s ease;
}
.hgf-lokal__cta--book { background: var(--color-cta); color: var(--color-on-cta); }
.hgf-lokal__cta--book:hover { background: var(--color-cta-hover); color: var(--color-on-cta); }
.hgf-lokal__cta--more { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.hgf-lokal__cta--more:hover { background: var(--color-primary); color: var(--color-on-primary); }
@media (max-width: 1024px) { .hgf-lokaler { grid-template-columns: 1fr; } }

/* Nyhetsflödet (core Latest Posts-block) → vitt kort + news-feed-komponentens
   layout: röd versal datum-eyebrow, blå rubrik, utdrag, "Läs mer". */
.home .entry-content > .wp-block-latest-posts {
	background: var(--hgf-white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	padding: var(--space-6);
	margin-top: var(--space-5);
	list-style: none;
}
.home .wp-block-latest-posts__list { list-style: none; margin: 0; padding: 0; }
.home .wp-block-latest-posts__list > li {
	display: flex;
	flex-direction: column;
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--color-border);
}
.home .wp-block-latest-posts__list > li:first-child { padding-top: 0; }
.home .wp-block-latest-posts__list > li:last-child { border-bottom: 0; padding-bottom: 0; }
/* datum → röd eyebrow överst */
.home .wp-block-latest-posts__post-date {
	order: -1;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--color-cta);
	margin-bottom: var(--space-2);
}
.home .wp-block-latest-posts__post-title {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	color: var(--color-primary);
	text-decoration: none;
	margin-bottom: var(--space-2);
	display: inline-block;
}
.home .wp-block-latest-posts__post-title:hover { color: var(--color-cta); }
.home .wp-block-latest-posts__post-excerpt {
	font-family: var(--font-body);
	color: var(--color-ink);
	margin: 0;
}
/* WP renderar "Read more" på engelska → märk om till svenska via ::after */
.home .wp-block-latest-posts__post-excerpt .read-more {
	display: inline-block;
	margin-top: var(--space-2);
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	color: var(--color-link);
	font-size: 0;
}
.home .wp-block-latest-posts__post-excerpt .read-more::after {
	content: "Läs mer →";
	font-size: var(--fs-base);
}
.home .wp-block-latest-posts__post-excerpt .read-more:hover { color: var(--color-cta); }

/* "Viktig information om rörbyte"-notis → röd-soft platta. Ligger nu direkt
   efter lokaler-blocket (.hgf-lokaler) i .entry-content. */
.home .hgf-lokaler + h2.wp-block-heading {
	background: var(--color-surface-red);
	border-left: 5px solid var(--color-cta);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	padding: var(--space-5) var(--space-6) var(--space-3);
	margin: var(--space-5) 0 0;
}
.home .hgf-lokaler + h2.wp-block-heading + p {
	background: var(--color-surface-red);
	border-left: 5px solid var(--color-cta);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	padding: 0 var(--space-6) var(--space-5);
	margin: 0 0 var(--space-7);
	font-weight: 600;
}

/* Mobil menyknapp (hamburgare) ska smälta in i den blå headern, inte ärva
   den röda knappstilen (generella "button"-regeln fångar .menu-toggle). */
.main-navigation .menu-toggle,
button.menu-toggle,
.mobile-menu-control-wrapper .menu-toggle {
	background-color: transparent !important;
	color: var(--color-on-primary) !important;
	border: 0 !important;
	border-radius: 0 !important;
}