/*
Theme Name: Kajak klub Sombor
Theme URI: https://www.somborkayak.club
Description: Custom GeneratePress child theme for Kajak klub Sombor.
Author: Kajak klub Sombor
Author URI: https://www.somborkayak.club
Template: generatepress
Version: 0.3.0
Text Domain: kksombor
Requires at least: 7.0
Requires PHP: 8.3
*/

/*
 * Phase 3: brand asset, site shell (header, navigation, footer, content
 * layout) and Gutenberg homepage pattern support.
 */

:root {
	color-scheme: dark;
	--contrast: var(--wp--preset--color--white);
	--contrast-2: var(--wp--preset--color--light);
	--contrast-3: var(--wp--preset--color--muted);
	--base: var(--wp--preset--color--near-black);
	--base-2: var(--wp--preset--color--dark-gray);
	--base-3: var(--wp--preset--color--near-black);
	--accent: var(--wp--preset--color--petrol);
}

body,
.site,
.site-content,
.site-header,
.site-footer {
	background-color: var(--base);
	color: var(--contrast);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--contrast);
}

.entry-meta,
.entry-meta a {
	color: var(--contrast-3);
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--contrast);
}

/* Underline links only in real content, not navigation or Gutenberg buttons. */
:where(.entry-content, .entry-summary, .comment-content, .textwidget) a {
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
.button:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.button,
.wp-element-button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"] {
	background-color: var(--wp--preset--color--petrol-dark);
	color: var(--contrast);
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
}

.button:hover,
.button:focus,
.wp-element-button:hover,
.wp-element-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus {
	background-color: var(--accent);
	color: var(--base);
}

/* ==========================================================================
   Site header and logo (Phase 3)
   ========================================================================== */

.site-header,
.main-navigation {
	--kksombor-header-inline-padding: clamp(1rem, 4vw, 2rem);
}

.site-header .inside-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--kksombor-header-inline-padding);
}

/* Discreet white circular holder: the logo's black outer ring needs a light
   backing to stay visible on the dark header background. Targets the
   actual GeneratePress structure (.site-logo > a > img), which applies to
   both a Customizer logo and our generate_logo_output fallback markup. */
.site-logo > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--contrast);
	border-radius: 50%;
	padding: clamp(0.25rem, 1vw, 0.5rem);
	line-height: 0;
}

.site-logo > a img {
	display: block;
	width: clamp(2.75rem, 6vw, 4.5rem);
	height: clamp(2.75rem, 6vw, 4.5rem);
}

/* If the admin sets Appearance > Customize > Layout > Primary Navigation >
   Navigation Location > Float Right and GeneratePress nests the nav inside
   .inside-header, push it to the right on that row. */
.site-header .inside-header .main-navigation {
	background-color: transparent;
	margin-inline-start: auto;
}

/* ==========================================================================
   Primary navigation (Phase 3)
   ========================================================================== */

/* The nav bar itself matches the header/body near-black so it reads as one
   continuous dark shell, not a separate dark-gray rectangle around the menu. */
.main-navigation,
.main-navigation .inside-navigation {
	background-color: var(--base);
}

.main-navigation .inside-navigation {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--kksombor-header-inline-padding);
}

.main-navigation .main-nav {
	margin-inline-start: auto;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-bar-items {
	color: var(--contrast);
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease;
}

.main-navigation .menu-toggle {
	background-color: var(--base-2);
	color: var(--contrast);
	transition: background-color 180ms ease, color 180ms ease;
}

.main-navigation ul ul {
	background-color: var(--base-2);
}

.main-navigation .main-nav ul ul li a {
	background-color: var(--base-2);
	color: var(--contrast);
	text-decoration: none;
}

/* Optional CTA menu item. The administrator assigns this class to a menu
   item in Appearance > Menus; it is never added automatically. */
.main-navigation .main-nav ul li.kksombor-nav-cta > a {
	background-color: var(--wp--preset--color--petrol-dark);
	color: var(--contrast);
	padding-inline: var(--wp--preset--spacing--md);
	margin-inline-start: var(--wp--preset--spacing--sm);
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a,
.main-navigation .main-nav ul li[class*="current-menu-"]:focus > a,
.main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
	background-color: var(--accent);
	color: var(--base);
	box-shadow: inset 0 -3px 0 var(--contrast);
}

.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"]:hover > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"]:focus > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"].sfHover > a {
	background-color: var(--accent);
	color: var(--base);
	box-shadow: inset 0 -3px 0 var(--contrast);
}

/* ==========================================================================
   Footer (Phase 3)
   ========================================================================== */

.site-footer {
	border-top: 1px solid var(--base-2);
}

/* GeneratePress 3.6.1 structure is footer.site-info > div.inside-site-info.
   Only the inner container gets padding/max-width/type; the outer
   footer.site-info element stays a full-width surface. */
.site-footer .inside-site-info {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--md) clamp(1rem, 4vw, 2rem);
	font-size: var(--wp--preset--font-size--small);
	color: var(--contrast-2);
}

.site-footer a {
	color: var(--accent);
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--contrast);
}

/* ==========================================================================
   Content layout, no sidebar (Phase 3)
   ========================================================================== */

.site-content {
	padding-block: var(--wp--preset--spacing--xl);
}

.inside-article {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	margin-block-end: var(--wp--preset--spacing--xl);
}

.inside-article .entry-summary {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* Normal content blocks stay at reading width; alignwide/alignfull blocks
   (e.g. the homepage pattern's news section and its Query Loop) are allowed
   to expand past it instead of being capped by the entry content column. */
.inside-article .entry-content > *:not(.alignwide):not(.alignfull) {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.inside-article .entry-content > .alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.inside-article .entry-content > .alignfull {
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.entry-header {
	margin-block-end: var(--wp--preset--spacing--md);
}