/**
 * Theme Name:        Hall Template
 * Theme URI:         
 * Description:       
 * Version:           1.0.0
 * Author:            IFG
 * Author URI:        
 * Tags:              
 * Text Domain:       
 * Domain Path:       
 * Tested up to:      
 * Requires at least: 
 * Requires PHP:      
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
   /* ?COLORS */
   --bg-light:                 #F9F9F9;        
   --text-darker:              #0D0D0D;   
   --text-dark:                #1A1A1A;     
  
   --bg-dark:                  #1E1E2F;
   --text-light:               #AAAAAA;     
   --text-lighter:             #DDDDDD;    

   --primary-gradient:         #c00;
   --primary-gradient-transparent:         linear-gradient(125deg,rgb(255, 255, 255) 0%, rgb(244, 250, 255)50%);
   --primary-rgb:              0, 85, 164;
   --primary-color-lighter:    #c00;
   --primary-color:            #c00;
   --primary-color-darker:     #c00;
   --primary-color-contrast:   #FFFFFF;

   --secondary-gradient:       linear-gradient(125deg,rgb(176, 3, 3) 0%, rgba(148, 0, 0, 1) 50%);
   --secondary-rgb:            164, 0, 0; 
   --secondary-color-lighter:  #FF0000;
   --secondary-color:          #900;
   --secondary-color-darker:   #900;
   --secondary-color-contrast: #FFFFFF;

   --accent-gradient:          #FFFFFF;
   --accent-rgb:               230, 180, 0;
   --accent-color-lighter:     rgb(163, 120, 120);
   --accent-color:             #900;
   --accent-color-darker:      #900;
   --accent-color-contrast:    #1A1A1A;

   --white-color:              #FFFFFF;
   --dark-color:               #1E1E2F;

   /* ?TEXT */
   --text-xl:        2.25rem; /* 36px */
   --text-lg:        1.5rem;  /* 24px */
   --text-md:        1rem;    /* 16px */
   --text-sm:        0.875rem;/* 14px */
   --text-xs:        0.75rem; /* 12px */

   --font-bold:      700;
   --font-medium:    500;
   --font-regular:   400;
   --font-light:     300;

   --line-title:     1.2;
   --line-normal:    1.6;
   --line-tight:     1.4;

   --font-title: 'Merriweather', serif;
   --font-subtitle: 'Merriweather', serif;
   --font-body: 'Open Sans', sans-serif;

   --main-menu-height: 4rem;

   --border-radius-lg: 6px;
   --border-radius-md: 3px;
   --border-radius-sm: 1px;

   --p-y-section: 5rem;
}

/* !START GLOBAL */
*, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

::-webkit-scrollbar {
   width: 8px;            /* Lățimea barei verticale */
   height: 8px;           /* În cazul scroll-ului orizontal */
}

::-webkit-scrollbar-track {
   background: transparent;  /* Fundalul pistei (opțional) */
}

::-webkit-scrollbar-thumb {
   background-color: #333;    /* Gri închis */
   border-radius: 10px;       /* Rotunjire */
   border: 2px solid transparent;  /* Spațiere între thumb și track */
   background-clip: padding-box;
}

html {
   scroll-behavior: smooth;
   height: 100%;
   scrollbar-width: thin;
   scrollbar-color: #333 transparent;
   line-height: var(--line-normal);
}

body {
   background-color: var(--bg-light);
   color: var(--text-darker);
   font-size: var(--text-md);
   font-weight: var(--font-regular);
   line-height: var(--line-normal);
   overflow-x: hidden;
   min-height: 100vh;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-wrap: break-word;
   word-break: break-word;
   position: relative;
}

a {
  text-decoration: none;
   color: inherit;
   transition: color 0.2s ease-in-out;
}

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

img {
   max-width: 100%;
   /* height: auto; */
   /* display: block; */
}

button {
   font: inherit;
   background: none;
   border: none;
   cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
   font-weight: var(--font-bold);
   line-height: var(--line-title);
   color: var(--text-dark);
   font-family: var(--font-title);
}

.page-container p {
   line-height: var(--line-tight);
   font-family: var(--font-body);
   margin-bottom: .5rem;
}

ul {
   list-style: none;
}

input, textarea, select {
   font: inherit;
   padding: 0.5rem;
   border-radius: 4px;
   border: 1px solid #ccc;
   width: 100%;
}

.search {
  width: 100%;
}

.search-form {
  display: flex;
  width: 100%;
}

.search-form label {
  width: 100%;
}

.search-form button {
  background: var(--accent-color);
  color: var(--accent-color-contrast);
  border-color: var(--accent-color-darker);
  transition: 100ms all ease-in-out;
  font-size: 1.1rem;
  padding: .6rem 1rem;
  border: 2px solid var(--accent-color-darker);
  border-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: var(--border-radius-md);
  border-bottom-right-radius: var(--border-radius-md);
}

.search-form button:hover {
  background-color: var(--accent-color-lighter);
}

.search-form input {
  width: 100%;
  border: 2px solid var(--accent-color-darker);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.search-form input:focus {
  border: 2px solid var(--accent-color) !important;
  outline: none;
}
/* !END GLOBAL */

/* !START UTILITIES */
.container {
   max-width: 1300px;
   margin-inline: auto;
   padding-inline: 1rem;
}

.page-title {
   font-family: var(--font-title);
   font-size: var(--text-xl);
   line-height: var(--line-title);
}

.pt-offset {
   padding-top: calc(var(--main-menu-height));
}
/* !END UTILITIES */

#arrow-top {
   position: fixed;
   right: 1rem;
   bottom: 1rem;
   background: var(--primary-color);
   color: var(--primary-color-contrast);
   padding: .5rem 1rem;
   font-size: var(--text-md);
   border-radius: var(--border-radius-md);
   box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, .1);
   transition: 100ms all ease-in-out;
   transform: translateY(10rem);
   pointer-events: none;
}

#arrow-top.show {
   transition: 100ms all ease-in-out;
   transform-origin: bottom;
   transform: translateY(0);
   pointer-events: all;
   z-index: 999;
}

#arrow-top:hover {
   background: var(--primary-color-lighter);
}

/* !START PAGE */
.page-container h1,
.page-container h2,
.page-container h3,
.page-container h4,  
.page-container h5,
.page-container h6 {
   font-family: var(--font-title);
   color: var(--text-dark);
}

.page-container .main-content h1,
.page-container .main-content h2,
.page-container .main-content h3,
.page-container .main-content h4,  
.page-container .main-content h5,
.page-container .main-content h6 {
   margin-bottom: 1rem;
}

.page-container p {
   font-family: var(--font-body);
   color: var(--text-darker);
   line-height: 1.6;
   /* letter-spacing: 1px; */
   font-size: var(--text-md);
}

.page-container {
   display: grid;
   grid-template-columns: 25% 75%;
   gap: 1rem;
   align-items: start;
}

.page-container .main-content li {
   list-style-type: disc;
   margin-left: 1rem;
}

.page-container .main-content a {
   color: #900;
}

.page-container .main-content a:hover {
   text-decoration: underline;
}

.page-container > .sidebar-area {
}

.page-container .page-title {
   position: relative;
   width: fit-content;
   text-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);
   padding-bottom: 1rem;
}

.page-container .page-title::after {
  content: "";
  position: absolute;
  width: 40%;
  height: 5px;
  background: var(--accent-color);
  bottom: 10%;
  left: 0;
  border-radius: var(--border-radius-sm);
}

.page-container > .main-content {
   background: white;
   border-radius: var(--border-radius-md);
   /* box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); */
   padding: 1rem;
   min-height: fit-content;
   border-bottom: .1px solid rgba(var(--primary-rgb), .1);
   border-right: .1px solid rgba(var(--primary-rgb), .1);
}

.page-container > .main-content > .meta-data {
   display: flex; 
   align-items: center;
   justify-content: space-between;
   gap: .5rem;
   padding-bottom: .5rem;
   font-size: var(--text-sm);
   flex-wrap: wrap;
   width: 100%;
}

.page-container > .main-content > .meta-data a {
   color: var(--accent-color-darker);
}

.page-container > .main-content > .meta-data > .breadcrumbs {
   /* flex: 1; */
   padding: .2rem .5rem;
   display: flex;
   gap: .2rem;
   background: rgba(var(--accent-rgb), .1);
   border-radius: var(--border-radius-lg);
}

.page-container > .main-content > .meta-data > .data {
   display: flex; 
   align-items: center;
   justify-content: center;
   gap: .5rem;
}

.page-container > .main-content > .meta-data .tags,
.page-container > .main-content > .meta-data .categories {
   display: flex; 
   align-items: center;
   justify-content: center;
   gap: .5rem;
}

.page-container > .main-content > .meta-data .categories .category {
   background: rgba(var(--secondary-rgb), .1);
   color: var(--secondary-color-darker);
}

.page-container > .main-content > .meta-data .tags .tag {
   background: rgba(117, 117, 117, 0.1);
}

.page-container > .main-content > .meta-data .author {
   color: rgba(0, 0, 0, .6);
}

.page-container > .main-content > .meta-data .tags .tag,
.page-container > .main-content > .meta-data .author,
.page-container > .main-content > .meta-data .publish-date,
.page-container > .main-content > .meta-data .categories .category {
   border-radius: var(--border-radius-md);
   padding: .1rem .4rem;
   display: flex; 
   align-items: center;
   justify-content: center;
   gap: .3rem
}  

.page-container > .main-content > .meta-data .publish-date {
   font-style: italic;
   background: rgba(var(--primary-rgb), .1);
   color: var(--primary-color-darker);
}

.page-container .parent-page-sublinks {
   display: flex;
   align-items: start;
   justify-content: center;
   flex-direction: column;
   width: 100%;
   gap: 1rem;
}

.page-container .parent-page-sublink {
   width: 100%;
   background: #c00;
   background: #900;
   border: 1px solid var(--accent-color-darker);
   border-radius: var(--border-radius-md);
   padding: .5rem 1rem;
   color: #fff !important;
   display: flex;
   align-items: center;
   justify-content: space-between;
   box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);
   transition: all 300ms ease-in-out;
}

.page-container .parent-page-sublink i {
   opacity: 0;
   transform: translateX(-20px);
   transition: all 300ms ease-in-out;
   font-size: 1.2rem;
}

.page-container .parent-page-sublink:hover {
   text-decoration: none !important;
   transform: translateX(10px);
   letter-spacing: 1px;
}

.page-container .parent-page-sublink:hover i {
   opacity: 1;
   transform: translateX(0px);
}

/* !START bottom page cards */
.page-container > .main-content > .page-bottom-cards {
   display: flex;
   align-items: stretch;
   justify-content: center;
   flex-direction: row;
   width: 100%;
   gap: 0;
   flex-grow: 1;
   margin-top: 1rem;
   border-radius: var(--border-radius-md);
   position: relative;
}

.page-container > .main-content > .page-bottom-cards .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .3);
   border-radius: var(--border-radius-md);
   z-index: -1;
}

.page-container > .main-content > .page-bottom-cards .card {
   flex: 1;
   padding: 1rem;
   position: relative;
   transform-origin: left;
   transition: 100ms all ease-in-out;
   background: white;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.page-container > .main-content > .page-bottom-cards .card:nth-child(1):hover {
   transform: scaleX(1.1);
   z-index: 5;
   border: 1px solid rgba(var(--primary-rgb), 1) !important;
   box-shadow: 1px 1px 5px 5px rgba(0, 0, 0, .1);
}

.page-container > .main-content > .page-bottom-cards .card:nth-child(2):hover {
   transform: scaleX(1.1);
   z-index: 5;
   border: 1px solid rgba(var(--secondary-rgb), 1) !important;
   box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, .2);
}

.page-container > .main-content > .page-bottom-cards .card:nth-child(3):hover {
   transform: scaleX(1.1);
   z-index: 5;
   border: 1px solid rgba(var(--accent-rgb), 1) !important;
   box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, .2);
}

.page-container > .main-content > .page-bottom-cards .card:hover > .page-bottom-card-arrow {
   opacity: 1;
   transform: translateX(0);
}

.page-container > .main-content > .page-bottom-cards .card .right-arrow {
   position: absolute;
   top: 1rem;
   right: 1rem;
   transform: translateX(-300%);
   font-size: 1.5rem;
   opacity: 0;
   transition: 300ms all ease-in-out;
}

.page-container > .main-content > .page-bottom-cards .card:nth-child(1) {
   border: 1px solid rgba(var(--primary-rgb), .2);
   border-bottom-left-radius: var(--border-radius-md);
   border-top-left-radius: var(--border-radius-md);
}

.page-container > .main-content > .page-bottom-cards .card:nth-child(1) .right-arrow {
   color: var(--primary-color);
}

.page-container > .main-content > .page-bottom-cards .card .btn {
   cursor: pointer;
   align-self: end;
   font-style: italic;
}

.page-container > .main-content > .page-bottom-cards .card:nth-child(1) .btn {
   color: var(--primary-color);
}

.page-container > .main-content > .page-bottom-cards .card:nth-child(2) {
   border: 1px solid rgba(var(--secondary-rgb), .2);
}

.page-container > .main-content > .page-bottom-cards .card:nth-child(2) .right-arrow {
   color: var(--secondary-color);
}

.page-container > .main-content > .page-bottom-cards .card:nth-child(2) .btn {
   color: var(--secondary-color);
}

.page-container > .main-content > .page-bottom-cards .card:nth-child(3) {
   border: 1px solid rgba(var(--accent-rgb), .2);
   border-bottom-right-radius: var(--border-radius-md);
   border-top-right-radius: var(--border-radius-md);
}

.page-container > .main-content > .page-bottom-cards .card:nth-child(3) .right-arrow {
   color: var(--accent-color);
}

.page-container > .main-content > .page-bottom-cards .card:nth-child(3) .btn {
   color: var(--accent-color);
}
/* !END bottom page cards */

/* ! START WORDPRESS ELEMENTS */
.wp-block-file__button {
   background: var(--accent-gradient) !important;
   padding: .3rem 1rem;
   color: var(--accent-color-contrast) !important;
   border-radius: var(--border-radius-md);
   transition: all 100ms ease-in-out;
   border: 1px solid var(--accent-color-darker);
}

.wp-block-file__button:hover {
   text-decoration: none !important;
}
/* !END WORDPRESS ELEMENTS */
@media screen and (max-width: 768px) {
  .page-container {
      grid-template-columns: 1fr;
  }

  .page-container > .sidebar-area {
      order: 2;
  }

  .page-container > .main-content {
      order: 1;
  }
}
/* !END PAGE */