/*
 * Fluent Community, dressed as Gloriously Gluten-Free (see inc/community.php).
 *
 * Plain CSS, not Tailwind: the portal is its own page and the theme's reset
 * would break Fluent's interface. Colours come from Fluent's own variables,
 * which the "Gloriously" skin fills from the design tokens; --ggf-* are the
 * tokens themselves, printed just before this file. Everything here is fonts,
 * shapes, and the logo.
 */

/* Fonts: the site's own files. */
@font-face { font-family: "Figtree"; src: url("build/fonts/figtree-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("build/fonts/figtree-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("build/fonts/figtree-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("build/fonts/figtree-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("build/fonts/fraunces-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("build/fonts/fraunces-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }

:root {
	--ggf-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
	--ggf-serif: "Fraunces", ui-serif, Georgia, serif;
	--ggf-radius-card: 1.25rem;
	--ggf-radius-field: 0.875rem;
	/* Tighter than the site's card shadow: Fluent's containers clip a long one. */
	--ggf-shadow-card: 0 1px 2px rgb(46 42 39 / 0.05), 0 6px 16px -8px rgb(46 42 39 / 0.14);
	--ggf-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fluent sets a system font on body * ; one step more specific wins. */
html body,
html body *:not(code, pre, kbd, samp) {
	font-family: var(--ggf-sans);
}

html body {
	-webkit-font-smoothing: antialiased;
}

/* Headings and titles in Fraunces, the site's display face. */
.fluent_com :is(h1, h2, h3),
.fluent_com .fhr_content_layout_header :is(h1, h2, h3, .fcom_page_title, .title),
.fluent_com .fcom_sidebar_contents :is(h3, h4),
.fluent_com :is(.feed_title, .fcom_feed_title, .space_title, .fcom_card_title),
.el-dialog__title,
.el-drawer__title {
	font-family: var(--ggf-serif);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.fluent_com .fhr_content_layout_header :is(h1, h2, h3) {
	font-size: 1.5rem;
}

/* Links in the brand teal, with the site's soft underline on hover. */
.fluent_com .feed_md_content a,
.fluent_com .fcom_text_link {
	color: var(--fcom-text-link);
	text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
	text-underline-offset: 3px;
}

/* The logo: the site's own logo component. These are the few utilities it
   uses, scoped to the portal header. */
.fcom_top_menu .fhr_logo { display: none; }
.ggf-portal-logo { display: inline-flex; align-items: center; margin-inline: 0.25rem 0.5rem; border-radius: 0.75rem; text-decoration: none; }
.ggf-portal-logo:focus-visible { outline: 2px solid var(--ggf-brand-strong); outline-offset: 4px; }
.ggf-portal-logo .inline-flex { display: inline-flex; }
.ggf-portal-logo .items-center { align-items: center; }
.ggf-portal-logo .gap-3 { gap: 0.6rem; }
.ggf-portal-logo .shrink-0 { flex-shrink: 0; }
.ggf-portal-logo .size-12 { width: 2.5rem; height: 2.5rem; }
.ggf-portal-logo .block { display: block; }
.ggf-portal-logo .leading-none { line-height: 1; }
.ggf-portal-logo .font-display { font-family: var(--ggf-serif); font-weight: 600; }
.ggf-portal-logo .italic { font-style: italic; }
.ggf-portal-logo .text-2xl { font-size: 1.3rem; line-height: 0.95; }
.ggf-portal-logo .text-base { font-size: 0.78rem; line-height: 1; }
.ggf-portal-logo .font-semibold { font-weight: 600; }
.ggf-portal-logo .pl-px { padding-left: 1px; }
.ggf-portal-logo [class*="tracking-"] { letter-spacing: 0.17em; }
.ggf-portal-logo .text-brand { color: var(--ggf-brand); }
.ggf-portal-logo .text-accent { color: var(--ggf-accent); }
.ggf-portal-logo .text-brand-strong { color: var(--ggf-brand-strong); }
.ggf-portal-logo .fill-accent { fill: var(--ggf-accent); }
.ggf-portal-logo .stroke-accent { stroke: var(--ggf-accent); }
.ggf-portal-logo .stroke-brand-soft { stroke: var(--ggf-brand-soft); }
.ggf-portal-logo .size-16 { width: 3.5rem; height: 3.5rem; }
.ggf-portal-logo .text-3xl { font-size: 1.85rem; line-height: 0.95; }
.ggf-portal-logo .text-xl { font-size: 1.1rem; line-height: 1; }
.ggf-portal-logo .text-cream { color: var(--ggf-cream); }
.ggf-portal-logo .text-accent-soft { color: var(--ggf-accent-soft); }
.ggf-portal-logo .text-brand-soft { color: var(--ggf-brand-soft); }
/* At night, the logo's soft pair, as on the footer. */
html.dark .ggf-portal-logo .text-brand { color: var(--ggf-cream); }
html.dark .ggf-portal-logo .text-accent { color: var(--ggf-accent-soft); }
html.dark .ggf-portal-logo .text-brand-strong { color: var(--ggf-brand-soft); }
@media (max-width: 767px) {
	.ggf-portal-logo .size-12 { width: 2.1rem; height: 2.1rem; }
	.ggf-portal-logo .text-2xl { font-size: 1.1rem; }
	.ggf-portal-logo .text-base { font-size: 0.66rem; }
}

/* Header: cream like the site's, menu items as soft pills. */
.fcom_top_menu {
	border-bottom-color: var(--fcom-primary-border);
}

.fcom_top_menu .fcom_header_menu .fcom_menu_link,
.fcom_top_menu .fcom_menu_button,
.fcom_top_menu .fcom_space_opener_btn {
	border-radius: 999px;
	font-weight: 600;
	transition: background-color 280ms var(--ggf-ease), color 280ms var(--ggf-ease);
}

/* The phone's menu button: round, with a hairline instead of a hard outline. */
.fcom_top_menu .fcom_space_opener_btn {
	border-color: var(--fcom-primary-border);
	color: var(--fcom-primary-text);
}

/* Sidebar: rounded menu items, the active one teal-tinted. */
.spaces .space_menu_item > a,
.spaces .fcom_general_menu li > a,
.spaces .fcom_general_menu li > button {
	border-radius: 0.875rem;
	transition: background-color 280ms var(--ggf-ease), color 280ms var(--ggf-ease);
}

.spaces :is(.fcom_group_title, .space_section_title) {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fcom-secondary-text);
}

/* The sidebar box behind the widgets: no fill of its own. */
.fluent_com .fcom_side_box {
	background: transparent;
}

/* The marker beside the current page: a terracotta sliver, the sun's colour. */
.spaces .fcom_menu_link.router-link-exact-active::before,
.spaces .fcom_menu_link.router-link-active::before {
	background-color: var(--ggf-accent) !important;
}

.fcom_side_footer {
	border-top-color: var(--fcom-primary-border);
	font-size: 0.8rem;
}

/* The sidebar's reminder (inc/community.php): a small terracotta-tinted card
   with the label tag, like the recipes' label-check mark. Folded sidebar:
   just the tag. */
.ggf-community-note {
	display: flex;
	gap: 0.65rem;
	margin: 0.75rem 1rem;
	padding: 0.75rem 0.85rem;
	border: 1px solid color-mix(in oklab, var(--ggf-accent) 22%, transparent);
	border-radius: 1rem;
	background: var(--ggf-accent-tint);
	color: var(--ggf-ink);
	font-size: 0.8rem;
	line-height: 1.45;
}

.ggf-community-note__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 999px;
	background: var(--ggf-paper);
	color: var(--ggf-accent-strong);
}

.ggf-community-note svg {
	width: 0.9rem;
	height: 0.9rem;
}

.ggf-community-note__text {
	margin: 0;
}

.ggf-community-note__text a {
	display: inline-block;
	margin-top: 0.2rem;
	color: var(--ggf-accent-strong);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
	text-underline-offset: 3px;
}

.ggf-community-note__text a:hover {
	text-decoration-color: currentColor;
}

.ggf-community-note__folded {
	display: none;
}

/* Pinned just above Fluent's footer: the note takes over the footer's
   automatic top margin, so it stays at the foot of the sidebar however many
   spaces the menu holds. */
.space_contents > .ggf-community-note {
	margin-top: auto;
}

.space_contents > .ggf-community-note + .fcom_side_footer {
	margin-top: 0;
}

html.dark .ggf-community-note {
	border-color: #3b4f55;
	background: #1c3a41;
	color: var(--ggf-cream);
}

html.dark .ggf-community-note__icon {
	background: rgb(251 246 238 / 0.08);
	color: var(--ggf-accent-soft);
}

html.dark .ggf-community-note__text a {
	color: var(--ggf-accent-soft);
}

/* Folded desktop sidebar: only the tag, as a link to the disclaimer. */
html.fcom_sidebar_collapsed_desktop .ggf-community-note {
	justify-content: center;
	margin-inline: 0.5rem;
	padding: 0.5rem;
	border-color: transparent;
	background: transparent;
}

html.fcom_sidebar_collapsed_desktop .ggf-community-note :is(.ggf-community-note__icon, .ggf-community-note__text) {
	display: none;
}

html.fcom_sidebar_collapsed_desktop .ggf-community-note__folded {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--ggf-accent-tint);
	color: var(--ggf-accent-strong);
}

/* Cards: paper, soft corners, a hairline and the site's card shadow. */
.fluent_com :is(.feed, .each_card, .fcom_each_box_card, .fcom_card, .app_side_widget, .fcom_empty_state, .fcom_text_composer, .fcom_notification_card, .fcom_profile_header) {
	border-radius: var(--ggf-radius-card);
}

.fluent_com :is(.feed, .fcom_each_box_card, .fcom_text_composer, .app_side_widget) {
	border: 1px solid var(--fcom-primary-border);
	box-shadow: var(--ggf-shadow-card);
}

html.dark .fluent_com :is(.feed, .fcom_each_box_card, .fcom_text_composer, .app_side_widget) {
	box-shadow: none;
}

/* Buttons: pills, like every button on the site. */
html body .el-button:not(.is-circle, .is-text, .is-link),
html body .fcom_primary_button,
html body .fcom_secondary_button {
	border-radius: 999px !important; /* Fluent sets 8px on some buttons with more specific rules. */
	font-weight: 600;
	transition: background-color 280ms var(--ggf-ease), border-color 280ms var(--ggf-ease), color 280ms var(--ggf-ease), box-shadow 280ms var(--ggf-ease);
}

.el-button--primary,
.fcom_primary_button {
	--el-button-bg-color: var(--fcom-primary-button);
	--el-button-border-color: var(--fcom-primary-button);
	--el-button-text-color: var(--fcom-primary-button-text);
	--el-button-hover-bg-color: var(--ggf-brand-deep);
	--el-button-hover-border-color: var(--ggf-brand-deep);
	--el-button-hover-text-color: var(--fcom-primary-button-text);
	--el-button-active-bg-color: var(--ggf-brand-deep);
	--el-button-active-border-color: var(--ggf-brand-deep);
}

html.dark .el-button--primary,
html.dark .fcom_primary_button {
	--el-button-hover-bg-color: var(--ggf-accent-tint);
	--el-button-hover-border-color: var(--ggf-accent-tint);
	--el-button-active-bg-color: var(--ggf-accent-tint);
	--el-button-active-border-color: var(--ggf-accent-tint);
}

.el-button:is(:hover, :focus-visible):not(.is-disabled, .is-link, .is-text) {
	box-shadow: 0 10px 24px -12px rgb(19 78 94 / 0.55);
}

/* Fields: rounded, warm, with the brand ring on focus. */
.el-input__wrapper,
.el-textarea__inner,
.el-select__wrapper {
	border-radius: var(--ggf-radius-field);
}

.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused,
.el-textarea__inner:focus {
	box-shadow: 0 0 0 1px var(--ggf-brand-strong) inset, 0 0 0 4px color-mix(in oklab, var(--ggf-brand-soft) 35%, transparent);
}

/* Element Plus's own accent (checkboxes, switches, tabs, links) in teal. */
body {
	--el-color-primary: var(--ggf-brand-strong);
	--el-color-primary-light-3: var(--ggf-brand);
	--el-color-primary-light-5: var(--ggf-brand-soft);
	--el-color-primary-light-7: color-mix(in oklab, var(--ggf-brand-soft) 60%, white);
	--el-color-primary-light-8: var(--ggf-brand-tint);
	--el-color-primary-light-9: var(--ggf-brand-tint);
	--el-color-primary-dark-2: var(--ggf-brand-deep);
	--el-border-radius-base: var(--ggf-radius-field);
}

html.dark body {
	--el-color-primary: var(--ggf-brand-soft);
}

/* Dialogs and drawers: panels, like the site's search and menu sheet. */
.el-dialog,
.el-message-box {
	border-radius: 1.75rem;
}

.el-popper.is-light,
.el-dropdown__popper {
	border-radius: 1rem;
}

/* Tags and badges: pills. */
.el-tag,
.fcom_badge {
	border-radius: 999px;
}

/* Slim teal scrollbars, as on the site. */
html {
	scrollbar-color: color-mix(in oklab, var(--ggf-brand) 45%, transparent) transparent;
	scrollbar-width: thin;
}

/* The login and sign-up screens (Fluent's own page). The welcome panel is
   the footer's bowl: dark teal, the logo in cream, and the terracotta sun
   rising from its bottom edge. */
.fcom_auth_page .fcom_layout_side {
	position: relative;
	isolation: isolate;
	overflow: clip;
	/* Fluent prints its login-banner colours inline (Fluent → Settings →
	   Login); the bowl takes over the colours, an uploaded banner image still
	   shows. */
	--fcom_background_color: var(--ggf-brand-deep);
	--fcom_title_color: var(--ggf-cream);
	--fcom_text_color: color-mix(in oklab, var(--ggf-cream) 80%, transparent);
	background-color: var(--ggf-brand-deep) !important;
	color: var(--ggf-cream);
}

.fcom_auth_page .fcom_layout_side::before,
.fcom_auth_page .fcom_layout_side::after {
	content: "";
	position: absolute;
	left: 50%;
	z-index: -1;
	border-radius: 50%;
	translate: -50% 0;
}

/* The sun, and a soft glow around it. */
.fcom_auth_page .fcom_layout_side::before {
	bottom: -9rem;
	width: 18rem;
	height: 18rem;
	background: var(--ggf-accent);
}

.fcom_auth_page .fcom_layout_side::after {
	bottom: -14rem;
	width: 28rem;
	height: 28rem;
	background: radial-gradient(closest-side, color-mix(in oklab, var(--ggf-accent-soft) 35%, transparent), transparent);
}

.fcom_auth_page .fcom_welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
}

.fcom_auth_page .ggf-auth-logo {
	margin-bottom: 1.25rem;
}

.fcom_auth_page .fcom_welcome .fcom_title {
	color: var(--ggf-cream) !important;
	font-family: var(--ggf-serif);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.1;
	text-wrap: balance;
}

.fcom_auth_page .fcom_welcome .fcom_sub_title,
.fcom_auth_page .fcom_welcome .fcom_sub_title p {
	color: color-mix(in oklab, var(--ggf-cream) 80%, transparent) !important;
	font-size: 1.05rem;
	text-wrap: pretty;
}

.fcom_auth_page .fcom_layout_main {
	background: var(--fcom-secondary-bg, var(--ggf-cream));
}

.fcom_auth_page .fcom_onboard_header h2 {
	font-family: var(--ggf-serif);
	font-size: 1.85rem;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.fcom_auth_page .fcom_onboard_header p {
	color: var(--fcom-secondary-text);
}

.fcom_auth_page .fcom_form-group label {
	font-weight: 600;
}

.fcom_auth_page input.input,
.fcom_auth_page .fcom_onboard_form :is(input[type="text"], input[type="email"], input[type="password"]) {
	border-radius: var(--ggf-radius-field);
	border-color: var(--fcom-primary-border);
	background: var(--fcom-primary-bg);
	padding-inline: 1rem;
	transition: border-color 280ms var(--ggf-ease), box-shadow 280ms var(--ggf-ease);
}

.fcom_auth_page input.input:focus,
.fcom_auth_page .fcom_onboard_form input:focus {
	border-color: var(--ggf-brand-strong);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--ggf-brand-soft) 35%, transparent);
	outline: none;
}

.fcom_auth_page input[type="checkbox"] {
	accent-color: var(--ggf-brand-strong);
}

.fcom_auth_page :is(#wp-submit, input.button-primary, .fcom_onboard_form button[type="submit"]) {
	border-radius: 999px !important; /* Fluent styles the button by its id. */
	font-weight: 600;
	transition: background-color 280ms var(--ggf-ease), box-shadow 280ms var(--ggf-ease);
}

.fcom_auth_page :is(#wp-submit, input.button-primary, .fcom_onboard_form button[type="submit"]):is(:hover, :focus-visible) {
	background: var(--ggf-brand-deep);
	box-shadow: 0 10px 24px -12px rgb(19 78 94 / 0.55);
}

.fcom_auth_page .fcom_reset_pass_text a {
	color: var(--fcom-text-link);
	font-weight: 600;
}

html.dark .fcom_auth_page .fcom_layout_side {
	background-color: #0b252c !important;
}

/* Phones: the panel is a short band above the form, so the sun sits lower
   and smaller, under the words rather than behind them. */
@media (max-width: 767px) {
	.fcom_auth_page .fcom_layout_side {
		padding-bottom: 3.5rem;
	}

	.fcom_auth_page .fcom_layout_side::before {
		bottom: -6.25rem;
		width: 9rem;
		height: 9rem;
	}

	.fcom_auth_page .fcom_layout_side::after {
		bottom: -9rem;
		width: 16rem;
		height: 16rem;
	}

	.fcom_auth_page .ggf-auth-logo {
		margin-bottom: 0.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fluent_com *,
	.ggf-portal-logo * {
		transition: none !important;
	}
}