/* ==========================================================================
   FOWLSTYLE COMPILED THEME CORE ENGINE (Bypassing Raw Utility Blocks)
   ========================================================================== */

/* 1. Global Page Reset Settings */
body, .bg-\[\#fafafa\] {
  background-color: #fafafa !important;
  color: #262626 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit !important;
  text-decoration: none !important;
}

/* 2. Top Header Navigation Layout Matrix (Matches Reference Site) */
header.sticky, header[role="banner"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  height: 60px !important;
  width: 100% !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #dbdbdb !important;
  box-sizing: border-box !important;
}

/* Spreads logo typography, search bar inputs, and utility link menus across your row header */
header.sticky .mx-auto, header[role="banner"] .mx-auto {
  max-width: 975px !important;
  margin: 0 auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* Typographic Cursive Script Logo Formatting */
.font-instagram, a.font-instagram {
  font-family: "Grand Hotel", cursive !important;
  font-size: 2.25rem !important;
  line-height: 1 !important;
  color: #262626 !important;
}

/* Central Search Input Box Core Style */
header.sticky form[role="search"] {
  display: flex !important;
  align-items: center !important;
  background-color: #efefef !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  width: 250px !important;
  height: 36px !important;
  box-sizing: border-box !important;
}

header.sticky form[role="search"] input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  margin-left: 8px !important;
  width: 100% !important;
  font-size: 14px !important;
}

/* 3. Navigation SVG Vector Icon Sizing Fixes */
header.sticky .flex.items-center.gap-4 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important; /* Spreads layout icons side-by-side on the right */
}

header.sticky svg, 
header.sticky a svg, 
header.sticky button svg,
.fowlstyle-navigation-header svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #262626 !important;
  fill: none !important;
  stroke-width: 2px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* User Account Profile Dot Box Mapping */
.fowlstyle-profile-btn, button.fowlstyle-profile-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: block !important;
  border: 1px solid #dbdbdb !important;
}

.fowlstyle-profile-btn img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 4. Dropdown Menu Hide Modifiers (Hides unclicked notification overlays) */
.fowlstyle-activity-dropdown,
.fowlstyle-profile-dropdown,
.hidden,
div[class*="dropdown"].hidden {
  display: none !important; /* Prevents text columns from overlaying layout views */
}

/* 5. Main Body 2-Column Split Alignment Framework */
.fowlstyle-shell {
  display: flex !important;
  flex-direction: row !important;
  max-width: 935px !important;
  margin: 30px auto 0 !important;
  padding: 0 20px !important;
  gap: 32px !important;
  box-sizing: border-box !important;
}

.fowlstyle-feed-column {
  flex: 1 !important;
  max-width: 600px !important;
}

.fowlstyle-sidebar-column {
  width: 293px !important;
  flex: 0 0 293px !important;
  position: sticky !important;
  top: 88px !important;
  height: fit-content !important;
  background-color: #ffffff !important;
  border: 1px solid #dbdbdb !important;
  padding: 20px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

/* 6. Instagram Profile CPT 3-Column Square Image Photo Grid Component */
.fowlstyle-profile-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important; /* Identical to your Bolt layout site link */
  width: 100% !important;
  margin-top: 15px !important;
}

.fowlstyle-profile-grid .grid-item {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background-color: #efefef !important;
  border: 1px solid #dbdbdb !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fowlstyle-profile-grid .grid-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 7. Fluid Mobile Display Adaptation Rules */
@media (max-width: 999px) {
  .fowlstyle-sidebar-column { display: none !important; }
}

@media (max-width: 735px) {
  .fowlstyle-shell { padding: 0 !important; margin-top: 0 !important; }
  .fowlstyle-
  -grid { gap: 3px !important; } /* Close border mapping on touch panels */
  header.sticky form[role="search"] { display: none !important; }
}


/* ==========================================================================
   FOWLSTYLE COMPILED THEME STYLES (Tailwind Asset Sizing Replacement Engine)
   ========================================================================== */

/* 1. Force Raw SVG Elements to Render at Correct Dimensions */
header.sticky svg,
header.sticky a svg,
header.sticky button svg,
.sticky[role="banner"] svg,
.fowlstyle-app-shell header svg {
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  stroke: #262626 !important; /* Force standard Instagram dark-charcoal look */
  fill: none !important;
  stroke-width: 2px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.2s ease !important;
}

/* Ensure the central search bar glass vector magnifying icon stays small */
header.sticky form[role="search"] svg,
.sticky[role="banner"] form svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #8e8e8e !important; /* Muted gray for search bar */
}

/* 2. Fix Layout Distribution & Force Icons Side-by-Side */
header.sticky .flex.items-center.gap-4,
.sticky[role="banner"] .flex.items-center.gap-4 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 18px !important; /* Forces right action menus to line up cleanly in a row */
}

/* 3. Hide Unclicked Floating Dropdowns (Cleans up the broken text panels) */
.fowlstyle-activity-dropdown,
.fowlstyle-profile-dropdown,
header .hidden,
.hidden {
  display: none !important; /* Collapses open lists from floating over your page views */
}

/* 4. Desktop Sidebar Sticky Rules Adaptation mapping */
.fowlstyle-sidebar-column {
  background-color: #ffffff !important;
  border: 1px solid var(--ig-border, #dbdbdb) !important;
  padding: 20px !important;
  border-radius: 8px !important;
}

/* 5. Desktop Grid Display Fallbacks */
@media (min-width: 640px) {
  header.sticky .sm\:block,
  .sticky[role="banner"] .sm\:block {
    display: block !important;
  }
}


/* ==========================================================================
   FOWLSTYLE CUSTOM GLOBAL HOTFIX: HEADER PROFILE / FAVICON ICON RESIZER
   ========================================================================== */

/* 1. Primary Targeted Lock for All Sticky Header SVG Variants */
header.sticky svg, 
header.sticky a svg, 
header.sticky button svg, 
.sticky[role="banner"] svg, 
.fowlstyle-app-shell header svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 2. Primary Targeted Lock for All Header Image/Gravatar Variants */
.site-header img.avatar,
.site-header .avatar,
.main-navigation img.avatar,
a[href*="/profile/"] img,
header img[src*="gravatar.com"] {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    vertical-align: middle !important;
    object-fit: cover !important;
}

/* 3. Smooth Alignment Adjustment for Layout Integrity */
header.sticky a, 
header.sticky button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}




/* ==========================================================================
   FOWLSTYLE EXPERT FIX: LOCK UNBLOCKABLE CLICK INTERACTION FOR HOME GRID
   ========================================================================== */

/* Force all mouse pointer actions to pass straight through the hover overlays */
.grid-item-overlay,
.grid-item .grid-item-overlay,
.fowlstyle-profile-grid .grid-item-overlay,
[class*="-overlay"],
[class*="-hover"] {
    pointer-events: none !important;
}

/* Ensure the parent grid item container remains the absolute layer capturing clicks */
.fowlstyle-profile-grid .grid-item,
.grid-item {
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Hard-lock all lookbook link anchors to fill 100% of the tile canvas */
.fowlstyle-profile-grid .grid-item a,
.grid-item a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    z-index: 20 !important; /* Forces link text target plane to the highest priority stack */
    pointer-events: auto !important; /* Demands click tracking activation */
}

/* Ensure post thumbnail images never hijack browser mouse tracking clicks */
.grid-item img,
.fowlstyle-profile-grid .grid-item img {
    pointer-events: none !important;
}


/* ==========================================================================
   FOWLSTYLE PRODUCTION FIX: FORCED NAVIGATION PROFILE PICTURE VISIBILITY
   ========================================================================== */

/* Hard-lock the parent container to an exact block dimension size */
header.sticky a[href*="/profile/"],
header.sticky a[aria-label="Profile"] {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force the embedded profile image to inherit the structural boundaries */
header.sticky a[href*="/profile/"] img,
header.sticky a[aria-label="Profile"] img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Ensure the grid item handles absolute layering layers correctly */
.fowlstyle-profile-grid .grid-item {
    position: relative !important;
    cursor: pointer !important;
    display: block !important;
}

/* Force the hidden link block to expand over the entire image grid container box */
.fowlstyle-tile-click-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 30 !important; /* Positions the clickable layer on top of all images and shadows */
    display: block !important;
    background: transparent !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* Clear mouse blocking from hover overlays so click target points drop straight to the link */
.fowlstyle-profile-grid .grid-item-overlay {
    z-index: 10 !important;
    pointer-events: none !important; /* CRITICAL: Passes clicks right through the hover box */
}

.fowlstyle-profile-grid .grid-item img {
    pointer-events: none !important; /* Prevents raw image right clicks from blocking redirects */
}