/* templates/blocks/header-mobile-menu/style.css — v2.4 (Full Font Styling & Fixes)
   - NEW: Áp dụng đầy đủ các biến CSS cho Font Family, Text Transform, Letter Spacing, Line Height.
   - FIX: Sửa lỗi Separator không rộng 100% bằng cách thay đổi cấu trúc padding.
*/

/* ============================================================
   1) Wrapper & CSS Variables Defaults
   ============================================================ */
.pf-mmenu-wrapper {
  /* Panel */
  --mmenu-panel-bg: #ffffff;
  --mmenu-panel-w: 300px;
  --mmenu-panel-pad: 20px;

  /* Header */
  --mmenu-header-bg: transparent;
  --mmenu-header-pad: 15px 20px;
  --mmenu-header-align: space-between;
  --mmenu-header-border-w: 1px;
  --mmenu-header-border-style: solid;
  --mmenu-header-border-color: #e0e0e0;
  --mmenu-header-text-color: inherit;
  --mmenu-header-font-family: inherit;
  --mmenu-header-font-size: 1.1em;
  --mmenu-header-font-weight: 600;
  --mmenu-header-text-transform: none;
  --mmenu-header-letter-spacing: normal;
  --mmenu-header-line-height: normal;
  
  /* Main Items */
  --mmenu-main-item-style: none;
  --mmenu-main-item-pad: 10px 0;
  --mmenu-main-item-radius: 0px;
  --mmenu-main-item-text-color: #111827;
  --mmenu-main-item-text-color-hover: #111827;
  --mmenu-main-item-bg: transparent;
  --mmenu-main-item-bg-hover: transparent;
  --mmenu-main-item-shadow-hover: none;
  --mmenu-main-item-sep-w: 1px;
  --mmenu-main-item-sep-style: solid;
  --mmenu-main-item-sep-color: #eeeeee;
  --mmenu-main-line-h: 1px;
  --mmenu-main-line-color: currentColor;
  --mmenu-main-item-font-family: inherit;
  --mmenu-main-item-font-size: inherit;
  --mmenu-main-item-font-weight: inherit;
  --mmenu-main-item-text-transform: none;
  --mmenu-main-item-letter-spacing: normal;
  --mmenu-main-item-line-height: normal;

  /* Submenu */
  --mmenu-sub-container-bg: #f8f8f8;
  --mmenu-sub-indicator: 'triangle';
  --mmenu-sub-indicator-color: #333333;
  --mmenu-indent-step: 16px;
  
  /* Sub Items */
  --mmenu-sub-item-style: none;
  --mmenu-sub-item-pad: 8px 0;
  --mmenu-sub-item-radius: 0px;
  --mmenu-sub-item-text-color: #333333;
  --mmenu-sub-item-text-color-hover: #333333;
  --mmenu-sub-item-bg: transparent;
  --mmenu-sub-item-bg-hover: transparent;
  --mmenu-sub-item-shadow-hover: none;
  --mmenu-sub-item-sep-w: 1px;
  --mmenu-sub-item-sep-style: solid;
  --mmenu-sub-item-sep-color: #e0e0e0;
  --mmenu-sub-line-h: 1px;
  --mmenu-sub-line-color: currentColor;
  --mmenu-sub-item-font-family: inherit;
  --mmenu-sub-item-font-size: inherit;
  --mmenu-sub-item-font-weight: inherit;
  --mmenu-sub-item-text-transform: none;
  --mmenu-sub-item-letter-spacing: normal;
  --mmenu-sub-item-line-height: normal;
}

/* ============================================================
   2) Trigger, Panel, Overlay
   ============================================================ */
.pf-mmenu__trigger { background:none; border:none; padding:5px; margin:0; cursor:pointer; line-height:1; color:inherit; -webkit-tap-highlight-color: transparent; }
.pf-mmenu__trigger i, .pf-mmenu__trigger svg, .pf-mmenu__trigger img, .pf-mmenu__trigger .pf-mmenu-svg-icon { width:var(--mmenu-trigger-icon-size); height:var(--mmenu-trigger-icon-size); display:block; }
.pf-mmenu__trigger i { font-size:var(--mmenu-trigger-icon-size); }
.pf-mmenu__trigger svg { fill: currentColor; }
.pf-mmenu-svg-icon { display:inline-flex; align-items:center; justify-content:center; }

.pf-mmenu__panel { position:fixed; top:0; bottom:0; width:var(--mmenu-panel-w); max-width:90vw; background:var(--mmenu-panel-bg); z-index:10001; transition:transform .3s cubic-bezier(.77,0,.175,1); display:flex; flex-direction:column; box-shadow:0 0 25px rgba(0,0,0,.15); }
.pf-mmenu--from-left { left:0; transform:translateX(-100%); }
.pf-mmenu--from-right { right:0; transform:translateX(100%); }
.pf-mmenu__overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10000; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; cursor:pointer; }
.pf-mmenu-wrapper.is-open .pf-mmenu__panel { transform:translateX(0); }
.pf-mmenu-wrapper.is-open .pf-mmenu__overlay { opacity:1; visibility:visible; }


/* ============================================================
   3) Header / Body
   ============================================================ */
.pf-mmenu__header {
  display: flex;
  justify-content: var(--mmenu-header-align);
  align-items: center;
  flex-shrink: 0;
  background-color: var(--mmenu-header-bg);
  padding: var(--mmenu-header-pad);
  border-bottom-width: var(--mmenu-header-border-w);
  border-bottom-style: var(--mmenu-header-border-style);
  border-bottom-color: var(--mmenu-header-border-color);
}

.pf-mmenu__header > span {
  flex-grow: 1;
  text-align: left;
  color: var(--mmenu-header-text-color);
  font-family: var(--mmenu-header-font-family);
  font-size: var(--mmenu-header-font-size);
  font-weight: var(--mmenu-header-font-weight);
  text-transform: var(--mmenu-header-text-transform);
  letter-spacing: var(--mmenu-header-letter-spacing);
  line-height: var(--mmenu-header-line-height);
}
.pf-mmenu__header[style*="--mmenu-header-align: center"] > span { text-align: center; }
.pf-mmenu__header[style*="--mmenu-header-align: flex-end"] > span { text-align: right; }

.pf-mmenu__close { background:none; border:none; font-size:24px; line-height:1; cursor:pointer; padding:5px; color:#888; -webkit-tap-highlight-color:transparent; transition:color 0.2s ease; }
.pf-mmenu__close:hover { color:#000; }

.pf-mmenu__body { 
  flex-grow:1; 
  overflow-y:auto; 
  padding: 0; /* FIX: Bỏ padding của body */
}

/* ============================================================
   4) General List & Item Structure
   ============================================================ */
.pf-mmenu__list, .pf-mmenu__submenu { list-style:none; margin:0; padding:0; }

.pf-mmenu__item > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  position: relative;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.pf-mmenu--sub-click .pf-mmenu__item.has-sub > a { cursor: pointer; }

/* ============================================================
   5) Main Items Styling
   ============================================================ */
.pf-mmenu__list > .pf-mmenu__item { border-bottom-width: var(--mmenu-main-item-sep-w); border-bottom-style: var(--mmenu-main-item-sep-style); border-bottom-color: var(--mmenu-main-item-sep-color); }
.pf-mmenu__list > .pf-mmenu__item:last-child { border-bottom: none; }

.pf-mmenu__list > .pf-mmenu__item > a { 
  padding: var(--mmenu-main-item-pad); 
  padding-left: var(--mmenu-panel-pad); /* FIX: Thêm padding ngang vào link */
  padding-right: var(--mmenu-panel-pad);
  color: var(--mmenu-main-item-text-color); 
  background-color: var(--mmenu-main-item-bg); 
  border-radius: var(--mmenu-main-item-radius);
  /* NÂNG CẤP: Áp dụng các thuộc tính font */
  font-family: var(--mmenu-main-item-font-family);
  font-size: var(--mmenu-main-item-font-size);
  font-weight: var(--mmenu-main-item-font-weight);
  text-transform: var(--mmenu-main-item-text-transform);
  letter-spacing: var(--mmenu-main-item-letter-spacing);
  line-height: var(--mmenu-main-item-line-height);
}
.pf-mmenu__list > .pf-mmenu__item > a:hover { color: var(--mmenu-main-item-text-color-hover); background-color: var(--mmenu-main-item-bg-hover); box-shadow: var(--mmenu-main-item-shadow-hover); }
.pf-mmenu__list > .pf-mmenu__item > a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: var(--mmenu-main-line-h); background-color: var(--mmenu-main-line-color); transform: scaleX(0); transition: transform .3s ease; }
.pf-mmenu__list > .pf-mmenu__item > a:hover::after { transform: var(--mmenu-main-item-style, 'none') = 'underline' ? scaleX(1) : scaleX(0); }

/* ============================================================
   6) Submenu Styling
   ============================================================ */
.pf-mmenu--sub-click .pf-mmenu__submenu,
.pf-mmenu--sub-hover .pf-mmenu__submenu { max-height:0; overflow:hidden; transition:max-height .35s ease-in-out; }
.pf-mmenu--sub-expanded .pf-mmenu__submenu { max-height:10000px; }
.pf-mmenu__submenu { background: var(--mmenu-sub-container-bg); }
.pf-mmenu__submenu .pf-mmenu__item { border-bottom-width: var(--mmenu-sub-item-sep-w); border-bottom-style: var(--mmenu-sub-item-sep-style); border-bottom-color: var(--mmenu-sub-item-sep-color); }
.pf-mmenu__submenu .pf-mmenu__item:last-child { border-bottom: none; }

.pf-mmenu__submenu .pf-mmenu__item > a { 
  padding: var(--mmenu-sub-item-pad); 
  padding-right: var(--mmenu-panel-pad); /* FIX: Thêm padding phải */
  color: var(--mmenu-sub-item-text-color); 
  background-color: var(--mmenu-sub-item-bg); 
  border-radius: var(--mmenu-sub-item-radius);
  /* NÂNG CẤP: Áp dụng các thuộc tính font */
  font-family: var(--mmenu-sub-item-font-family);
  font-size: var(--mmenu-sub-item-font-size);
  font-weight: var(--mmenu-sub-item-font-weight);
  text-transform: var(--mmenu-sub-item-text-transform);
  letter-spacing: var(--mmenu-sub-item-letter-spacing);
  line-height: var(--mmenu-sub-item-line-height);
}
/* FIX: Logic thụt lề mới, sử dụng panel-pad làm cơ sở */
.pf-mmenu__submenu[data-depth="2"] .pf-mmenu__item>a{padding-left:calc(var(--mmenu-panel-pad) + 1*var(--mmenu-indent-step));}
.pf-mmenu__submenu[data-depth="3"] .pf-mmenu__item>a{padding-left:calc(var(--mmenu-panel-pad) + 2*var(--mmenu-indent-step));}
.pf-mmenu__submenu[data-depth="4"] .pf-mmenu__item>a{padding-left:calc(var(--mmenu-panel-pad) + 3*var(--mmenu-indent-step));}
.pf-mmenu__submenu[data-depth="5"] .pf-mmenu__item>a{padding-left:calc(var(--mmenu-panel-pad) + 4*var(--mmenu-indent-step));}


.pf-mmenu__submenu .pf-mmenu__item > a:hover { color: var(--mmenu-sub-item-text-color-hover); background-color: var(--mmenu-sub-item-bg-hover); box-shadow: var(--mmenu-sub-item-shadow-hover); }
.pf-mmenu__submenu .pf-mmenu__item > a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: var(--mmenu-sub-line-h); background-color: var(--mmenu-sub-line-color); transform: scaleX(0); transition: transform .3s ease; }
.pf-mmenu__submenu .pf-mmenu__item > a:hover::after { transform: var(--mmenu-sub-item-style, 'none') = 'underline' ? scaleX(1) : scaleX(0); }

/* ============================================================
   7) Submenu Indicator Styling (Không thay đổi)
   ============================================================ */
.pf-mmenu__accordion-toggle { display:flex; align-items:center; justify-content:center; width:15px; height:15px; margin-right:-6px; color: var(--mmenu-sub-indicator-color); position: relative; }
.pf-mmenu__accordion-toggle::before, .pf-mmenu__accordion-toggle::after { content:''; display: block; transition: transform .3s ease, border-color .3s ease; background-color: transparent; }
.pf-mmenu-wrapper[class*="--indicator-triangle"] .pf-mmenu__accordion-toggle::before, .pf-mmenu-wrapper:not([class*="--indicator-"]) .pf-mmenu__accordion-toggle::before { width:7px; height:7px; border-style:solid; border-color: var(--mmenu-sub-indicator-color); border-width:0 2px 2px 0; transform:rotate(45deg); }
.pf-mmenu-wrapper[class*="--indicator-triangle"] .pf-mmenu__item.is-open > a .pf-mmenu__accordion-toggle::before, .pf-mmenu-wrapper:not([class*="--indicator-"]) .pf-mmenu__item.is-open > a .pf-mmenu__accordion-toggle::before { transform:rotate(-135deg); }
.pf-mmenu-wrapper[class*="--indicator-chevron"] .pf-mmenu__accordion-toggle::before { width:8px; height:8px; border-style:solid; border-color:var(--mmenu-sub-indicator-color); border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg); }
.pf-mmenu-wrapper[class*="--indicator-chevron"] .pf-mmenu__item.is-open > a .pf-mmenu__accordion-toggle::before { transform:translateY(0px) rotate(-135deg); }
.pf-mmenu-wrapper[class*="--indicator-plus"] .pf-mmenu__accordion-toggle::before, .pf-mmenu-wrapper[class*="--indicator-plus"] .pf-mmenu__accordion-toggle::after { position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background-color: var(--mmenu-sub-indicator-color); }
.pf-mmenu-wrapper[class*="--indicator-plus"] .pf-mmenu__accordion-toggle::before { transform: translate(-50%, -50%) rotate(0deg); }
.pf-mmenu-wrapper[class*="--indicator-plus"] .pf-mmenu__accordion-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.pf-mmenu-wrapper[class*="--indicator-plus"] .pf-mmenu__item.is-open > a .pf-mmenu__accordion-toggle::after { transform: translate(-50%, -50%) rotate(180deg); }
.pf-mmenu--sub-hover .pf-mmenu__item.has-sub:hover > .pf-mmenu__submenu{ max-height:1000px; }
.pf-mmenu--sub-hover .pf-mmenu__item.has-sub:hover > a .pf-mmenu__accordion-toggle{ /* placeholder */ }