/*
Theme Name: Silmariim
Theme URI: https://89.ee
Author: 89
Author URI: https://89.ee
Description: A custom WordPress theme for the Silmariim project. The layout is handcrafted to be clean, modern and responsive. All content is driven via the WordPress admin area or custom fields so the site owner can easily update text, images and links without touching any code.
Version: 1.0
License: GPL2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: silmariim
*/

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}


/* CSS Variables for consistent colour palette */
:root {
  --primary-color: #4a403a;    /* deep charcoal */
  --secondary-color: #a67c52;  /* earthy brown */
  --accent-color: #d28d5a;     /* warm copper */
  --light-bg: #f7f5f3;        /* very light beige */
  --dark-bg: #1f1f1f;         /* near black for footers */
  --text-color: #333333;
  --heading-color: #2a2a2a;
  --font-family-base: 'Poppins', sans-serif;
}

/* Base styles */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-family-base);
  color: var(--text-color);
  background-color: var(--light-bg);
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  margin-top: 0;
  line-height: 1.3;
    font-weight: 400;
    font-size: 1.8rem;
}
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color .2s ease-in-out;
}
a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}
p { margin-bottom: 1rem;     font-size: 0.9rem;
    font-weight: 300;}
img { max-width: 100%; height: auto; display: block; }

/* Container utility */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header and navigation */
header {
  background-color: var(--light-bg);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.navbar {
  display: flex;
  align-items: center;
  padding: 1rem 0;
    justify-content: center;
}
header .logo {
position: absolute;
    top: 10px;
    height: 60px;
    width: 60px;
    left: 3rem;
}
.navbar .logo a {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-color);
}
.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6rem;
}
.navbar ul li a {
    font-weight: 300;
    text-transform: uppercase;
}
.menu-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .navbar ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--light-bg);
    width: 220px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    padding: 1rem;
  }
  .navbar ul.open {
    display: flex;
  }
  .menu-toggle {
    display: block;
    color: var(--primary-color);
  }
}

/* Hero Section */
.hero {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  text-align: center;
}
.hero .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1;
  filter: brightness(0.6);
}
.hero .content {
  padding: 6rem 2rem;
}
.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
}
.cta-button {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.8rem 1.5rem;
  background-color: var(--primary-color);
  color: #ffffff;
  border-radius: 4px;
  transition: background-color .3s ease;
}
.cta-button:hover {
  background-color: var(--secondary-color);
}

/* Section spacing */
.section {
  padding: 4rem 0;
}
.section.alt {
  background-color: #fafafa;
}
.section-title {
  font-size: 2rem;
  margin-bottom: 3rem;
  text-align: left;
font-weight: 300;
}

/* About Section */
.about {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.about .text {
  flex: 1;
}
.about .image {
  flex: 1;
}
.about .image img {
  border-radius: 8px;
}
@media (max-width: 768px) {
  .about {
    flex-direction: column;
  }
}

/* Services Section */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.service {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.service i {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}
.service h3 {
  margin-bottom: 0.5rem;
}

/* Projects listing */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.project img {
}
.project h3 {
  margin-top: 0;
}

/* Blog posts grid */
.blog-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.blog-post {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.blog-post .meta {
  font-size: 0.9rem;
  color: #888888;
  margin-bottom: 0.5rem;
}

/* Contact page layout */
.contact-section {
  display: flex;
  gap: 2rem;
}
.contact-info {
  flex: 1;
}
.contact-form {
  flex: 1;
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-form input,
.contact-form textarea {
  padding: 0.8rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  width: 100%;
  font-family: var(--font-family-base);
}
.contact-form button {
  padding: 0.8rem;
  background-color: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color .3s ease;
}
.contact-form button:hover {
  background-color: var(--secondary-color);
}
.map {
  height: 300px;
  border-radius: 8px;
  margin-top: 1rem;
}
@media (max-width: 768px) {
  .contact-section {
    flex-direction: column;
  }
}

/* Footer */
footer {
  padding: 2rem 0;
  text-align: center;
}
footer p {
  margin: 0;
  float: left;
  margin-bottom: 30px;
}
footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}
footer ul li a {
  color: #cccccc;
  font-size: 0.9rem;
}
footer ul li a:hover {
  color: #ffffff;
}
.kirjutamulle  {
    border: 2px solid #515151;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
    font-weight: 400;
	max-width: 600px;
    margin-left: auto;
    margin-right: auto;
	    font-size: 17px !important;
}
.container.fullwidth  {
      max-width: 100%;
width: 94%;
}
.project-filter ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-filter li {
  cursor: pointer;
      padding: 0.5rem 0rem;
  border-radius: 4px;
  transition: background-color 0.2s;
    padding-right: 2rem;
}

.project-filter li.active,
.project-filter li:hover {
font-weight: 600;
}

.project-filter {
    margin-bottom: 10px;
}

/* Layout (from previous message) */
.page-layout {
  display: grid;
  grid-template-columns: 1.1fr 2fr 1fr;
  gap: 2.5rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}
.sidebar-left, .sidebar-right { border-radius:6px; }

/* Image block spacing in content */
.content .entry-content figure { margin: 2rem 0; }
.content .entry-content figcaption { 
  font-size: .95rem; 
  color: #6a6a6a; 
  margin-top: .5rem; 
}

/* Show image and caption side-by-side */
.entry-content figure.wp-block-image {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 2rem 0;
}

.entry-content figure.wp-block-image img {
  flex: 0 0 auto;
  width: 100%;      /* Image occupies roughly 60% of the figure’s width */
}

.entry-content figure.wp-block-image figcaption {
  flex: 1;
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #444;
  min-width: 200px;
}

/* Stack image and caption on narrow screens */
@media (max-width: 768px) {
  .entry-content figure.wp-block-image {
    flex-direction: column;
  }
  .entry-content figure.wp-block-image img {
    width: 100%;
  }
}

@media (max-width: 1000px) {
  .navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex
;
    gap: 2rem;
}
}

.wp-block-latest-posts.wp-block-latest-posts__list {
    list-style: none;
    padding-left: 30px;
    padding-top: 30px;
}

.wp-block-latest-posts.wp-block-latest-posts__list li {
    clear: both;
    overflow-wrap: break-word;
    padding-bottom: 15px;
}

#block-7 > ul > li > a {
    font-size: 0.9rem;
}

.project-breadcrumbs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: #666;
}

.project-breadcrumbs a {
  color: #333;
  text-decoration: none;
  width: auto !important;
      padding: 5px;
}

.project-breadcrumbs a:hover {
  text-decoration: underline;
}

/* Make sure inner parts stay inline */
.project-breadcrumbs .crumb-left,
.project-breadcrumbs .crumb-right {
  display: inline-flex;   /* instead of block */
  align-items: center;
}

/* Right link formatting */
.project-breadcrumbs .crumb-right {
  margin-left: 1rem;
  white-space: nowrap;
}



#content > section > div > article > div.wp-block-columns.is-layout-flex.wp-block-columns-is-layout-flex > div:nth-child(2) > p {
    margin-top: 0px;
}

/* Grid container */
.projects {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* max 4 columns */
  gap: 1.25rem; /* adjust spacing between cards */
}

/* Each project card */
.project {
  overflow: hidden;
}

/* Make images fill the card width neatly */
.project a,
.project img {
  width: 100%;
  height: auto;
}

/* (Optional) uniform card height with cropped images */
.project img {
  /* uncomment to force consistent heights
  height: 260px;
  object-fit: cover;
  */
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
  .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wp-block-image .aligncenter {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
	    margin-top: 20px;
}

/* Smooth fade alongside height animation */
.wp-block-details .accordion-inner {
  opacity: 0;
  will-change: height, opacity;
}

.wp-block-details[open] .accordion-inner {
  opacity: 1;
}

/* Keep native summary look, just nicer cursor */
.wp-block-details > summary {
  cursor: pointer;
}

/* Optional: subtle affordance */
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
  margin-left: .4rem;
  transition: transform .25s ease;
}
.wp-block-details[open] > summary::after {
  transform: rotate(180deg);
}

/* Desktop: show the menu normally */
.project-filter {
  margin-bottom: 1rem;
}
.project-filter #project-category-menu {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.project-filter #project-category-menu li {
  cursor: pointer;
  white-space: nowrap;
}

/* Mobile: collapse under the button */
@media (max-width: 768px) {
  .project-filter {
    position: relative;
  }

  .project-filter .filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    background: #fff;
	        font-family: 'Poppins', sans-serif;
  }

  /* hidden by default on mobile */
  .project-filter #project-category-menu {
    display: none;
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + .5rem);
    background: #fff;
    border: 1px solid #e6e6e6;
    padding: .75rem;
    max-height: 60vh;
    overflow: auto;
    box-shadow: 0 10px 24px rgba(0,0,0,.07);
  }
  /* shown when nav has .is-open */
  .project-filter.is-open #project-category-menu {
    display: block;
  }

  /* nicer touch targets */
  .project-filter #project-category-menu li {
    display: block;
    padding: .5rem .25rem;
  }
}

@media (max-width: 560px) {
  header .logo {
    left: 10px !important;
}
    .menu-toggle {
        display: block;
        color: var(--primary-color);
        float: right;
        right: 20px !important;
        position: absolute;
        top: 10px;
    }
	
	.navbar ul {
    gap: 2rem;
}
.navbar {
    height: 50px;
}

.wp-block-latest-posts.wp-block-latest-posts__list {
    padding-left: 0px;
}

.has-text-align-right {
    text-align: left;
}
.wp-block-image .alignright {
    float: left;
    margin: .5em 0 .5em 1em;
    margin-left: 0px;
}
}

@media (max-width: 768px) {
  header .logo {
    left: 10px !important;
}
    .menu-toggle {
        display: block;
        color: var(--primary-color);
        float: right;
        right: 20px !important;
        position: absolute;
        top: 10px;
    }
	
	.navbar ul {
    gap: 2rem;
}
.navbar {
    height: 50px;
}

.wp-block-latest-posts.wp-block-latest-posts__list {
    padding-left: 0px;
}


.has-text-align-right {
    text-align: left;
}
.wp-block-image .alignright {
    float: left;
    margin: .5em 0 .5em 1em;
    margin-left: 0px;
}
}

/* Desktop / default */
.page-layout {
  display: grid;
  grid-template-columns: 1.1fr 2fr 1fr;          /* left / content / right */
  grid-template-areas: "left content right";
  gap: 2.5rem;
}

/* Map children to areas */
.sidebar-left  { grid-area: left; }
.content       { grid-area: content; }
.sidebar-right { grid-area: right; }

/* Mobile: stack with LEFT first, then CONTENT, then RIGHT */
@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "content"
      "right";
    gap: 1.25rem;
  }

  /* make sure they use full width */
  .sidebar-left,
  .content,
  .sidebar-right {
    width: 100%;
  }

.project-breadcrumbs {
    display: block;
    justify-content: space-between;
    width: 100% !important;
    margin-left: 0px !important;
    padding-left: 0px !important;
    margin-bottom: 20px;
}
  

.project-breadcrumbs .crumb-right {
    margin-left: 0px;
}
  
}
@media (min-width: 768px) {

  .project-filter .filter-toggle {
    display: none;
  }
  
}

/* Container */
.project {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* The overlay with the title */
.project .overlay {
  position: absolute;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.project .overlay h3 {
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
  text-align: center;
  transform: translateY(10px);
  transition: transform 0.35s ease;
}

/* On hover, show the overlay */
.project:hover .overlay {
  opacity: 1;
  transform: translateY(0);
}

.project:hover .overlay h3 {
  transform: translateY(0);
}

/* Mobile: menu hidden by default */
@media (max-width: 768px) {
  header .navbar ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: #fff;
    padding: 0.75rem 1rem;
    margin: 0;
    list-style: none;
    border: 1px solid #eee;
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    z-index: 999;
  }
  header .navbar ul.is-open {
    display: block;
  }

  /* make sure the burger is visible on mobile */
  header .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    cursor: pointer;
  }

  /* optional spacing for header container */
  header .container.navbar {
    position: relative;
  }

  /* nicer touch targets */
  header .navbar ul > li {
    padding: .5rem 0;
  }
}