/*
Theme Name: FrameFive Fixed Frames
Theme URI: https://example.com/
Author: Carlos (ChatGPT)
Description: A fixed multi-frame layout (Header, Reel, Menu, Content, Footer) with backend-resizable regions and frame page assignment (Reel/Menu/Footer).
Version: 1.0.2
Requires at least: 5.8
Tested up to: 6.5
License: GPLv2 or later
Text Domain: framefive
*/

:root{
  --ff-header-h: 90px;   /* Theme header (not a page frame) */
  --ff-reel-h: 60px;
  --ff-menu-h: 55px;
  --ff-footer-h: 70px;
  --ff-border: 1px solid rgba(0,0,0,.25);
}

html, body{ height:100%; }

body{
  margin:0;
  background:#fff;
  color:#111;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  overflow:hidden; /* ONLY the content frame scrolls */
}

/* Main outer frame */
.ff-shell{
  position:fixed;
  inset:0;
  background:#fff;
}

/* Frames */
.ff-frame{
  background:#fff;
  box-sizing:border-box;
  border: var(--ff-border);
  overflow:hidden;
}

/* THEME HEADER (custom logo/site identity) */
.ff-siteheader{
  position:fixed;
  top:0; left:0; right:0;
  height: var(--ff-header-h);
  z-index: 60;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 10px 16px;
}

/* Site identity */
.ff-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.ff-brand .custom-logo{
  max-height: calc(var(--ff-header-h) - 20px);
  width:auto;
  height:auto;
  display:block;
}
.ff-brand a{
  text-decoration:none;
  color:inherit;
}
.ff-sitetext{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  min-width:0;
}
.ff-sitetitle{
  font-weight:800;
  letter-spacing:.02em;
  margin:0;
  font-size: 18px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ff-sitetagline{
  margin:2px 0 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Optional right side area */
.ff-header-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: 10px;
}

.ff-reel{
  position:fixed;
  top: var(--ff-header-h);
  left:0; right:0;
  height: var(--ff-reel-h);
  z-index: 45;
}

.ff-menu{
  position:fixed;
  top: calc(var(--ff-header-h) + var(--ff-reel-h));
  left:0; right:0;
  height: var(--ff-menu-h);
  z-index: 40;
}

.ff-content{
  position:fixed;
  top: calc(var(--ff-header-h) + var(--ff-reel-h) + var(--ff-menu-h));
  left:0; right:0;
  height: calc(100vh - var(--ff-header-h) - var(--ff-reel-h) - var(--ff-menu-h) - var(--ff-footer-h));
  z-index: 20;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px;
}

.ff-footer{
  position:fixed;
  left:0; right:0;
  bottom:0;
  height: var(--ff-footer-h);
  z-index: 60;
}

/* Placeholder styling */
.ff-placeholder{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  color: rgba(0,0,0,.55);
  user-select:none;
  font-size: 14px;
}

/* Content typography */
.ff-content h1, .ff-content h2, .ff-content h3{ margin-top: 0.4em; }
.ff-content p{ line-height: 1.55; }

/* Menu defaults */
.ff-menu nav ul, .ff-menu > ul{
  list-style:none;
  padding: 10px 14px;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
}
.ff-menu nav a, .ff-menu a{
  text-decoration:none;
  color:#0b3a78;
  font-weight:800;
}

/* Make embedded blocks/images responsive inside frames */
.ff-frame img, .ff-frame video, .ff-frame iframe{
  max-width:100%;
  height:auto;
}