/* The contact page of odstopodpogodbe.si (010e-5): specs/landing-preview/contact-preview-sl.html on page 65 under .ewb-contact.
   The header and footer rules are the landing page's (ewb-landing.css, 010e-3), copied; its fonts by their URLs. The theme's global
   styles (Twenty Twenty-Five: Manrope 300, 1.2rem block gap) and the blocks' own CSS give way. The form is HTML Forms' "kontakt". */

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../ewb-landing/fonts/instrument-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../ewb-landing/fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../ewb-landing/fonts/outfit-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../ewb-landing/fonts/outfit-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body.ewb-contact {
  color-scheme: light;
  --dark: #15213B; --dark-2: #0F182C; --accent: #4DA3FF; --accent-2: #2F8BF0; --accent-tint: #E3F0FF;
  --paper: #F5F7FB; --paper-2: #E9EEF5; --line: #D6DEEA; --ink: #111A2E; --muted: #5A677F; --on-dark: #B9C6DD; --on-dark-2: #8E9BB4; --white: #FFFFFF;
  --ok: #1B7A43; --ok-tint: #E3F2E9; --warn: #6B4E0E; --warn-tint: #F7F1E1;
  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --r: 12px;
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--body); font-size: 17px; font-weight: 400; line-height: 1.55; letter-spacing: normal;
}

/* the theme's flow and flex spacing gives way to the target's own */
.ewb-contact *, .ewb-contact *::before, .ewb-contact *::after { box-sizing: border-box; }
.ewb-contact .wp-site-blocks { padding: 0; }
.ewb-contact .wp-site-blocks > *, .ewb-contact .is-layout-flow > *, .ewb-contact .is-layout-constrained > * { margin-block: 0; }
.ewb-contact .is-layout-flex { gap: 0; }

.ewb-contact h1, .ewb-contact h2, .ewb-contact h3 { margin: 0; font-family: var(--display); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; color: var(--dark); }
.ewb-contact h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); }
.ewb-contact h2 { font-size: 1.25rem; font-weight: 700; }
.ewb-contact p { margin: 0; }
.ewb-contact a { color: var(--accent-2); }
.ewb-contact :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ewb-contact .wrap { max-width: 1120px; margin-inline: auto; padding-inline: 20px; width: 100%; }

/* buttons (the landing's): the class sits on the Button block's wrapper; the link inside is the button */
.ewb-contact .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.ewb-contact .wp-block-button { margin: 0; }
.ewb-contact .btn .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 22px; border-radius: 10px; font: 600 1rem/1.2 var(--body); letter-spacing: normal; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; }
.ewb-contact .btn--dark .wp-block-button__link { background: var(--dark); color: var(--white); border-color: var(--dark); }
.ewb-contact .btn--dark .wp-block-button__link:hover { background: var(--dark-2); }

/* header (the landing's) */
.ewb-contact .head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); color: var(--ink); border-bottom: 1px solid var(--line); }
.ewb-contact .head > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.ewb-contact .brand { font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.2; }
.ewb-contact .brand a { color: var(--dark); text-decoration: none; }
.ewb-contact .brand strong { color: var(--accent-2); font-weight: 800; }
.ewb-contact .nav { display: none; gap: 26px; }
.ewb-contact .nav p { font-size: .95rem; font-weight: 500; line-height: 1.6; }
.ewb-contact .nav a { color: var(--ink); text-decoration: none; }
.ewb-contact .nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.ewb-contact .nav .on a { color: var(--accent-2); font-weight: 600; }
.ewb-contact .head .btn .wp-block-button__link { min-height: 42px; padding: 8px 16px; font-size: .92rem; }

/* the page: words and ways left, the form right */
.ewb-contact .page { position: relative; overflow: hidden; padding-block: 56px 72px; }
.ewb-contact .page::before { content: ""; position: absolute; inset: -40% -20% auto; height: 110%; background: radial-gradient(50% 50% at 80% 30%, rgba(77,163,255,.16), transparent 70%); pointer-events: none; }
.ewb-contact .page > .wrap { position: relative; display: grid; gap: 36px; }
.ewb-contact .kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); font-weight: 600; font-size: .9rem; }
.ewb-contact .kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ewb-contact .intro h1 { margin: 14px 0 16px; }
.ewb-contact .intro .lead { color: var(--muted); font-size: 1.1rem; max-width: 46ch; }
.ewb-contact .ways { margin-top: 32px; display: grid; gap: 18px; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.ewb-contact .way { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; }
.ewb-contact .way::before { content: ""; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-tint) center / 20px 20px no-repeat; }
.ewb-contact .way--mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F8BF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.ewb-contact .way--help::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F8BF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 2 2 4-4'/%3E%3Cpath d='m3 17 2 2 4-4'/%3E%3Cpath d='M13 6h8'/%3E%3Cpath d='M13 12h8'/%3E%3Cpath d='M13 18h8'/%3E%3C/svg%3E"); }
.ewb-contact .way--time::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F8BF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ewb-contact .ways .way::before { background-color: var(--white); }
.ewb-contact .way-t strong { font-weight: 600; }
.ewb-contact .way-d { color: var(--muted); font-size: .95rem; }

/* the form card around HTML Forms' form */
.ewb-contact .form { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: 0 20px 50px -28px rgba(17,26,46,.35), 0 30px 80px -40px rgba(77,163,255,.4); }
.ewb-contact .form h2 { margin-bottom: 4px; }
.ewb-contact .form .sub { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.ewb-contact .form .sub strong, .ewb-contact .hf-form .req { color: var(--accent-2); font-weight: inherit; }
.ewb-contact .hf-form { margin: 0; }
.ewb-contact .hf-fields-wrap { display: grid; gap: 14px; }
.ewb-contact .frow { display: grid; gap: 14px; }
.ewb-contact .hf-field { display: grid; gap: 6px; }
.ewb-contact .field-label { font-size: .85rem; font-weight: 500; color: var(--muted); line-height: 1.55; }
.ewb-contact .field-input { width: 100%; margin: 0; border: 1px solid #C9CFD8; border-radius: 8px; padding: 11px 12px; min-height: 46px; font: 400 .98rem/1.4 var(--body); background: var(--white); color: var(--ink); box-shadow: none; }
.ewb-contact .field-input::placeholder { color: #8A95A8; opacity: 1; }
.ewb-contact .field-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.ewb-contact select.field-input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A677F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px 18px no-repeat; }
.ewb-contact textarea.field-input { min-height: 150px; resize: vertical; }
.ewb-contact .hf-form button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 6px; padding: 12px 22px; border-radius: 10px; border: 1.5px solid var(--dark); background: var(--dark); color: var(--white); font: 700 1.05rem/1.2 var(--body); cursor: pointer; }
.ewb-contact .hf-form button[type="submit"]:hover { background: var(--dark-2); }
.ewb-contact .hf-form button[type="submit"]::after { content: "→"; }
.ewb-contact .hf-messages:empty { display: none; }
.ewb-contact .hf-message { margin: 0; padding: 12px 14px; border-radius: 8px; font-size: .92rem; background: var(--warn-tint); color: var(--warn); }
.ewb-contact .hf-message-success { background: var(--ok-tint); color: var(--ok); }
.ewb-contact .form .fine { font-size: .82rem; color: var(--muted); text-align: center; margin-top: 10px; }

/* before you write: three tiles */
.ewb-contact .strip { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 36px; }
.ewb-contact .strip > .wrap { display: grid; gap: 18px; }
.ewb-contact .strip h2 { font-size: 1.1rem; }
.ewb-contact .tile { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: grid; gap: 6px; }
.ewb-contact .tile-t strong { font-weight: 600; }
.ewb-contact .tile-d { color: var(--muted); font-size: .95rem; }
.ewb-contact .tile-a a { font-weight: 600; text-decoration: none; }

/* footer (the landing's, 010e-footer) */
.ewb-contact .foot { background: var(--dark-2); color: var(--on-dark); font-size: .9rem; line-height: 1.6; padding-block: 48px 28px; }
.ewb-contact .foot > .wrap { display: grid; gap: 36px; }
.ewb-contact .foot a { color: var(--white); text-decoration: none; }
.ewb-contact .foot a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.ewb-contact .foot-top { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.ewb-contact .foot-about { grid-column: 1 / -1; display: grid; gap: 4px; }
.ewb-contact .foot-brand { font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 6px; }
.ewb-contact .foot-brand strong { color: var(--accent); font-weight: 800; }
.ewb-contact .foot-seller, .ewb-contact .foot-bottom { color: var(--on-dark-2); font-size: .84rem; }
.ewb-contact .foot-h { font-family: var(--display); font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; color: var(--on-dark-2); margin-bottom: 12px; }
.ewb-contact .foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ewb-contact .foot-list li { margin: 0; padding: 0; }
.ewb-contact .foot-list a { color: var(--on-dark); }
.ewb-contact .foot-list a:hover { color: var(--white); }
.ewb-contact .foot-bottom { display: flex; flex-direction: column; gap: 8px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.ewb-contact .foot-made a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.ewb-contact .foot-lang { display: flex; align-items: center; gap: 8px; }
.ewb-contact .foot-lang::before { content: ""; flex: none; width: 22px; height: 11px; background: url("../ewb-landing/flag-hr.png") center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }

@media (min-width: 640px) {
  .ewb-contact .frow { grid-template-columns: 1fr 1fr; }
  .ewb-contact .strip > .wrap { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .ewb-contact .strip h2 { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .ewb-contact .nav { display: flex; }
  .ewb-contact .page { padding-block: 80px 96px; }
  .ewb-contact .page > .wrap { grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
  .ewb-contact .foot-top { grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
  .ewb-contact .foot-about { grid-column: auto; }
  .ewb-contact .foot-bottom { flex-direction: row; align-items: center; gap: 28px; }
  .ewb-contact .foot-lang { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .ewb-contact * { transition: none !important; animation: none !important; } }