/*
Theme Name: Precious Oils
Theme URI: https://example.com/precious-oils
Author: Premium Web Agency
Author URI: https://promowebdesigns.com
Description: Elementor-friendly theme for an independent Young Living Brand Partner. Ships ten native Elementor widgets, a design-token Global Kit, a product post type, and Theme Builder location support. Works with Elementor Free; defers header/footer to Elementor Pro Theme Builder when it is active.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: precious-oils
Tags: elementor, custom-menu, featured-images, translation-ready, block-styles, wide-blocks

Precious Oils WordPress Theme, (C) 2026 Premium Web Agency
*/

/*
  The design system lives in assets/css/theme.css and is enqueued separately.
  This file carries the theme header and a small number of WordPress-specific
  adjustments that have no equivalent in the static build.
*/

/* --------------------------------------------------------------------------
   WordPress core classes
   -------------------------------------------------------------------------- */
.alignleft   { float: left;  margin: 0.5rem 1.5rem 1rem 0; }
.alignright  { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide   { max-width: 1340px; margin-inline: auto; }
.alignfull   { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 1rem; left: 50%;
  translate: -50% 0;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  z-index: 200;
  padding: 0.75rem 1.5rem;
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
}

/* The admin bar must not hide the fixed site header. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* --------------------------------------------------------------------------
   Elementor interop
   --------------------------------------------------------------------------
   Widgets deliberately render WITHOUT a .container wrapper — Elementor's own
   section/container controls the width, and doubling them up would halve the
   content area. The kit sets the container width to 1340px to match the design.
   -------------------------------------------------------------------------- */

/* Inside the editor, give full-bleed widgets a visible boundary so they can be
   selected and dragged rather than appearing to escape their section. */
.elementor-editor-active .po-fullbleed { outline: 1px dashed rgba(45,52,63,.25); }

/* Elementor wraps every widget; make sure our grid children still stretch. */
.elementor-widget-container > .product-grid,
.elementor-widget-container > .pricing-grid,
.elementor-widget-container > .gallery-mosaic,
.elementor-widget-container > .features__grid { width: 100%; }

/* Our sections already own their vertical rhythm; stop Elementor's default
   widget margin from adding a second gap underneath. */
.elementor-widget-po-hero .elementor-widget-container,
.elementor-widget-po-cta-band .elementor-widget-container,
.elementor-widget-po-gallery .elementor-widget-container { margin-bottom: 0; }

/* Pages built with Elementor Canvas have no theme header, so the fixed-header
   offset must not apply. */
.elementor-template-canvas .site-main { padding-top: 0; }