/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* 
Theme Name: Otahuhu College
Theme URI: https://allteams.com
Description: Theme for Otahuhu based on Hello Elementor
Author: AllTeams
Author URI: https://allteams.com
Template: hello-elementor
Version: 1.0.1
Text Domain: oc
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
Add your custom styles here
*/

/* fix to put in admin of zero where its not found */
body:not(.admin-bar) {
	--wp-admin--admin-bar--height: 0px;
}

body {
	--headerHeight:calc( var(--topHeaderHeight) + var(--wp-admin--admin-bar--height) );
	--sliderGap:calc( var(--dblOutsidePad) + var(--wp-admin--admin-bar--height) );
	--sliderHeight:calc( 97vh - var(--sliderGap) );
}

:root {

/* Fonts */
--helvetica:"Helvetica Neue", Sans-serif;
--franklin:franklin-gothic-urw, sans-serif;
/* https://clamp-generator.netlify.app/ */
/* Fonts - Clamp */
--h1FontClamp:clamp(2.625rem, 2.1726rem + 2.2619vw, 5rem);
--h2FontClamp:clamp(2.125rem, 2.006rem + 0.5952vw, 2.75rem);
--h2HomeClamp:clamp(2.75rem, 2.4405rem + 1.5476vw, 4.375rem);
--h3FontClamp:clamp(1.375rem, 1.2045rem + 0.4545vw, 1.5rem);
--h4FontClamp:clamp(1.125rem, 1.0682rem + 0.1515vw, 1.25rem);
--h5FontClamp:clamp(0.9375rem, 0.9091rem + 0.0758vw, 1rem);
--h6FontClamp:clamp(1rem, 1.5227rem + 0vw, 1.125rem);
--pFontClamp:clamp(1rem, 0.9432rem + 0.1515vw, 1.125rem);

/* Colors: */
--dark-blue: #003960;
--mid-blue: #005893;
--black: #221E1F;
--gold: #D8AB1C; 
--beige: #FBF6E8;
--pale-grey: #EEF0F2;

/* spacing */
--outsidePad:clamp(0.625rem, 6.475vw - 2.475rem, 4rem);
--dblOutsidePad:calc( 2 * var(--outsidePad) );
--fullWidth:calc( 100vw - var(--dblOutsidePad) );
--singlePad:clamp(0.5rem, 2.374vw - 0.636rem, 1.5rem);
--gridGap:clamp(0.625rem, 3.264vw - 0.938rem, 2rem); 
--sidebarPad:16px;
--totalGap:calc( 23 * var(--gridGap) );
--borderRad:10px;
--boxShadow:0px 3px 6px #00000029;
--zeroInset:0px 0px 0px 0px;
}

/* For alpine to remove pre load */
[x-cloak] {
	display: none !important;
}


@media (max-width: 768px) {
    :root {
        --outsidePad: 20px;
    }
}


/* body.allteams.oc h6>a{
background-color: var(--mid-blue);
padding: 16px 24px 16px 24px;
width: fit-content;
border-radius:3px;
font-family: "Helvetica Neue", Sans-serif;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
color: #fff;
vertical-align: sub;
display:inline-block;
margin: 8px 0px;
border: 1px solid #1C76BA;
}


body.allteams.oc h6 a:hover {
	background-color: transparent!important;
	color: #1C76BA;
} */


/* at_banner-image */
.at_image-cover{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
} 

/*Header for scrolling*/

.elementor-page-458 .lbcheader, .elementor-page-4936 .lbcheader {
background: #fff;
}


/*Box control*/

.lbc-box {
margin: 0 auto;
max-width: 1400px;
}
.at_itemThin>div {
    max-width: 1000px;
}
.lbc-lay-text-block .lbc-box>.ltb-block {    
    max-width: 1000px;
}

.at_itemWide .lbc-box {
    max-width: 1400px;
}

h6 a {
display: inline-block;
}


/* Text Block (master of text block with images) */

.lbc-text-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap:var(--outsidePad) ;
}

.lbc-lay.lbc-lay-text-block {
padding-left:var(--outsidePad) ;
padding-right:var(--outsidePad) ;
}

@media (max-width: 767px) {
.lbc-lay.lbc-lay-text-block {
padding: 0pxvar(--outsidePad) ;
}
}


/* text block with images */

.ltgimage-img {
height: 0;
width: 100%;
overflow: hidden;
padding-top: 80%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.lbc-lay-full-out .lfo-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:var(--outsidePad) ;
grid-template-areas: "text image";
}

.lbc-lay-full-out .lfo-container .lfo-text {
grid-area: text;
}

.lbc-lay-full-out .lfo-container .lfo-img {
grid-area: image;
}

.lbc-lay-full-out.lbc-img-left .lfo-container {
grid-template-areas: "image text";
}

.lbc-lay.lbc-lay-full-out {
padding-left:var(--outsidePad) ;
padding-right:var(--outsidePad) ;
}

/* @media (max-width: 1024px) {
.lbc-lay.lbc-lay-full-out {
padding-left: 30px;
padding-right: 30px;
}
}

@media (max-width: 767px) {
.lbc-lay.lbc-lay-full-out {
padding-left: 20px;
padding-right: 20px;
}
} */

@media (max-width: 767px) {
.lbc-lay-full-out .lfo-container,
.lbc-lay-full-out.lbc-img-left .lfo-container {
grid-template-columns: 1fr;
grid-template-areas: "text" "image";
}
}

@media (max-width: 767px) {
.lbc-lay-full-out .lfo-container {
padding: 0;
}
}

.lfo-container {
align-items: center;
}

.lbc-lay-full-out .lfo-text .lfo-title h2 {
margin-top: 0;
margin-bottom: 18px;
}

.lfo-pale-blue {
background-color: #EEF1F8;
/* padding: 50px; */
}

.lfo-bright-blue {
background-color: #2549B8;
color: #fff;
/* padding: 50px; */
}

.lfo-dark-blue {
background-color: #0D1F5C;
color: #fff;
/* padding: 50px; */
}

@media (max-width: 767px) {
.lfo-pale-blue, .lfo-bright-blue, .lfo-dark-blue {
padding: 0px 20px;
}
}

.lfo-bright-blue *, .lfo-dark-blue * {
color: #fff;
border-color: #fff!important;
}

.lfo-bright-blue h2, .lfo-bright-blue h3, .lfo-bright-blue h4,
.lfo-dark-blue h2, .lfo-dark-blue h3, .lfo-dark-blue h4 {
color: #fff!important;
border-color: #fff;
}

.lfo-bright-blue p a, .lfo-dark-blue p a {
color: #F6C81E!important;
}

.lfo-image {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/*margin:50px 0;*/
color: #fff;
padding: 50px;
}

@media (max-width: 767px) {
.lfo-image {
padding: 0px 20px;
}
}

/* Section title to content gap, consistent across layouts.
   The text-block content sits in a grid, which is a new block formatting
   context, so the title's bottom margin cannot collapse with the first
   paragraph's top margin the way it does in the text+image layout. That gave
   48px here against 18px there. Give the gap a single owner instead: the title
   contributes nothing, the grid sets it, and the first content element's own
   top margin is neutralised so the result does not depend on what that
   element happens to be. */

.lbc-text-title.lbc-box h2 {
	margin-bottom: 0!important;
}

.lbc-text-title + .lbc-text-grid,
.lbc-text-title + .lbc-lay-gallery {
	margin-top: 18px;
}

.lbc-lay-text-block .ltb-text > *:first-child,
.lbc-lay-text-block .ltb-text > *:first-child > *:first-child,
.lbc-lay-text-block-images .ltb-text > *:first-child,
.lbc-lay-text-block-images .ltb-text > *:first-child > *:first-child {
	margin-top: 0!important;
}

/* Accordion */

.accordion {
padding: 0px 50px;
}

@media (max-width: 767px) {
.accordion {
padding: 0px;
}
}

.accordion .dd {
display: none;
}

.accordion>.dt {
font-size: 22px;
font-weight: 600;
}

.accordion>.dt>a {
display: block;
position: relative;
color: #0C1330!important;
text-decoration: none!important;
padding: 17px 20px;
border-bottom: 2px solid #F6C81E;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

@media (max-width: 767px) {
.accordion>.dt {
font-size: 20px;
}
}

@media (max-width: 767px) {
.accordion>.dt>a {
padding: 10px 20px;
}
}

.accordion>.dt>a:hover {
text-decoration: none!important;
color: #142A78!important;
cursor: pointer;
}

.accordion>.dt.active>a {
color: #0C1330!important;
background-color: #EEF1F8;
cursor: default;
}

.accordion>.dt>a:after {
content: "";
-webkit-mask-image: url(/wp-content/themes/hello-theme-child-master/icons/icon-arrow.svg);
mask-image: url(/wp-content/themes/hello-theme-child-master/icons/icon-arrow.svg);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
margin-top: -12px;
height:24px;
width:24px;
position: absolute;
top: 50%;
right: 10px;
background-color: #0D1F5C;
-webkit-font-smoothing: antialiased;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.accordion>.dt.active>a:after,
.accordion>.dt.active>a:hover:after {
    transform: rotateZ(90deg);
    transform-origin: center;
}

.accordion>.dt>a:hover:after {
background-color: #142A78;
}

.accordion>.dd {
margin-bottom: 10px;
padding: 20px;
line-height: 1.6;
}


/* Gallery */

.lbc-lay-gallery {
max-width: 1400px;
margin: 0 auto;
}

/* Column count is chosen per gallery in ACF (Columns (desktop): 3, 4 or 5) and
   emitted as .lbc-gallery-cols-N. It applies at desktop only; tablet caps at 3
   and phones drop to 2, so a 5 across gallery never turns into slivers.
   minmax(0, 1fr) keeps a wide image from blowing the track out. */

.lbc-gallery-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}

.lbc-gallery-grid.lbc-gallery-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lbc-gallery-grid.lbc-gallery-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lbc-gallery-grid.lbc-gallery-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1024px) {
.lbc-gallery-grid,
.lbc-gallery-grid.lbc-gallery-cols-4,
.lbc-gallery-grid.lbc-gallery-cols-5 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

.lbc-gallery-item {
display: block;
overflow: hidden;
border-radius: 18px;
background-color: #EEF1F8;
line-height: 0;
transition: transform .15s, box-shadow .2s;
}

.lbc-gallery-item img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center top;
}

.lbc-gallery-item:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(13, 31, 92, .22);
}

@media (max-width: 767px) {
.lbc-gallery-grid,
.lbc-gallery-grid.lbc-gallery-cols-3,
.lbc-gallery-grid.lbc-gallery-cols-4,
.lbc-gallery-grid.lbc-gallery-cols-5 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}


* Tabs minimal*/ .lbc-tab-container {
text-align: center;
}

.lbc-lay-tabs {
padding: 0 50px;
}

@media (max-width: 767px) {
.lbc-lay-tabs {
padding: 0 20px;
}
}

.tabMenu {
display: inline-block;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
border: none;
}

.r-tabs-anchor {
/*  display: inline-block;*/
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
border: 1px solid var(--mid-blue) !important;
border-radius: 20px;
padding: 6px 20px 6px 20px;
}

.tabItem.r-tabs-panel.r-tabs-state-active {
margin-top: 20px;
}

.tabMenu>li {
padding: 0 30px;
background: none !important;
}

.tabMenu>li>a {
padding: 6px 20px 5px;
text-decoration: none;
border: 1px solid var(--black);
background: var(--mid-blue);
color: #fff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

.tabMenu>li>a:hover {
background: none;
border-color: var(--mid-blue);
color: #777;
}

.tabMenu li.r-tabs-state-active a,
.tabMenu li.r-tabs-state-active a:hover {
color: var(--mid-blue);
background: none!important;
/*border: 1px solid transparent!important;*/
cursor: default;
}

.tpl-minimal-tabs-cont {}

.r-tabs-tab {
font-size: 14px;
margin-bottom: 20px!important;
}

.lbc-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}

.lbc-video iframe,
.lbc-video object,
.lbc-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/* Video Popup */


/* Individual video container */

.video-wrap {
position: relative;
width: 100%;
margin-bottom: 10px;
}


/* video poster frame or placeholder image */

.video-wrap .placeholder {
width: 100%;
}


/* SVG play button container */

.video-wrap .play-btn {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.video-wrap .play-btn svg {
transition: all .2s ease;
fill: #fff;
}

.video-wrap .play-btn:hover svg,
.video-wrap .play-btn:focus svg {
cursor: pointer;
fill: #00BCE1;
}


/* adjust your icon size, add different breakpoints as needed */

@media screen and (max-width: 600px) {
.video-wrap .play-btn {
width: 70px;
height: 70px;
}
}

.at-video-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 80vw;
--vidWidth: calc( 70vw - 40px);
height: calc( 80vw * .5625);
/*   max-height:80vh; */
margin: 20px auto;
}

.mfp-close-btn-in .mfp-close {
color: #fff;
top: 20px;
right: 20px;
}


/* all layouts */

.lbc-lay {
padding: max(32px, 3%) 5%;
}

/* Buttons Section */

.buttons-section-title {
padding-bottom: 20px;
}

.lbc-lay-buttons {
max-width:1100px;
margin: 0px auto;
text-align:center;
}

.lbc-lay-buttons-grid {
display:-ms-grid;
display:grid;
grid-gap:20px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.lbc-button-item a {
margin: 0;
font-family: "Archivo", sans-serif;
font-size: 14.5px;
line-height: 1.25;
text-transform: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 700;
text-align: center;
text-decoration: none!important;
background-color: #F6C81E;
color: #0D1F5C!important;

padding: 14px 24px;
border-radius: 999px;
width: 100%;
transition: transform .15s, box-shadow .2s, background-color .2s;
}

.lbc-button-item a:hover {
background-color: #E8A800;
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(246, 200, 30, .4);
}

.lbc-button-one-two {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap:10px;
}


.lbc-button-item.oc_btn-file a:after,
.lbc-button-item.oc_btn-link a:after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    background-color: #0D1F5C;
    width: 17px;
    height: 17px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.lbc-button-item.oc_btn-file a:after {
    -webkit-mask-image: url(/wp-content/themes/hello-theme-child-master/icons/icon-download.svg);
    mask-image: url(/wp-content/themes/hello-theme-child-master/icons/icon-download.svg);
}
.lbc-button-item.oc_btn-link a:after {
    -webkit-mask-image: url(/wp-content/themes/hello-theme-child-master/icons/icon-link.svg);
    mask-image: url(/wp-content/themes/hello-theme-child-master/icons/icon-link.svg);
}



/* News + search result rows -------------------------------------------------
   Elementor applies container direction indirectly: the element CSS sets
   --flex-direction and .e-con reads `flex-direction: var(--flex-direction)`.
   On iOS Safari that indirection did not resolve for these loop items, so the
   containers fell back to `row` and the category/title/excerpt/date ran off the
   right of the screen. Chrome's device emulator does not reproduce it.
   These rules state the layout outright so it cannot depend on a variable. */

.elementor-element-news-row-body,
.elementor-element-search-row-body {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
min-width: 0 !important;
}

.elementor-element-news-row-body > .elementor-widget,
.elementor-element-search-row-body > .elementor-widget {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
}

.elementor-element-search-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}

@media (min-width: 768px) {
.elementor-element-news-row {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
}
}

@media (max-width: 767px) {
.elementor-element-news-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.elementor-element-news-row > .e-con,
.elementor-element-news-row > .elementor-widget {
width: 100% !important;
max-width: 100% !important;
}
}


/* Social links in flexible content body copy -------------------------------
   Written as <a class="avon-social avon-social-fb"> in the WYSIWYG so the icon
   lives in CSS, not in the editor content. A bare class attribute survives
   TinyMCE cleanup, whereas an inline <i> or <svg> can be stripped when someone
   next edits the field. The icon takes currentColor, so it follows the link
   colour and its hover state without a second rule. */

.avon-social {
display: inline-flex;
align-items: center;
gap: 8px;
}

.avon-social::before {
content: "";
flex: 0 0 auto;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}

.avon-social-fb::before {
-webkit-mask-image: url(/wp-content/themes/hello-theme-child-master/icons/icon-facebook.svg);
mask-image: url(/wp-content/themes/hello-theme-child-master/icons/icon-facebook.svg);
}


/* WIDGET VERTICAL PAGE CSS css.php mike */