/*
Theme Name: Glinsterhulp 2025
Template: twentytwentyfive
Description: Modern block-based child theme of Twenty Twenty-Five for the Glinsterhulp support platform. Glinsterhulp connects people through profiles and private messaging, operated by Berrefonds.
Author: Berrefonds / Wizarts
Author URI: https://www.berrefonds.be
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.7
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: glinsterhulp-2025
Tags: block-patterns, full-site-editing, community, support
*/

/*
 * Glinsterhulp Brand Colors:
 * Primary (Dark Teal): #005a6c
 * Secondary (Mint): #b4d8d1
 * Accent (Peach): #fccab0
 * Light Teal: #4b777b
 * White: #ffffff
 *
 * Glinsterhulp Fonts:
 * Headings: 'KG HAPPY Solid'
 * Body: 'Univers Condensed'
 * Bold: 'Univers Bold Condensed'
 * Decorative: 'Adelline'
 */

/*
 * Custom styles for Glinsterhulp will be minimal here.
 * Most styling is configured via theme.json for better
 * Site Editor integration and maintainability.
 *
 * Additional component-specific styles will be added
 * as we migrate Design 4 patterns.
 */

 :where(.wp-site-blocks *:focus) {
    outline-width: 1px;    
}

/* ============================================
   STICKY HEADER TRANSITIONS
   ============================================ */

/* Base sticky container - add transition for smooth padding change */
body .wp-block-uagb-container.uagb-position__sticky {
	transition: padding 250ms ease;
}

/* Reduce padding when stuck to top */
body .wp-block-uagb-container.uagb-position__sticky--stuck {
	padding: 0.5em !important;
}

/* ============================================
   HEADER USER SECTION
   ============================================ */

/* Container layout */
.gh-header-user {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.gh-header-user--logged-in {
	gap: 0.75rem;
}

.gh-header-user p:empty{
	display: none;
}

/* Icon links */
.gh-header-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-size: 20px;
}

.gh-header-icon:hover {
	color: var(--wp--preset--color--light-teal);
}

/* Badge for message/notification counts */
.gh-badge {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	padding: 2px 5px;
	border-radius: 10px;
	min-width: 16px;
	text-align: center;
	line-height: 1.2;
}

/* UM Notifications button override - remove black circle background */
.gh-header-user .um-notification-b {
	background: transparent !important;
	width: auto;
    height: auto;
    color: var(--wp--preset--color--primary);
    line-height: normal;
    box-shadow: none;
}

.gh-header-user .um-notification-b:hover {
	color: var(--wp--preset--color--light-teal);
}

.gh-header-user .um-notification-b i {
	font-size: 24px;
}

/* Hide the UM notification button (we use custom FA bell instead) */
.gh-um-notifications-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* Profile wrapper with dropdown */
.gh-header-profile-wrapper {
	position: relative;
	display: flex;
}

.gh-header-profile-wrapper > p:empty{
	display: none;
}

.gh-header-profile-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

.gh-header-profile-link:hover {
	color: var(--wp--preset--color--light-teal);
}

.gh-header-username {
	font-weight: 500;
}

.gh-header-avatar {
	border-radius: 50%;
	width: 32px;
	height: 32px;
	object-fit: cover;
}

/* Dropdown menu */


.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
	padding: 3em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    right: 1.5em;
    top: 4.5em;
}

.gh-header-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background: #fff;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	list-style: none;
	margin: -0.05rem 0 0 0;
	padding: 0.5rem 0;
	min-width: 150px;
	z-index: 1000;
}

.gh-header-profile-wrapper:hover .gh-header-dropdown {
	display: block;
}

.gh-header-dropdown li {
	margin: 0;
}

.gh-header-dropdown a {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.gh-header-dropdown a:hover {
	background: var(--wp--preset--color--secondary);
}

/* Login button - uses WP button classes */
.gh-login-btn {
	/* WP button classes handle most styling */
}


/* ============================================
   MOBILE BOTTOM BAR
   ============================================ */

/* Hidden on desktop */
.gh-mobile-bar {
	display: none;
}

@media (max-width: 768px) {
	/* Hide header user section on mobile (bottom bar takes over) */
	.gh-header-user {
		display: none !important;
	}

	/* Fixed bottom bar */
	.gh-mobile-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 2px solid var(--wp--preset--color--secondary);
		padding: 0.5rem 1rem;
		padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
		justify-content: space-around;
		align-items: center;
		z-index: 9999;
		box-shadow: 0 -2px 10px rgba(0, 90, 108, 0.1);
	}

	/* Padding on body so content doesn't hide behind bar */
	body {
		padding-bottom: 70px;
	}

	/* Individual item */
	.gh-mobile-bar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
		padding: 0.5rem 0.75rem;
		color: var(--wp--preset--color--primary);
		text-decoration: none;
		position: relative;
		min-width: 60px;
	}

	.gh-mobile-bar__item:hover,
	.gh-mobile-bar__item:active {
		color: var(--wp--preset--color--light-teal);
	}

	.gh-mobile-bar__item i {
		font-size: 1.25rem;
	}

	.gh-mobile-bar__label {
		font-size: 0.7rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	/* Avatar for profile item */
	.gh-mobile-bar__avatar {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		object-fit: cover;
	}

	/* Badge for unread messages */
	.gh-mobile-bar__badge {
		position: absolute;
		top: 0;
		right: 0.25rem;
		background: var(--wp--preset--color--accent);
		color: #fff;
		font-size: 0.6rem;
		font-weight: bold;
		padding: 2px 5px;
		border-radius: 10px;
		min-width: 14px;
		text-align: center;
		line-height: 1.2;
	}

	/* Guest login button */
	.gh-mobile-bar--guest {
		justify-content: center;
		padding: 0.75rem 1rem;
		padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
	}

	.gh-mobile-bar__login-btn {
		display: block;
		width: 100%;
		max-width: 300px;
		text-align: center;
		padding: 0.875rem 2rem;
		background: var(--wp--preset--color--primary);
		color: #fff;
		text-decoration: none;
		border-radius: 4px;
		font-weight: 600;
		font-size: 1rem;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.gh-mobile-bar__login-btn:hover,
	.gh-mobile-bar__login-btn:active {
		background: var(--wp--preset--color--light-teal);
		color: #fff;
	}
}


/* FAQ */

.gb-block-accordion{
	margin-block-end: 1em;
}

.gb-block-accordion .gb-accordion-title{
	border-radius: 5px;
}

.gb-block-accordion details{
	border-radius: 5px;
    border: 1px solid #f2f2f2;
	transition: border-color .3s;
}

.gb-block-accordion details:hover summary{
	cursor: pointer;
	transition: background-color .3s;
}

.gb-block-accordion details[open] summary{
	background: var(--wp--preset--color--secondary);
}

.gb-block-accordion details[open]{
	border-color: var(--wp--preset--color--secondary);
}

/* ============================================
   CONTACT FORM 7
   ============================================ */

/* Form container */
.wpcf7-form {
	font-family: 'Univers Condensed', var(--wp--preset--font-family--univers-condensed), sans-serif;
}

/* Labels */
.wpcf7-form label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #005a6c;
	margin-bottom: 0.5rem;
}

/* Input fields and textarea */
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	font-family: 'Univers Condensed', var(--wp--preset--font-family--univers-condensed), sans-serif;
	font-size: 16px;
	color: #005a6c;
	background: #fff;
	border: 2px solid #b4d8d1;
	border-radius: 4px;
	padding: 12px 16px;
	transition: border-color 200ms ease, box-shadow 200ms ease;
	box-sizing: border-box;
}

.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):focus {
	border-color: #005a6c;
	box-shadow: 0 0 0 3px rgba(0, 90, 108, 0.1);
	outline: none;
}

.wpcf7-form .wpcf7-form-control::placeholder {
	color: #4b777b;
	opacity: 0.7;
}

/* Textarea specific */
.wpcf7-form .wpcf7-textarea {
	min-height: 150px;
	resize: vertical;
}

/* Paragraph spacing */
.wpcf7-form p {
	margin-bottom: 1.25rem;
}

/* Submit button */
.wpcf7-form .wpcf7-submit {
	font-family: 'Univers Bold Condensed', var(--wp--preset--font-family--univers-bold), sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: #005a6c;
	color: #fff;
	border: 2px solid #005a6c;
	border-radius: 4px;
	padding: 12px 32px;
	cursor: pointer;
	transition: all 200ms ease;
}

.wpcf7-form .wpcf7-submit:hover {
	background: #4b777b;
	border-color: #4b777b;
	box-shadow: 0 4px 12px rgba(0, 90, 108, 0.1);
}

.wpcf7-form .wpcf7-submit:focus {
	outline: 2px solid #005a6c;
	outline-offset: 2px;
}

/* Validation error state */
.wpcf7-form .wpcf7-not-valid {
	border-color: #fccab0;
}

.wpcf7-form .wpcf7-not-valid-tip {
	color: #005a6c;
	font-size: 13px;
	margin-top: 0.25rem;
}

/* Response messages */
.wpcf7-form .wpcf7-response-output {
	margin: 1rem 0 0 0;
	padding: 1rem;
	border-radius: 4px;
}

.wpcf7-form.sent .wpcf7-response-output {
	background: #b4d8d1;
	border-color: #005a6c;
	color: #005a6c;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
	background: #fccab0;
	border-color: #fccab0;
	color: #005a6c;
}