/* === HILL CRAFT — набор правок оформления v1.0 === */
/* Полная документированная версия — в файле hccab-stili-dlya-wordpress.css */

/* 0. Фирменные цвета из темы */
:root{--hc-gold:#FFA437;--hc-grey-on-light:#5C616B;--hc-grey-on-dark:#A8AEB8}

/* 1. База */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:90px}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video,iframe{max-width:100%;height:auto}
p,li,h1,h2,h3,h4,a,td{overflow-wrap:break-word}
html,body{overflow-x:clip}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* 2. Контраст серого текста: на белом было 3.0:1 при норме 4.5:1 */
.has-theme-2-background-color .has-theme-4-color,
.is-style-section-2 .has-theme-4-color{color:var(--hc-grey-on-light)!important}
.has-theme-1-background-color .has-theme-4-color,
.has-theme-3-background-color .has-theme-4-color,
.is-style-section-1 .has-theme-4-color{color:var(--hc-grey-on-dark)!important}

/* 3. Единая типографика: убираем случайные Arial и Helvetica */
body,.hc-room-label,.hc-rooms-dots,.contact-form,
.contact-form input,.contact-form textarea,.contact-form select,.contact-form button{
font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3,.hc-rooms-title,.wp-block-heading{font-family:"Fraunces",Georgia,serif}
h1,h2{letter-spacing:-.01em}

/* 4. Шапка: было background-size calc(100% + 240px) — фото разъезжалось */
.hero-header .is-style-section-1{background-size:cover!important;background-position:50% 45%!important;background-repeat:no-repeat!important}
.hero-header .wp-block-site-logo img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
.hero-header .wp-block-navigation a{text-shadow:0 1px 6px rgba(0,0,0,.6)}
/* 5. Кнопки: отклик на наведение + удобный размер для пальца */
.wp-block-button__link,.wp-element-button{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.wp-block-button__link:hover,.wp-element-button:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.wp-block-button__link:active,.wp-element-button:active{transform:translateY(0)}
.wp-block-button__link{min-height:44px;display:inline-flex;align-items:center}

/* 6. Видимый фокус с клавиатуры (доступность) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--hc-gold);outline-offset:3px;border-radius:3px}

/* ============================================================
   7. КОНТАКТНАЯ ФОРМА — главное исправление
   Подпись поля не уезжала наверх при вводе НИКОГДА (ни при фокусе,
   ни при вводе, ни при автозаполнении Chrome) и лежала поверх текста
   клиента. Теперь она закреплена вверху поля, а под неё дан отступ.
   ============================================================ */
.contact-form .grunion-field-width-50-wrap{flex-basis:100%!important;max-width:100%!important;width:100%!important}
.contact-form input:not([type=submit]):not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=button]),
.contact-form select,.contact-form textarea{
width:100%!important;max-width:100%!important;box-sizing:border-box!important;
background-color:#FFF!important;color:#14161A!important;border:1px solid #C9CED6!important;
border-radius:8px!important;font-size:16px!important;line-height:1.4!important;
padding:30px 16px 11px!important;box-shadow:none!important;
transition:border-color .18s ease,box-shadow .18s ease}
.contact-form textarea{min-height:170px!important;resize:vertical}
.contact-form label,.contact-form .animated-label__label{transform:none!important;top:10px!important;left:16px!important;right:16px!important;font-size:13px!important;line-height:1.2!important;letter-spacing:0!important;font-weight:500!important;text-transform:none!important;color:#3E4551!important;transition:none!important}
.contact-form .grunion-label-required{color:#98A0AB!important;font-weight:400!important;text-transform:none;font-size:12px!important}
.contact-form ::placeholder{color:#9AA0A9!important;opacity:1!important}
.contact-form .jetpack-field__input-phone-wrapper{background:#FFF!important;border:1px solid #C9CED6!important;border-radius:8px!important;padding:0!important;box-shadow:none!important;display:flex;align-items:flex-end}
.contact-form .jetpack-field__input-phone-wrapper input{border:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.contact-form .jetpack-field__input-prefix{padding:0 0 12px 16px!important}
.contact-form input:hover,.contact-form select:hover,.contact-form textarea:hover{border-color:#8A8F98!important}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--hc-gold)!important;box-shadow:0 0 0 3px rgba(255,164,55,.28)!important;outline:none!important}
.contact-form .jetpack-field__input-phone-wrapper:focus-within{border-color:var(--hc-gold)!important;box-shadow:0 0 0 3px rgba(255,164,55,.28)!important}
.contact-form input:-webkit-autofill,.contact-form input:-webkit-autofill:hover,.contact-form input:-webkit-autofill:focus{-webkit-text-fill-color:#14161A!important;-webkit-box-shadow:0 0 0 60px #FFF inset!important}
.contact-form .form-error,.contact-form-error,.contact-form .error{color:#FF6B6B!important}
a[href^="tel:"],a[href^="mailto:"]{text-underline-offset:4px;display:inline-block;padding:3px 0}

/* 7.1 Кнопка отправки. Не нравится оранжевая — удалите эти строки. */
.contact-form .wp-block-jetpack-button button,
.contact-form button[type=submit],.contact-form input[type=submit]{
background:var(--hc-gold)!important;color:#14161A!important;border:none!important;
border-radius:8px!important;padding:15px 34px!important;font-size:16px!important;
font-weight:600!important;letter-spacing:.02em;min-height:48px;cursor:pointer;
transition:filter .18s ease,transform .18s ease}
.contact-form .wp-block-jetpack-button button:hover,
.contact-form button[type=submit]:hover,.contact-form input[type=submit]:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* 8. Services: колонки были прижаты к верху, под текстом провалы 200-400px */
.wp-block-columns.are-vertically-aligned-center{align-items:center}
.wp-block-group[style*="padding-bottom:220px"],
.wp-block-group[style*="padding-bottom: 220px"]{padding-bottom:96px!important}
.wp-block-column > p{max-width:68ch}

/* 10. Products — выравнивание на больших экранах.
   Секция товаров сидела в блоке шириной 1200px от левого края экрана,
   поэтому заголовки, карточки и линия не совпадали по краям. */
.hc-products-wrap{max-width:none!important;width:100%!important;margin-inline:0!important}
.hc-products{max-width:none!important;width:100%!important;padding-inline:0!important}
.hc-products .wp-block-columns.alignfull{max-width:none!important;width:100%!important;margin-inline:0!important}
.hc-products > .wp-block-heading{max-width:none!important;width:100%!important;margin:56px 0 22px!important}
.hc-products-header{display:block!important;max-width:none!important;width:100%!important}
.hc-products-header > .wp-block-columns{max-width:none!important;width:100%!important;align-items:center!important}
.hc-products-header > .wp-block-separator{display:none!important}
.hc-products .wp-block-cover{border-radius:8px;overflow:hidden;position:relative;background:linear-gradient(150deg,#1B1C1F 0%,#232428 55%,#1B1C1F 100%);transition:transform .28s ease,box-shadow .28s ease}
.hc-products .wp-block-cover:hover{transform:scale(1.04);box-shadow:0 18px 40px rgba(0,0,0,.6);z-index:3}
.hc-products .wp-block-cover__image-background{opacity:.045!important;filter:grayscale(1) contrast(.6)}
.hc-products .wp-block-cover::before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.09);border-radius:4px;pointer-events:none;z-index:1}
.hc-products .wp-block-column > p{text-align:center!important;margin-top:14px!important;font-size:15px!important;letter-spacing:.06em}
.hc-products-header button,.hc-products-header a{transition:background-color .2s ease,color .2s ease;min-height:44px}

/* 11. Portfolio: ровные зазоры и отклик на наведение */
.wp-block-gallery{gap:20px}
.wp-block-gallery .wp-block-image img,.wp-block-columns .wp-block-image img{border-radius:6px;transition:transform .35s ease,filter .35s ease}
.wp-block-gallery .wp-block-image:hover img,.wp-block-columns .wp-block-image:hover img{transform:scale(1.015);filter:brightness(1.06)}

/* 12. Подвал и кнопка наверх */
.wp-block-social-link{transition:transform .2s ease,opacity .2s ease}
.wp-block-social-link:hover{transform:translateY(-3px)}
[class*=scroll-to-top],[class*=back-to-top],[id*=scroll-to-top],[id*=back-to-top]{border:1px solid rgba(255,255,255,.16)!important;background:rgba(20,21,22,.9)!important;backdrop-filter:blur(8px);transition:background .2s ease,transform .2s ease}
[class*=scroll-to-top]:hover,[class*=back-to-top]:hover,[id*=scroll-to-top]:hover,[id*=back-to-top]:hover{background:var(--hc-gold)!important;color:#14161A!important;transform:translateY(-3px)}

/* 13. Телефоны и планшеты */
@media(max-width:781px){
h1{font-size:clamp(28px,7vw,40px)!important;line-height:1.15!important}
h2{font-size:clamp(23px,5.6vw,32px)!important;line-height:1.2!important}
h3{font-size:clamp(19px,4.6vw,24px)!important}
p,li{font-size:16px!important;line-height:1.6!important}
.wp-block-group.has-global-padding{padding-block:48px!important}
.wp-block-columns{gap:28px!important}
.wp-block-button{width:100%}
.wp-block-button__link{width:100%;justify-content:center}
.contact-form input,.contact-form textarea,.contact-form select{font-size:16px!important}
.hc-products .wp-block-columns{gap:16px!important}
.hero-header .wp-block-site-logo img{max-width:190px}
}
@media(max-width:480px){
.wp-block-group.has-global-padding{padding-block:36px!important}
.hero-header .wp-block-site-logo img{max-width:150px}
}
/* === конец набора правок === */

/* 12.1 Кнопка «наверх»: убираем ярко-оранжевое кольцо */
#hc-back-top-custom{border:1px solid rgba(255,255,255,.16)!important;background:rgba(20,21,22,.92)!important;backdrop-filter:blur(8px);transition:background .2s ease,transform .2s ease,border-color .2s ease}
#hc-back-top-custom:hover{background:var(--hc-gold)!important;border-color:var(--hc-gold)!important;color:#14161A!important;transform:translateY(-3px)}

/* 15. Поле телефона — убираем вторую рамку и выравниваем префикс US +1.
   Специфичность выше, чем у общего правила для полей, иначе не срабатывает. */
.contact-form .jetpack-field__input-phone-wrapper{position:relative;display:flex!important;align-items:stretch!important;padding:0!important;background:#FFF!important;border:1px solid #C9CED6!important;border-radius:8px!important;overflow:hidden}
.contact-form .jetpack-field__input-phone-wrapper .jetpack-field__input-prefix{position:absolute!important;left:16px;bottom:9px;padding:0!important;border:0!important;background:transparent!important;z-index:2;display:flex;align-items:center}
.contact-form .jetpack-field__input-phone-wrapper input.jetpack-field__input-element,
.contact-form .jetpack-field__input-phone-wrapper input[type=tel]{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:30px 16px 11px!important;width:100%!important;flex:1 1 auto!important}

/* 16. Полоски-разделители: плавно прочерчиваются при прокрутке.
   Работает в Chrome и Edge; в остальных браузерах линия просто видна сразу. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .wp-block-separator{
      transform-origin:left center;
      animation:hc-draw-line 1s linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 100%;
    }
  }
}
@keyframes hc-draw-line{
  from{transform:scaleX(0);opacity:0}
  to{transform:scaleX(1);opacity:1}
}

/* префикс US +1 появляется только при вводе — освобождаем под него место */
.contact-form .jetpack-field__input-phone-wrapper:focus-within input.jetpack-field__input-element{padding-left:88px!important;transition:padding-left .15s ease}

/* 17. Фото бара вертикальное, карточка горизонтальная —
   смещаем кадр вниз, чтобы в кадр попали столешница и полки, а люстра осталась */
.hc-room-card[href$="/bar/"]{background-position:50% 62%!important}

/* ============================================================
   18. МЕНЮ: читаемость поверх фото и подсветка текущей страницы
   ============================================================ */
/* Мягкое затемнение под меню — слово Contact попадало на светлый
   холодильник и почти сливалось с фоном */
header.wp-block-template-part > .wp-block-group.is-style-section-1{position:relative}
header.wp-block-template-part > .wp-block-group.is-style-section-1::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(8,9,10,.78) 0%,rgba(8,9,10,.42) 45%,rgba(8,9,10,.06) 100%)}
header.wp-block-template-part > .wp-block-group.is-style-section-1 > *{position:relative;z-index:1}

/* Золотая линия под пунктом меню: плавно выезжает при наведении
   и сама прочерчивается при загрузке страницы, на которой вы находитесь */
.wp-block-navigation .wp-block-navigation-item__content{position:relative;padding-bottom:4px}
.wp-block-navigation .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--hc-gold);transform:scaleX(0);transform-origin:left center;
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
.wp-block-navigation .wp-block-navigation-item__content:hover::after{transform:scaleX(1)}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{color:#fff!important}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after{
  animation:hc-underline .55s cubic-bezier(.4,0,.2,1) .3s both}
@keyframes hc-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 19. Кнопка с телефоном в меню.
   Сам пункт добавлен в Меню → шапка (класс hc-call-btn).
   На телефоне нажатие сразу набирает номер. */
.wp-block-navigation .hc-call-btn > .wp-block-navigation-item__content{border:1px solid rgba(255,164,55,.8);border-radius:999px;padding:9px 18px!important;font-size:15px;line-height:1;white-space:nowrap;background:rgba(255,164,55,.08);transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.wp-block-navigation .hc-call-btn > .wp-block-navigation-item__content::after{display:none!important}
.wp-block-navigation .hc-call-btn > .wp-block-navigation-item__content:hover{background:var(--hc-gold);color:#14161A!important;border-color:var(--hc-gold);transform:translateY(-1px)}
@media(max-width:781px){.wp-block-navigation .hc-call-btn > .wp-block-navigation-item__content{display:inline-flex;justify-content:center;margin-top:8px}}

/* ============================================================
   20. ТЕЛЕФОННАЯ ВЕРСИЯ: подвал и меню-гамбургер
   ============================================================ */
@media (max-width:781px){
  footer .wp-block-separator{display:none!important}
  .wp-block-separator{animation:none!important;transform:none!important;opacity:1!important}
  .wp-block-navigation__responsive-container-open{
    width:44px;height:44px;display:inline-flex!important;align-items:center;justify-content:center;
    background:rgba(8,9,10,.55)!important;border:1px solid rgba(255,255,255,.18);
    border-radius:10px;backdrop-filter:blur(6px)}
  .wp-block-navigation__responsive-container.is-menu-open{padding:0!important}
  .wp-block-navigation__responsive-container.is-menu-open::before{
    content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg,rgba(8,9,10,.90) 0%,rgba(8,9,10,.74) 100%)}
  .wp-block-navigation__responsive-container.is-menu-open > *{position:relative;z-index:1}
  .is-menu-open .wp-block-navigation__responsive-container-content{
    width:100%;height:100%;display:flex;flex-direction:column;
    justify-content:center;align-items:center;padding:76px 22px 36px!important}
  .is-menu-open .wp-block-navigation__container{
    flex-direction:column!important;align-items:stretch!important;
    width:100%;max-width:380px;margin-inline:auto;gap:0!important}
  .is-menu-open .wp-block-navigation-item{width:100%}
  .is-menu-open .wp-block-navigation-item__content{
    display:block;width:100%;text-align:center;font-size:20px;line-height:1.2;
    padding:15px 8px!important;border-bottom:1px solid rgba(255,255,255,.10)}
  .is-menu-open .wp-block-navigation-item__content::after{display:none!important}
  .is-menu-open .current-menu-item > .wp-block-navigation-item__content{color:var(--hc-gold)!important}
  .is-menu-open .hc-call-btn{margin-top:20px}
  .is-menu-open .hc-call-btn > .wp-block-navigation-item__content{
    border:1px solid var(--hc-gold)!important;border-radius:999px!important;
    background:var(--hc-gold)!important;color:#14161A!important;
    font-size:17px!important;padding:14px 20px!important;font-weight:600}
  .is-menu-open .wp-block-navigation__responsive-container-close{
    top:16px!important;right:16px!important;width:48px;height:48px;
    display:inline-flex;align-items:center;justify-content:center}
  .is-menu-open .wp-block-navigation__responsive-container-close svg{width:26px;height:26px}
}

/* 21. Карточки карусели Rooms при наведении.
   У темы был подъём всего на 2px — его практически не видно.
   Заменили на увеличение на 6% с тенью. */
.hc-room-card{transition:transform .38s cubic-bezier(.22,.68,.3,1),box-shadow .38s ease!important;will-change:transform}
.hc-room-card:hover,.hc-room-card:focus-visible{transform:scale(1.06)!important;box-shadow:0 20px 46px rgba(0,0,0,.6)!important;z-index:3}
.hc-room-slide:hover{z-index:3}
@media (hover:none){.hc-room-card:hover{transform:none!important}}