/* =========================================================
   YUKINON OFFICIAL WEBSITE
   iPad Pro 13 RESPONSIVE FIX V2

   Portrait <= 1180px:
   - NIGHT header
   - NIGHT mobile menu
   - NIGHT hero

   Compact desktop 1181px - 1500px:
   - compact navigation
   - theme toggle separated from navigation
   - contact button stays inside viewport
   ========================================================= */


/* =========================================================
   iPad / TABLET PORTRAIT
   ========================================================= */

@media (max-width:1180px){

  /*
   * Explicit grid placement.
   * Keep theme toggle beside the hamburger button.
   */
  .site-header{
    grid-template-columns:
      auto
      minmax(0,1fr)
      auto !important;
  }


  .site-header .brand{
    grid-column:1;
    grid-row:1;
  }


  .site-header .yukinon-theme-toggle{
    grid-column:2;
    grid-row:1;

    justify-self:end;

    position:relative !important;

    z-index:103;

    inset:auto !important;

    transform:none !important;

    margin-right:12px;
  }


  .site-header .menu-button{
    grid-column:3;
    grid-row:1;
  }


  /* -------------------------------------------------------
     NIGHT / HEADER
     ------------------------------------------------------- */

  html[data-theme="night"]
  .site-header{
    background:
      rgba(24,15,30,.965) !important;

    border-bottom-color:
      rgba(255,255,255,.08) !important;

    box-shadow:
      0 8px 30px
      rgba(0,0,0,.22);
  }


  html[data-theme="night"]
  .site-header.is-scrolled{
    background:
      rgba(20,12,26,.985) !important;

    border-bottom-color:
      rgba(255,255,255,.09) !important;

    box-shadow:
      0 10px 34px
      rgba(0,0,0,.34);
  }


  html[data-theme="night"]
  .menu-button span{
    background:
      #f6eaf3 !important;
  }


  /* -------------------------------------------------------
     NIGHT / MOBILE MENU
     ------------------------------------------------------- */

  html[data-theme="night"]
  .global-nav,

  html[data-theme="night"]
  .global-nav.open{
    background:
      radial-gradient(
        circle at 50% 15%,
        rgba(111,68,119,.20),
        transparent 42%
      ),
      linear-gradient(
        180deg,
        rgba(28,18,34,.995),
        rgba(16,10,21,.995)
      ) !important;

    color:
      #f7edf5 !important;

    border-color:
      rgba(255,255,255,.07) !important;
  }


  html[data-theme="night"]
  .global-nav .nav-link{
    color:
      #f7edf5 !important;
  }


  html[data-theme="night"]
  .global-nav .nav-link small{
    color:
      rgba(227,205,222,.68) !important;
  }


  html[data-theme="night"]
  .global-nav .nav-link:hover,

  html[data-theme="night"]
  .global-nav .nav-link.is-active{
    color:
      #f391c3 !important;
  }


  /* -------------------------------------------------------
     NIGHT / HERO
     ------------------------------------------------------- */

  html[data-theme="night"]
  .hero{
    background:
      #1b1221 !important;
  }


  html[data-theme="night"]
  .hero::before{
    background:
      radial-gradient(
        circle at 70% 32%,
        rgba(122,73,128,.17),
        transparent 52%
      ),
      linear-gradient(
        180deg,
        #2b1c32,
        #1b1221
      ) !important;
  }


  html[data-theme="night"]
  .hero::after{
    background:
      linear-gradient(
        to top,
        rgba(22,13,27,.98),
        rgba(22,13,27,.54) 38%,
        transparent
      ) !important;
  }


  html[data-theme="night"]
  .hero-left-wash{
    background:
      linear-gradient(
        to bottom,
        transparent 69%,
        rgba(25,15,31,.97) 100%
      ) !important;
  }


  html[data-theme="night"]
  .hero-right{
    background:
      linear-gradient(
        180deg,
        #2a1b31 0%,
        #1a1120 100%
      ) !important;

    color:
      #f6edf5 !important;
  }


  html[data-theme="night"]
  .hero-title{
    color:
      #fff7fb !important;
  }


  html[data-theme="night"]
  .hero-title em{
    color:
      #ee8cbe !important;
  }


  html[data-theme="night"]
  .hero-overline,

  html[data-theme="night"]
  .hero-description{
    color:
      rgba(241,224,238,.78) !important;
  }


  html[data-theme="night"]
  .hero-hand{
    color:
      #ef9cc5 !important;
  }


  html[data-theme="night"]
  .favorite-item{
    color:
      rgba(244,229,241,.82) !important;
  }


  html[data-theme="night"]
  .favorite-icon{
    color:
      #efa1c8 !important;

    background:
      rgba(255,255,255,.055) !important;

    border-color:
      rgba(255,255,255,.10) !important;
  }

}


/* =========================================================
   iPad Pro LANDSCAPE / COMPACT DESKTOP
   ========================================================= */

@media (min-width:1181px) and (max-width:1500px){

  :root{
    --header-h:82px;
  }


  /*
   * Four explicit columns:
   *
   * LOGO | NAV | THEME | CONTACT
   *
   * This prevents the theme button from occupying the
   * navigation's grid cell.
   */
  .site-header{
    grid-template-columns:
      150px
      minmax(0,1fr)
      auto
      auto !important;

    grid-template-rows:
      var(--header-h) !important;

    gap:
      8px !important;

    padding:
      0 14px !important;
  }


  .site-header .brand{
    grid-column:1;
    grid-row:1;

    width:
      145px !important;

    min-width:0;
  }


  .site-header .brand img{
    height:
      56px !important;
  }


  /*
   * Main navigation gets its own flexible column.
   */
  .site-header .global-nav{
    grid-column:2;
    grid-row:1;

    justify-self:stretch;

    display:flex;

    align-items:stretch;
    justify-content:center;

    min-width:0;

    gap:
      clamp(
        4px,
        .48vw,
        8px
      ) !important;

    padding:0 !important;
  }


  .site-header
  .global-nav
  .nav-link{
    min-width:0 !important;

    padding:
      0 1px !important;

    font-size:
      clamp(
        .48rem,
        .52vw,
        .59rem
      ) !important;

    letter-spacing:
      .055em !important;

    white-space:
      nowrap;
  }


  .site-header
  .global-nav
  .nav-link small{
    font-size:
      .40rem !important;

    letter-spacing:
      0 !important;

    white-space:
      nowrap;
  }


  /*
   * Dedicated theme column.
   */
  .site-header
  .yukinon-theme-toggle{
    grid-column:3;
    grid-row:1;

    align-self:center;
    justify-self:center;

    position:static !important;

    inset:auto !important;

    transform:none !important;

    width:auto !important;
    min-width:54px !important;

    height:32px !important;

    margin:0 !important;

    padding:
      0 8px !important;

    display:inline-flex !important;

    align-items:center;
    justify-content:center;

    gap:4px !important;

    border-radius:
      999px !important;

    white-space:
      nowrap !important;

    font-size:
      .54rem !important;
  }


  .site-header
  .yukinon-theme-toggle-icon{
    font-size:
      .66rem !important;
  }


  .site-header
  .yukinon-theme-toggle-label{
    font-size:
      .50rem !important;

    letter-spacing:
      .05em !important;
  }


  /*
   * Contact gets a dedicated final column.
   * Social icons are hidden only in this compact range.
   */
  .site-header
  .header-actions{
    grid-column:4;
    grid-row:1;

    justify-self:end;

    display:flex !important;

    align-items:center;

    min-width:0;

    gap:0 !important;
  }


  .site-header
  .header-actions
  .mini-social{
    display:none !important;
  }


  .site-header
  .contact-button{
    position:static !important;

    inset:auto !important;

    transform:none !important;

    writing-mode:
      horizontal-tb !important;

    text-orientation:
      mixed !important;

    width:auto !important;
    min-width:0 !important;
    max-width:112px !important;

    height:auto !important;

    margin:0 !important;

    padding:
      8px 9px !important;

    gap:
      4px !important;

    border-radius:
      999px !important;

    font-size:
      .59rem !important;

    letter-spacing:
      .02em !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;
  }


  /*
   * Keep the normal desktop hero composition.
   */
  .hero{
    grid-template-columns:
      51.5%
      48.5%;
  }

}


/* =========================================================
   Slightly wider compact desktops
   ========================================================= */

@media (min-width:1401px) and (max-width:1500px){

  .site-header{
    grid-template-columns:
      164px
      minmax(0,1fr)
      auto
      auto !important;

    padding:
      0 20px !important;

    gap:
      10px !important;
  }


  .site-header .brand{
    width:
      158px !important;
  }


  .site-header
  .global-nav{
    gap:
      9px !important;
  }


  .site-header
  .global-nav
  .nav-link{
    font-size:
      .59rem !important;
  }

}


/* =========================================================
   IPAD PRO 13 MENU SIZE TUNE V2.1
   横表示ヘッダーメニューを少し大きくする
   ========================================================= */

@media (min-width:1181px) and (max-width:1500px){

  .site-header{
    grid-template-columns:
      150px
      minmax(0,1fr)
      auto
      auto !important;

    gap:10px !important;
  }

  .site-nav{
    justify-self:center !important;
    align-self:center !important;
  }

  .site-nav-list{
    gap:14px !important;
  }

  .site-nav-link{
    font-size:.68rem !important;
    line-height:1.2 !important;
    letter-spacing:.05em !important;
    white-space:nowrap !important;
    padding:8px 0 !important;
  }

  .site-nav-link small,
  .site-nav-link .sub,
  .site-nav-link .en,
  .site-nav-link .jp{
    font-size:.43rem !important;
    line-height:1.15 !important;
  }

  .theme-toggle,
  .theme-switch,
  .theme-pill{
    min-width:48px !important;
    height:30px !important;
    font-size:.58rem !important;
  }

  .contact-button{
    max-width:124px !important;
    font-size:.63rem !important;
    padding:9px 11px !important;
  }
}



/* =========================================================
   YUKINON iPad Pro 13
   LANDSCAPE MENU SIZE TUNE V2.1

   Landscape only
   1181px - 1500px
   ========================================================= */

@media
  (min-width:1181px)
  and (max-width:1500px)
  and (orientation:landscape)
{

  /*
   * Navigation:
   * one step larger than V2,
   * while preserving the 4-column header.
   */
  .site-header
  .global-nav{
    gap:
      6px !important;
  }


  .site-header
  .global-nav
  .nav-link{
    font-size:
      .64rem !important;

    letter-spacing:
      .065em !important;

    line-height:
      1.05 !important;

    padding:
      0 2px !important;
  }


  .site-header
  .global-nav
  .nav-link small{
    margin-top:
      4px !important;

    font-size:
      .43rem !important;

    letter-spacing:
      .015em !important;

    line-height:
      1 !important;
  }


  /*
   * Theme toggle:
   * slightly larger, but still compact.
   */
  .site-header
  .yukinon-theme-toggle{
    min-width:
      58px !important;

    height:
      34px !important;

    padding:
      0 9px !important;

    gap:
      5px !important;
  }


  .site-header
  .yukinon-theme-toggle-icon{
    font-size:
      .72rem !important;
  }


  .site-header
  .yukinon-theme-toggle-label{
    font-size:
      .55rem !important;

    letter-spacing:
      .055em !important;
  }


  /*
   * Contact button:
   * enlarge just enough to balance the menu.
   */
  .site-header
  .contact-button{
    max-width:
      118px !important;

    padding:
      9px 11px !important;

    font-size:
      .62rem !important;

    letter-spacing:
      .025em !important;
  }

}