/* vpisland.com.cy
   Colours, type and proportions follow the original WordPress theme. What
   changed: the hero and page banners run edge to edge at any width (they used
   to stop at 1400px and leave white bands), the footer sits at the bottom of
   short pages, and the layout works on phones (the old one was a fixed 920px). */

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
/* Titles are set in Georgia, as before. Gelasio has Georgia's metrics and
   only downloads on devices without Georgia (most Android phones). */
@font-face {
  font-family: "Gelasio";
  src: url("../fonts/gelasio-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --blue: #26588c;        /* text and links: 6.9:1 on white, 5.4:1 on the footer mist */
  --blue-fill: #26578c;   /* product box, copyright bar; white on it is 7.4:1 */
  --blue-deep: #0f2c4c;   /* link hover on white */
  --navy: #132b46;        /* bottom of the header gradient */
  --night: #0d1f45;       /* behind images while they load */
  --mist: #d4dde8;        /* footer */
  --white: #fff;
  --serif: Georgia, Gelasio, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  color: var(--blue);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

:where(a, button):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On the dark grounds the ring is white; blue would vanish there. */
:where(.site-header, .hero, .product-box, .copyright) :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--white);
  color: var(--blue);
  font-weight: 600;
}
.skip-link:focus { top: 8px; }

/* Header ------------------------------------------------------------------ */

.site-header {
  background: linear-gradient(to bottom, #26578c, var(--navy));
  color: var(--white);
  text-align: center;
  padding: 35px var(--gutter) 12px;
}

.site-logo { display: inline-block; }
.site-logo img { display: block; width: 160px; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 40px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 6px 0;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1.2;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
/* The old hover turned the text #bbb, which is 3.9:1 on the header blue.
   An underline marks it instead and keeps the white. */
.site-nav a:hover { text-decoration-line: underline; }
.site-nav a[aria-current] { font-weight: 700; }

@media (max-width: 640px) {
  .site-header { padding-top: 22px; padding-bottom: 8px; }
  .site-logo img { width: 120px; }
  .site-nav ul { gap: 0 18px; margin-top: 14px; }
  .site-nav a { padding: 8px 0; font-size: 0.9375rem; }
}

/* Home hero --------------------------------------------------------------- */

.hero {
  position: relative;
  /* 36vw is the old 1400x520 slider's proportion. The bottles fill 60% of
     the image height, so a lower cap would crop them on wide screens. */
  height: clamp(300px, 36vw, 960px);
  overflow: hidden;
  background: var(--night);
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero__slide.is-active { opacity: 1; }

/* Both bottles stand about two thirds across and span the middle 60% of
   the height, so this focal point keeps them in frame from phone to ultrawide. */
.hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 50%;
}

.hero__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
}
.hero__controls[hidden] { display: none; }

.hero__tabs {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 75px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
.hero__tabs img {
  width: auto;
  max-height: 62px;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.hero__tabs button:hover img,
.hero__tabs button[aria-current="true"] img { opacity: 1; }

.hero__toggle {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(19, 43, 70, 0.7);
  cursor: pointer;
}
/* Pause: two bars. Paused: a play triangle. */
.hero__toggle span {
  display: block;
  width: 10px;
  height: 12px;
  margin: 0 auto;
  border-left: 3px solid var(--white);
  border-right: 3px solid var(--white);
}
.hero__toggle[data-paused] span {
  width: 0;
  height: 0;
  margin-left: 13px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--white);
  border-right: 0;
}

@media (max-width: 640px) {
  .hero__tabs button { width: 108px; height: 56px; }
  .hero__tabs img { max-height: 46px; }
  .hero__toggle { bottom: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__tabs img { transition: none; }
}

/* Page banners ------------------------------------------------------------ */

.banner { background: var(--night); }
.banner img {
  display: block;
  width: 100%;
  /* 15vw is the banners' own 1600x240 proportion; the clamp keeps them
     readable on phones and stops them dominating very wide screens. */
  height: clamp(150px, 15vw, 320px);
  object-fit: cover;
  object-position: 66% 50%;
}

/* Main -------------------------------------------------------------------- */

.main {
  flex: 1 0 auto;
  padding-bottom: 72px;
  text-align: center;
}

.container {
  width: min(100% - 2 * var(--gutter), 920px);
  margin-inline: auto;
  padding-top: clamp(40px, 6vw, 70px);
}
.container--wide { width: min(100% - 2 * var(--gutter), 1100px); }

.page-title {
  margin: 0 0 24px;
  font: 400 clamp(1.5rem, 1.15rem + 1.2vw, 2rem)/1.2 var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.prose { max-width: 820px; margin-inline: auto; }
.prose p { margin: 0 0 12px; }
.prose h2 {
  margin: 32px 0 12px;
  font: 400 1.5rem/1.25 var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.prose h2:first-child { margin-top: 0; }
.prose h2.tagline {
  font: 700 1.5rem/1.3 var(--sans);
  text-transform: none;
  letter-spacing: 0;
}
.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--blue-deep); }

.back-link { margin: 0; }
.back-link a { text-underline-offset: 3px; }
.back-link a:hover { color: var(--blue-deep); }

/* Products ---------------------------------------------------------------- */

.product-box {
  position: relative;
  /* Room below for the 40px curve hanging off the bottom. */
  margin: 8px auto 72px;
  padding: 40px clamp(20px, 5vw, 56px) 16px;
  background: var(--blue-fill);
  color: var(--white);
}
/* The curved foot from the original theme, drawn as a stretchable SVG
   instead of a fixed 920px PNG so it fits any width. */
.product-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  height: 41px;
  background: url("../images/curve.svg") no-repeat 0 0 / 100% 100%;
}
.product-box__logo { display: block; margin: 0 auto 32px; }

.prose--inverse a:hover { color: var(--white); text-decoration-thickness: 2px; }

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px clamp(32px, 10vw, 140px);
  margin: 0;
  padding: 0 0 24px;
  list-style: none;
}
.product-list a {
  display: block;
  padding: 12px;
  transition: transform 0.2s;
}
.product-list a:hover { transform: scale(1.06); }
.product-list img { display: block; }

@media (max-width: 640px) {
  .product-box::after { height: 25px; }
  .product-box { margin-bottom: 52px; }
}

/* Awards ------------------------------------------------------------------ */

/* Flex rather than grid so a short last row is centred like everything else. */
.awards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 32px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.award { flex: 0 1 236px; }
.award__medal {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin-bottom: 12px;
}
.award__medal img { max-width: 118px; }
.award__title {
  margin: 0 0 6px;
  font: 600 1rem/1.4 var(--sans);
}
.award__details { margin: 0; font-size: 0.9375rem; line-height: 1.5; }

/* Sales geography --------------------------------------------------------- */

.map { margin: 0 0 32px; }
.map img { display: block; width: 100%; }

.countries {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  columns: 3 180px;
  column-gap: 32px;
}
.countries li { padding: 3px 0; break-inside: avoid; }

/* Contact ----------------------------------------------------------------- */

.contact-card {
  max-width: 560px;
  margin: 8px auto 0;
  padding: 32px var(--gutter);
  border: 1px solid var(--mist);
  line-height: 1.7;
}
.contact-card__logo { display: block; margin: 0 auto 20px; }
.contact-card__directors { margin: 16px 0 0; }

/* Footer ------------------------------------------------------------------ */

address { font-style: normal; }
/* Address parts wrap as units on phones instead of orphaning one word. */
.company__part { display: inline-block; }

.company a { text-decoration: none; text-underline-offset: 3px; }
.company a:hover { color: var(--blue-deep); text-decoration-line: underline; }

.site-footer { background: var(--mist); text-align: center; }

.site-footer__contact {
  padding: 30px var(--gutter) 25px;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.footer-logo { display: inline-block; margin-bottom: 15px; }
.footer-logo img { display: block; }

.copyright {
  background: var(--blue-fill);
  color: var(--white);
  padding: 12px var(--gutter);
  font-size: 0.8125rem;
}
.copyright p { margin: 0; }