/**
Theme Name: Astra Child
Author: Grey Lily Media
Author URI: https://greylilymedia.com.au/
Description: A WordPress Astra-child theme created for What\'s New In Italy
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ==========================================================================
   WNII Design Tokens
   Source: Claude Design system export. Colors also live natively in
   Appearance > Customize > Global > Colors (Astra global palette) so they
   stay editable there; these variables are here for any custom CSS that
   needs to reference the same values consistently.
   ========================================================================== */
:root {
  --wnii-orange-400: #F7941C;
  --wnii-orange-500: #E17F0E;
  --wnii-terracotta-500: #A5432C;
  --wnii-olive-500: #5C6740;
  --wnii-wine-500: #6B2331;
  --wnii-sea-500: #2E6273;
  --wnii-sea-600: #204A58;

  --wnii-cream-50:  #FDFAF4;
  --wnii-cream-100: #F8F1E4;
  --wnii-cream-200: #F0E5D2;
  --wnii-cream-300: #E2D2B6;
  --wnii-ink-900: #2A2118;
  --wnii-ink-700: #4A3D30;
  --wnii-ink-500: #77685A;

  --wnii-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --wnii-font-body:    'Lora', Georgia, 'Times New Roman', serif;
  --wnii-font-ui:      'Public Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Self-hosted fonts (variable weight, served from this theme — no external
   Google Fonts request at runtime). Sourced originally from Google Fonts.
   ========================================================================== */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url('assets/fonts/playfair-display-var-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-display: swap;
  font-weight: 400 900;
  src: url('assets/fonts/playfair-display-var-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('assets/fonts/lora-var-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-display: swap;
  font-weight: 400 700;
  src: url('assets/fonts/lora-var-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('assets/fonts/public-sans-var-normal.woff2') format('woff2-variations');
}

/* ==========================================================================
   UI elements (nav, buttons, form controls) use Public Sans rather than the
   Lora body-reading font — matches the design system's UI/body split.
   Headings and body copy are set natively via Customize > Typography.
   ========================================================================== */
.main-header-menu,
.main-header-menu .menu-link,
.main-header-menu a,
.ast-header-navigation,
.ast-header-navigation a,
.ast-mobile-popup-nav,
.ast-mobile-popup-nav a,
button,
.ast-button,
.button,
input,
select,
textarea,
.woocommerce a.button,
.woocommerce button.button {
  font-family: var(--wnii-font-ui) !important;
}

/* ==========================================================================
   Card imagery: consistent height + cover-crop so cards in a row read as a
   matched set regardless of the source photo's aspect ratio, plus a soft
   shadow/radius treatment for a more designed, less flat feel.
   ========================================================================== */
.elementor-widget.wnii-card-img img,
.wnii-card-img img {
  height: 280px;
  width: 100%;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 30px -12px rgba(42, 33, 24, 0.35);
}
.wnii-card {
  background: var(--wnii-cream-50);
  border-radius: 16px;
  padding: 28px !important;
  box-shadow: 0 4px 18px -8px rgba(42, 33, 24, 0.18);
}
.wnii-sponsor-img img {
  border-radius: 12px;
  box-shadow: 0 8px 24px -10px rgba(42, 33, 24, 0.3);
}

/* ==========================================================================
   Editorial layer — per the design system's art direction:
   display headlines in Playfair italic (sentence case), tracked-out kickers,
   hairline rules, animated link underlines, masthead + overlapping cover.
   ========================================================================== */

/* Display headlines: italic, tight leading, slight negative tracking */
h1.elementor-heading-title,
h2.elementor-heading-title {
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

/* Hero masthead title scales fluidly */
.wnii-hero-title h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(42, 33, 24, 0.18);
}

/* Kicker / eyebrow labels */
.wnii-kicker,
.wnii-kicker .elementor-heading-title {
  font-family: var(--wnii-font-ui) !important;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wnii-ink-500);
}
.wnii-kicker .elementor-heading-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.wnii-kicker .elementor-heading-title::before {
  content: "";
  flex: 0 0 28px;
  height: 2px;
  background: var(--wnii-orange-400);
  margin-top: 0.55em;
}
.wnii-kicker-light .elementor-heading-title { color: rgba(255,255,255,0.92); }
.wnii-kicker-light .elementor-heading-title::before { background: rgba(255,255,255,0.85); }

/* Hairline rule under section intros */
.wnii-rule {
  border-top: 1px solid var(--wnii-cream-300);
}

/* The overlapping current-edition cover */
.wnii-cover img {
  max-width: 340px;
  width: 100%;
  border-radius: 10px;
  transform: rotate(-2.5deg);
  box-shadow: 0 24px 60px -18px rgba(42, 33, 24, 0.45);
  transition: transform 0.2s ease-out;
}
.wnii-cover img:hover { transform: rotate(0deg); }

/* Nav: animated brand-orange underline */
.main-header-menu .menu-link { position: relative; }
.main-header-menu .menu-link::after {
  content: "";
  position: absolute;
  left: 1em;
  right: 100%;
  bottom: 4px;
  height: 2px;
  background: var(--wnii-orange-400);
  transition: right 0.2s ease-out;
}
.main-header-menu .menu-item:hover > .menu-link::after,
.main-header-menu .current-menu-item > .menu-link::after {
  right: 1em;
}

/* Body text links: warm underline that thickens on hover */
.elementor-widget-text-editor a {
  color: var(--wnii-sea-500);
  text-decoration: underline;
  text-decoration-color: var(--wnii-cream-300);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease-out;
}
.elementor-widget-text-editor a:hover { text-decoration-color: var(--wnii-orange-400); }

/* Mobile: cover sits inline rather than overlapping */
@media (max-width: 767px) {
  .wnii-cover img { max-width: 240px !important; transform: rotate(0) !important; margin: 0 auto; }
}

/* Single edition page: cover image + download / Google Earth actions */
.wnii-edition-cover img {
  max-width: 360px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 20px 50px -16px rgba(42, 33, 24, 0.4);
  margin: 0 0 32px 0;
}
.wnii-edition-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.wnii-download-btn {
  display: inline-block;
  background: var(--wnii-ink-900);
  color: #FFFFFF !important;
  font-family: var(--wnii-font-ui);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 6px;
  text-decoration: none !important;
}
.wnii-download-btn:hover { background: var(--wnii-orange-400); }
.wnii-earth-btn { background: var(--wnii-sea-500); }
.wnii-earth-btn:hover { background: var(--wnii-sea-600); }

/* Cart badge: needs its own colours distinct from the (now orange) icon itself,
   or the badge disappears into it. Dark badge, white number = clear contrast
   against both the orange icon and the cream header background. */
.ast-icon-shopping-bag::after {
  background-color: var(--wnii-ink-900) !important;
  color: #FFFFFF !important;
}

/* The Post Grid pagination: override the plugin's default blue with brand orange */
.rt-pagination .pagination-list > li > a,
.rt-pagination .pagination-list > li > span {
  color: var(--wnii-ink-900);
  border-color: var(--wnii-cream-300);
}
.rt-pagination .pagination-list > li > a:hover {
  background-color: var(--wnii-orange-400) !important;
  border-color: var(--wnii-orange-400) !important;
  color: #FFFFFF !important;
}
.rt-pagination .pagination-list > li.active > span {
  background-color: var(--wnii-orange-400) !important;
  border-color: var(--wnii-orange-400) !important;
  color: #FFFFFF !important;
}

/* Editions grid: keep excerpt blocks a consistent height so cards with
   naturally shorter/longer excerpts still line up in each row. */
.tpg-grid-layout .rt-excerpt,
.tpg-grid-layout .tpg-excerpt {
  min-height: 108px;
}

/* The Post Grid's own card images (used by Sample Articles, Historical
   Editions, General News, and Download Editions alike) vary wildly in
   height depending on each source photo's natural aspect ratio. Force a
   consistent crop so every card in a row lines up regardless of source. */
.rt-img-responsive {
  height: 220px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Download Editions is the exception: these images are the actual magazine
   covers, not decorative photos, so cropping them defeats the point. Show
   them in full (no crop) within a taller, uniform frame instead. */
.page-id-20 .rt-img-responsive {
  height: 380px !important;
  object-fit: contain !important;
  background: var(--wnii-cream-100);
}

/* Editions grid: The Post Grid uses a legacy float-based column system, which
   strands items into odd rows whenever card heights differ. Converting the
   row to CSS Grid removes float entirely, so cards always align in clean,
   even rows regardless of height, with no more orphaned single cards. */
.grid_layout_wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.grid_layout_wrapper > * {
  float: none !important;
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 1024px) {
  .grid_layout_wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid_layout_wrapper { grid-template-columns: 1fr; }
}

/* Single edition page: centre the cover image block */
.wnii-edition-cover {
  text-align: center;
}
.wnii-edition-actions {
  justify-content: center;
}

/* Single edition page: hide the author/date byline — not relevant for a
   monthly digest archive, and keeps the design consistent with the grid. */
.single-wnii_edition .entry-meta,
.wnii-news-article .entry-meta {
  display: none;
}

/* ==========================================================================
   Motion pass — a consistent, restrained baseline used everywhere: gentle
   lift + shadow on hoverable cards, a contained image zoom, and a soft lift
   on buttons. Nothing bounces, nothing scales past ~1.03, everything eases
   out over ~250ms. Respects reduced-motion preferences throughout.
   ========================================================================== */
 html {
  scroll-behavior: smooth;
}

/* Cards: homepage cards, sponsor card, mailing-list card, and every
   The Post Grid card (editions, sample articles, historical, general news)
   all lift very slightly with a deepening shadow on hover. */
.wnii-card,
.rt-holder,
.tpg-post-holder {
  transition: transform 0.28s ease-out, box-shadow 0.28s ease-out;
}
.wnii-card:hover,
.rt-holder:hover,
.tpg-post-holder:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px -12px rgba(42, 33, 24, 0.28);
}

/* Card images: a contained, subtle zoom on hover (the crop never moves,
   just breathes slightly) — skipped on the Editions page, where covers are
   shown in full via object-fit: contain and shouldn't crop-zoom. */
.wnii-card-img,
.rt-img-responsive-wrap,
.rt-holder .rt-img-hold {
  overflow: hidden;
  border-radius: 14px;
}
.wnii-card-img img,
.rt-holder .rt-img-responsive,
.tpg-post-holder .rt-img-responsive {
  transition: transform 0.4s ease-out, height 0s, width 0s, object-fit 0s;
}
.wnii-card:hover .wnii-card-img img,
.rt-holder:hover .rt-img-responsive,
.tpg-post-holder:hover .rt-img-responsive {
  transform: scale(1.035);
}
.page-id-20 .rt-holder:hover .rt-img-responsive,
.page-id-20 .tpg-post-holder:hover .rt-img-responsive {
  transform: none;
}

/* Buttons: a soft lift + shadow, on top of the colour transitions already
   in place — applies to every native Elementor button, our own download
   buttons, and form submit buttons alike. */
.elementor-button,
.wnii-download-btn,
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button {
  transition: transform 0.22s ease-out, box-shadow 0.22s ease-out, background-color 0.22s ease-out !important;
}
.elementor-button:hover,
.wnii-download-btn:hover,
button[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(42, 33, 24, 0.35);
}

/* Sponsor — image lifts gently in step with its card */
.wnii-sponsor-img img { transition: transform 0.3s ease-out; }
.wnii-card:hover .wnii-sponsor-img img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wnii-card, .rt-holder, .tpg-post-holder,
  .wnii-card-img img, .rt-holder .rt-img-responsive, .tpg-post-holder .rt-img-responsive,
  .elementor-button, .wnii-download-btn, button[type="submit"], .wnii-sponsor-img img,
  .wnii-cover img, .main-header-menu .menu-link::after {
    transition: none !important;
  }
}