/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five 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.
Requires at least: 6.7
Tested up to: 6.7
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: twentytwentyfive
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
*/

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

/* 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;
}





#headerimg{
	display: none;
}
/* Reset and basic styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Akkurat', Arial, sans-serif;
}

body {
    line-height: 1;
    background: #c489b2;
    color: #fff;
    font-family: Akkurat, Arial, sans-serif;
    overflow-y: auto;
    overflow-x: hidden;
	display: flex;
	min-height: 100vh;
}

/* Header styles */
main{
	width: 80%;
	padding: 20px;
}

.nav-logo-links{
	display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    width: 100%;
}
.nav-links {
    display: flex;
    justify-content: space-between;  /* Align items at both ends */
    align-items: center;
    width: 100%;
	flex-direction: column;
}

.nav-links .link {
    font-size: 1rem;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    flex: 0 1 auto; /* Ensures that links don't stretch unnecessarily */
}

.nav-links .logo {
    flex: 0 1 auto; /* Keeps the logo centered */
    text-align: center;
}

.nav-links .logo img {
    max-width: 500px;
    width: 100%;
}

header {
    z-index: 100;
    top: 0;
    left: 0;
    width: 20%;
    background: #abd0b6b8;
    padding: 16px 0;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    max-width: 1200px;
    margin: 0 auto;
}

header nav a {
    font-family: Akkurat;
    font-size: 0.875rem;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}
.img-profil img{
	border: 2px solid white;
	border-radius: 100%;
	width: 150px;
	height: 150px;
}
.logo img {
    max-width: 55vw;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
}

/*filter*/
.filter-item {
    cursor: pointer;
}
.filters {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filter-item {
    padding: 0.5rem 1rem;
    border: 2px solid white;
    border-radius: 20px;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: bold;
}

.filter-item:hover {
    background-color: white;
    color: #c489b2;
}

.filter-item.active {
    background-color: white;
    color: #c489b2;
    border-color: white;
}

/* Grid layout */
.grid__layout {
    max-width: 100%; /* Adjust as needed */
    margin: 0 auto;
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns */
    gap: 1rem;
    margin-top: 3rem;
}

.grid__layout img {
    width: 100%;
    height: 100%; /* Ensure the image fills the container */
    object-fit: cover; /* Maintain aspect ratio while covering the area */
    display: block; /* Remove extra space below images */
}

.grid__layout > div {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.grid__layout > div[style*="display: none"] {
    opacity: 0;
    transform: scale(0.9);
}

/* Specific image placements */
.img-small {
    grid-row: span 1;
    grid-column: span 1;
}

.img-medium {
    grid-row: span 2;
    grid-column: span 1;
}

.img-wide {
    grid-row: span 1;
    grid-column: span 2;
}

.img-wide-large {
    grid-row: span 1;
    grid-column: span 3;
}

.img-large {
    grid-row: span 2;
    grid-column: span 2;
}

.img-xl {
    grid-row: span 5;
    grid-column: span 5;
}

/* Image container and alt text */
.image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.alt-text {
    position: absolute;
    top: 10px; /* Adjust vertical position */
    left: 10px; /* Adjust horizontal position */
    color: #fff; /* Text color */
    padding: 4px 8px; /* Padding for better readability */
    font-size: 0.875rem; /* Font size */
    border-radius: 4px; /* Rounded corners */
    z-index: 2; /* Ensure text is above the image */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-container:hover .alt-text {
    opacity: 1;
}

/* Position classes for alt text */
.alt-text.top-left { top: 10px; left: 10px; }
.alt-text.top-right { top: 10px; right: 10px; }
.alt-text.bottom-left { bottom: 10px; left: 10px; }
.alt-text.bottom-right { bottom: 10px; right: 10px; }

/* Mobile styles */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Adjust font size for smaller screens */
		flex-direction: column;
    }
	header{
		width: 100%;
	}
	main{
		width: 100%;
	}

    .grid__layout {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for mobile */
        margin-top: 0rem;
    }

    .img-medium, .img-large, .img-wide, .img-wide-large, .img-xl {
        grid-row: span 1; /* Reset row spans for mobile */
        grid-column: span 2; /* Make larger images span 2 columns */
    }

    .small-mobile {
        grid-row: span 1; /* Reset row spans for mobile */
        grid-column: span 1 !important;
    }

    .logo img {
        max-width: 80vw; /* Adjust logo size for mobile */
    }

    header nav a {
        font-size: 1rem; /* Larger font size for mobile */
    }

    .alt-text {
        font-size: 0.75rem; /* Adjust alt text size for mobile */
    }

    .nav-links.active {
        display: flex; /* Show links when menu is toggled */
    }
    
        .nav-links .link {
            font-size: 1.2rem; /* Larger font for mobile */
        }
    
        .nav-links .logo img {
            max-width: 150px; /* Adjust logo size for mobile */
        }
}

/* Responsive styles */
@media (max-width: 768px) {
    .grid__layout {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 0;
    }

    .img-medium, .img-large, .img-wide, .img-wide-large, .img-xl {
        grid-column: span 2;
    }

    .logo img {
        max-width: 80vw;
    }

    header nav a {
        font-size: 1rem;
    }
}