/* -----------------------------------------------------------------------
   Kvetinarstvi u Janacka - brand layer on top of the Novo theme.

   Nothing here changes the theme's visual direction: it only sizes the
   brand logo, styles the few blocks the demo does not ship (contact cards,
   inquiry form, map) using the theme's own typography, spacing and accent
   colour (#D45C34), and tunes the inner-page banner height.
   ----------------------------------------------------------------------- */

/* --- logo ------------------------------------------------------------- */

.site-header .logo img,
.side-header .logo img {
  max-height: 56px;
  width: auto;
  height: auto;
}

@media (max-width: 991.98px) {
  .site-header .logo img {
    max-height: 42px;
  }
}

.site-footer .footer-logo {
  max-width: 280px;
  height: auto;
  display: block;
}

/* --- header contact block --------------------------------------------- */

.header-contact-block {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 28px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.header-contact-block .header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
}

.header-contact-block .header-phone i {
  font-size: 11px;
  color: #D45C34;
}

.header-contact-block .header-hours {
  opacity: 0.6;
  font-weight: 400;
}

@media (max-width: 1399.98px) {
  .header-contact-block .header-hours {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .header-contact-block {
    display: none;
  }
}

/* --- inner page banner ------------------------------------------------- */

.banner-area.page-banner .banner,
.banner-area.page-banner .banner.fixed-height {
  height: 72vh;
  min-height: 460px;
}

.banner-area.page-banner,
.banner-area.page-banner .banner-social-buttons {
  min-height: 460px;
}

.banner-area.page-banner .heading .sub-h {
  margin-top: 18px;
  letter-spacing: 0.22em;
  font-size: 13px;
  font-weight: 500;
}

/* --- body copy blocks -------------------------------------------------- */

.service-intro,
.about-text {
  max-width: 900px;
  margin: 0 auto;
}

.service-intro p,
.about-text p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8;
}

.about-text {
  margin-left: 0;
}

.about-text p + p {
  margin-top: 18px;
}

.button-container.center {
  text-align: center;
}

.button-container.center .button-style2 {
  display: inline-flex;
}

/* --- footer ------------------------------------------------------------ */

.site-footer .footer-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -webkit-column-gap: 18px;
  -moz-column-gap: 18px;
  column-gap: 18px;
}

.site-footer .footer-menu-item {
  margin-bottom: 11px;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.site-footer .footer-menu-item a {
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.site-footer .footer-menu-item a:hover {
  color: #D45C34;
  border-bottom-color: #D45C34;
}

@media (max-width: 991.98px) {
  .site-footer .footer-menu ul {
    -webkit-columns: 1;
    -moz-columns: 1;
    columns: 1;
  }
}

.site-footer .contact-row {
  margin-bottom: 8px;
  line-height: 1.6;
}

/* --- contact page ------------------------------------------------------ */

.contact-cards {
  margin-top: 12px;
  margin-bottom: 12px;
}

.contact-card {
  height: 100%;
  padding: 40px 30px;
  margin-bottom: 30px;
  background: #f7f7f7;
  text-align: center;
  transition: background 0.4s ease, transform 0.4s ease;
}

.contact-card:hover {
  background: #f0f0f0;
  transform: translateY(-4px);
}

.contact-card .icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 22px;
  border: 1px solid #D45C34;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D45C34;
  font-size: 17px;
}

.contact-card h5 {
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.contact-card .value,
.contact-card .value a {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  text-decoration: none;
}

.contact-card .value a:hover {
  color: #D45C34;
}

.map-block img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- inquiry form ------------------------------------------------------ */

.inquiry-form {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  max-width: 960px;
}

.inquiry-form .form-field {
  width: 50%;
  padding: 0 15px;
  margin-bottom: 26px;
}

.inquiry-form .form-field.full {
  width: 100%;
}

@media (max-width: 767.98px) {
  .inquiry-form .form-field {
    width: 100%;
  }
}

.inquiry-form .field-label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.inquiry-form .field-label .req {
  color: #D45C34;
}

.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form input[type="date"],
.inquiry-form textarea {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s ease;
}

.inquiry-form input:focus,
.inquiry-form textarea:focus {
  border-bottom-color: #D45C34;
}

.inquiry-form .check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.inquiry-form .check-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
}

.inquiry-form .check-item input {
  width: 16px;
  height: 16px;
  accent-color: #D45C34;
}

.inquiry-form .button-container {
  width: 100%;
  padding: 0 15px;
}

.inquiry-form button.button-style2 {
  cursor: pointer;
}

.inquiry-form .form-note {
  width: 100%;
  padding: 0 15px;
  margin-top: 22px;
  font-size: 13px;
  font-weight: 300;
  opacity: 0.7;
  text-align: center;
}

.inquiry-form .form-note a {
  color: #D45C34;
  text-decoration: none;
}


/* --- 404 ---------------------------------------------------------------- */

.error-404-block p {
  max-width: 560px;
  margin: 0 auto 34px;
  font-weight: 300;
}

/* --- misc --------------------------------------------------------------- */

.portfolio-block .filter-buttons .wrap {
  flex-wrap: wrap;
}

.gdpr-modal-block .text a {
  color: #D45C34;
}


/* --- header legibility over the banner ---------------------------------

   Novo's agency-white demo runs its header over deliberately dark slide
   photography, so the accent-coloured menu and the light logo read fine.
   The photographs used here are far brighter and both disappeared.

   Two theme-native mechanisms fix it, no new visual language:

   1. `.bg-overlay` is Novo's own banner overlay element. Adding it with the
      theme's `.color` layer plus a scrim behind the header restores the
      demo's tonality.
   2. Novo already ships `light-header` (white ink + light logo) and
      `dark-header` (dark ink + colour logo) and swaps the logo pair for each.
      `assets/js/site.js` puts the header in `light-header` while it sits over
      the banner and hands it back to `dark-header` once it scrolls onto the
      page, which is what those classes are for. */

.banner .item .bg-overlay .color {
  background-color: #1a1a1a;
  opacity: 0.3;
}

.banner .item .bg-overlay .header-scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom,
      rgba(18, 18, 18, 0.55) 0,
      rgba(18, 18, 18, 0.28) 120px,
      rgba(18, 18, 18, 0) 280px);
}

/* Scrolled onto the page: solid white bar, the values Novo's own stylesheet
   declares for `.dark-header.fixed-header.fixed`. */

.site-header.dark-header.fixed .header-main-block {
  background-color: #fff;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.07);
}

.site-header .header-main-block {
  transition: background-color 300ms ease-in-out;
}

/* Over the banner the phone strip follows the light ink. */

.site-header.light-header .header-contact-block {
  color: #fff;
}

.site-header.light-header .header-contact-block .header-hours {
  opacity: 0.85;
}

/* Novo paints the menu in the accent colour (`.navigation.hover-style2`),
   which reads well over the darkened banner but not on the white scrolled
   bar. Dark ink there, matching `.dark-header`'s own text colour. */

.site-header.dark-header .navigation,
.site-header.dark-header .navigation > .menu > li > a {
  color: #292929;
}


/* --- framed about photo -------------------------------------------------

   An offset outline in the accent colour plus a ground shadow — the same
   thin-line vocabulary Novo uses for `heading-block .with-line`.

   Two variables drive it. `--kj-inset` pulls the photo in from the screen
   edges so the grey band frames it; `--kj-offset` is how far the outline sits
   up and to the right of the photo. The outline goes right rather than left
   on purpose: offsetting it left runs off the viewport once the stretched
   row's side margin gets small (at 1024px the photo starts only 25px in),
   while the right lands in the text column's 60px inner padding on desktop,
   and inside `--kj-inset` on a phone. */

.kj-framed-media {
  position: relative;
  --kj-inset: 22px;
  --kj-offset: 13px;
}

.kj-framed-media .vc_column-inner {
  position: relative;
  z-index: 1;
  margin-left: var(--kj-inset);
  margin-right: var(--kj-inset);
  box-shadow: 0 24px 44px -26px rgba(26, 26, 26, 0.45);
}

.kj-framed-media:before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--kj-offset));
  right: calc(var(--kj-inset) - var(--kj-offset));
  left: calc(var(--kj-inset) + var(--kj-offset));
  bottom: var(--kj-offset);
  border: 1px solid #D45C34;
  pointer-events: none;
  z-index: 0;
}

/* Short accent rule in the outline's corner, echoing the section headings. */
.kj-framed-media:after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--kj-offset));
  right: calc(var(--kj-inset) - var(--kj-offset));
  width: 54px;
  height: 3px;
  background: #D45C34;
  pointer-events: none;
  z-index: 2;
}

@media (min-width: 768px) {
  .kj-framed-media {
    --kj-inset: 0px;
    --kj-offset: 30px;
  }

  .kj-framed-media .vc_column-inner {
    box-shadow: 0 34px 60px -34px rgba(26, 26, 26, 0.45);
  }

  .kj-framed-media:after {
    width: 74px;
  }
}

@media (min-width: 1400px) {
  .kj-framed-media {
    --kj-offset: 38px;
  }
}

/* --- header legibility over the banner ---------------------------------

   Novo's agency-white demo runs its header over deliberately dark slide
   photography, so the accent-coloured menu and the light logo read fine.
   The photographs used here are far brighter and both disappeared.

   Two theme-native mechanisms fix it, no new visual language:

   1. `.bg-overlay` is Novo's own banner overlay element. Adding it with the
      theme's `.color` layer plus a scrim behind the header restores the
      demo's tonality.
   2. Novo already ships `light-header` (white ink + light logo) and
      `dark-header` (dark ink + colour logo) and swaps the logo pair for each.
      `assets/js/site.js` puts the header in `light-header` while it sits over
      the banner and hands it back to `dark-header` once it scrolls onto the
      page, which is what those classes are for. */

.banner .item .bg-overlay .color {
  background-color: #1a1a1a;
  opacity: 0.3;
}

.banner .item .bg-overlay .header-scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom,
      rgba(18, 18, 18, 0.55) 0,
      rgba(18, 18, 18, 0.28) 120px,
      rgba(18, 18, 18, 0) 280px);
}

/* Scrolled onto the page: solid white bar, the values Novo's own stylesheet
   declares for `.dark-header.fixed-header.fixed`. */

.site-header.dark-header.fixed .header-main-block {
  background-color: #fff;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.07);
}

.site-header .header-main-block {
  transition: background-color 300ms ease-in-out;
}

/* Over the banner the phone strip follows the light ink. */

.site-header.light-header .header-contact-block {
  color: #fff;
}

.site-header.light-header .header-contact-block .header-hours {
  opacity: 0.85;
}

/* Novo paints the menu in the accent colour (`.navigation.hover-style2`),
   which reads well over the darkened banner but not on the white scrolled
   bar. Dark ink there, matching `.dark-header`'s own text colour. */

.site-header.dark-header .navigation,
.site-header.dark-header .navigation > .menu > li > a {
  color: #292929;
}


/* --- framed about photo -------------------------------------------------

   The about photograph sat as a bare rectangle in the grey band. It now gets
   an offset outline in the accent colour plus a soft ground shadow — the same
   thin-line vocabulary Novo already uses for `heading-block .with-line` and
   the button underlines, so it reads as part of the theme.

   The outline is offset up and to the RIGHT on purpose. Offsetting it left
   runs off the viewport once the stretched row's side margin gets small (at
   1024px the photo starts only 25px from the edge); to the right it lands in
   the text column's 60px inner padding, which is there at every desktop
   width. Below 768px the columns stack full-width, so the outline is dropped
   entirely and only the shadow remains. */

.kj-framed-media {
  position: relative;
}

.kj-framed-media .vc_column-inner {
  position: relative;
  z-index: 1;
  box-shadow: 0 34px 60px -34px rgba(26, 26, 26, 0.45);
}

@media (min-width: 768px) {
  .kj-framed-media::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    left: 30px;
    bottom: 30px;
    border: 1px solid #D45C34;
    pointer-events: none;
    z-index: 0;
  }

  /* Short accent rule in the outline's corner, echoing the `with-line`
     detail under the section headings. */
  .kj-framed-media::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 74px;
    height: 3px;
    background: #D45C34;
    pointer-events: none;
    z-index: 2;
  }
}

@media (min-width: 1400px) {
  .kj-framed-media::before {
    top: -38px;
    right: -38px;
    left: 38px;
    bottom: 38px;
  }

  .kj-framed-media::after {
    top: -38px;
    right: -38px;
  }
}

/* --- service tiles ------------------------------------------------------

   Novo already ships a scrim for these tiles, but only for the `type-normal`
   variant:

     body .category.type-normal .item:after { background: rgba(0,0,0,.4) }
     body .category.type-normal .item > *   { position: relative; z-index: 2 }

   The demo layout uses `type-big`, which has no scrim, so the white tile
   headings and the "více" button vanished into the brighter photographs.
   Same pair of rules extended to `type-big`, with the banner's two-part
   darkening so the flowers keep their colour lower down the tile.

   (`.item:before` is the theme's 2px tick at the top edge and sits at
   z-index 2, so the scrim at z-index 0 leaves it alone.) */

body .category.type-big .item:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(26, 26, 26, 0.28);
  background-image: linear-gradient(to bottom,
      rgba(18, 18, 18, 0.55) 0,
      rgba(18, 18, 18, 0.2) 55%,
      rgba(18, 18, 18, 0) 100%);
  z-index: 0;
}

body .category.type-big .item > * {
  position: relative;
  z-index: 2;
}

/* --- gallery tiles ------------------------------------------------------

   The grids use Novo's fixed-ratio gallery markup — `.a-img` wrapping a div
   that carries the photo as a background — which is the same pattern the
   theme uses for its footer gallery and carousel. The theme sets the ratio
   with padding-bottom (65% by default, 100% in the footer); a square suits
   this shop's mostly-portrait bouquet photography better than a landscape
   crop, and it makes every tile the same size. */

.portfolio-items .portfolio-item .a-img div {
  padding-bottom: 100%;
}

/* --- mobile corrections -------------------------------------------------

   1. Service tiles. Novo's mobile.css already asks for a 500px tile
      ( `.category.type-big .item { height: 500px }` ) but never wins: the
      desktop rule in pt-addons.css is `body .category.type-big .item`, one
      specificity point higher, so phones kept the 765px desktop height.
      Re-stating the theme's own value at matching specificity.

   2. About section. WPBakery writes its column padding with `!important` and
      no breakpoints, so the photo column carried 250px of top and bottom
      padding on a 375px screen — a 500px band of empty space around the
      photo, and a 1345px-tall section. Scaled down for phones.

   3. Filter buttons wrapped onto three rows; tightened to two.

   4. Mobile drawer: wider, with larger tap targets. */

@media (max-width: 767.98px) {
  body .category.type-big .item {
    height: 500px;
  }

  body .vc_custom_1624535792531 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .kj-framed-media .vc_column-inner {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
  }

  body .vc_custom_1624358579285 {
    padding: 46px 20px 56px !important;
  }

  body .vc_custom_1624275314107 {
    padding-top: 38px !important;
  }

  body .vc_custom_1624275353139 {
    margin-bottom: 26px !important;
  }

  .portfolio-block .filter-buttons .button {
    font-size: 11px;
    margin: 0 7px 8px;
    letter-spacing: 0.06em;
  }

  .mobile-navigation-block {
    width: min(320px, 86vw);
  }

  .mobile-navigation .menu {
    padding: 0 26px;
  }

  .mobile-navigation .menu > li > a {
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 13px;
  }

  .service-intro p,
  .about-text p {
    font-size: 16px;
    line-height: 1.75;
  }
}

/* Two gallery columns on phones. One column stacked 12 square tiles into
   roughly 4100px of scrolling; two columns halve it and the photos are still
   comfortably large. */
@media (max-width: 575.98px) {
  .portfolio-items .portfolio-item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 479.98px) {
  body .category.type-big .item {
    height: 430px;
  }

  .kj-framed-media .vc_column-inner {
    padding-top: 132px !important;
    padding-bottom: 132px !important;
  }
}

/* --- service tile strip: close the gap above it -------------------------

   The strip is full-bleed, but 96px of white sat between it and the grey
   about band: 61px from the row (`vc_custom_1624358656749`) plus WPBakery's
   default 35px `.vc_column-inner` padding. Neither was doing any work — the
   about band already provides the separation — so the strip now butts
   straight against it. */

body .vc_custom_1624358656749 > .wpb_column > .vc_column-inner {
  padding-top: 0 !important;
}

/* --- breathing room before the footer -----------------------------------

   The last content row ran straight into the social bar with a 0px gap. */

main.main-row {
  padding-bottom: 90px;
}

@media (max-width: 767.98px) {
  main.main-row {
    padding-bottom: 54px;
  }
}

/* --- quote slider: one fixed height -------------------------------------

   Owl was initialised with `autoHeight: true`, so the slider animated its own
   height between slides — 453px for a short quote, 483px for a long one —
   which shunted everything below it up and down on every rotation. Height is
   now fixed and `autoHeight` is off, so the slide changes but the page does
   not move, whatever the quote length or photo. */

.testimonials .item {
  height: 500px;
}

@media (max-width: 767.98px) {
  .testimonials .item {
    height: 360px;
  }
}

@media (max-width: 479.98px) {
  .testimonials .item {
    height: 400px;
  }
}

/* --- footer bottom bar --------------------------------------------------

   The copyright moved out of the contact column into a full-width bar so it
   reads as a closing line rather than a stray sentence, and it gives the
   build credit a proper home opposite it. */

.site-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid rgba(26, 26, 26, 0.1);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.site-footer .footer-bottom .copyright {
  opacity: 0.6;
}

.site-footer .made-by {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.site-footer .made-by:hover {
  opacity: 1;
}

.site-footer .made-by .heart {
  color: #D45C34;
  font-size: 13px;
  line-height: 1;
  animation: kj-heartbeat 2.4s ease-in-out infinite;
}

.site-footer .made-by a {
  position: relative;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 92, 52, 0.4);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.site-footer .made-by a:hover {
  color: #D45C34;
  border-bottom-color: #D45C34;
}

@keyframes kj-heartbeat {
  0%, 68%, 100% { transform: scale(1); }
  74% { transform: scale(1.25); }
  82% { transform: scale(1); }
  88% { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .made-by .heart {
    animation: none;
  }
}

@media (max-width: 575.98px) {
  .site-footer .footer-bottom {
    margin-top: 38px;
    justify-content: flex-start;
  }
}