/*
Theme Name: Theme
Author: Serveis Creatius
Author URI: https://serveiscreatius.com
Description: 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.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.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: 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
*/

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


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

.wp-block-social-link {color:#f9f9f9; transition:color .2s;}
.wp-block-social-link:hover {transform:none; color:#269adb;}


/* ------------ COS ------------ */

h1, h2, h3, h4, h5, h6 { hyphens: auto; }
html { scroll-behavior: smooth; }
body {
    background-image:url("/site/themes/theme/media/texture-white-plaster.png");
    background-repeat:repeat;
}



/* ------------ HEADER ------------ */

header.wp-block-template-part {
	position:sticky;
	top:0;
	z-index:999;
	box-shadow: 0 0 7px rgba(0,0,0,0.1);
	border-bottom: 1px solid lightgray;
	background-color:rgba(255,255,255,.7);
	transition:background-color .2s;
}

/* ------------ MENU ------------ */


header.wp-block-template-part:focus,
header.wp-block-template-part:hover {background-color:white;}

header > .menu {box-shadow: -5px -5px 10px black;}

header ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {padding:.5em;}

header ul.wp-block-navigation li > a.wp-block-navigation-item__content:hover,
header ul.wp-block-navigation li > a.wp-block-navigation-item__content:active {color: #269adb !important;}

header ul.wp-block-navigation li.current-menu-item > a,
header ul.wp-block-navigation li.current-menu-item > a {font-weight:bold; color: #269adb !important;}

header ul.wp-block-navigation li.current-menu-ancestor svg {color: #269adb;}


/* ------------ MENU MOBIL ------------ */

#modal-1.is-menu-open ul,
#modal-1.is-menu-open li {width:100%; padding:.5em;}

#modal-1.is-menu-open .wp-block-navigation-link {
    padding-top: .5em; padding-bottom:.5em;
    border-bottom:1px dotted black;  /* Línia sota items secundaris */
}

ul.wp-block-navigation-submenu {border-top:1px solid black !important;} /* Línia sota items principals */
li.wp-block-navigation-submenu > a {padding: .5em !important;}


/* ------------ BLOG ------------ */

.wp-block-query li.wp-block-post {
    border:1px solid lightgray;
    background-color:rgba(255,255,255,.5);
}

/* Adjust padding for transparent headers */
.et_transparent_nav #main-content .container {
    padding-top: 58px !important;
}


@media screen and (min-width: 800px){
.post-columns {
    column-count: 3;        /* 3 columnes */
    column-gap: 24px;      /* separació entre columnes */
    column-rule: 1px solid #ccc; /* línia divisòria */
  
    /* opcional per navegadors antics */
    -webkit-column-count: 3;
    -moz-column-count: 3;
}}


/* ------------ BLOG ------------ */

div#footer-bottom > div{
    text-align: center;
}div#footer-bottom a {
    color: #edf000;
}

.mobile_menu_bar:before, .mobile_menu_bar:after, #top-menu li.current-menu-ancestor>a, #top-menu li.current-menu-item>a {
    color: #000000;
}

/* ------------ COMMENTS ------------ */

.comment__header span,
.comment__header time {display:none;}

.bypostauthor {
    padding:0 1em;
    background:rgba(0,0,0,.05);
}

/* ------------ BOTONS ------------ */


.wp-block-button a {
	border:2px solid var(--wp--preset--color--dark);
	transition:background .2s, color .2s;
}

.wp-block-button a:hover,
.wp-block-button a:focus {
	color:var(--wp--preset--color--dark);
}

.is-style-outline a:hover,
.is-style-outline a:focus,
.is-style-outline a:active {
    color:var(--wp--preset--color--light);
    background:var(--wp--preset--color--dark) !important;}
    
#commentform input.wp-block-button__link {
    width:100%;
    border:2px solid var(--wp--preset--color--dark);
    border-radius:0;
    transition:color .2s, background-color .2s;
}


/* ------------ MENU LEGAL ------------ */

#menu-legal {padding:1rem 0; list-style:none;}
#menu-legal li {display:inline; padding-right:1em;}



/* ------------ ANIMACIONS ------------ */


@keyframes aparicio {to { opacity: 1; transform: translateX(0);}}

.btn-left {opacity: 0; transform: translateX(-50px);}
.btn-right {opacity: 0; transform: translateX(+50px);}

.btn-left, .btn-right {animation: aparicio 1s ease forwards; animation-delay: 1s;}



  @keyframes anime-up {
    from {transform: translateY(100px); opacity:0;}
    to {transform: translateY(0); opacity:1;}}
    
  @keyframes anime-left {
    from {transform: translateX(-60px); opacity:0;}
    to {transform: translateX(0); opacity:1;}}
    
  @keyframes anime-right {
    from {transform: translateX(60px); opacity:0;}
    to {transform: translateX(0); opacity:1;}}
    
  @keyframes anime-down {
    from {transform: translateY(-100px); opacity:0;}
    to {transform: translateY(0); opacity:1;}}

  @supports (animation-timeline: view()) {
    .anime-up { animation: anime-up ease-in-out forwards; animation-timeline: view(); animation-range: entry 0% cover 50%;}
    .anime-left { animation: anime-left ease-in-out forwards; animation-timeline: view(); animation-range: entry 0% cover 50%;}
    .anime-right { animation: anime-right ease-in-out forwards; animation-timeline: view(); animation-range: entry 0% cover 50%;}
    .anime-down { animation: anime-down ease-in-out forwards; animation-timeline: view(); animation-range: entry 0% cover 50%;}
  }