/*
Theme Name: Friends of Alice
Theme URI: https://friendsofalice.club
Author: Friends of Alice
Author URI: https://friendsofalice.club
Description: Minimalist single-column landing theme for Friends of Alice. A black canvas with Fira Sans / Playfair Display typography and pill buttons, reproducing the original Seedlet + Blank Canvas design. Self-contained: no parent theme or extra plugins required.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: foa
*/

/* ---------------------------------------------------------------------------
   Color presets (mirror the original site's palette so block classes such as
   .has-tertiary-color / .has-foreground-color resolve on the front end).
--------------------------------------------------------------------------- */
:root {
	--global--color-background: #000000;
	--global--color-foreground: #878787;
	--global--color-foreground-low-contrast: #4c4c4c;
	--global--color-tertiary: #fafafa;

	--wp--preset--color--primary: #000000;
	--wp--preset--color--secondary: #007cba;
	--wp--preset--color--foreground: #878787;
	--wp--preset--color--tertiary: #fafafa;
	--wp--preset--color--background: #000000;
}

.has-primary-color { color: var(--wp--preset--color--primary) !important; }
.has-secondary-color { color: var(--wp--preset--color--secondary) !important; }
.has-foreground-color { color: var(--wp--preset--color--foreground) !important; }
.has-tertiary-color { color: var(--wp--preset--color--tertiary) !important; }
.has-background-color { color: var(--wp--preset--color--background) !important; }

.has-primary-background-color { background-color: var(--wp--preset--color--primary) !important; }
.has-foreground-background-color { background-color: var(--wp--preset--color--foreground) !important; }
.has-tertiary-background-color { background-color: var(--wp--preset--color--tertiary) !important; }
.has-background-background-color { background-color: var(--wp--preset--color--background) !important; }

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--global--color-background);
	color: var(--global--color-foreground);
	font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection { background-color: #f2f2f2; color: #000; }
::-moz-selection { background-color: #f2f2f2; color: #000; }

h1, h2, h3, h4, h5, h6 {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	color: #f2f2f2;
	line-height: 1.3;
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease-in-out;
}

a:hover,
a:focus {
	color: #ffffff;
}

img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   Layout — single centered column (Blank Canvas landing-page style)
--------------------------------------------------------------------------- */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1 0 auto;
	width: 100%;
	max-width: 610px;
	margin: 0 auto;
	padding: 6vh 24px 4vh;
}

.entry-content > * {
	margin-top: 1.2em;
	margin-bottom: 1.2em;
}

.entry-content > *:first-child {
	margin-top: 0;
}

/* Keep the logo prominent and centered, matching the original 256px render */
.entry-content .wp-block-image img {
	max-width: 256px;
}

/* ---------------------------------------------------------------------------
   Buttons (core supplies the pill shape via block styles; we set colors so the
   look survives even if core's classic-theme styles change)
--------------------------------------------------------------------------- */
.wp-block-button__link,
.wp-element-button {
	background-color: #32373c;
	color: #ffffff;
	border: 0;
	border-radius: 9999px;
	font-size: 1.125em;
	text-decoration: none;
	cursor: pointer;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus {
	color: #ffffff;
}

.wp-block-buttons {
	gap: 1em;
}

/* ---------------------------------------------------------------------------
   Telegram "Join Channel" button (reproduces the WP Telegram widget button
   without needing the plugin installed)
--------------------------------------------------------------------------- */
.wp-block-wptelegram-widget-join-channel {
	text-align: center;
	margin: 1.6em 0;
}

.wp-block-wptelegram-widget-join-channel .join-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: #0088cc;
	color: #ffffff;
	text-decoration: none;
	padding: 14px 28px;
	border-radius: 9999px;
	font-size: 1.05em;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.15s ease-in-out;
}

.wp-block-wptelegram-widget-join-channel .join-link:hover,
.wp-block-wptelegram-widget-join-channel .join-link:focus {
	background-color: #0077b5;
	color: #ffffff;
}

.wp-block-wptelegram-widget-join-channel .join-link svg {
	width: 19px;
	height: 16px;
	flex: 0 0 auto;
}

.wp-block-wptelegram-widget-join-channel .join-link svg path {
	fill: #ffffff;
}

/* ---------------------------------------------------------------------------
   Video
--------------------------------------------------------------------------- */
.wp-block-video video {
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   Footer imprint
--------------------------------------------------------------------------- */
.site-footer {
	flex-shrink: 0;
	text-align: center;
	padding: 24px;
	font-size: 0.8em;
}

.site-footer .imprint {
	color: var(--global--color-foreground-low-contrast);
	text-decoration: none;
}

.site-footer .imprint:hover {
	color: var(--global--color-foreground);
}

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

.skip-link:focus {
	background-color: #f1f1f1;
	color: #21759b;
	clip: auto !important;
	clip-path: none;
	display: block;
	left: 6px;
	top: 7px;
	height: auto;
	padding: 15px 23px 14px;
	width: auto;
	z-index: 100000;
}

/* === Enhanced Telegram CTA — more visible === */
.wp-block-wptelegram-widget-join-channel { margin: 2.2em 0; }
.wp-block-wptelegram-widget-join-channel .join-link {
	gap: 12px;
	background-color: #229ed9;
	padding: 20px 46px;
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.2px;
	box-shadow: 0 6px 24px rgba(34,158,217,0.5);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wp-block-wptelegram-widget-join-channel .join-link:hover,
.wp-block-wptelegram-widget-join-channel .join-link:focus {
	background-color: #1c8fc6;
	transform: translateY(-2px);
	box-shadow: 0 10px 32px rgba(34,158,217,0.65);
}
.wp-block-wptelegram-widget-join-channel .join-link svg { width: 24px; height: 21px; }
@media (prefers-reduced-motion: no-preference) {
	.wp-block-wptelegram-widget-join-channel .join-link { animation: foa-cta-glow 2.6s ease-in-out infinite; }
	@keyframes foa-cta-glow {
		0%,100% { box-shadow: 0 6px 24px rgba(34,158,217,0.45); }
		50% { box-shadow: 0 8px 30px rgba(34,158,217,0.8); }
	}
}
@media (max-width: 480px) {
	.wp-block-wptelegram-widget-join-channel .join-link { font-size: 1.2em; padding: 18px 32px; }
}