/*
Theme Name: Rentalkovo
Theme URI: https://rentalkovo.sk
Author: RentalKovo
Author URI: https://rentalkovo.sk
Description: Block theme for RentalKovo.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rentalkovo
Tags: full-site-editing, block-patterns, block-styles, translation-ready, blog, one-column
*/

:root {
  /* --- Spacing System (Podla root.css) --- */
  --ratio: 1.1;
  --resize: 0.3vw;

  --s-10: calc(var(--s-9) / var(--ratio));
  --s-9: calc(var(--s-8) / var(--ratio));
  --s-8: calc(var(--s-7) / var(--ratio));
  --s-7: calc(var(--s-6) / var(--ratio));
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: calc(0.8 * 1rem + var(--resize));
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));

  /* --- Fonts & Colors (Zacinovane na pevno) --- */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-accent: 'Corinthia', cursive;

  --color-primary: #f5b313;
  --color-text: #ffffff;
  --color-text-muted: #cccccc;
  --color-bg-dark-1: #1A1A1A;
  --color-bg-dark-2: #2A2A2A;
  --hero-overlay-color: #2A2A2A;
  --hero-text-color: #ffffff;

  /* Footer (<rentalkovo-footer>): use theme vars so dark/light stay in sync */
  --color-footer: var(--color-text);
  --color-footer-bg: var(--color-bg-dark-2);

  /* Sidebar (rentalkovo-sidebar) – dark default */
  --sb-panel-bg: var(--color-bg-dark-2);
  --sb-link-color: var(--color-text);
  --sb-link-hover-bg: rgba(255, 255, 255, 0.05);
  --sb-border-color: rgba(255, 255, 255, 0.12);
}

/* 
* ------------------------------------------------------------------
*  Svetla Tema (Light Override)
* ------------------------------------------------------------------
*/
body.light-theme {
  --color-bg-dark-1: #ffffff;
  --color-bg-dark-2: #f4f6f8;
  --color-text: #050505;
  --color-text-muted: #555555;
  --hero-overlay-color: #ffffff;
  --hero-text-color: #050505;
  /* footer uses --color-text and --color-bg-dark-2, so no extra override needed */

  /* Sidebar – light theme */
  --sb-panel-bg: var(--color-bg-dark-2);
  --sb-link-color: var(--color-text);
  --sb-link-hover-bg: rgba(0, 0, 0, 0.04);
  --sb-border-color: rgba(0, 0, 0, 0.1);
}

/* Light theme header: biele pozadie, tmavý text */
body.light-theme rentalkovo-header {
  --color-header-bg: #ffffff;
  --color-header: #050505;
  --color-text: #050505;
}


body.light-theme .rentalkovo-hero .wp-block-cover__background {
  opacity: 0 !important;
}

/* 
* ------------------------------------------------------------------
*  Theme Toggle (Prepinac temy)
* ------------------------------------------------------------------
*/
.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--color-primary);
  color: #000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  border: none;
  transition: transform 0.2s;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.theme-toggle i {
  font-size: 1.5rem;
}

/*
* ------------------------------------------------------------------
*  Footer (<rentalkovo-footer> web component)
* ------------------------------------------------------------------
* Colors come from :root (--color-footer, --color-footer-bg); light-theme overrides above.
* Ensure the custom element displays and has space.
*/
rentalkovo-footer {
  display: block;
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
}
rentalkovo-footer:not(:defined) {
  min-height: 60px;
}

@media only screen and (max-width: 1000px) {
  ren-footer footer {
    padding-block: var(--s2);
  }
}

/* 
* ------------------------------------------------------------------
*  Global Styles (Zakladne styly & Resety)
* ------------------------------------------------------------------
*/
body,
p,
li,
input,
select,
textarea,
div {
  font-family: var(--font-body);
  font-size: var(--s0);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text);
}

html {
  height: 100%;
}

body {
  background-color: var(--color-bg-dark-1) !important;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Sticky footer: main wrapper grows to fill viewport when content is short */
body > .wp-site-blocks {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Propagate flex down to footer so margin-top: auto works (footer can be nested in blocks) */
.wp-site-blocks:has(rentalkovo-footer) *:has(rentalkovo-footer) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 
* ------------------------------------------------------------------
*  Hero Sekcia (Hlavny banner)
* ------------------------------------------------------------------
*/
body .wp-block-cover.rentalkovo-hero {
  min-height: calc(26.5 * var(--s6));
  /* ~872px Fluid Height */
  padding-top: var(--s6);
  padding-bottom: var(--s6);
  background-color: var(--color-bg-dark-1);

  /* Layout: Center content */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}



/* 
* ------------------------------------------------------------------
*  Feature Sekcie (Vlastnosti - Global Layout)
* ------------------------------------------------------------------
*/
.wp-block-group.reasons-section,
.wp-block-group.feature-section,
.wp-block-group.blog-section {
  padding-top: var(--s6);
  padding-bottom: var(--s6);
  background-color: var(--color-bg-dark-1) !important;
  color: var(--color-text);

  /* Flexbox Center */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Fluid Heights Ratios */
.wp-block-group.reasons-section {
  min-height: calc(15 * var(--s6));
  /* ~488px */
}

.wp-block-group.feature-section {
  min-height: calc(17.5 * var(--s6));
  /* ~577px */
  position: relative;
  overflow: visible;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Last Section Specific Height */
.wp-block-group.feature-section:last-of-type {
  min-height: calc(16.5 * var(--s6));
  /* ~540px */
}

/* Sirka kontentu (width constraint) */
.wp-block-group.feature-section>.wp-block-columns {
  max-width: 60rem !important;
  width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Section Titles (H2) */
.wp-block-heading.section-title,
.feature-section h2,
.wp-block-group.blog-section h2 {
  color: var(--color-text);
  font-size: calc(var(--s1) * 1.21);
  /* Scaled 1.21x (cca 20.7px) */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--s2);
  padding-bottom: 7px;
  text-align: center;
}

.wp-block-columns.reasons-grid {
  gap: var(--s2);
}

/* Reason Items (Ikony + Text) */
.reason-item .reason-icon {
  background-color: transparent;
  color: var(--color-primary);
  width: 3.75rem;
  height: 3.75rem;
  margin: 0 auto var(--s-1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reason-item .reason-icon i {
  font-size: 2.5rem;
}

.reason-item h3 {
  font-size: var(--s0);
  margin-bottom: var(--s-2);
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
}

.reason-item p {
  font-size: var(--s-1);
  color: var(--color-text-muted);
  line-height: 1.5;
  text-align: center;
}

.reason-item .wp-block-image.reason-icon-img {
  margin: 0 auto var(--s-1);
  max-width: 3.75rem;
  text-align: center;
}

/* Striedanie pozadia (Alternating BG) */
.feature-section.feature-odd {
  background-color: var(--color-bg-dark-2) !important;
}

.feature-section.feature-even {
  background-color: var(--color-bg-dark-1) !important;
}

.feature-section p {
  font-size: var(--s-1);
  /* Scaled down ~14.1px */
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.7;
  margin-top: var(--s-2);
  margin-bottom: var(--s-2);
  text-align: center;
}

.feature-section .wp-block-buttons {
  display: flex;
  justify-content: center;
  margin-top: var(--s1);
}

.wp-block-post-title {
  color: white;
  font-size: calc(1.5 * var(--s6));
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 4px 5px rgba(0, 0, 0, 0.6);
  max-width: 25ch;
}

.wp-block-cover__background.has-background-dim {
  display: none;
}
a:where(:not(.wp-element-button)) {
  text-decoration: underline;
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
}
.wp-block-quote.is-layout-flow p{
  padding-inline-start: var(--s-1);
  border-inline-start: 2px solid var(--color-primary);
  max-inline-size: 65ch;
}

/* Feature Images (Obrazky v sekciach) */
.feature-section .wp-block-columns img {
  width: auto !important;
  max-width: 100%;
  max-height: 310px !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
  background-color: #ffffff;
  /* padding: var(--s1); */
  border-radius: var(--s-10);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  object-fit: contain;
}

/* Bez tienov pre light mode */
body.light-theme .feature-section .wp-block-columns img {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}

/* 
* ------------------------------------------------------------------
*  Sipky (Arrows - Separators)
* ------------------------------------------------------------------
*/
.wp-block-image.section-arrow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 45% !important;
  max-width: 25rem !important;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  transform: translateY(50%);
}

.wp-block-image.section-arrow img {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
}

/* Flip sipky podla typu sekcie */
.feature-section.feature-odd .section-arrow {
  transform: translateY(50%) scaleX(1);
}

.feature-section.feature-even .section-arrow {
  transform: translateY(50%) scaleX(-1);
}

/* Skryt sipky na mobile */
@media (max-width: 768px) {
  .wp-block-image.section-arrow {
    display: none;
  }
}

/* 
* ------------------------------------------------------------------
*  Tlacitka (Buttons)
* ------------------------------------------------------------------
*/
.wp-block-button.rentalkovo-btn .wp-block-button__link {
  background-color: var(--color-primary) !important;
  color: #050505 !important;
  border-radius: 50px !important;
  padding: 0 32px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  font-weight: 500;
  text-transform: none;
  font-size: 14px;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
}

.wp-block-button.rentalkovo-btn .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 
* ------------------------------------------------------------------
*  Accordion – Dark version
* Supports: core/accordion (wp-block-accordion) + core/details (wp-block-details)
* ------------------------------------------------------------------
*/

/* core/accordion block (wp-block-accordion) */
.wp-block-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wp-block-accordion-item {
  background-color: var(--color-bg-dark-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  overflow: hidden;
}

.wp-block-accordion-heading {
  margin: 0;
  font-size: 1em;
}

.wp-block-accordion-heading__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}

.wp-block-accordion-heading__toggle:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.wp-block-accordion-heading__toggle-icon {
  flex-shrink: 0;
  font-size: 1em;
  font-weight: 400;
}

.wp-block-accordion-panel {
  padding: 0 1.25rem 1.25rem;
  color: var(--color-text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wp-block-accordion-item.is-open .wp-block-accordion-panel {
  padding-top: 1rem;
  margin-top: 0 !important;
}

.wp-block-accordion-panel p {
  margin: 0 0 0.5em;
}

.wp-block-accordion-panel p:last-child {
  margin-bottom: 0;
}

/* core/details block (wp-block-details) */
.wp-block-details,
details.rentalkovo-accordion {
  background-color: var(--color-bg-dark-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.wp-block-details summary,
details.rentalkovo-accordion summary {
  padding: 1rem 1.25rem;
  color: var(--color-text);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transition: background-color 0.2s;
}

.wp-block-details summary::-webkit-details-marker,
details.rentalkovo-accordion summary::-webkit-details-marker {
  display: none;
}

.wp-block-details summary::after,
details.rentalkovo-accordion summary::after {
  content: '+';
  font-size: 1em;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.wp-block-details[open] summary::after,
details.rentalkovo-accordion[open] summary::after {
  content: '−';
}

.wp-block-details summary:hover,
details.rentalkovo-accordion summary:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.wp-block-details > *:not(summary),
details.rentalkovo-accordion > *:not(summary) {
  padding: 0 1.25rem 1.25rem;
  color: var(--color-text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.quote-group {
  padding-inline-start: var(--s-1);
  border-inline-start: 2px solid var(--color-primary);
}
.wp-block-details[open] > *:not(summary),
details.rentalkovo-accordion[open] > *:not(summary) {
  padding-top: 1rem;
}

/* Light theme: accordion uses light colors */
body.light-theme .wp-block-accordion-item {
  background-color: #f4f6f842;
  border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .wp-block-accordion-heading__toggle {
  color: var(--color-text);
}

body.light-theme .wp-block-accordion-heading__toggle:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

body.light-theme .wp-block-accordion-panel {
  color: var(--color-text-muted);
  border-top-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .wp-block-details,
body.light-theme details.rentalkovo-accordion {
  background-color: var(--color-bg-dark-2);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .wp-block-details summary,
body.light-theme details.rentalkovo-accordion summary {
  color: var(--color-text);
}

body.light-theme .wp-block-details summary:hover,
body.light-theme details.rentalkovo-accordion summary:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

body.light-theme .wp-block-details > *:not(summary),
body.light-theme details.rentalkovo-accordion > *:not(summary) {
  color: var(--color-text-muted);
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* 
* ------------------------------------------------------------------
*  Blog Sekcia
* ------------------------------------------------------------------
*/
.wp-block-group.blog-section {
  padding-top: var(--s4);
}

ul.wp-block-latest-posts.rentalkovo-blog-list {
  max-width: 1000px;
  margin: 0 auto;
}

/* Blog List Item (Karta clanku) */
ul.wp-block-latest-posts.rentalkovo-blog-list li {
  display: grid;
  grid-template-columns: 200px 1fr;
  /* Fixed Image 200px */
  grid-template-rows: min-content 1fr;
  gap: 0 var(--s2);
  position: relative;
  cursor: pointer;
  border-bottom: 1px solid white;
  /* Divider */
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-radius: 0;

  /* Reduced Padding */
  padding: var(--s-1);

  border-top: none;
  border-left: none;
  border-right: none;
  transition: background-color 0.2s;

  /* Height Constraints */
  max-height: 173px !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

ul.wp-block-latest-posts.rentalkovo-blog-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Clickable card hack */
ul.wp-block-latest-posts.rentalkovo-blog-list a.wp-block-latest-posts__post-title::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Blog Image Container */
ul.wp-block-latest-posts.rentalkovo-blog-list .wp-block-latest-posts__featured-image {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 200px !important;
  height: 100% !important;
  min-height: 150px !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}

/* Anchor tag fill */
ul.wp-block-latest-posts.rentalkovo-blog-list .wp-block-latest-posts__featured-image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Obrazok clanku */
ul.wp-block-latest-posts.rentalkovo-blog-list .wp-block-latest-posts__featured-image img {
  border-radius: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  min-height: 100% !important;
}

/* Titulok clanku */
ul.wp-block-latest-posts.rentalkovo-blog-list a.wp-block-latest-posts__post-title {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  font-family: var(--font-heading);
  font-size: var(--s1);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--s-2);
  padding-bottom: 0;
  display: block;
  transition: color 0.2s;
}

ul.wp-block-latest-posts.rentalkovo-blog-list li:hover a.wp-block-latest-posts__post-title {
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  color: var(--color-text);
}

/* Excerpt (kratky text) */
ul.wp-block-latest-posts.rentalkovo-blog-list .wp-block-latest-posts__post-excerpt {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: var(--s0);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: 0;

  /* Line Clamp (3 riadky) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.wp-block-latest-posts.rentalkovo-blog-list .wp-block-latest-posts__read-more {
  display: none;
}

/* Light Mode Blog Adjustments */
body.light-theme ul.wp-block-latest-posts.rentalkovo-blog-list li {
  border-bottom-color: #e0e0e0;
}

body.light-theme ul.wp-block-latest-posts.rentalkovo-blog-list li:hover {
  background-color: #f0f2f5;
  border-color: #ddd;
}

/* 
* ------------------------------------------------------------------
*  Mobilna Responsivita (Max width 768px)
* ------------------------------------------------------------------
*/
@media (max-width: 768px) {

  /* Sirka kontentu 90% */
  .rentalkovo-hero .wp-block-cover__inner-container,
  .wp-block-columns,
  ul.wp-block-latest-posts.rentalkovo-blog-list {
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Section Heights - Prioritize content fit */
  .rentalkovo-hero,
  .wp-block-group.reasons-section,
  .wp-block-group.feature-section,
  .wp-block-group.blog-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    min-height: 300px !important;
    height: auto;
  }

  body .wp-block-cover.rentalkovo-hero {
    min-height: 300px;
  }

  .rentalkovo-hero h1.hero-title {
    font-size: 2.5rem;
  }

  /* Mobile Blog List - Single Column Stack */
  ul.wp-block-latest-posts.rentalkovo-blog-list li {
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: flex-start;

    /* Padding ~1rem */
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 0;
    padding-right: 0;

    border: none;
    border-bottom: 1px solid #333;

    /* Reset heights for mobile */
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  ul.wp-block-latest-posts.rentalkovo-blog-list li:hover {
    background-color: transparent;
    transform: none;
  }

  /* Mobile Blog Image - Full Width, Fixed Height */
  ul.wp-block-latest-posts.rentalkovo-blog-list .wp-block-latest-posts__featured-image {
    width: 100% !important;
    max-width: 100% !important;
    height: 140px !important;
    margin-bottom: 1rem !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }

  ul.wp-block-latest-posts.rentalkovo-blog-list .wp-block-latest-posts__featured-image a {
    height: 100% !important;
    width: 100% !important;
    display: block;
  }

  ul.wp-block-latest-posts.rentalkovo-blog-list .wp-block-latest-posts__featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }

  /* Reset grid stuff */
  ul.wp-block-latest-posts.rentalkovo-blog-list a.wp-block-latest-posts__post-title,
  ul.wp-block-latest-posts.rentalkovo-blog-list .wp-block-latest-posts__post-excerpt {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  ul.wp-block-latest-posts.rentalkovo-blog-list a.wp-block-latest-posts__post-title {
    text-align: left;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  /* Hide Features Images on Mobile */
  .feature-section .wp-block-columns {
    flex-direction: column;
    display: flex;
  }

  .feature-section .wp-block-columns img {
    display: none !important;
  }

  .feature-section.feature-even .wp-block-columns {
    flex-direction: column-reverse;
  }
}

/* Desktop Fixes */
@media (min-width: 781px) {
  .feature-section .wp-block-column {
    flex-basis: 50% !important;
    max-width: 50% !important;
  }
}

/* HOMEPAGE 2 styles */


/* Homepage 2 Specific Styles */

/* Hero Section */
#homepage-hero {
  background-image: url('http://localhost:10094/wp-content/uploads/2026/02/Untitled-1.jpg') !important;
  background-position: center right !important;
  background-size: cover !important;
  align-items: center !important;
}

#homepage-hero .wp-block-cover__background {
  opacity: 0 !important;
  background-color: transparent !important;
}

#homepage-hero .wp-block-cover__inner-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  text-align: left !important;
  align-items: flex-start !important;
}

/* Hero Title — default grey only when Heading block has no text color (editor uses has-text-color) */
#homepage-hero h1.hero-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 3.5rem !important;
  line-height: 1.1 !important;
  text-align: left !important;
  text-shadow: none !important;
  margin-bottom: 20px !important;
  max-width: 600px !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#homepage-hero h1.hero-title:not(.has-text-color) {
  color: #555555;
}

#homepage-hero h1.hero-title span {
  color: #ffc107;
  display: block !important;
  margin-top: 5px !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Hero Paragraph — default grey only when block has no text color */
#homepage-hero .hero-text {
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  text-align: left !important;
  margin-bottom: 30px !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#homepage-hero .hero-text:not(.has-text-color) {
  color: #666666;
}

/*
 * Block editor: theme sets div/p/li to var(--color-text) (white). Inside the hero that
 * overrides WordPress text colors. Reset inheritance under #homepage-hero so picker/preset
 * colors apply; keep a dark base for elements without has-text-color.
 */
.editor-styles-wrapper #homepage-hero {
  color: #333333;
}

.editor-styles-wrapper #homepage-hero div:not(.has-text-color),
.editor-styles-wrapper #homepage-hero p:not(.has-text-color),
.editor-styles-wrapper #homepage-hero li:not(.has-text-color) {
  color: inherit;
}

/* Hero Button */
#homepage-hero .wp-block-buttons {
  margin: 0 !important;
}

/* #homepage-hero .wp-block-button__link {
  background-color: #ffc107 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 17px 40px !important;
  font-size: 1.1rem !important;
  font-family: 'Montserrat', sans-serif !important;
  border: none !important;
  text-decoration: none !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  margin-left: 0 !important;
  line-height: normal !important;
  height: auto !important;
  min-height: auto !important;
} */

#homepage-hero .wp-block-button__link:hover {
  background-color: #e0a800 !important;
  color: #ffffff !important;
}


/* Property Slider – place below 3 info panels (#homepage-features) in block editor */
rentalkovo-property-slider {
  display: block;
  width: 100%;
  max-width: 100%;
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}

/* Dark theme: card info strip matches site (shadow :host defaults are light; higher specificity wins) */
body:not(.light-theme) rentalkovo-property-slider {
  --rps-bg: var(--color-bg-dark-2);
  --rps-text: var(--color-text);
  --rps-muted: var(--color-text-muted);
  --rps-img-bg: #333333;
  --rps-control-bg: rgba(54, 54, 54, 0.92);
  --rps-control-color: #f0f0f0;
  --rps-control-hover-bg: #404040;
  --rps-placeholder-shimmer: linear-gradient(90deg, #2a2a2a 25%, #383838 50%, #2a2a2a 75%);
}

body.light-theme rentalkovo-property-slider {
  --rps-bg: #ffffff;
  --rps-text: #1a1a1a;
  --rps-muted: #666666;
  --rps-img-bg: #eeeeee;
  --rps-control-bg: rgba(255, 255, 255, 0.95);
  --rps-control-color: #333333;
  --rps-control-hover-bg: #ffffff;
  --rps-placeholder-shimmer: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%);
}
/* Prevent parent section from forcing tall height on property slider */
.wp-block-group:has(rentalkovo-property-slider) {
  min-height: auto !important;
  height: auto !important;
}

/* Feature Section (Reasons) */
#homepage-features {
  /* background-color: #ffffff !important; */
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

#homepage-features .reasons-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

#homepage-features .reason-item {
  /* background-color: #ffffff !important; */
  /* border: 1px solid #e0e0e0 !important; */
  border: 1px solid #141414 !important;
  border-radius: 30px !important;
  padding: 40px 30px !important;
  text-align: center !important;
  width: auto !important;
  margin: 0 !important;
  min-width: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex-basis: auto !important;
}

/* Feature Icons */
#homepage-features .reason-icon-img {
  margin-bottom: 20px !important;
  width: 60px !important;
  height: auto !important;
}

#homepage-features .reason-icon-img img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  filter: brightness(0) saturate(100%) invert(78%) sepia(35%) saturate(1915%) hue-rotate(1deg) brightness(101%) contrast(106%) !important;
}

/* Feature Headings - color without !important so WordPress editor can override */
.light-theme #homepage-features h3 {
  color: #666666;
}

.light-theme #homepage-features p {
  color: #666666;
}

body.light-theme #homepage-features .reason-item {
  border-color: #e0e0e0 !important;
}

/* Dark mode: reason-item cards have dark bg, white text - color without !important so editor can override */
body:not(.light-theme) #homepage-features .reason-item h3,
body:not(.light-theme) #homepage-features .reason-item p {
  color: #fff;
}


/* Feature Paragraphs */
#homepage-features p {
  font-size: 0.95rem !important;
  margin-block-start: 0;
  color: white;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}

/* Mobile Responsiveness for these sections */
@media (max-width: 768px) {
  #homepage-hero {
    background-position: center center !important;
    min-height: 500px !important;
  }

  #homepage-hero h1.hero-title {
    font-size: 2.5rem !important;
  }

  #homepage-features .reasons-grid {
    grid-template-columns: 1fr !important;
  }

  #homepage-features .reason-item {
    margin-bottom: 20px !important;
  }
}







@media only screen and (max-width: 767px) {
    
  #homepage-hero {
      position: relative;
      overflow: hidden;

    background-position: center center !important;
    min-height: 370px !important;
  }

  /* --- Overlay: Fixnutý smer zľava dole smerom doprava hore --- */
  #homepage-hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      
      /* Skúsime 45 stupňov, ale s posunutým začiatkom bielej */
      background: linear-gradient(45deg, 
          rgba(255, 255, 255, 0.95) 0%, 
          rgba(255, 255, 255, 0.6) 30%, 
          rgba(255, 255, 255, 0) 60%
      );
      
      /* Silný blur pod textom */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      
      /* MASKA: Toto povie, kde má byť blur viditeľný. 
         Čierna (black) = blur je vidieť, transparent = blur zmizne.
         Tento smer (45deg) vynúti blur vľavo dole a čistý obraz vpravo hore.
      */
      -webkit-mask-image: linear-gradient(152deg, black 18%, black 25%, transparent 55%);
      mask-image: linear-gradient(152deg, black 18%, black 25%, transparent 55%);
      
      z-index: 1;
      pointer-events: none;
  }

  #homepage-hero .wp-block-cover__inner-container {
      position: relative;
      z-index: 2;
  }

  /* --- Oranžový text so silnejším tmavým tieňom --- */
  #homepage-hero h1.hero-title span {
      color: #ffb703;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55);
  }

  /* --- Hlavný text s bielou žiarou --- */
  #homepage-hero h1.hero-title {
      text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, 1);
  }

  #homepage-hero p.hero-text {
      text-shadow: 0 0 15px rgba(255, 255, 255, 1);
      font-weight: 700;
      color: #000;
  }
}

/* Phone-only overrides (max-width: 767px) */
@media only screen and (max-width: 767px) {
  body .wp-block-cover.rentalkovo-hero {
    justify-content: start;
  }

  #homepage-hero {
    min-height: 454px !important;
    padding-top: 67px !important;
  }

  #homepage-hero p.hero-text {
    margin-bottom: 35px !important;
  }

  #homepage-hero h1.hero-title span {
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.55);
    font-weight: 600;
    font-size: 29px;
  }

  #homepage-hero h1.hero-title {
    font-size: 1.7rem !important;
    font-weight: 900 !important;
    font-family: montserrat;
  }

  #homepage-features .reason-item {
    box-shadow: var(--shallow-shadow, 0 2px 6px rgba(0, 0, 0, 0.25)) !important;
  }

  .rentalkovo-hero h1.hero-title span {
    font-size: calc(2 * var(--s1));
  }

  #homepage-features p {
    font-weight: 400;
  }

  .reason-item h3 {
    font-size: var(--s2);
  }

  .light-theme #homepage-features h3 {
    color: #000;
  }
}

/* Desktop-only overrides (min-width: 768px) */
@media (min-width: 768px) {
  #homepage-features .reason-item {
    z-index: 1;
    background-color: #3d3d3dcc !important;
    max-width: 241px;
  }

  body.light-theme #homepage-features .reason-item {
    background-color: #fbfbfb !important;
  }

  #homepage-features {
    margin-bottom: -190px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  #homepage-features .reasons-grid {
    margin-top: -272px !important;
  }
}