/*
Theme Name: Sam First Theme
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: Sam
Author URI: https://ardomas.com
Description: Child of Twenty Twenty-Five Theme (original version 1.3). Just for learning. This original theme emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sam-first-theme
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

:root {

	--image-icon-theme-toggle: url("./assets/images/theme-toggle-icon.png");
	--image-theme-toggle-icon: url("./assets/images/theme-toggle-icon.svg");

	--href--color: #285d9e;
	--href--color--hover: #2a83f0;

	/* body color */
	--body--background--color: #f7f7f7;
	--body--text--color: #373737;

	/* Header Styles */
	--header--background--color: #e7e7e7;
	--header--text--color: #484848;
	--header--href--color--hover: #2a83f0;

	/* Footer Styles */
	--footer--background--color: #efefef;
	--footer--text--color: #3f3f3f;
	--footer--href--color: #285d9e;
	--footer--href--color--hover: #2a83f0;

	/* Navbar Menu */
	--navbar--rgba--background--color: rgba(0,0,0,0.0625);
	--navbar--menu--background--color: #c0c0c0;
	--navbar--menu--text--color: #1a4688;
	--navbar--menu--text--color--hover: #134ca1;

	/* Navbar Menu - Dropdown */
	--dropdown--background--color: #f7f7f7;
	--dropdown--text--color: #1a4688;
	--dropdown--item--text--color: #1a4688;
	--dropdown--item--background-color--hover: #134ca1;
	--dropdown--item--text--color--hover: #134ca1;

	/* Panel */
	--panel--background--color: #f7f7f7;
	--panel--text--color: #373737;
	--panel--href--color: #285d9e;
	--panel--href--color--hover: #2a83f0;

	/* form-input */
	--form--input--background--color: #f7f7f7;
	--form--input--color: #dfdfdf;
	--form--input--background--color--active: #f7f79c;
	--form--input--border--color--active: #2868d8;
	--form--input--box--shadow: #2868d8;
	--form--input--background--color--readonly--disabled: #808080;
	--form--input--color--readonly--disabled: #c0c0c0;

}

/* Body */
body.page-template-default {
	/*
    background-color: var(--wp--preset--color--background);
    color: var(--wp--preset--color--text);
	*/
	background-color: var(--body--background--color);
	color: var(--body--text--color);
}

.wpsg-dialog-form {
	background-color: var(--body--background--color);
	color: var(--body--text--color);
}

/*
Additional Theme Information for the Original Theme
---------------------------------------------------
Original Theme: Twenty Twenty-Five
Original Version: 1.3
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
 a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

a {
    cursor: pointer;
}

a { color: var(--href--color); }
a:hover { color: var(--href--color--hover); }

input.form-control, textarea.form-control, select.form-select, select.form-select option,
span.form-control {
	background-color: var(--form--input--background--color);
	color: var(--form--input--color);
}

span.form-control:hover {
	cursor: pointer;
	text-decoration: underline;
	background: var(--text--form--control--hover) !important;
}

input.form-control:active, textarea.form-control:active, select.form-select:active,
span.form-control:active,
input.form-control:focus, textarea.form-control:focus, select.form-select:focus,
span.form-control:focus  {
	background-color: var(--form--input--background--color--active);
	color: var(--form--input--color);
	border-color: var(--form--input--border--color--active);
	box-shadow: 0 0 8px var(--form--input--box--shadow);
}
input.form-control:read-only:disabled, textarea.form-control:read-only:disabled, select.form-select:read-only:disabled,
span.form-control:read-only:disabled {
	background-color: var(--form--input--background--color--readonly--disabled);
	color: var(--form--input--color--readonly--disabled);
}

button:disabled, button[disabled] {
	cursor: not-allowed;
}

.wpsg-page {
	background-color: var(--body--background--color);
	color: var(--body--text--color);
}

.row a {
	text-decoration: none;
}

.row.hover:hover {
    cursor: pointer;
    background-color: rgba(var(--bs-warning-rgb),0.0625);
}

.wp-block-site-title a { text-decoration: none; }
.wp-block-site-title a:hover { color: rgba(var(--bs-primary-rgb),0.9); }

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

.main-header {
	background-color: var(--header--background--color);
	color: var(--header--text--color);
}
.main-header a { color: var(--header--href--color); }
.main-header a:hover { color: var(--header--href--color--hover); }

.main-footer {
	background-color: var(--footer--background--color);
	color: var(--footer--text--color);
}
.main-footer a { color: var(--footer--href--color); }
.main-footer a:hover { color: var(--footer--href--color--hover); }

.navbar-menu {
    position: absolute;
    left: 0;
    top: -1.125em;
    width: 100%;
    line-height: 2.25em;
    margin-bottom: 1em;
}

.navbar-menu-item {
    text-decoration: none;
    margin: 0px;
    padding: 5px 12px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    transition-timing-function: ease-in-out;
    transition-delay: 5s;
}

.navbar-menu { background-color: var(--navbar--menu--background--color); }
.navbar-menu a, .navbar-menu-item { 
	color: var(--navbar--menu--text--color);
}
.navbar-menu a:hover, .navbar-menu-item:hover {
	color: var(--navbar--menu--text--color--hover);
}

.dropdown.dropdown-toggle { background-color: transparent; }
.dropdown ul.dropdown-menu { 
	background-color: var( --dropdown--background--color ); 
	color: var( --dropdown--text--color );
}
.dropdown ul.dropdown-menu li.dropdown-menu-item li.dropdown-menu-item a { color: var( --dropdown--item--text--color ); }
.dropdown ul.dropdown-menu li.dropdown-menu-item:hover  li.dropdown-menu-item a { 
	background-color: var( --dropdown--item--background--color--hover );
	color: var( --dropdown--item--text--color--hover ); 
}

/*
.wpsg-menu {
	background-color: var(--navbar--menu--background--color);
	color: var(--navbar--menu--text--color)
}

.wpsg-menu-item { color: var(--navbar--menu--text--color) }
.wpsg-menu-item:hover { color: var(--navbar--menu--text--color--hover) }
*/

.wpsg-panel {
	background-color: var(--panel--background--color);
	color: var(--panel--text--color);
}
.wpsg-panel a { color: var(--panel--href--color); }
.wpsg-panel a:hover { color: var(--panel--href--color--hover); }

.wpsg-icon {
	text-align: center;
}
.wpsg-icon i {
	padding-left: 0.5m; padding-right: 0.5em;
}

.margin-top-1 { margin-top: 2em; }
.margin-top-2 { margin-top: 4em; }
.margin-top-3 { margin-top: 6em; }

#theme-toggle-button {
    width: 64px;
	height: 32px;
    cursor: pointer;
    background-image: var(--image-theme-toggle-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}