/*!
Theme Name: Candidsky
Theme URI: http://underscores.me/
Author: Dawn Creative
Author URI: http://underscores.me/
Description: Description
Version: 2.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: candidsky
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

candidsky is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

## Layouts
# Components
	- Captions
	- Galleries
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}


/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.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 !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Custom Blog Filter Styles - Dropdown Only
--------------------------------------------------------------*/

/* Define your primary pink color here for easy updates */
:root {
    --candidsky-pink: #FF69B4; /* Hot Pink - adjust to your desired shade */
    --candidsky-white: #fff; /* White for text */
    --candidsky-dark-grey: #333; /* Dark text for contrast */
}

/* Styling for the blog dropdown filter (select element) - SPECIFIC TO #posts */
#posts .blog_selector {
    width: 100%; /* Make the select box full width */
    max-width: 400px; /* Optional: Limit width on desktop if it stretches too wide */
    padding: 10px 15px; /* Adjust padding for desired size */
    font-size: 1rem; /* Adjust font size */
    line-height: 1.5; /* Ensure text sits nicely */
    border: 2px solid var(--candidsky-pink); /* Pink border */
    border-radius: 5px; /* Slightly rounded corners */
    background-color: var(--candidsky-white); /* White background */
    color: var(--candidsky-dark-grey); /* Dark text for dropdown */
    appearance: none; /* Remove default browser styling for select */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-6.5%200-12.1%203.2-15.6%208.1-3.6%204.9-3.9%2011.2-1%2016.4l132.8%20132.8c3.2%203.2%207%204.9%2011.2%204.9s8-1.7%2011.2-4.9L288%2090.8c2.9-5.1%202.6-11.4-.9-16.4z%22%2F%3E%3C%2Fsvg%3E'); /* Custom arrow for dropdown */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
    box-sizing: border-box; /* Include padding and border in width */
    margin-left: auto; /* Center the select box if max-width is set */
    margin-right: auto;
    display: block; /* Ensure it takes full width and centers if max-width is set */
}

/*
 * BEGIN Custom CSS for Blog Post Heading Size
*/

/* Change font size for the main blog post title */
.page-head h1 {
    font-size: 2.5em; /* Desired font size for desktop */
    line-height: 1.2; /* Adjust line height for better readability */
    /* Add any other styling you wish for the heading here */
}

/* Adjust for smaller screens (responsive design) */
@media (max-width: 768px) {
    .page-head h1 {
        font-size: 2em; /* Desired font size for mobile devices */
    }
}

/* END Custom CSS for Blog Post Heading Size */