/*
Theme Name: Awen Arts Child
Template: twentytwentyfour
Version: 1.0
*/

/* =========================
   Awen Variables + Base
   ========================= */
:root{
  --awen-radius: 18px;
  --awen-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* A reusable “Awen Section” wrapper */
.awen-section{
  border-radius: calc(var(--awen-radius) + 6px);
  box-shadow: var(--awen-shadow);
  overflow: hidden;
}

/* Subtle “inspiration glow” (keep it barely-there) */
.awen-glow{
  background:
    radial-gradient(circle at 30% 0%,
      rgba(140, 90, 60, 0.10),
      rgba(244, 241, 236, 0.0) 60%);
}

/* Softer artwork cards / images */
.wp-block-image img{
  border-radius: var(--awen-radius);
}

/* Buttons: clean, modern pill */
.wp-block-button__link{
  border-radius: 999px;
  padding: 0.85em 1.15em;
  text-decoration: none;
}

/* =========================
   Awen Home: section + cards
   ========================= */

/* Home-scoped optional heading rhythm */
.awen-home h2{
  margin-top: 0;
  margin-bottom: 0.35em;
}

/* Whisper line under headings */
.awen-kicker{
  font-size: 0.95em;
  opacity: 0.85;
  margin-top: 0;
  margin-bottom: 1.25em;
}

/* Card content spacing */
.awen-card{
  border-radius: var(--awen-radius);
  box-shadow: var(--awen-shadow);
  overflow: hidden;
  background: rgba(255,255,255,0.35);
}

/* Ensure inner content doesn't glue to the edges if you forget padding */
.awen-card > *{
  margin-left: 0;
  margin-right: 0;
}

.awen-card .wp-block-image{
  margin: 0;
}

.awen-card .wp-block-image img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0; /* card handles rounding */
}

/* Ensure clipping works with WP inner wrappers */
.awen-card,
.awen-card .wp-block-group__inner-container{
  border-radius: var(--awen-radius);
  overflow: hidden;
}

/* Home masthead hero image polish (non-home-hero pages can still use this) */
.awen-home .awen-masthead .wp-block-image img,
.awen-home .awen-masthead .wp-block-cover{
  border-radius: calc(var(--awen-radius) + 6px);
  box-shadow: var(--awen-shadow);
  overflow: hidden;
}

/* Featured print gradient container fix */
.awen-featured-print,
.awen-featured-print .wp-block-group__inner-container{
  border-radius: var(--awen-radius);
  overflow: hidden;
}

/* =========================
   Project title links + Hover polish
   ========================= */
.awen-project-title a{
  text-decoration: none;
  color: inherit;
}
.awen-project-title a:hover{
  text-decoration: underline;
}

/* Project image hover — subtle and calm */
.wp-block-image img{
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wp-block-image a:hover img{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* Smaller projects list spacing */
.awen-section .awen-project-title{
  margin-bottom: 0.1rem;
}
.awen-section .awen-kicker{
  margin-top: 0;
  margin-bottom: 1rem;
}

/* =========================
   Gallery image wrapper (Art Cards / Misc)
   ========================= */
.awen-gallery-image{
  border-radius: var(--awen-radius);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Make the Image block act like a true rounded mask */
.wp-block-image.awen-gallery-image{
  border-radius: var(--awen-radius);
  overflow: hidden;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure image fills the wrapper */
.wp-block-image.awen-gallery-image img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* =========================
   Prints page styling
   ========================= */
.awen-prints .awen-kicker{
  margin-top: 0.25rem;
  margin-bottom: 1.25rem;
}

/* Featured print: keep it special but not gigantic */
.awen-prints .awen-featured-print{
  border-radius: calc(var(--awen-radius) + 6px);
  overflow: hidden;
}

/* Ensure any gradient/background respects rounding */
.awen-prints .awen-featured-print,
.awen-prints .awen-featured-print .wp-block-group__inner-container{
  overflow: hidden;
}

/* =========================
   HOME HERO (Fixes clipping + removes “card” look)
   ========================= */

/*
Editor classes to apply:
- Outer hero group: awen-hero (can also keep awen-section awen-glow awen-masthead)
- Inner group wrapping the image: awen-hero-mark
- Image block: awen-hero-logo
*/

/* HOME HERO */
.awen-hero{
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  min-height: 320px;          /* give room for H1 + sub + logo */
  height: auto;               /* IMPORTANT: stop forced cropping */
  overflow: hidden;           /* ok because we’ll constrain the img */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, #f7f6f4 0%, #ffffff 100%);
}

/* keep the logo area from “stealing” space / causing flex weirdness */
.awen-hero-mark{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 1.5rem;     /* IMPORTANT: prevents bottom clipping */
}

/* WP Image block = class is on FIGURE, so target the IMG inside */
.awen-hero figure.awen-hero-logo,
.awen-hero .wp-block-image.awen-hero-logo{
  margin: 0;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* THIS is what actually scales the logo */
.awen-hero figure.awen-hero-logo img{
  display: block;
  width: auto;
  height: auto;
  max-height: 220px;                  /* controls logo height */
  max-width: min(520px, 70vw);        /* controls logo width */
  object-fit: contain;
  object-position: center;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  opacity: 50%;
}

/* space between your text and the logo */
.awen-hero h1{ margin-bottom: 0.75rem; }
.awen-hero p{ margin-bottom: 0.75rem; }

/* watermark behind content */
.awen-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("/wp-content/uploads/awen-arts-logo.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size: clamp(240px, 35vw, 420px);
  pointer-events:none;
  z-index:0;
  opacity: 0.04; /* use this only if the file itself isn’t already faded */
}

/* keep real content above watermark */
.awen-hero > *{
  position: relative;
  z-index: 1;
}
.awen-hero .wp-block-image{
  margin-top: clamp(12px, 2vw, 20px);
}
.projects-cta{
  margin-top: clamp(32px, 6vw, 64px);
  opacity: 0.85;
}
.projects-cta a{
  text-decoration: none;
}

.projects-cta a:hover,
.projects-cta a:focus-visible{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
/* =========================
   Awen Footer (final alignment pattern)
   ========================= */

/* =========================
   Awen Footer (minimal, after content-width toggle)
   ========================= */

footer .awen-footer{
  padding-block: clamp(28px, 4vw, 52px);
  text-align: left;
}

footer .awen-footer p{
  margin: 0;
  line-height: 1.7;
}
footer .awen-footer p + p{
  margin-top: 8px;
}

footer .awen-footer a{
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  opacity: 0.9;
  font-weight: 500;
}
footer .awen-footer a:hover{ opacity: 1; }

footer .awen-footer p:last-child{
  font-size: 0.85em;
  opacity: 0.7;
}

footer{ padding-bottom: clamp(32px, 6vw, 64px); }

/* Footer: keep content-width, but left align the constrained inner blocks */
footer .awen-footer{
  text-align: left;
}

/* =========================
   Footer: keep TT4 column, force LEFT text
   ========================= */

/* Leave the layout toggle ON: "Inner blocks use content width" */

footer .awen-footer{
  padding-block: clamp(28px, 4vw, 52px);
}

/* Make each inner block span the content column */
footer .awen-footer > *{
  width: 100%;
}

/* Override any centered paragraph alignment coming from the editor/theme */
footer .awen-footer p,
footer .awen-footer .has-text-align-center{
  text-align: left !important;
}
/* No underline by default */
footer .awen-footer a{
  text-decoration: none;
}

/* Subtle underline on hover/focus */
footer .awen-footer a:hover,
footer .awen-footer a:focus-visible{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
footer .awen-footer p{
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: normal;
}
/* =========================
   Footer Row spacing fix
   ========================= */

/* Tighten the row so it behaves like inline content */
footer .awen-footer .wp-block-group.is-layout-flex,
footer .awen-footer .wp-block-row{
  margin-top: 0;
  margin-bottom: 0;
  gap: 12px; /* controls space between links and icons */
  align-items: center;
}

/* Remove unexpected extra space above the row */
footer .awen-footer .wp-block-group.is-layout-flex + *{
  margin-top: 6px;
}
footer .awen-footer .wp-social-link{
  transform: translateY(1px);
}

@media (max-width: 768px){
  .awen-hero{
    min-height: 240px;
    padding: 1.25rem 1.25rem;
  }
  .awen-hero figure.awen-hero-logo img{
    max-height: 160px;
    max-width: 80vw;
  }
}
/* =========================
   Mobile spacing: stacked featured items
   ========================= */

@media (max-width: 780px){
  .wp-block-columns > .wp-block-column + .wp-block-column{
    margin-top: 32px;
  }
}
/* =========================
   Mobile: spacing between Columns blocks
   (skip the first one)
   ========================= */

@media (max-width: 780px){
  .awen-prints .wp-block-columns:not(:first-child){
    margin-top: 32px;
  }
}
@media (max-width: 780px){
  .wp-block-navigation__responsive-container.is-menu-open{
    background: rgba(255,255,255,0.98);
  }
}
/* =========================
   Mobile adjustments
   ========================= */
@media (max-width: 768px){

  /* Tighten masthead spacing */
  .awen-home .awen-masthead{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  /* Reduce hero image dominance (non-home-hero images) */
  .awen-home .awen-masthead img{
    max-height: 260px;
    object-fit: contain;
  }

  /* Tighten card padding on mobile */
  .awen-home .awen-card{
    padding: 1.25rem;
  }

  /* Reduce spacing between stacked cards */
  .awen-home .awen-card + .awen-card{
    margin-top: 1.25rem;
  }

  /* Make secondary panels lighter on mobile */
  .awen-home .awen-section{
    padding: 1.75rem;
  }

  /* HOME HERO on mobile */
  .awen-hero{
    min-height: 240px;
    padding: 1.25rem 1.25rem;
  }
  .awen-hero figure.awen-hero-logo img{
    max-height: 160px;
    max-width: 80vw;
    opacity: 50%;
  }



  /* Prints page: reduce overall section padding */
  .awen-prints .awen-section{
    padding: 1.5rem;
  }

  /* Optional: reduce button padding slightly on prints */
  .awen-prints .wp-block-button__link{
    padding: 0.75em 1.05em;
  }
}