:root {
  --primary-hue: 258deg;
  --primary-saturation: 75%;
  --primary-lightness: 28%;
}

/*created from AI*/
/* Hero Section Layout */
.hero.row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

/* Inner column becomes a flex container */
.hero .col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* responsive stacking */
  width: 100%;
}

/* Left side: text block (subtitle + description stacked) */
.hero .text-block {
  flex: 1 1 50%;
  text-align: left;
}

.hero h1.display-4 {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

.hero h3 {
  font-size: 1.5rem;
  font-weight: 400;
  color: #555;
}

/* Right side: homepage image */
.hero .homepage-image {
  flex: 1 1 50%;
  text-align: right;
}

.hero .homepage-image img {
  max-width: 100%;
  height: auto;
}

/* Responsive tweak: stack vertically on small screens */
@media (max-width: 768px) {
  .hero .col {
    flex-direction: column;
    text-align: center;
  }

  .hero .text-block,
  .hero .homepage-image {
    flex: 1 1 100%;
    text-align: center;
  }

  .hero .homepage-image {
    margin-top: 2rem;
  }
}

h1 {
  margin-top: 40px !important; /* ensures 40px space before h1 */
}


/*created from AI*/

/* hero section */
.hero-text h1 {
  font-size: clamp(3rem, 6vw, 4rem);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
}

.contact-us {
  display: flex;
  flex-direction: column;   /* stack elements vertically */
  justify-content: center;  /* vertical centering if parent has height */
  align-items: center;      /* horizontal centering */
  text-align: center;       /* center text inside */
}

.contact-us p {
  margin: 0.25rem 0;        /* minimal spacing between paragraphs */
  line-height: 1.2;         /* tighter line spacing for regular text */
}

.map-frame {
  margin-top: 1rem;   /* adds space before this iframe only */
  display: block;     /* ensures it behaves like a block element */
}

/* added custom gallery*/
.cgallery {
  --cg-gap: 1.25rem;              /* a bit more breathing room */
  --cg-radius: 16px;              /* slightly bigger */
  --cg-border: color-mix(in srgb, #111827 12%, transparent);
  --cg-bg: #ffffff;
  --cg-text: #0f172a;
  --cg-muted: #475569;
  --cg-shadow: 0 14px 30px rgba(2, 6, 23, 0.10);

  display: grid;
  gap: var(--cg-gap);

  /* 3 columns by default (desktop) */
  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin: 1.25rem 0;
}

/* Responsive: 2 columns then 1 column */
@media (max-width: 900px) {
  .cgallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cgallery { grid-template-columns: 1fr; }
}

.cgallery__card {
  background: var(--cg-bg);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-radius);
  overflow: clip;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  min-height: 100%;
}

.cgallery__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cg-shadow);
  border-color: color-mix(in srgb, #2563eb 25%, var(--cg-border));
}

.cgallery__link {
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.cgallery__media {
  position: relative;

  /* bigger/taller media area than 16/10 */
  aspect-ratio: 16 / 11;

  background: #f1f5f9;
  display: grid;                 /* helps center letterboxed images */
  place-items: center;
}

/* IMPORTANT: show the full image (no crop) */
.cgallery__img {
  width: 100%;
  height: 100%;

  object-fit: contain;           /* full image always visible [1](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit) */
  object-position: center;

  display: block;

  /* optional: keep it looking nice when letterboxed */
  background: #f1f5f9;
}

.cgallery__img--placeholder {
  background:
    linear-gradient(120deg, #e2e8f0 0%, #f8fafc 50%, #e2e8f0 100%);
}

.cgallery__tags {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
  max-width: calc(100% - 1rem);
  pointer-events: none;
}

.cgallery__tag {
  --tag-bg: #111827;
  --tag-fg: #ffffff;

  background: var(--tag-bg);
  color: var(--tag-fg);
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.38rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.18);
  white-space: nowrap;
}

.cgallery__body {
  padding: 1.05rem 1.05rem 1.15rem;  /* bigger padding */
}

.cgallery__title {
  margin: 0;
  font-size: 1.1rem;                 /* slightly bigger text */
  font-weight: 650;
  color: var(--cg-text);
}

.cgallery__desc {
  margin: 0.55rem 0 0;
  font-size: 0.98rem;
  color: var(--cg-muted);
}

.cgallery--error {
  padding: 1rem;
  border: 1px solid #ef4444;
  border-radius: 10px;
  background: #fef2f2;
  color: #7f1d1d;
}

.cgallery__titlelink{
  color: inherit;
  text-decoration: none;
}
.cgallery__titlelink:hover,
.cgallery__titlelink:focus{
  text-decoration: underline;
}

/* Fixed-height thumbnail area */
.cgallery__media {
  position: relative;
  height: 220px;          /* 👈 pick your fixed height */
  width: 100%;
  background: #f1f5f9;    /* this becomes the “margin” color */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;       /* keep everything inside the box */
}

/* Image scales to fit; empty space becomes letterbox/pillarbox */
.cgallery__img {
  width: 100%;
  height: 100%;
  object-fit: contain;     /* 👈 full image, no crop; leaves empty space [1](https://www.w3schools.com/csS/css3_object-fit.asp)[2](https://github.com/golang/go/issues/58326) */
  object-position: center; /* center it */
  display: block;
  background: transparent;
}

/* Placeholder should match same fixed height too */
.cgallery__img--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #e2e8f0 0%, #f8fafc 50%, #e2e8f0 100%);
}

.ms-form {
  margin-top: 24px;   /* space before the form */
}

/*
Put this file in /static/css/hugo-easy-gallery.css
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
*/


/*
Grid Layout Styles
*/
.gallery {
    overflow: hidden;
    margin: 10px;
    max-width: 100%;
}
.gallery .box {
    float: left;
    position: relative;
    /* Default: 1 tile wide */
    width: 100%;
    padding-bottom: 100%; 
}
@media only screen and (min-width : 365px) {
    /* Tablet view: 2 tiles */
    .gallery .box {
        width: 50%;
        padding-bottom: 50%;
    }
}
@media only screen and (min-width : 480px) {
    /* Small desktop / ipad view: 3 tiles */
    .gallery .box {
        width: 33.3%;
        padding-bottom: 33.3%; /*  */
    }
}
@media only screen and (min-width : 9999px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 25%;
      padding-bottom: 25%;
   }
}

/*
Transition styles
*/
.gallery.hover-transition figure,
.gallery.hover-effect-zoom .img, 
.gallery:not(.caption-effect-appear) figcaption,
.fancy-figure:not(.caption-effect-appear) figcaption {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
/*
figure styles
*/
figure {
    position:relative; /* purely to allow absolution positioning of figcaption */
    overflow: hidden;
}
.gallery figure {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
}
.gallery.hover-effect-grow figure:hover {
    transform: scale(1.05);
}
.gallery.hover-effect-shrink figure:hover {
    transform: scale(0.95);
}
.gallery.hover-effect-slidedown figure:hover {
    transform: translateY(5px);
}
.gallery.hover-effect-slideup figure:hover {
    transform: translateY(-5px);
}

/*
img / a styles
*/

.gallery .img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.gallery.hover-effect-zoom figure:hover .img {
    transform: scale(1.05);
}
.gallery img {
    display: none; /* only show the img if not inside a gallery */
}
.gallery figure a {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*
figcaption styles
*/
.gallery figcaption,
.fancy-figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    color: #FFF;
    text-align: center;
    font-size: 75%; /* change this if you want bigger text */
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    cursor: pointer;
}
.gallery.caption-position-none figcaption,
.fancy-figure.caption-position-none figcaption  {
    display: none;
}
.gallery.caption-position-center figcaption,
.fancy-figure.caption-position-center figcaption {
    top: 0;
    padding: 40% 5px;
}
.gallery.caption-position-bottom figcaption,
.fancy-figure.caption-position-bottom figcaption {
    padding: 5px;
}
.gallery.caption-effect-fade figure:not(:hover) figcaption,
.gallery.caption-effect-appear figure:not(:hover) figcaption,
.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
    background: rgba(0, 0, 0, 0);
    opacity: 0;
}
.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
    margin-bottom: -100%;
}
.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption  {
    top: 100%;
}
figcaption p {
    margin: auto; /* override style in theme */
}