/**
 * Modern Natural public composition.
 * One canvas inside the existing Astra/member shell; backgrounds never use vw
 * breakouts. Existing components still own controls, states, media and overlays.
 * Important declarations below replace legacy important page geometry only.
 */

/* These two public shortcodes inherit Elementor's widget-specific percentage
 * width. Release that wrapper; keep the product's own shared content gutter. */
body:not(.elementor-editor-active) :is(.e-con.e-parent, .e-con-inner, .elementor-widget-shortcode, .elementor-widget-container, .elementor-shortcode):has(#alAquariumsIntro),
body:not(.elementor-editor-active) :is(.e-con.e-parent, .e-con-inner, .elementor-widget-shortcode, .elementor-widget-container, .elementor-shortcode):has(.al-showcase.al-discovery),
body:not(.elementor-editor-active) :is(.e-con.e-parent, .e-con-inner, .elementor-widget-shortcode, .elementor-widget-container, .elementor-shortcode):has(.al-toolsHub) {
  --content-width: 100%;
  --container-widget-width: 100%;
  width: 100% !important;
  flex-basis: auto;
  align-self: stretch;
  max-width: none;
  min-width: 0;
  padding-inline: 0;
  margin-inline: 0;
}
/* The public introduction shares an Elementor row with an empty member-rail
 * shortcode. It must not reserve a second sidebar for anonymous visitors. */
body:not(.elementor-editor-active) .e-con.e-parent:has(#alAquariumsIntro) { flex-direction: column; gap: 0; }

/* Homepage: the section paints the available canvas; only its content is boxed. */
body .al-homepage {
  --al-home-section: var(--al-layout-section);
  --al-home-container: min(var(--al-layout-wide), calc(100% - 2 * var(--al-layout-gutter)));
  --al-home-shadow: 0 6px 24px rgb(20 35 28 / 5%);
  --al-home-radius: 12px;
}
body .al-homepage > .al-homepage__hero { padding-inline: var(--al-layout-gutter); }
body .al-homepage .al-homepage__heroContent { width: min(100%, 960px); }
body .al-homepage .al-homepage__hero h1 { font-size: clamp(2.125rem, 4.2vw, 3.75rem); line-height: 1.12; max-width: 23ch; }
body .al-homepage .al-homepage__hero p { max-width: 62ch; font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.65; }
body .al-homepage .al-homepage__funnel { --al-section-bg: #f6f8f5; padding-bottom: var(--al-layout-section); }
body .al-homepage .al-homepage__funnelContent { border-radius: 12px; border-color: var(--al-surface-border); background: #fbfdfb; box-shadow: var(--al-surface-shadow-floating); }
body .al-homepage .al-homepage__aquariumsGrid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
body .al-homepage .al-homepage__aquariumsCopy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px; align-items: start; }
body .al-homepage .al-homepage__aquariumsCopy h2 { grid-column: 1; grid-row: 1 / 3; max-width: 22ch; margin: 0; }
body .al-homepage .al-homepage__aquariumsCopy > p { grid-column: 2; margin: 0; max-width: 60ch; }
body .al-homepage .al-homepage__aquariumsCopy > a { grid-column: 1; justify-self: start; margin: 0; }
body .al-homepage .al-homepage__aquariumsStage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .34fr); align-items: end; gap: 20px; min-height: 0; }
body .al-homepage .al-homepage__aquariumsScreen { position: relative; inset: auto; width: 100%; border-radius: 10px; box-shadow: var(--al-home-shadow); }
body .al-homepage .al-homepage__aquariumsScreen.is-today,
body .al-homepage .al-homepage__aquariumsScreen.is-overview { inset: auto; width: 100%; }
body .al-homepage .al-homepage__community { background: #f6f8f5; padding-block: var(--al-layout-section); }
body .al-homepage .al-homepage__counts { --al-section-bg: #fff; padding-block: 32px; }
body .al-homepage .al-homepage__counts h2 { font-size: 1.125rem; margin-bottom: 20px; }
body .al-homepage .al-homepage__countItem { padding: 12px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body .al-homepage .al-homepage__countItem + .al-homepage__countItem { border-inline-start: 1px solid var(--al-surface-border); padding-inline-start: 24px; }
body .al-homepage .al-homepage__countItem dd { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 650; }
body .al-homepage .al-homepage__countItem dt { font-size: .875rem; font-weight: 500; }
body .al-homepage .al-homepage__lessons { --al-section-bg: #f6f8f5; }
body .al-homepage .al-homepage__toolsGrid { grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: var(--al-layout-gap); }
body .al-homepage .al-homepage__toolsStage { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
body .al-homepage .al-homepage__toolsScreen { position: relative; inset: auto; border-radius: 10px; box-shadow: var(--al-home-shadow); }
body .al-homepage .al-homepage__toolsScreen.is-result { position: relative; inset: auto; width: 100%; grid-row: 1; }
body .al-homepage .al-homepage__toolsScreen.is-setup { position: relative; inset: auto; width: min(70%, 460px); justify-self: end; }
body .al-homepage .al-homepage__instagram { --al-section-bg: #f6f8f5; padding-block: 40px; }
body .al-homepage .al-homepage__instagram .al-homepage__sectionHead { margin-bottom: 24px; }
body .al-homepage .al-homepage__instagram h2 { max-width: 32ch; font-size: clamp(1.5rem, 2vw, 1.875rem); }
body .al-homepage .al-homepage__newsletter { --al-section-bg: #fff; }
body .al-homepage .al-homepage__newsletterBox { padding: 28px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

/* Public My Aquariums is a product introduction, not a bordered dashboard. */
body #alAquariumsIntro.al-aquariumsIntro {
  width: min(var(--al-layout-wide), calc(100% - 2 * var(--al-layout-gutter)));
  max-width: none;
  margin: clamp(32px, 5vw, 64px) auto var(--al-layout-section);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body #alAquariumsIntro.al-aquariumsIntro .al-aquariumsIntro__layout {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
  grid-template-areas: "intro preview" "start preview";
  gap: 24px clamp(28px, 4vw, 56px);
  align-items: start;
}
body #alAquariumsIntro.al-aquariumsIntro h1 { font-size: var(--al-layout-title); line-height: 1.15; max-width: 18ch; }
body #alAquariumsIntro.al-aquariumsIntro .al-aquariumsIntro__start { width: 100%; max-width: 440px; text-align: left; justify-self: start; }
body #alAquariumsIntro.al-aquariumsIntro .al-aquariumsIntro__start .al-authpill { width: auto; min-height: 46px; }
body #alAquariumsIntro .al-productGallery { min-width: 0; border-radius: 12px; box-shadow: var(--al-surface-shadow-floating); }

/* The public community keeps every existing example and its order. */
body #alMemberArea:has(.al-showcase.al-discovery) {
  width: min(var(--al-layout-wide), calc(100% - 2 * var(--al-layout-gutter)));
  max-width: var(--al-layout-wide);
  margin-inline: auto;
}
body .al-showcase.al-discovery { max-width: 100%; }
body .al-showcase.al-discovery .al-showcase-intro { padding-block: clamp(28px, 4vw, 48px); }
body .al-showcase.al-discovery .al-showcase-intro h1 { font-size: var(--al-layout-title); line-height: 1.15; }
#alPublicCommunity #alMemberArea.al-community.al-community-public { --al-page-shell-max-width: var(--al-layout-wide); }
#alPublicCommunity #alMemberArea.al-community.al-community-public .al-tanks-container {
  width: min(var(--al-layout-wide), calc(100% - 2 * var(--al-layout-gutter))) !important;
  max-width: var(--al-layout-wide) !important;
  margin-inline: auto !important;
}
#alPublicCommunity #alMemberArea.al-community.al-community-public .al-community-hero { border-radius: var(--al-layout-hero-radius); }

/* Archive/category composition. Only page-level roots are addressed; detail
 * dialogs, filter drawers and the authenticated workspace keep their geometry. */
body :is(.al-databases__container, .al-toolsHub__inner) {
  width: min(var(--al-layout-wide), calc(100% - 2 * var(--al-layout-gutter)));
  max-width: var(--al-layout-wide);
  margin-inline: auto;
}
body #alLearningJourney.al-lj {
  width: min(var(--al-layout-standard), calc(100% - 2 * var(--al-layout-gutter)));
  max-width: var(--al-layout-standard);
  padding-inline: 0;
}
body :is(.al-databases__hero h1, .al-toolsHub__title, .al-lj-intro h1) { font-size: var(--al-layout-title); line-height: 1.15; }
body .al-databases__hero { border-radius: var(--al-layout-hero-radius); box-shadow: none; }
body #alLessonsLibrary.al-lessons-landing {
  width: min(var(--al-layout-wide), calc(100% - 2 * var(--al-layout-gutter))) !important;
  max-width: var(--al-layout-wide) !important;
  margin-inline: auto !important;
}
body #alLessonsLibrary .al-lessons-hero { border-radius: var(--al-layout-hero-radius) !important; }
body #alLessonsLibrary :is(.al-lessons-hero__title, .al-hero__title) { font-size: var(--al-layout-title); line-height: 1.15; }
body .al-fish-page { --al-page-shell-max-width: var(--al-layout-wide); }
body .al-fish-archive .al-fish-wrap,
body.al-pl-entry-modernized :is(.al-page-header.pl-entry-hero, #plant-grid.pl-discovery-grid),
body.al-algae-entry-modernized :is(.al-page-header.algae-entry-hero, #algae-grid.algae-discovery-grid) {
  width: min(var(--al-layout-wide), calc(100% - 2 * var(--al-layout-gutter))) !important;
  max-width: var(--al-layout-wide) !important;
  margin-inline: auto;
}
body :is(.al-fish-hero__card, .al-page-header.pl-entry-hero, .al-page-header.algae-entry-hero) { border-radius: var(--al-layout-hero-radius) !important; }
body :is(.al-fish-hero h1, .pl-entry-hero h1, .algae-entry-hero h1) { font-size: var(--al-layout-title) !important; line-height: 1.15 !important; }
body :is(.pl-entry-hero h1, .algae-entry-hero h1) { max-width: none !important; }
body :is(.pl-entry-hero__inner, .algae-entry-hero__inner) { padding: clamp(24px, 3.5vw, 48px) !important; }

/* Public tool headers share the grid; focused calculators retain a narrower
 * workspace. No calculations, result state, dependencies or product rules. */
body .al-tools-app.al-tool-shell:not(.al-tool-shell--aquarium) { --al-tool-container-width: var(--al-layout-wide); }
body .al-tools-app.al-tool-shell:not(.al-tool-shell--aquarium) .al-tool-container {
  width: min(var(--al-layout-wide), calc(100% - 2 * var(--al-layout-gutter)));
  padding-block: 32px var(--al-layout-section);
}
body .al-tools-app.al-tool-shell:not(.al-tool-shell--aquarium) .al-tool-title { font-size: var(--al-layout-title); line-height: 1.15; }
body .al-tools-app.al-tool-shell--planner .al-planner__steps { gap: 8px; }
body .al-tools-app.al-tool-shell--planner .al-planner .al-planner__requirement { padding-block: 16px; border-bottom: 1px solid var(--planner-line); }
body .al-tools-app.al-tool-shell--planner .al-planner .al-planner__requirement h4 { font-weight: 650; margin-bottom: 8px; }
body .al-tools-app.al-tool-shell--planner .al-planner [data-draft-status]:not([data-save-error]) { font-size: .75rem; color: var(--planner-muted); }
body .al-tools-app.al-tool-shell--lighting .al-tool-workspace { max-width: var(--al-layout-standard); }
body .al-tools-app.al-tool-shell--lighting .al-lighting-fieldset { margin-block: 0 24px; }
body .al-tools-app.al-tool-shell--lighting .al-lighting-input-group { gap: 12px; }
body .al-tools-app.al-tool-shell--lighting .al-lighting-result { border-color: var(--al-surface-border-selected); box-shadow: none; }

@media (max-width: 900px) {
  body .al-homepage .al-homepage__aquariumsCopy { display: block; }
  body .al-homepage .al-homepage__aquariumsCopy h2 { margin-bottom: 16px; }
  body .al-homepage .al-homepage__aquariumsCopy > p { margin-bottom: 16px; }
  body .al-homepage .al-homepage__aquariumsStage { grid-template-columns: minmax(0, 1fr); }
  body .al-homepage .al-homepage__aquariumsScreen.is-overview { width: min(75%, 460px); justify-self: end; }
  body .al-homepage .al-homepage__toolsGrid { grid-template-columns: minmax(0, 1fr); }
  body #alAquariumsIntro.al-aquariumsIntro .al-aquariumsIntro__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "preview" "start"; }
}
@media (max-width: 600px) {
  body .al-homepage .al-homepage__funnelContent { padding: 20px 16px; }
  body .al-homepage .al-homepage__countGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  body .al-homepage .al-homepage__countItem:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  body .al-homepage .al-homepage__toolsScreen.is-setup { width: 85%; }
  body .al-tools-app.al-tool-shell:not(.al-tool-shell--aquarium) .al-tool-container { padding-top: 24px; }
}